- Language:
- {language}
+ Code:
+
+ {language}
+
+ {spokenLanguage && (
+
+
+
+ Spricht:
+
+
+ {SPOKEN_LANGUAGE_LABELS[spokenLanguage] || spokenLanguage}
+
+
+ )}
-
Executions:
-
+ Ausführungen:
+
{executionCount}
- Last Run:
- {lastRun}
+ Letzte Ausführung:
+ {lastRun}
{status === "active" ? (
diff --git a/src/components/AuditPage.tsx b/src/components/AuditPage.tsx
new file mode 100644
index 0000000..8a75704
--- /dev/null
+++ b/src/components/AuditPage.tsx
@@ -0,0 +1,564 @@
+/**
+ * Audit & Ops Dashboard
+ * System events, audit logs, and operational stats
+ */
+
+import { useState, useEffect } from "react";
+import { auditApi, opsApi, enforcementApi, type AuditEvent, type BlockedTask } from "../lib/api";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "./ui/table";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "./ui/select";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "./ui/card";
+import { Badge } from "./ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+ DialogFooter,
+} from "./ui/dialog";
+import {
+ FileText,
+ Activity,
+ AlertTriangle,
+ CheckCircle,
+ XCircle,
+ RefreshCw,
+ Search,
+ Shield,
+ Zap,
+ Server,
+ Filter,
+} from "lucide-react";
+import { toast } from "sonner";
+
+export function AuditPage() {
+ const [events, setEvents] = useState
([]);
+ const [blockedTasks, setBlockedTasks] = useState([]);
+ const [opsStats, setOpsStats] = useState<{
+ uptime: number;
+ activeAgents: number;
+ tasksToday: number;
+ errorsToday: number;
+ } | null>(null);
+ const [eventStats, setEventStats] = useState<{
+ total: number;
+ byKind: Record;
+ bySeverity: Record;
+ } | null>(null);
+ const [loading, setLoading] = useState(true);
+
+ // Filters
+ const [kindFilter, setKindFilter] = useState("all");
+ const [severityFilter, setSeverityFilter] = useState("all");
+ const [searchQuery, setSearchQuery] = useState("");
+ const [limit, setLimit] = useState(50);
+
+ // Dialog states
+ const [selectedEvent, setSelectedEvent] = useState(null);
+ const [selectedTask, setSelectedTask] = useState(null);
+ const [approveDialogOpen, setApproveDialogOpen] = useState(false);
+
+ useEffect(() => {
+ loadData();
+ }, [kindFilter, severityFilter, limit]);
+
+ async function loadData() {
+ setLoading(true);
+ try {
+ const params: { limit?: number; kind?: string; severity?: string } = { limit };
+ if (kindFilter !== "all") params.kind = kindFilter;
+ if (severityFilter !== "all") params.severity = severityFilter;
+
+ const [eventsRes, statsRes, opsRes, blockedRes] = await Promise.all([
+ auditApi.list(params),
+ auditApi.eventStats().catch(() => null),
+ opsApi.stats().catch(() => null),
+ enforcementApi.blocked().catch(() => ({ tasks: [] })),
+ ]);
+
+ setEvents(eventsRes.events || []);
+ setEventStats(statsRes?.stats || null);
+ setOpsStats(opsRes);
+ setBlockedTasks(blockedRes.tasks || []);
+ } catch (error) {
+ console.error("Failed to load audit data:", error);
+ toast.error("Fehler beim Laden der Audit-Daten");
+ } finally {
+ setLoading(false);
+ }
+ }
+
+ async function handleApprove() {
+ if (!selectedTask) return;
+ try {
+ await enforcementApi.approve(selectedTask.taskId, "Approved by admin");
+ toast.success("Task genehmigt");
+ setApproveDialogOpen(false);
+ setSelectedTask(null);
+ loadData();
+ } catch (error: unknown) {
+ toast.error(`Fehler: ${error instanceof Error ? error.message : "Unbekannt"}`);
+ }
+ }
+
+ async function handleReject() {
+ if (!selectedTask) return;
+ try {
+ await enforcementApi.reject(selectedTask.taskId, "Rejected by admin");
+ toast.success("Task abgelehnt");
+ setApproveDialogOpen(false);
+ setSelectedTask(null);
+ loadData();
+ } catch (error: unknown) {
+ toast.error(`Fehler: ${error instanceof Error ? error.message : "Unbekannt"}`);
+ }
+ }
+
+ // Filter events by search
+ const filteredEvents = events.filter(
+ (event) =>
+ event.message.toLowerCase().includes(searchQuery.toLowerCase()) ||
+ event.kind.toLowerCase().includes(searchQuery.toLowerCase())
+ );
+
+ // Severity badge
+ function getSeverityBadge(severity: string) {
+ switch (severity) {
+ case "error":
+ return {severity};
+ case "warn":
+ return {severity};
+ default:
+ return {severity};
+ }
+ }
+
+ // Kind badge
+ function getKindBadge(kind: string) {
+ const colors: Record = {
+ user_login: "bg-green-500",
+ user_logout: "bg-gray-500",
+ password_reset: "bg-orange-500",
+ task_created: "bg-blue-500",
+ task_finished: "bg-green-600",
+ task_failed: "bg-red-500",
+ error: "bg-red-600",
+ deploy: "bg-purple-500",
+ };
+ return (
+
+ {kind.replace(/_/g, " ")}
+
+ );
+ }
+
+ // Format uptime
+ function formatUptime(seconds: number): string {
+ const days = Math.floor(seconds / 86400);
+ const hours = Math.floor((seconds % 86400) / 3600);
+ const mins = Math.floor((seconds % 3600) / 60);
+ if (days > 0) return `${days}d ${hours}h`;
+ if (hours > 0) return `${hours}h ${mins}m`;
+ return `${mins}m`;
+ }
+
+ return (
+
+ {/* Header */}
+
+
+
+
+ Audit & Operations
+
+
+ System-Events, Audit-Logs und Operations-Statistiken
+
+
+
+
+
+ {/* Stats Cards */}
+
+
+
+
+ Uptime
+
+
+
+
+ {opsStats ? formatUptime(opsStats.uptime) : "-"}
+
+
+
+
+
+
+ Tasks Heute
+
+
+
+
+ {opsStats?.tasksToday ?? "-"}
+
+
+
+
+
+
+ Fehler Heute
+
+
+
+
+ {opsStats?.errorsToday ?? "-"}
+
+
+
+
+
+
+ Blockiert
+
+
+
+
+ {blockedTasks.length}
+
+
+
+
+
+ {/* Tabs */}
+
+
+
+
+ Events ({events.length})
+
+
+
+ Blockiert ({blockedTasks.length})
+
+
+
+ Statistiken
+
+
+
+ {/* Events Tab */}
+
+ {/* Filters */}
+
+
+
+ setSearchQuery(e.target.value)}
+ className="pl-10"
+ data-testid="audit_input_search"
+ />
+
+
+
+
+
+
+
+ Zeit
+ Art
+ Severity
+ Nachricht
+ User
+
+
+
+ {loading ? (
+
+
+ Laden...
+
+
+ ) : filteredEvents.length === 0 ? (
+
+
+ Keine Events gefunden
+
+
+ ) : (
+ filteredEvents.map((event) => (
+ setSelectedEvent(event)}
+ data-testid={`audit_row_${event.id}`}
+ >
+
+ {new Date(event.ts).toLocaleString("de-DE")}
+
+ {getKindBadge(event.kind)}
+ {getSeverityBadge(event.severity)}
+
+ {event.message}
+
+
+ {event.userId || "-"}
+
+
+ ))
+ )}
+
+
+
+
+
+
+ {/* Blocked Tasks Tab */}
+
+
+
+ Blockierte Tasks
+
+ Tasks die auf Genehmigung warten aufgrund hoher STOP-Scores
+
+
+
+ {blockedTasks.length === 0 ? (
+
+
+
Keine blockierten Tasks
+
+
+
+ Task ID
+ Grund
+ STOP Score
+ Erstellt
+ Aktionen
+
+
+
+ {blockedTasks.map((task) => (
+
+ {task.taskId.slice(0, 8)}...
+ {task.reason}
+
+ = 70 ? "destructive" : "secondary"}
+ >
+ {task.stopScore}
+
+
+
+ {new Date(task.createdAt).toLocaleString("de-DE")}
+
+
+
+
+
+
+
+
+ ))}
+
+
+ )}
+
+
+
+
+ {/* Stats Tab */}
+
+
+
+
+ Events nach Art
+
+
+ {eventStats?.byKind ? (
+
+ {Object.entries(eventStats.byKind).map(([kind, count]) => (
+
+ {kind.replace(/_/g, " ")}
+ {count}
+
+ ))}
+
Keine Daten
+ )}
+
+
+
+
+ Events nach Severity
+
+
+ {eventStats?.bySeverity ? (
+
+ {Object.entries(eventStats.bySeverity).map(([severity, count]) => (
+
+ {severity}
+ {getSeverityBadge(severity)}
+ {count}
+
+ ))}
+
Keine Daten
+ )}
+
+
+
+
+ {/* Event Detail Dialog */}
+
+
+ {/* Approve Dialog */}
+
+
+
+ {/* Grid für Programmiersprache und gesprochene Sprache */}
+
+
+
+
+
+
+
+
+
+
+
+ {/* Agent-Typ Auswahl */}
-
-
+
+ {/* Content-Autonomie (nur für Influencer) */}
+ {agentType === 'influencer' && (
+
+
+
+
+ Agent erstellt und veröffentlicht Content eigenständig
+
+
+
+
+ )}
+