From 31154b9dc6750181ac1577ab01b49cc0a5ba7629 Mon Sep 17 00:00:00 2001
From: Agent Zero <agent@media-on.de>
Date: Sun, 13 Sep 2026 23:13:58 +0200
Subject: [PATCH] =?UTF-8?q?feat(outbox):=20UI=20fuer=20Event-Outbox=20?=
 =?UTF-8?q?=E2=80=94=20Modul=209/16=20des=20UI-Backlogs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/__tests__/pages/Outbox.test.tsx | 180 +++++++
 frontend/src/api/outbox.ts                   | 130 +++++
 frontend/src/components/layout/Sidebar.tsx   |   7 +-
 frontend/src/i18n/locales/de.json            |  33 ++
 frontend/src/i18n/locales/en.json            |  33 ++
 frontend/src/pages/Outbox.tsx                | 481 +++++++++++++++++++
 frontend/src/routes/index.tsx                |   2 +
 7 files changed, 863 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/__tests__/pages/Outbox.test.tsx
 create mode 100644 frontend/src/api/outbox.ts
 create mode 100644 frontend/src/pages/Outbox.tsx

diff --git a/frontend/src/__tests__/pages/Outbox.test.tsx b/frontend/src/__tests__/pages/Outbox.test.tsx
new file mode 100644
index 0000000..1e02f20
--- /dev/null
+++ b/frontend/src/__tests__/pages/Outbox.test.tsx
@@ -0,0 +1,180 @@
+/**
+ * Outbox page tests — transactional outbox monitoring UI (admin).
+ *
+ * Covers: admin gate, stats cards, DLQ list with replay single/all,
+ * maintenance modals (recover-stuck, cleanup-published), consumer registry.
+ */
+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 { OutboxPage } from '@/pages/Outbox';
+import type { OutboxStats, FailedOutboxEvent, FailedEventsResponse } from '@/api/outbox';
+
+const replayMut = vi.fn().mockResolvedValue({ replayed: true });
+const replayAllMut = vi.fn().mockResolvedValue({ replayed_count: 2 });
+const recoverMut = vi.fn().mockResolvedValue({ recovered_count: 1 });
+const cleanupMut = vi.fn().mockResolvedValue({ deleted_count: 3 });
+
+const makeEvent = (overrides: Partial<FailedOutboxEvent> = {}): FailedOutboxEvent => ({
+  id: '11111111-1111-1111-1111-111111111111',
+  tenant_id: 't-1',
+  event_name: 'contact.created',
+  error_message: 'handler crashed',
+  failed_at: '2026-09-13T10:00:00Z',
+  attempts: 3,
+  created_at: '2026-09-13T09:00:00Z',
+  status: 'failed',
+  ...overrides,
+});
+
+let mockStats: OutboxStats | null = {
+  counts: { pending: 2, processing: 0, published: 40, failed: 1, no_handlers: 0 },
+  total: 43,
+  oldest_pending_age_seconds: 90,
+};
+let mockEvents: FailedOutboxEvent[] = [];
+let mockRegistry: Record<string, string[]> = {};
+let mockIsAdmin = true;
+
+vi.mock('@/api/outbox', () => ({
+  useOutboxStats: () => ({
+    data: mockStats,
+    isLoading: false,
+    isError: false,
+    isFetching: false,
+    refetch: vi.fn(),
+  }),
+  useOutboxFailedEvents: () => ({
+    data: { events: mockEvents, limit: 20, offset: 0, count: mockEvents.length } as FailedEventsResponse,
+    isLoading: false,
+    isError: false,
+    isFetching: false,
+    refetch: vi.fn(),
+  }),
+  useOutboxConsumerRegistry: () => ({
+    data: { registry: mockRegistry },
+    isLoading: false,
+    isError: false,
+    isFetching: false,
+    refetch: vi.fn(),
+  }),
+  useReplayFailedEvent: () => ({ mutate: replayMut, isPending: false }),
+  useReplayAllFailedEvents: () => ({ mutate: replayAllMut, isPending: false }),
+  useRecoverStuckEvents: () => ({ mutate: recoverMut, isPending: false }),
+  useCleanupPublishedEvents: () => ({ mutate: cleanupMut, 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>
+      <OutboxPage />
+    </MemoryRouter>,
+  );
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mockStats = {
+    counts: { pending: 2, processing: 0, published: 40, failed: 1, no_handlers: 0 },
+    total: 43,
+    oldest_pending_age_seconds: 90,
+  };
+  mockEvents = [];
+  mockRegistry = {};
+  mockIsAdmin = true;
+});
+
+describe('OutboxPage', () => {
+  it('renders page title and stats cards', () => {
+    renderPage();
+    expect(screen.getByTestId('outbox-page')).toBeInTheDocument();
+    expect(screen.getByTestId('outbox-stat-pending')).toBeInTheDocument();
+    expect(screen.getByTestId('outbox-stat-processing')).toBeInTheDocument();
+    expect(screen.getByTestId('outbox-stat-published')).toBeInTheDocument();
+    expect(screen.getByTestId('outbox-stat-failed')).toBeInTheDocument();
+    expect(screen.getByTestId('outbox-stat-no_handlers')).toBeInTheDocument();
+    expect(screen.getByTestId('outbox-stat-total')).toBeInTheDocument();
+    expect(screen.getByTestId('outbox-stat-total')).toHaveTextContent('43');
+  });
+
+  it('renders oldest pending age when present', () => {
+    renderPage();
+    // formatAge(90) → '2min' (90 seconds rounds to minutes)
+    expect(screen.getByTestId('outbox-oldest-pending')).toHaveTextContent('2min');
+  });
+
+  it('shows admin gate for non-admin users', () => {
+    mockIsAdmin = false;
+    renderPage();
+    expect(screen.getByTestId('outbox-admin-only')).toBeInTheDocument();
+    expect(screen.queryByTestId('outbox-page')).not.toBeInTheDocument();
+  });
+
+  it('shows empty DLQ state when no failed events', () => {
+    renderPage();
+    expect(screen.getByTestId('outbox-dlq-empty')).toBeInTheDocument();
+  });
+
+  it('renders failed event cards with error message', () => {
+    mockEvents = [makeEvent()];
+    renderPage();
+    expect(screen.getByTestId('outbox-event-11111111-1111-1111-1111-111111111111')).toBeInTheDocument();
+    expect(screen.getByTestId('outbox-error-11111111-1111-1111-1111-111111111111')).toHaveTextContent(
+      'handler crashed',
+    );
+    expect(screen.getByText('contact.created')).toBeInTheDocument();
+  });
+
+  it('replays a single failed event on button click', async () => {
+    mockEvents = [makeEvent()];
+    renderPage();
+    fireEvent.click(screen.getByTestId('outbox-replay-11111111-1111-1111-1111-111111111111'));
+    await waitFor(() => expect(replayMut).toHaveBeenCalledWith('11111111-1111-1111-1111-111111111111'));
+  });
+
+  it('replays all failed events via replay-all button', async () => {
+    mockEvents = [makeEvent(), makeEvent({ id: '22222222-2222-2222-2222-222222222222' })];
+    renderPage();
+    fireEvent.click(screen.getByTestId('outbox-replay-all'));
+    await waitFor(() => expect(replayAllMut).toHaveBeenCalled());
+  });
+
+  it('opens recover-stuck modal, adjusts timeout and confirms', async () => {
+    renderPage();
+    fireEvent.click(screen.getByTestId('outbox-recover-stuck'));
+    const input = screen.getByTestId('outbox-timeout-input');
+    expect(input).toBeInTheDocument();
+    fireEvent.change(input, { target: { value: '300' } });
+    fireEvent.click(screen.getByTestId('outbox-maintenance-confirm'));
+    await waitFor(() => expect(recoverMut).toHaveBeenCalledWith(300, expect.anything()));
+  });
+
+  it('opens cleanup-published modal, adjusts retention and confirms', async () => {
+    renderPage();
+    fireEvent.click(screen.getByTestId('outbox-cleanup-published'));
+    const input = screen.getByTestId('outbox-retention-input');
+    expect(input).toBeInTheDocument();
+    fireEvent.change(input, { target: { value: '14' } });
+    fireEvent.click(screen.getByTestId('outbox-maintenance-confirm'));
+    await waitFor(() => expect(cleanupMut).toHaveBeenCalledWith(14, expect.anything()));
+  });
+
+  it('renders consumer registry entries with handlers', () => {
+    mockRegistry = { 'contact.created': ['audit_log_handler', 'search_index_handler'] };
+    renderPage();
+    expect(screen.getByTestId('outbox-registry-contact.created')).toBeInTheDocument();
+    expect(screen.getByText('audit_log_handler')).toBeInTheDocument();
+    expect(screen.getByText('search_index_handler')).toBeInTheDocument();
+  });
+
+  it('shows empty registry state when no handlers registered', () => {
+    renderPage();
+    expect(screen.getByTestId('outbox-registry-empty')).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/api/outbox.ts b/frontend/src/api/outbox.ts
new file mode 100644
index 0000000..1237dfc
--- /dev/null
+++ b/frontend/src/api/outbox.ts
@@ -0,0 +1,130 @@
+/**
+ * Outbox API client — transactional outbox monitoring & management.
+ *
+ * Backend: /api/v1/outbox (stats, failed, replay, replay-all,
+ * consumer-registry, recover-stuck, cleanup-published).
+ * All endpoints require the admin role (require_admin, enforced server-side).
+ */
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { apiGet, apiPost } from '@/api/client';
+
+export interface OutboxStats {
+  /** Count per status: pending, processing, published, failed, no_handlers. */
+  counts: Record<string, number>;
+  total: number;
+  oldest_pending_age_seconds: number | null;
+}
+
+export interface FailedOutboxEvent {
+  id: string;
+  tenant_id: string;
+  event_name: string;
+  error_message: string | null;
+  failed_at: string | null;
+  attempts: number;
+  created_at: string | null;
+  status: string;
+}
+
+export interface FailedEventsResponse {
+  events: FailedOutboxEvent[];
+  limit: number;
+  offset: number;
+  count: number;
+}
+
+export interface ConsumerRegistryResponse {
+  registry: Record<string, string[]>;
+}
+
+export interface ReplaySingleResponse {
+  replayed: boolean;
+  event_id: string;
+}
+
+export interface ReplayAllResponse {
+  replayed_count: number;
+  tenant_id: string;
+}
+
+export interface RecoverStuckResponse {
+  recovered_count: number;
+  timeout_seconds: number;
+}
+
+export interface CleanupPublishedResponse {
+  deleted_count: number;
+  retention_days: number;
+}
+
+// ─── Query hooks ─────────────────────────────────────────────
+
+export function useOutboxStats(enabled = true) {
+  return useQuery<OutboxStats>({
+    queryKey: ['outbox', 'stats'],
+    queryFn: () => apiGet<OutboxStats>('/outbox/stats'),
+    enabled,
+  });
+}
+
+export function useOutboxFailedEvents(limit: number, offset: number, enabled = true) {
+  return useQuery<FailedEventsResponse>({
+    queryKey: ['outbox', 'failed', limit, offset],
+    queryFn: () =>
+      apiGet<FailedEventsResponse>(`/outbox/failed?limit=${limit}&offset=${offset}`),
+    enabled,
+  });
+}
+
+export function useOutboxConsumerRegistry(enabled = true) {
+  return useQuery<ConsumerRegistryResponse>({
+    queryKey: ['outbox', 'consumer-registry'],
+    queryFn: () => apiGet<ConsumerRegistryResponse>('/outbox/consumer-registry'),
+    enabled,
+  });
+}
+
+// ─── Mutation hooks ──────────────────────────────────────────
+
+export function useReplayFailedEvent() {
+  const qc = useQueryClient();
+  return useMutation<ReplaySingleResponse, Error, string>({
+    mutationFn: (eventId) => apiPost<ReplaySingleResponse>(`/outbox/replay/${eventId}`),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['outbox'] });
+    },
+  });
+}
+
+export function useReplayAllFailedEvents() {
+  const qc = useQueryClient();
+  return useMutation<ReplayAllResponse, Error, void>({
+    mutationFn: () => apiPost<ReplayAllResponse>('/outbox/replay-all'),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['outbox'] });
+    },
+  });
+}
+
+export function useRecoverStuckEvents() {
+  const qc = useQueryClient();
+  return useMutation<RecoverStuckResponse, Error, number>({
+    mutationFn: (timeoutSeconds) =>
+      apiPost<RecoverStuckResponse>(`/outbox/recover-stuck?timeout_seconds=${timeoutSeconds}`),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['outbox'] });
+    },
+  });
+}
+
+export function useCleanupPublishedEvents() {
+  const qc = useQueryClient();
+  return useMutation<CleanupPublishedResponse, Error, number>({
+    mutationFn: (retentionDays) =>
+      apiPost<CleanupPublishedResponse>(`/outbox/cleanup-published?retention_days=${retentionDays}`),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['outbox'] });
+    },
+  });
+}
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index 3976e1c..cb34a6a 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -58,6 +58,7 @@ const singleItems: NavSingleItem[] = [
   { to: '/system-dashboard', labelKey: 'nav.systemDashboard', icon: <Activity className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} />, order: 90 },
   { to: '/approvals', labelKey: 'nav.approvals', icon: <CheckCircle2 className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} />, order: 91 },
   { to: '/delegations', labelKey: 'nav.delegations', icon: <ArrowRightLeft className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} />, order: 92 },
