Phase 3: Saved Filters UI, Entity History UI, Activity Timeline, API Docs Link

- Saved Filters: SavedFilterBar (dropdown, apply, delete), SaveFilterDialog (name + save)
- Entity History: EntityHistoryPanel (timeline, restore, undo), HistoryDiff (field changes visual)
- Activity Timeline: ActivityTimelinePage (grouped by day, pagination), ActivityFilter (user/entity/action/date)
- API Docs Link: TopBar user menu entry, SettingsSystem Entwickler section (Swagger, ReDoc, OpenAPI)
- Routes: /activity registered
- Menu items: Aktivitäten added to automation plugin manifest

frontend/src/components/common/EntityHistoryPanel.tsx

@@ -0,0 +1,387 @@
+/**
+ * EntityHistoryPanel — Vertical timeline of entity history entries.
+ * Shows action badges, timestamps, user info, expandable diffs,
+ * per-entry restore, and undo-last-action.
+ */
+
+import React, { useState, useCallback } from 'react';
+import clsx from 'clsx';
+import {
+  PlusCircle,
+  Pencil,
+  Trash2,
+  RotateCcw,
+  Undo2,
+  ChevronDown,
+  ChevronRight,
+  Clock,
+  User as UserIcon,
+  History,
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import {
+  useEntityHistory,
+  useRestoreFromHistory,
+  useUndoLastAction,
+  type EntityHistoryEntry,
+} from '../../api/entityHistory';
+import { Card } from '../ui/Card';
+import { Button } from '../ui/Button';
+import { Badge, type BadgeVariant } from '../ui/Badge';
+import { HistoryDiff } from './HistoryDiff';
+
+export interface EntityHistoryPanelProps {
+  entityType: string;
+  entityId: string;
+  className?: string;
+}
+
+/**
+ * Map action type to badge variant + icon + label.
+ */
+function actionMeta(action: EntityHistoryEntry['action']): {
+  variant: BadgeVariant;
+  icon: React.ReactNode;
+} {
+  switch (action) {
+    case 'create':
+      return { variant: 'success', icon: <PlusCircle className="h-3.5 w-3.5" /> };
+    case 'update':
+      return { variant: 'info', icon: <Pencil className="h-3.5 w-3.5" /> };
+    case 'delete':
+      return { variant: 'danger', icon: <Trash2 className="h-3.5 w-3.5" /> };
+    default:
+      return { variant: 'secondary', icon: <History className="h-3.5 w-3.5" /> };
+  }
+}
+
+/**
+ * Format an ISO date string into a human-readable timestamp.
+ */
+function formatTimestamp(iso: string): string {
+  const d = new Date(iso);
+  if (isNaN(d.getTime())) return iso;
+  return d.toLocaleString();
+}
+
+/**
+ * Single timeline entry row — expandable for update diffs.
+ */
+function TimelineEntry({
+  entry,
+  onRestore,
+  restoringId,
+}: {
+  entry: EntityHistoryEntry;
+  onRestore: (id: string) => void;
+  restoringId: string | null;
+}) {
+  const { t } = useTranslation();
+  const [expanded, setExpanded] = useState(false);
+  const [confirming, setConfirming] = useState(false);
+  const meta = actionMeta(entry.action);
+  const hasChanges = entry.changes && Object.keys(entry.changes).length > 0;
+  const isRestoring = restoringId === entry.id;
+
+  const handleRestoreClick = useCallback(() => {
+    if (!confirming) {
+      setConfirming(true);
+      return;
+    }
+    onRestore(entry.id);
+    setConfirming(false);
+  }, [confirming, entry.id, onRestore]);
+
+  const handleCancelConfirm = useCallback(() => {
+    setConfirming(false);
+  }, []);
+
+  return (
+    <div className="relative flex gap-3 pb-6 last:pb-0">
+      {/* Timeline line + dot */}
+      <div className="flex flex-col items-center">
+        <div
+          className={clsx(
+            'w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0',
+            meta.variant === 'success' && 'bg-success-100 text-success-600',
+            meta.variant === 'info' && 'bg-accent-100 text-accent-600',
+            meta.variant === 'danger' && 'bg-danger-100 text-danger-600',
+            meta.variant === 'secondary' && 'bg-secondary-100 text-secondary-600'
+          )}
+        >
+          {meta.icon}
+        </div>
+        <div className="w-px flex-1 bg-secondary-200 mt-1" />
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 flex-wrap">
+          <Badge variant={meta.variant} dot>
+            {t(`entityHistory.actions.${entry.action}`, entry.action)}
+          </Badge>
+          <span className="text-xs text-secondary-500 flex items-center gap-1">
+            <Clock className="h-3 w-3" aria-hidden="true" />
+            {formatTimestamp(entry.created_at)}
+          </span>
+          {entry.user_id && (
+            <span className="text-xs text-secondary-500 flex items-center gap-1">
+              <UserIcon className="h-3 w-3" aria-hidden="true" />
+              {entry.user_id}
+            </span>
+          )}
+        </div>
+
+        {/* Expand toggle for update entries with changes */}
+        {entry.action === 'update' && hasChanges && (
+          <button
+            type="button"
+            onClick={() => setExpanded(prev => !prev)}
+            className="mt-1 text-sm text-primary-600 hover:text-primary-700 inline-flex items-center gap-1"
+            aria-expanded={expanded}
+          >
+            {expanded ? (
+              <ChevronDown className="h-4 w-4" aria-hidden="true" />
+            ) : (
+              <ChevronRight className="h-4 w-4" aria-hidden="true" />
+            )}
+            {expanded
+              ? t('entityHistory.hideChanges', 'Änderungen ausblenden')
+              : t('entityHistory.showChanges', 'Änderungen anzeigen')}
+          </button>
+        )}
+
+        {/* Expandable diff */}
+        {expanded && hasChanges && (
+          <div className="mt-2 p-3 bg-secondary-50 rounded-md border border-secondary-200">
+            <HistoryDiff changes={entry.changes!} />
+          </div>
+        )}
+
+        {/* Snapshot before for delete entries */}
+        {entry.action === 'delete' && entry.snapshot_before && (
+          <div className="mt-2 p-3 bg-secondary-50 rounded-md border border-secondary-200">
+            <p className="text-xs text-secondary-500 mb-2 font-medium">
+              {t('entityHistory.snapshotBefore', 'Zustand vor Löschung')}
+            </p>
+            <pre className="text-xs text-secondary-700 overflow-x-auto">
+              {JSON.stringify(entry.snapshot_before, null, 2)}
+            </pre>
+          </div>
+        )}
+
+        {/* Restore action */}
+        <div className="mt-2 flex items-center gap-2">
+          {!confirming ? (
+            <Button
+              variant="ghost"
+              size="sm"
+              icon={<RotateCcw className="h-3.5 w-3.5" />}
+              onClick={handleRestoreClick}
+              isLoading={isRestoring}
+              disabled={isRestoring}
+            >
+              {t('entityHistory.restore', 'Wiederherstellen')}
+            </Button>
+          ) : (
+            <>
+              <span className="text-sm text-warning-700">
+                {t('entityHistory.confirmRestore', 'Wirklich wiederherstellen?')}
+              </span>
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={handleRestoreClick}
+                isLoading={isRestoring}
+                disabled={isRestoring}
+              >
+                {t('entityHistory.yes', 'Ja')}
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleCancelConfirm}
+                disabled={isRestoring}
+              >
+                {t('entityHistory.cancel', 'Abbrechen')}
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Loading skeleton — 3 placeholder entries.
+ */
+function LoadingSkeleton() {
+  return (
+    <div className="space-y-4 animate-pulse" aria-label="Loading history">
+      {[0, 1, 2].map(i => (
+        <div key={i} className="flex gap-3">
+          <div className="w-8 h-8 rounded-full bg-secondary-200 flex-shrink-0" />
+          <div className="flex-1 space-y-2">
+            <div className="h-4 bg-secondary-200 rounded w-24" />
+            <div className="h-3 bg-secondary-100 rounded w-48" />
+            <div className="h-8 bg-secondary-100 rounded w-full" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Empty state.
+ */
+function EmptyState() {
+  const { t } = useTranslation();
+  return (
+    <div className="flex flex-col items-center justify-center py-8 text-center">
+      <History className="h-12 w-12 text-secondary-300 mb-3" aria-hidden="true" />
+      <p className="text-secondary-500 text-sm">
+        {t('entityHistory.empty', 'Kein Änderungsverlauf vorhanden.')}
+      </p>
+    </div>
+  );
+}
+
+export function EntityHistoryPanel({ entityType, entityId, className }: EntityHistoryPanelProps) {
+  const { t } = useTranslation();
+  const { data, isLoading, isError, error, refetch } = useEntityHistory(entityType, entityId);
+  const restoreMutation = useRestoreFromHistory();
+  const undoMutation = useUndoLastAction();
+
+  const [restoringId, setRestoringId] = useState<string | null>(null);
+  const [undoConfirm, setUndoConfirm] = useState(false);
+
+  const entries = data?.items ?? [];
+
+  const handleRestore = useCallback(
+    (historyId: string) => {
+      setRestoringId(historyId);
+      restoreMutation.mutate(historyId, {
+        onSettled: () => setRestoringId(null),
+      });
+    },
+    [restoreMutation]
+  );
+
+  const handleUndo = useCallback(() => {
+    if (!undoConfirm) {
+      setUndoConfirm(true);
+      return;
+    }
+    undoMutation.mutate(
+      { entityType, entityId },
+      { onSettled: () => setUndoConfirm(false) }
+    );
+  }, [undoConfirm, undoMutation, entityType, entityId]);
+
+  const handleUndoCancel = useCallback(() => setUndoConfirm(false), []);
+
+  const hasHistory = entries.length > 0;
+
+  return (
+    <Card
+      title={t('entityHistory.title', 'Änderungsverlauf')}
+      description={t('entityHistory.description', 'Verlauf aller Änderungen an diesem Eintrag')}
+      className={className}
+      data-testid="entity-history-panel"
+      actions={
+        hasHistory && !isLoading ? (
+          undoConfirm ? (
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-warning-700">
+                {t('entityHistory.confirmUndo', 'Letzte Aktion rückgängig machen?')}
+              </span>
+              <Button
+                variant="danger"
+                size="sm"
+                icon={<Undo2 className="h-3.5 w-3.5" />}
+                onClick={handleUndo}
+                isLoading={undoMutation.isPending}
+                disabled={undoMutation.isPending}
+              >
+                {t('entityHistory.yes', 'Ja')}
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleUndoCancel}
+                disabled={undoMutation.isPending}
+              >
+                {t('entityHistory.cancel', 'Abbrechen')}
+              </Button>
+            </div>
+          ) : (
+            <Button
+              variant="ghost"
+              size="sm"
+              icon={<Undo2 className="h-3.5 w-3.5" />}
+              onClick={handleUndo}
+              disabled={undoMutation.isPending}
+            >
+              {t('entityHistory.undoLast', 'Letzte Aktion rückgängig')}
+            </Button>
+          )
+        ) : undefined
+      }
+    >
+      {isLoading ? (
+        <LoadingSkeleton />
+      ) : isError ? (
+        <div className="py-6 text-center">
+          <p className="text-danger-600 text-sm mb-2">
+            {t('entityHistory.loadError', 'Fehler beim Laden des Verlaufs')}
+          </p>
+          <p className="text-secondary-400 text-xs mb-3">
+            {error instanceof Error ? error.message : String(error)}
+          </p>
+          <Button variant="secondary" size="sm" onClick={() => refetch()}>
+            {t('common.retry', 'Erneut versuchen')}
+          </Button>
+        </div>
+      ) : !hasHistory ? (
+        <EmptyState />
+      ) : (
+        <div className="space-y-0">
+          {entries.map(entry => (
+            <TimelineEntry
+              key={entry.id}
+              entry={entry}
+              onRestore={handleRestore}
+              restoringId={restoringId}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Restore error display */}
+      {restoreMutation.isError && (
+        <div className="mt-4 p-3 bg-danger-50 border border-danger-200 rounded-md">
+          <p className="text-danger-700 text-sm">
+            {t('entityHistory.restoreError', 'Fehler beim Wiederherstellen')}
+            {restoreMutation.error instanceof Error
+              ? `: ${restoreMutation.error.message}`
+              : ''}
+          </p>
+        </div>
+      )}
+
+      {/* Undo error display */}
+      {undoMutation.isError && (
+        <div className="mt-4 p-3 bg-danger-50 border border-danger-200 rounded-md">
+          <p className="text-danger-700 text-sm">
+            {t('entityHistory.undoError', 'Fehler beim Rückgängigmachen')}
+            {undoMutation.error instanceof Error
+              ? `: ${undoMutation.error.message}`
+              : ''}
+          </p>
+        </div>
+      )}
+    </Card>
+  );
+}