+  { to: '/outbox', labelKey: 'nav.outbox', icon: <Inbox className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} />, order: 93 },
 ];
 
 const bottomItems: NavSingleItem[] = [];
@@ -84,9 +85,9 @@ export function Sidebar() {
 
   const allMenuItems = useMemo(() => {
     const staticItems = singleItems
-      // Backend enforces require_admin on system dashboard routes — hide the
-      // nav entry from non-admin users instead of showing a dead link.
-      .filter(item => item.to !== '/system-dashboard' || user?.is_system_admin)
+      // Backend enforces require_admin on system dashboard and outbox routes —
+      // hide the nav entries from non-admin users instead of showing a dead link.
+      .filter(item => (item.to !== '/system-dashboard' && item.to !== '/outbox') || user?.is_system_admin)
       .map(item => ({
         path: item.to,
         labelKey: item.labelKey,
diff --git a/frontend/src/i18n/locales/de.json b/frontend/src/i18n/locales/de.json
index 51a98b3..6af309d 100644
--- a/frontend/src/i18n/locales/de.json
+++ b/frontend/src/i18n/locales/de.json
@@ -24,6 +24,7 @@
     "systemDashboard": "System Dashboard",
     "approvals": "Freigaben",
     "delegations": "Delegationen",
+    "outbox": "Outbox",
     "marketplace": "Marketplace",
     "skills": "Skills",
     "agentMemory": "Agent Memory"
@@ -1663,6 +1664,38 @@
     "empty": "Keine Delegationen in dieser Ansicht.",
     "loadError": "Delegationen konnten nicht geladen werden."
   },
+  "outbox": {
+    "title": "Event-Outbox",
+    "refresh": "Aktualisieren",
+    "adminOnly": "Administrator-Zugriff erforderlich",
+    "loadError": "Outbox-Daten konnten nicht geladen werden.",
+    "status_pending": "Offen",
+    "status_processing": "In Verarbeitung",
+    "status_published": "Veröffentlicht",
+    "status_failed": "Fehlgeschlagen",
+    "status_no_handlers": "Ohne Handler",
+    "statusFailed": "Fehlgeschlagen",
+    "total": "Gesamt",
+    "oldestPending": "Ältestes offenes Event",
+    "dlqTitle": "Fehlgeschlagene Events",
+    "dlqEmpty": "Keine fehlgeschlagenen Events. Alles verarbeitet.",
+    "replay": "Erneut senden",
+    "replayAll": "Alle erneut senden",
+    "attempts": "Versuche",
+    "createdAt": "Erstellt",
+    "failedAt": "Fehlgeschlagen",
+    "prev": "Zurück",
+    "next": "Weiter",
+    "maintenanceTitle": "Wartung",
+    "recoverStuck": "Hängende Events zurücksetzen",
+    "recoverStuckHelp": "Setzt Events im Status 'In Verarbeitung', die länger als der Timeout feststecken, auf 'Offen' zurück.",
+    "timeoutSeconds": "Timeout (Sekunden)",
+    "cleanupPublished": "Veröffentlichte Events aufräumen",
+    "cleanupPublishedHelp": "Löscht veröffentlichte Events, die älter als die angegebene Aufbewahrungszeit sind.",
+    "retentionDays": "Aufbewahrung (Tage)",
+    "registryTitle": "Registrierte Handler",
+    "registryEmpty": "Keine Event-Handler registriert."
+  },
   "apiTokens": {
     "title": "API-Tokens",
     "create": "Token erstellen",
diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json
index d612109..cd09d04 100644
--- a/frontend/src/i18n/locales/en.json
+++ b/frontend/src/i18n/locales/en.json
@@ -24,6 +24,7 @@
     "systemDashboard": "System Dashboard",
     "approvals": "Approvals",
     "delegations": "Delegations",
+    "outbox": "Outbox",
     "marketplace": "Marketplace",
     "skills": "Skills",
     "agentMemory": "Agent Memory"
@@ -1663,6 +1664,38 @@
     "empty": "No delegations in this view.",
     "loadError": "Failed to load delegations."
   },
+  "outbox": {
+    "title": "Event Outbox",
+    "refresh": "Refresh",
+    "adminOnly": "Administrator access required",
+    "loadError": "Failed to load outbox data.",
+    "status_pending": "Pending",
+    "status_processing": "Processing",
+    "status_published": "Published",
+    "status_failed": "Failed",
+    "status_no_handlers": "No handlers",
+    "statusFailed": "Failed",
+    "total": "Total",
+    "oldestPending": "Oldest pending event",
+    "dlqTitle": "Failed events",
+    "dlqEmpty": "No failed events. Everything processed.",
+    "replay": "Replay",
+    "replayAll": "Replay all",
+    "attempts": "Attempts",
+    "createdAt": "Created",
+    "failedAt": "Failed at",
+    "prev": "Previous",
+    "next": "Next",
+    "maintenanceTitle": "Maintenance",
+    "recoverStuck": "Recover stuck events",
+    "recoverStuckHelp": "Resets events stuck in 'processing' longer than the timeout back to 'pending'.",
+    "timeoutSeconds": "Timeout (seconds)",
+    "cleanupPublished": "Cleanup published events",
+    "cleanupPublishedHelp": "Deletes published events older than the specified retention period.",
+    "retentionDays": "Retention (days)",
+    "registryTitle": "Registered handlers",
+    "registryEmpty": "No event handlers registered."
+  },
   "apiTokens": {
     "title": "API Tokens",
     "create": "Create token",
diff --git a/frontend/src/pages/Outbox.tsx b/frontend/src/pages/Outbox.tsx
new file mode 100644
index 0000000..14bb59b
--- /dev/null
+++ b/frontend/src/pages/Outbox.tsx
@@ -0,0 +1,481 @@
+/**
+ * Outbox page — transactional outbox monitoring & management (admin).
+ *
+ * Backend: /api/v1/outbox, all endpoints require the admin role.
+ *
+ * Features:
+ * - Stats cards: pending / processing / published / failed / no_handlers,
+ *   total events, oldest pending age
+ * - DLQ: failed events list with error details, replay single / replay all
+ * - Consumer registry: event name → registered handlers
+ * - Maintenance: recover stuck processing events, cleanup published events
+ */
+
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import clsx from 'clsx';
+import {
+  AlertTriangle,
+  Clock,
+  Inbox,
+  Lock,
+  RefreshCw,
+  RotateCcw,
+  Server,
+  Trash2,
+  Wrench,
+} from 'lucide-react';
+import {
+  useOutboxStats,
+  useOutboxFailedEvents,
+  useOutboxConsumerRegistry,
+  useReplayFailedEvent,
+  useReplayAllFailedEvents,
+  useRecoverStuckEvents,
+  useCleanupPublishedEvents,
+  type FailedOutboxEvent,
+} from '@/api/outbox';
+import { useAuthStore } from '@/store/authStore';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Modal } from '@/components/ui/Modal';
+
+const PAGE_SIZE = 20;
+
+const STATUS_ORDER = ['pending', 'processing', 'published', 'failed', 'no_handlers'] as const;
+
+const STATUS_BADGE: Record<string, string> = {
+  pending: 'bg-warning-100 text-warning-800 dark:bg-warning-900/30 dark:text-warning-300',
+  processing: 'bg-info-100 text-info-800 dark:bg-info-900/30 dark:text-info-300',
+  published: 'bg-success-100 text-success-800 dark:bg-success-900/30 dark:text-success-300',
+  failed: 'bg-danger-100 text-danger-800 dark:bg-danger-900/30 dark:text-danger-300',
+  no_handlers: 'bg-secondary-200 text-secondary-700 dark:bg-secondary-800 dark:text-secondary-300',
+};
+
+function formatDateTime(iso: string | null): string {
+  if (!iso) return '—';
+  try {
+    return new Date(iso).toLocaleString();
+  } catch {
+    return iso;
+  }
+}
+
+function formatAge(seconds: number): string {
+  if (seconds < 60) return `${Math.round(seconds)}s`;
+  if (seconds < 3600) return `${Math.round(seconds / 60)}min`;
+  if (seconds < 86400) return `${Math.round(seconds / 3600)}h`;
+  return `${Math.round(seconds / 86400)}d`;
+}
+
+function FailedEventCard({
+  event,
+  isReplaying,
+  onReplay,
+}: {
+  event: FailedOutboxEvent;
+  isReplaying: boolean;
+  onReplay: (id: string) => void;
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <Card className="p-4 space-y-2" data-testid={`outbox-event-${event.id}`}>
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2 flex-wrap">
+            <span
+              className={clsx(
+                'inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium',
+                STATUS_BADGE.failed,
+              )}
+            >
+              {t('outbox.statusFailed')}
+            </span>
+            <span className="text-xs text-secondary-500">{t('outbox.attempts')}: {event.attempts}
+            </span>
+          </div>
+          <p className="mt-2 text-sm font-medium text-secondary-900 dark:text-secondary-100 break-words font-mono">
+            {event.event_name}
+          </p>
+          <p className="text-xs text-secondary-400 mt-1" title={event.id}>
+            <span className="font-mono">{event.id.slice(0, 8)}…</span>
+          </p>
+        </div>
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={() => onReplay(event.id)}
+          disabled={isReplaying}
+          data-testid={`outbox-replay-${event.id}`}
+          aria-label={t('outbox.replay')}
+        >
+          <RotateCcw className="w-4 h-4" aria-hidden="true" />
+          {t('outbox.replay')}
+        </Button>
+      </div>
+
+      {event.error_message && (
+        <p
+          className="text-xs text-danger-600 dark:text-danger-400 bg-danger-50 dark:bg-danger-900/20 rounded-md px-3 py-2 break-words"
+          data-testid={`outbox-error-${event.id}`}
+        >
+          {event.error_message}
+        </p>
+      )}
+
+      <div className="flex items-center gap-4 text-xs text-secondary-400 border-t border-secondary-200 dark:border-secondary-700 pt-2">
+        <span className="inline-flex items-center gap-1">
+          <Clock className="w-3 h-3" aria-hidden="true" />
+          {t('outbox.createdAt')}: {formatDateTime(event.created_at)}
+        </span>
+        {event.failed_at && (
+          <span>
+            {t('outbox.failedAt')}: {formatDateTime(event.failed_at)}
+          </span>
+        )}
+      </div>
+    </Card>
+  );
+}
+
+export function OutboxPage() {
+  const { t } = useTranslation();
+  const user = useAuthStore((state) => state.user);
+  const isAdmin = user?.is_system_admin === true;
+
+  const [offset, setOffset] = useState(0);
+  const [maintenance, setMaintenance] = useState<'recover' | 'cleanup' | null>(null);
+  const [timeoutSeconds, setTimeoutSeconds] = useState(120);
+  const [retentionDays, setRetentionDays] = useState(30);
+
+  const statsQuery = useOutboxStats(isAdmin);
+  const failedQuery = useOutboxFailedEvents(PAGE_SIZE, offset, isAdmin);
+  const registryQuery = useOutboxConsumerRegistry(isAdmin);
+
+  const replayMut = useReplayFailedEvent();
+  const replayAllMut = useReplayAllFailedEvents();
+  const recoverMut = useRecoverStuckEvents();
+  const cleanupMut = useCleanupPublishedEvents();
+
+  const stats = statsQuery.data;
+  const events = failedQuery.data?.events ?? [];
+  const registry = registryQuery.data?.registry ?? {};
+  const registryEntries = Object.entries(registry).sort(([a], [b]) => a.localeCompare(b));
+
+  const isMutating =
+    replayMut.isPending || replayAllMut.isPending || recoverMut.isPending || cleanupMut.isPending;
+
+  const handleMaintenance = () => {
+    if (maintenance === 'recover') {
+      recoverMut.mutate(timeoutSeconds, { onSuccess: () => setMaintenance(null) });
+    } else if (maintenance === 'cleanup') {
+      cleanupMut.mutate(retentionDays, { onSuccess: () => setMaintenance(null) });
+    }
+  };
+
+  // Admin-only guard — backend enforces require_admin on all outbox endpoints.
+  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="outbox-admin-only">
+            {t('outbox.adminOnly')}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4 max-w-4xl mx-auto" data-testid="outbox-page">
+      <div className="flex items-center justify-between gap-3">
+        <h1 className="text-xl font-semibold text-secondary-900 dark:text-secondary-100">
+          {t('outbox.title')}
+        </h1>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => {
+            statsQuery.refetch();
+            failedQuery.refetch();
+            registryQuery.refetch();
+          }}
+          disabled={statsQuery.isFetching || failedQuery.isFetching}
+          aria-label={t('outbox.refresh')}
+          data-testid="outbox-refresh"
+        >
+          <RefreshCw
+            className={clsx('w-4 h-4', (statsQuery.isFetching || failedQuery.isFetching) && 'animate-spin')}
+            aria-hidden="true"
+          />
+        </Button>
+      </div>
+
+      {/* Stats cards */}
+      {statsQuery.isLoading ? (
+        <div className="flex items-center justify-center py-8">
+          <RefreshCw className="w-6 h-6 animate-spin text-secondary-400" aria-hidden="true" />
+        </div>
+      ) : statsQuery.isError ? (
+        <Card className="p-8 text-center">
+          <AlertTriangle className="w-8 h-8 mx-auto text-danger-500" aria-hidden="true" />
+          <p className="mt-2 text-sm text-secondary-600" data-testid="outbox-stats-error">
+            {t('outbox.loadError')}
+          </p>
+        </Card>
+      ) : stats ? (
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
+          {STATUS_ORDER.map((status) => (
+            <Card key={status} className="p-3 text-center" data-testid={`outbox-stat-${status}`}>
+              <span
+                className={clsx(
+                  'inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium mb-2',
+                  STATUS_BADGE[status],
+                )}
+              >
+                {t(`outbox.status_${status}`)}
+              </span>
+              <p className="text-2xl font-semibold text-secondary-900 dark:text-secondary-100">
+                {stats.counts[status] ?? 0}
+              </p>
+            </Card>
+          ))}
+          <Card className="p-3 text-center" data-testid="outbox-stat-total">
+            <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium mb-2 bg-primary-100 text-primary-800 dark:bg-primary-900/30 dark:text-primary-300">
+              {t('outbox.total')}
+            </span>
+            <p className="text-2xl font-semibold text-secondary-900 dark:text-secondary-100">{stats.total}</p>
+          </Card>
+        </div>
+      ) : null}
+
+      {stats && stats.oldest_pending_age_seconds != null && (
+        <p className="text-xs text-secondary-500" data-testid="outbox-oldest-pending">
+          <Clock className="w-3 h-3 inline mr-1" aria-hidden="true" />
+          {t('outbox.oldestPending')}: {formatAge(stats.oldest_pending_age_seconds)}
+        </p>
+      )}
+
+      {/* DLQ — failed events */}
+      <section aria-labelledby="outbox-dlq-heading">
+        <div className="flex items-center justify-between gap-3 mb-2">
+          <h2
+            id="outbox-dlq-heading"
+            className="text-base font-semibold text-secondary-900 dark:text-secondary-100"
+          >
+            {t('outbox.dlqTitle')}
+            {stats?.counts.failed != null && stats.counts.failed > 0 && (
+              <span className="ml-2 text-xs font-normal text-danger-600 dark:text-danger-400">
+                {stats.counts.failed}
+              </span>
+            )}
+          </h2>
+          {events.length > 0 && (
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => replayAllMut.mutate()}
+              disabled={isMutating}
+              data-testid="outbox-replay-all"
+            >
+              <RotateCcw className="w-4 h-4" aria-hidden="true" />
+              {t('outbox.replayAll')}
+            </Button>
+          )}
+        </div>
+
+        {failedQuery.isLoading ? (
+          <div className="flex items-center justify-center py-8">
+            <RefreshCw className="w-6 h-6 animate-spin text-secondary-400" aria-hidden="true" />
+          </div>
+        ) : failedQuery.isError ? (
+          <Card className="p-8 text-center">
+            <AlertTriangle className="w-8 h-8 mx-auto text-danger-500" aria-hidden="true" />
+            <p className="mt-2 text-sm text-secondary-600">{t('outbox.loadError')}</p>
+          </Card>
+        ) : events.length === 0 ? (
+          <Card className="p-10 text-center">
+            <Inbox className="w-10 h-10 mx-auto text-secondary-300" aria-hidden="true" />
+            <p className="mt-3 text-sm text-secondary-500" data-testid="outbox-dlq-empty">
+              {t('outbox.dlqEmpty')}
+            </p>
+          </Card>
+        ) : (
+          <div className="space-y-3">
+            {events.map((event) => (
+              <FailedEventCard
+                key={event.id}
+                event={event}
+                isReplaying={replayMut.isPending}
+                onReplay={(id) => replayMut.mutate(id)}
+              />
+            ))}
+          </div>
+        )}
+
+        {/* Pagination */}
+        {events.length === PAGE_SIZE && (
+          <div className="flex justify-center gap-2 mt-3">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setOffset(Math.max(0, offset - PAGE_SIZE))}
+              disabled={offset === 0 || failedQuery.isFetching}
+            >
+              {t('outbox.prev')}
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setOffset(offset + PAGE_SIZE)}
+              disabled={events.length < PAGE_SIZE || failedQuery.isFetching}
+              data-testid="outbox-next-page"
+            >
+              {t('outbox.next')}
+            </Button>
+          </div>
+        )}
+      </section>
+
+      {/* Maintenance actions */}
+      <section aria-labelledby="outbox-maintenance-heading">
+        <h2
+          id="outbox-maintenance-heading"
+          className="text-base font-semibold text-secondary-900 dark:text-secondary-100 mb-2"
+        >
+          {t('outbox.maintenanceTitle')}
+        </h2>
+        <div className="flex flex-wrap gap-2">
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => setMaintenance('recover')}
+            disabled={isMutating}
+            data-testid="outbox-recover-stuck"
+          >
+            <Wrench className="w-4 h-4" aria-hidden="true" />
+            {t('outbox.recoverStuck')}
+          </Button>
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => setMaintenance('cleanup')}
+            disabled={isMutating}
+            data-testid="outbox-cleanup-published"
+          >
+            <Trash2 className="w-4 h-4" aria-hidden="true" />
+            {t('outbox.cleanupPublished')}
+          </Button>
+        </div>
+      </section>
+
+      {/* Consumer registry */}
+      <section aria-labelledby="outbox-registry-heading">
+        <h2
+          id="outbox-registry-heading"
+          className="text-base font-semibold text-secondary-900 dark:text-secondary-100 mb-2"
+        >
+          {t('outbox.registryTitle')} ({registryEntries.length})
+        </h2>
+        {registryQuery.isLoading ? (
+          <div className="flex items-center justify-center py-8">
+            <RefreshCw className="w-6 h-6 animate-spin text-secondary-400" aria-hidden="true" />
+          </div>
+        ) : registryQuery.isError ? (
+          <Card className="p-8 text-center">
+            <AlertTriangle className="w-8 h-8 mx-auto text-danger-500" aria-hidden="true" />
+            <p className="mt-2 text-sm text-secondary-600">{t('outbox.loadError')}</p>
+          </Card>
+        ) : registryEntries.length === 0 ? (
+          <Card className="p-10 text-center">
+            <Server className="w-10 h-10 mx-auto text-secondary-300" aria-hidden="true" />
+            <p className="mt-3 text-sm text-secondary-500" data-testid="outbox-registry-empty">
+              {t('outbox.registryEmpty')}
+            </p>
+          </Card>
+        ) : (
+          <div className="space-y-2">
+            {registryEntries.map(([eventName, handlers]) => (
+              <Card key={eventName} className="p-3" data-testid={`outbox-registry-${eventName}`}>
+                <p className="text-sm font-medium text-secondary-900 dark:text-secondary-100 font-mono break-all">
+                  {eventName}
+                </p>
+                <div className="flex flex-wrap gap-1 mt-2">
+                  {handlers.map((handler) => (
+                    <span
+                      key={handler}
+                      className="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-secondary-100 text-secondary-700 dark:bg-secondary-800 dark:text-secondary-300 font-mono break-all"
+                    >
+                      {handler}
+                    </span>
+                  ))}
+                </div>
+              </Card>
+            ))}
+          </div>
+        )}
+      </section>
+
+      {/* Maintenance modal */}
+      <Modal
+        open={maintenance !== null}
+        onClose={() => setMaintenance(null)}
+        title={maintenance === 'recover' ? t('outbox.recoverStuck') : t('outbox.cleanupPublished')}
+      >
+        <div className="space-y-4">
+          {maintenance === 'recover' ? (
+            <>
+              <label
+                htmlFor="outbox-timeout-input"
+                className="block text-sm font-medium text-secondary-700 dark:text-secondary-300"
+              >
+                {t('outbox.timeoutSeconds')}
+              </label>
+              <input
+                id="outbox-timeout-input"
+                type="number"
+                min={10}
+                max={3600}
+                value={timeoutSeconds}
+                onChange={(e) => setTimeoutSeconds(Number(e.target.value))}
+                className="w-full rounded-md border border-secondary-300 dark:border-secondary-600 bg-white dark:bg-secondary-800 px-3 py-2 text-sm"
+                data-testid="outbox-timeout-input"
+              />
+              <p className="text-xs text-secondary-500">{t('outbox.recoverStuckHelp')}</p>
+            </>
+          ) : (
+            <>
+              <label
+                htmlFor="outbox-retention-input"
+                className="block text-sm font-medium text-secondary-700 dark:text-secondary-300"
+              >
+                {t('outbox.retentionDays')}
+              </label>
+              <input
+                id="outbox-retention-input"
+                type="number"
+                min={1}
+                max={365}
+                value={retentionDays}
+                onChange={(e) => setRetentionDays(Number(e.target.value))}
+                className="w-full rounded-md border border-secondary-300 dark:border-secondary-600 bg-white dark:bg-secondary-800 px-3 py-2 text-sm"
+                data-testid="outbox-retention-input"
+              />
+              <p className="text-xs text-secondary-500">{t('outbox.cleanupPublishedHelp')}</p>
+            </>
+          )}
+          <div className="flex justify-end gap-2">
+            <Button variant="ghost" onClick={() => setMaintenance(null)}>
+              {t('common.cancel')}
+            </Button>
+            <Button variant="primary" onClick={handleMaintenance} disabled={isMutating} data-testid="outbox-maintenance-confirm">
+              {t('common.confirm')}
+            </Button>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+}
diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx
index 0e613a8..57663f2 100644
--- a/frontend/src/routes/index.tsx
+++ b/frontend/src/routes/index.tsx
@@ -45,6 +45,7 @@ const CustomFieldsPage = React.lazy(() => import('@/pages/CustomFields').then(m
 const ActivityTimelinePage = React.lazy(() => import('@/pages/ActivityTimeline').then(m => ({ default: m.ActivityTimelinePage })));
 const ApprovalsPage = React.lazy(() => import('@/pages/Approvals').then(m => ({ default: m.ApprovalsPage })));
 const DelegationsPage = React.lazy(() => import('@/pages/Delegations').then(m => ({ default: m.DelegationsPage })));
+const OutboxPage = React.lazy(() => import('@/pages/Outbox').then(m => ({ default: m.OutboxPage })));
 const ApiTokensPage = React.lazy(() => import('@/pages/ApiTokens').then(m => ({ default: m.ApiTokensPage })));
 const TenantsPage = React.lazy(() => import('@/pages/Tenants').then(m => ({ default: m.TenantsPage })));
 const PermissionTemplatesPage = React.lazy(() => import('@/pages/PermissionTemplates').then(m => ({ default: m.PermissionTemplatesPage })));
@@ -237,6 +238,7 @@ const router = createBrowserRouter([
       { path: '/api-docs', element: <PermissionRoute permission="settings:read">{withSuspense(<ApiDocsPage />)}</PermissionRoute> },
       { path: '/activity', element: <PermissionRoute permission="audit:read">{withSuspense(<ActivityTimelinePage />)}</PermissionRoute> },
       { path: '/system-dashboard', element: withSuspense(<SystemDashboardPage />) },
+      { path: '/outbox', element: withSuspense(<OutboxPage />) },
       { path: '/profile', element: withSuspense(<SettingsProfilePage />) },
       { path: '*', element: <ErrorBoundary>{<PluginRouteRenderer />}</ErrorBoundary> },
     ],