@cosmicdrift/kumiko-bundled-features 0.130.0 → 0.130.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-bundled-features",
-  "version": "0.130.0",
+  "version": "0.130.1",
   "description": "Built-in features — tenant, user, auth, delivery. The stuff you'd rewrite anyway, already typed.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -107,11 +107,11 @@
     "./step-dispatcher": "./src/step-dispatcher/index.ts"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.130.0",
-    "@cosmicdrift/kumiko-framework": "0.130.0",
-    "@cosmicdrift/kumiko-headless": "0.130.0",
-    "@cosmicdrift/kumiko-renderer": "0.130.0",
-    "@cosmicdrift/kumiko-renderer-web": "0.130.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.130.1",
+    "@cosmicdrift/kumiko-framework": "0.130.1",
+    "@cosmicdrift/kumiko-headless": "0.130.1",
+    "@cosmicdrift/kumiko-renderer": "0.130.1",
+    "@cosmicdrift/kumiko-renderer-web": "0.130.1",
     "@mollie/api-client": "^4.5.0",
     "@node-rs/argon2": "^2.0.2",
     "@types/nodemailer": "^8.0.0",

package/src/audit/__tests__/audit-screens.boot.test.ts

@@ -2,7 +2,7 @@ import { describe, expect, test } from "bun:test";
 import { access, validateBoot } from "@cosmicdrift/kumiko-framework/engine";
 import { rolesOf } from "@cosmicdrift/kumiko-framework/testing";
 import { createConfigFeature } from "../../config/feature";
-import { AUDIT_LOG_SCREEN_ID, AuditQueries } from "../constants";
+import { AUDIT_LOG_DETAIL_SCREEN_ID, AUDIT_LOG_SCREEN_ID, AuditQueries } from "../constants";
 import { createAuditFeature } from "../feature";
 
 describe("audit log screen + handler access alignment", () => {
@@ -21,9 +21,22 @@ describe("audit log screen + handler access alignment", () => {
     }
   });
 
-  test("audit:query:list uses access.admin (screen ⊆ handler)", () => {
+  test("audit-log-detail screen is custom, admin-gated, breadcrumb-linked to list", () => {
+    const audit = createAuditFeature();
+    const screen = audit.screens[AUDIT_LOG_DETAIL_SCREEN_ID];
+    expect(screen?.type).toBe("custom");
+    if (screen && "listScreenId" in screen) {
+      expect(screen.listScreenId).toBe(AUDIT_LOG_SCREEN_ID);
+    }
+    if (screen && "access" in screen && screen.access && "roles" in screen.access) {
+      expect(screen.access.roles).toEqual(access.admin);
+    }
+  });
+
+  test("audit queries use access.admin (screen ⊆ handler)", () => {
     const audit = createAuditFeature();
     expect(rolesOf(audit.queryHandlers["list"]?.access)).toEqual([...access.admin]);
+    expect(rolesOf(audit.queryHandlers["details"]?.access)).toEqual([...access.admin]);
     void AuditQueries;
   });
 });

package/src/audit/constants.ts

@@ -4,7 +4,11 @@ export const AUDIT_FEATURE = "audit" as const;
 
 export const AuditQueries = {
   list: "audit:query:list",
+  details: "audit:query:details",
 } as const;
 
 /** Tenant-admin audit log screen. Nav: `audit:screen:audit-log`. */
 export const AUDIT_LOG_SCREEN_ID = "audit-log" as const;
+
+/** Single-event detail screen, breadcrumb-linked to the audit-log list. */
+export const AUDIT_LOG_DETAIL_SCREEN_ID = "audit-log-detail" as const;

package/src/audit/feature.ts

@@ -3,7 +3,8 @@ import {
   defineFeature,
   type FeatureDefinition,
 } from "@cosmicdrift/kumiko-framework/engine";
-import { AUDIT_LOG_SCREEN_ID } from "./constants";
+import { AUDIT_LOG_DETAIL_SCREEN_ID, AUDIT_LOG_SCREEN_ID } from "./constants";
+import { detailsQuery } from "./handlers/details.query";
 import { listQuery } from "./handlers/list.query";
 import { AUDIT_I18N } from "./i18n";
 
@@ -33,6 +34,7 @@ export function createAuditFeature(): FeatureDefinition {
 
     const queries = {
       list: r.queryHandler(listQuery),
+      details: r.queryHandler(detailsQuery),
     };
 
     r.screen({
@@ -41,6 +43,13 @@ export function createAuditFeature(): FeatureDefinition {
       renderer: { react: { __component: "AuditLogScreen" } },
       access: { roles: access.admin },
     });
+    r.screen({
+      id: AUDIT_LOG_DETAIL_SCREEN_ID,
+      type: "custom",
+      renderer: { react: { __component: "AuditLogDetailScreen" } },
+      listScreenId: AUDIT_LOG_SCREEN_ID,
+      access: { roles: access.admin },
+    });
     r.nav({
       id: "audit-log",
       label: "audit:nav.auditLog",

package/src/audit/handlers/details.query.ts

@@ -0,0 +1,47 @@
+// Single audit event by its event-store id — backs the audit-log-detail
+// screen. Tenant-isolated at the WHERE level like list.query, so a caller
+// can only read events in their own tenant.
+
+import { selectMany } from "@cosmicdrift/kumiko-framework/bun-db";
+import { access, defineQueryHandler } from "@cosmicdrift/kumiko-framework/engine";
+import { eventsTable } from "@cosmicdrift/kumiko-framework/event-store";
+import { z } from "zod";
+
+export const detailsQuery = defineQueryHandler({
+  name: "details",
+  schema: z.object({
+    id: z.string().regex(/^\d+$/, "id must be a positive integer"),
+  }),
+  access: { roles: access.admin },
+  handler: async (query, ctx) => {
+    const rows = await selectMany<{
+      id: bigint;
+      aggregateId: string;
+      aggregateType: string;
+      version: number;
+      type: string;
+      payload: Record<string, unknown>;
+      metadata: Record<string, unknown>;
+      createdAt: unknown;
+      createdBy: string;
+    }>(
+      ctx.db,
+      eventsTable,
+      { tenantId: query.user.tenantId, id: BigInt(query.payload.id) },
+      { limit: 1 },
+    );
+    const row = rows[0];
+    if (row === undefined) return null;
+    return {
+      id: String(row.id),
+      aggregateId: row.aggregateId,
+      aggregateType: row.aggregateType,
+      version: row.version,
+      type: row.type,
+      payload: row.payload,
+      metadata: row.metadata,
+      createdAt: row.createdAt,
+      createdBy: row.createdBy,
+    };
+  },
+});

package/src/audit/i18n.ts

@@ -5,6 +5,7 @@ type LocalizedString = { readonly de: string; readonly en: string };
 
 export const AUDIT_I18N: Readonly<Record<string, LocalizedString>> = {
   "screen:audit-log.title": { de: "Audit-Log", en: "Audit log" },
+  "screen:audit-log-detail.title": { de: "Ereignis", en: "Event" },
   "audit:nav.auditLog": { de: "Audit", en: "Audit" },
   "audit.log.title": { de: "Audit-Log", en: "Audit log" },
   "audit.log.loading": { de: "Lade Ereignisse…", en: "Loading events…" },
@@ -22,6 +23,9 @@ export const AUDIT_I18N: Readonly<Record<string, LocalizedString>> = {
   "audit.log.filter.apply": { de: "Filtern", en: "Filter" },
   "audit.log.filter.reset": { de: "Zurücksetzen", en: "Reset" },
   "audit.log.details": { de: "Details", en: "Details" },
-  "audit.log.detail.title": { de: "Ereignis-Payload", en: "Event payload" },
-  "audit.log.detail.close": { de: "Schließen", en: "Close" },
+  "audit.log.detail.loading": { de: "Lade Ereignis…", en: "Loading event…" },
+  "audit.log.detail.missing": { de: "Ereignis nicht gefunden.", en: "Event not found." },
+  "audit.log.detail.payload": { de: "Ereignis-Payload", en: "Event payload" },
+  "audit.log.detail.metadata": { de: "Metadaten", en: "Metadata" },
+  "audit.log.detail.field.id": { de: "Ereignis-ID", en: "Event ID" },
 };

package/src/audit/web/audit-log-detail-screen.tsx

@@ -0,0 +1,133 @@
+// @runtime client
+// Single audit event detail. Route entityId = event-store id (bigint string).
+
+import { useDispatcher, useNav, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { FormScreenShell } from "@cosmicdrift/kumiko-renderer-web";
+import { type ReactNode, useCallback, useEffect, useState } from "react";
+import { AuditQueries } from "../constants";
+
+type AuditDetail = {
+  readonly id: string;
+  readonly aggregateId: string;
+  readonly aggregateType: string;
+  readonly type: string;
+  readonly createdBy: string;
+  readonly createdAt: string;
+  readonly payload: Record<string, unknown>;
+  readonly metadata: Record<string, unknown>;
+};
+
+type State =
+  | { readonly kind: "loading" }
+  | { readonly kind: "missing" }
+  | { readonly kind: "error"; readonly message: string }
+  | { readonly kind: "ready"; readonly event: AuditDetail };
+
+export function AuditLogDetailScreen(): ReactNode {
+  const t = useTranslation();
+  const { Banner, Card, Text } = usePrimitives();
+  const dispatcher = useDispatcher();
+  const nav = useNav();
+  const eventId = nav.route?.entityId;
+  const [state, setState] = useState<State>({ kind: "loading" });
+
+  const load = useCallback(async (): Promise<void> => {
+    if (eventId === undefined || eventId === "") {
+      setState({ kind: "missing" });
+      return;
+    }
+    setState({ kind: "loading" });
+    const res = await dispatcher.query<AuditDetail | null>(AuditQueries.details, { id: eventId });
+    if (!res.isSuccess) {
+      setState({ kind: "error", message: res.error.message });
+      return;
+    }
+    if (res.data === null) {
+      setState({ kind: "missing" });
+      return;
+    }
+    setState({ kind: "ready", event: res.data });
+  }, [dispatcher, eventId]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  if (state.kind === "loading") {
+    return (
+      <FormScreenShell testId="audit-log-detail-screen">
+        <Text variant="small">{t("audit.log.detail.loading")}</Text>
+      </FormScreenShell>
+    );
+  }
+
+  if (state.kind === "missing") {
+    return (
+      <FormScreenShell testId="audit-log-detail-screen">
+        <Banner variant="error">{t("audit.log.detail.missing")}</Banner>
+      </FormScreenShell>
+    );
+  }
+
+  if (state.kind === "error") {
+    return (
+      <FormScreenShell testId="audit-log-detail-screen">
+        <Banner variant="error">{state.message}</Banner>
+      </FormScreenShell>
+    );
+  }
+
+  const { event } = state;
+
+  return (
+    <FormScreenShell testId="audit-log-detail-screen" className="flex flex-col gap-6">
+      <Card slots={{ title: event.type }}>
+        <dl className="grid gap-3 text-sm">
+          <div>
+            <dt className="font-medium">{t("audit.log.col.when")}</dt>
+            <dd data-testid="audit-detail-when">{formatWhen(event.createdAt)}</dd>
+          </div>
+          <div>
+            <dt className="font-medium">{t("audit.log.col.aggregate")}</dt>
+            <dd data-testid="audit-detail-aggregate">
+              {event.aggregateType} / {event.aggregateId}
+            </dd>
+          </div>
+          <div>
+            <dt className="font-medium">{t("audit.log.col.actor")}</dt>
+            <dd data-testid="audit-detail-actor">{event.createdBy}</dd>
+          </div>
+          <div>
+            <dt className="font-medium">{t("audit.log.detail.field.id")}</dt>
+            <dd>
+              <Text variant="code">{event.id}</Text>
+            </dd>
+          </div>
+        </dl>
+      </Card>
+
+      <Card slots={{ title: t("audit.log.detail.payload") }}>
+        <pre
+          className="max-h-96 overflow-auto whitespace-pre-wrap break-all text-xs"
+          data-testid="audit-detail-payload"
+        >
+          {JSON.stringify(event.payload, null, 2)}
+        </pre>
+      </Card>
+
+      <Card slots={{ title: t("audit.log.detail.metadata") }}>
+        <pre className="max-h-96 overflow-auto whitespace-pre-wrap break-all text-xs">
+          {JSON.stringify(event.metadata, null, 2)}
+        </pre>
+      </Card>
+    </FormScreenShell>
+  );
+}
+
+function formatWhen(value: string): string {
+  try {
+    return new Date(value).toLocaleString();
+  } catch {
+    return value;
+  }
+}

package/src/audit/web/audit-log-screen.tsx

@@ -1,10 +1,16 @@
 // @runtime client
-// Paginated tenant-scoped audit log (event store).
+// Paginated tenant-scoped audit log (event store). Rows link to the
+// audit-log-detail screen; the screen title lives in the shell breadcrumb.
 
-import { useDispatcher, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
-import { FormScreenShell } from "@cosmicdrift/kumiko-renderer-web";
+import {
+  type DataTableSort,
+  useDispatcher,
+  useNav,
+  usePrimitives,
+  useTranslation,
+} from "@cosmicdrift/kumiko-renderer";
 import { type ReactNode, useCallback, useEffect, useState } from "react";
-import { AuditQueries } from "../constants";
+import { AUDIT_LOG_DETAIL_SCREEN_ID, AuditQueries } from "../constants";
 
 type AuditRow = {
   readonly id: string;
@@ -38,12 +44,13 @@ const EMPTY_FILTERS: Filters = { eventType: "", aggregateType: "", from: "", to:
 
 export function AuditLogScreen(): ReactNode {
   const t = useTranslation();
-  const { Banner, Button, Card, DataTable, Field, Heading, Input, Text } = usePrimitives();
+  const { Banner, Button, DataTable, Field, Input, Text } = usePrimitives();
   const dispatcher = useDispatcher();
+  const nav = useNav();
   const [state, setState] = useState<State>({ kind: "loading" });
   const [before, setBefore] = useState<string | undefined>(undefined);
   const [filters, setFilters] = useState<Filters>(EMPTY_FILTERS);
-  const [detailId, setDetailId] = useState<string | null>(null);
+  const [sort, setSort] = useState<DataTableSort | null>(null);
 
   const load = useCallback(
     async (cursor?: string): Promise<void> => {
@@ -71,139 +78,130 @@ export function AuditLogScreen(): ReactNode {
     void load(before);
   }, [load, before]);
 
-  const detailRow = state.kind === "ready" ? state.rows.find((r) => r.id === detailId) : undefined;
-
   if (state.kind === "loading") {
     return (
-      <FormScreenShell testId="audit-log-screen">
+      <div className="p-6" data-testid="audit-log-screen">
         <Text variant="small">{t("audit.log.loading")}</Text>
-      </FormScreenShell>
+      </div>
     );
   }
 
   if (state.kind === "error") {
     return (
-      <FormScreenShell testId="audit-log-screen">
+      <div className="p-6" data-testid="audit-log-screen">
         <Banner variant="error">{state.message}</Banner>
-      </FormScreenShell>
+      </div>
     );
   }
 
+  const openDetail = (id: string): void =>
+    nav.navigate({ screenId: AUDIT_LOG_DETAIL_SCREEN_ID, entityId: id });
+
   return (
-    <FormScreenShell testId="audit-log-screen" className="flex max-w-5xl flex-col gap-6">
-      <Heading variant="page">{t("audit.log.title")}</Heading>
-
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        <Field id="audit-filter-event" label={t("audit.log.filter.eventType")}>
-          <Input
-            kind="text"
-            id="audit-filter-event"
-            name="audit-filter-event"
-            value={filters.eventType}
-            onChange={(v: string) => setFilters((f) => ({ ...f, eventType: v }))}
-          />
-        </Field>
-        <Field id="audit-filter-aggregate" label={t("audit.log.filter.aggregateType")}>
-          <Input
-            kind="text"
-            id="audit-filter-aggregate"
-            name="audit-filter-aggregate"
-            value={filters.aggregateType}
-            onChange={(v) => setFilters((f) => ({ ...f, aggregateType: v }))}
-          />
-        </Field>
-        <Field id="audit-filter-from" label={t("audit.log.filter.from")}>
-          <Input
-            kind="date"
-            id="audit-filter-from"
-            name="audit-filter-from"
-            value={filters.from}
-            onChange={(v) => setFilters((f) => ({ ...f, from: v ?? "" }))}
-          />
-        </Field>
-        <Field id="audit-filter-to" label={t("audit.log.filter.to")}>
-          <Input
-            kind="date"
-            id="audit-filter-to"
-            name="audit-filter-to"
-            value={filters.to}
-            onChange={(v) => setFilters((f) => ({ ...f, to: v ?? "" }))}
-          />
-        </Field>
-      </div>
-      <div className="flex gap-2">
-        <Button
-          type="button"
-          variant="primary"
-          onClick={() => {
-            setBefore(undefined);
-            void load(undefined);
-          }}
-          testId="audit-log-apply-filters"
-        >
-          {t("audit.log.filter.apply")}
-        </Button>
-        <Button
-          type="button"
-          variant="secondary"
-          onClick={() => {
-            setFilters(EMPTY_FILTERS);
-            setBefore(undefined);
-          }}
-          testId="audit-log-reset-filters"
-        >
-          {t("audit.log.filter.reset")}
-        </Button>
+    <div className="w-full" data-testid="audit-log-screen">
+      <div className="flex flex-col gap-4 px-6 pt-6">
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          <Field id="audit-filter-event" label={t("audit.log.filter.eventType")}>
+            <Input
+              kind="text"
+              id="audit-filter-event"
+              name="audit-filter-event"
+              value={filters.eventType}
+              onChange={(v: string) => setFilters((f) => ({ ...f, eventType: v }))}
+            />
+          </Field>
+          <Field id="audit-filter-aggregate" label={t("audit.log.filter.aggregateType")}>
+            <Input
+              kind="text"
+              id="audit-filter-aggregate"
+              name="audit-filter-aggregate"
+              value={filters.aggregateType}
+              onChange={(v) => setFilters((f) => ({ ...f, aggregateType: v }))}
+            />
+          </Field>
+          <Field id="audit-filter-from" label={t("audit.log.filter.from")}>
+            <Input
+              kind="date"
+              id="audit-filter-from"
+              name="audit-filter-from"
+              value={filters.from}
+              onChange={(v) => setFilters((f) => ({ ...f, from: v ?? "" }))}
+            />
+          </Field>
+          <Field id="audit-filter-to" label={t("audit.log.filter.to")}>
+            <Input
+              kind="date"
+              id="audit-filter-to"
+              name="audit-filter-to"
+              value={filters.to}
+              onChange={(v) => setFilters((f) => ({ ...f, to: v ?? "" }))}
+            />
+          </Field>
+        </div>
+        <div className="flex gap-2">
+          <Button
+            type="button"
+            variant="primary"
+            onClick={() => {
+              setBefore(undefined);
+              void load(undefined);
+            }}
+            testId="audit-log-apply-filters"
+          >
+            {t("audit.log.filter.apply")}
+          </Button>
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={() => {
+              setFilters(EMPTY_FILTERS);
+              setBefore(undefined);
+            }}
+            testId="audit-log-reset-filters"
+          >
+            {t("audit.log.filter.reset")}
+          </Button>
+        </div>
       </div>
 
-      <Card options={{ padded: false }}>
-        <DataTable
-          testId="audit-log-table"
-          columns={[
-            { field: "when", label: t("audit.log.col.when"), type: "string", sortable: false },
-            { field: "type", label: t("audit.log.col.type"), type: "string", sortable: false },
-            {
-              field: "aggregate",
-              label: t("audit.log.col.aggregate"),
-              type: "string",
-              sortable: false,
-            },
-            { field: "actor", label: t("audit.log.col.actor"), type: "string", sortable: false },
-          ]}
-          rows={state.rows.map((row) => ({
-            id: row.id,
-            values: {
-              when: formatWhen(row.createdAt),
-              type: row.type,
-              aggregate: `${row.aggregateType} / ${row.aggregateId}`,
-              actor: row.createdBy,
-            },
-          }))}
-          rowActions={[
-            {
-              id: "details",
-              label: t("audit.log.details"),
-              style: "secondary",
-              onTrigger: (row) => setDetailId(row.id),
-            },
-          ]}
-          rowActionMode="inline"
-          emptyState={<Text variant="small">{t("audit.log.empty")}</Text>}
-        />
-      </Card>
-
-      {detailRow !== undefined && (
-        <Card slots={{ title: t("audit.log.detail.title") }} options={{ padded: true }}>
-          <pre className="max-h-96 overflow-auto whitespace-pre-wrap break-all text-xs">
-            {JSON.stringify(detailRow.payload, null, 2)}
-          </pre>
-          <Button type="button" variant="secondary" onClick={() => setDetailId(null)}>
-            {t("audit.log.detail.close")}
-          </Button>
-        </Card>
-      )}
+      <DataTable
+        testId="audit-log-table"
+        columns={[
+          { field: "when", label: t("audit.log.col.when"), type: "string", sortable: true },
+          { field: "type", label: t("audit.log.col.type"), type: "string", sortable: true },
+          {
+            field: "aggregate",
+            label: t("audit.log.col.aggregate"),
+            type: "string",
+            sortable: false,
+          },
+          { field: "actor", label: t("audit.log.col.actor"), type: "string", sortable: false },
+        ]}
+        sort={sort}
+        onSortChange={setSort}
+        rows={sortAudit(state.rows, sort).map((row) => ({
+          id: row.id,
+          values: {
+            when: formatWhen(row.createdAt),
+            type: row.type,
+            aggregate: `${row.aggregateType} / ${row.aggregateId}`,
+            actor: row.createdBy,
+          },
+        }))}
+        onRowClick={(row) => openDetail(row.id)}
+        rowActions={[
+          {
+            id: "details",
+            label: t("audit.log.details"),
+            style: "secondary",
+            onTrigger: (row) => openDetail(row.id),
+          },
+        ]}
+        rowActionMode="inline"
+        emptyState={<Text variant="small">{t("audit.log.empty")}</Text>}
+      />
 
-      <div className="flex gap-2">
+      <div className="flex gap-2 px-6 pb-6">
         {before !== undefined && (
           <Button
             type="button"
@@ -225,10 +223,29 @@ export function AuditLogScreen(): ReactNode {
           </Button>
         )}
       </div>
-    </FormScreenShell>
+    </div>
   );
 }
 
+// Client-sort over the loaded page (≤50 rows). createdAt is an ISO string, so
+// lexicographic compare is chronological. Cross-page order stays cursor-based.
+const SORT_ACCESSORS: Record<string, (r: AuditRow) => string> = {
+  when: (r) => r.createdAt,
+  type: (r) => r.type,
+};
+
+function sortAudit(rows: readonly AuditRow[], sort: DataTableSort | null): readonly AuditRow[] {
+  if (sort === null) return rows;
+  const accessor = SORT_ACCESSORS[sort.field];
+  if (accessor === undefined) return rows;
+  const factor = sort.dir === "asc" ? 1 : -1;
+  return [...rows].sort((a, b) => {
+    const av = accessor(a);
+    const bv = accessor(b);
+    return av < bv ? -factor : av > bv ? factor : 0;
+  });
+}
+
 function formatWhen(value: string): string {
   try {
     return new Date(value).toLocaleString();

package/src/audit/web/client-plugin.tsx

@@ -1,7 +1,8 @@
 // @runtime client
 import { mergeTranslations, type TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
 import type { ClientFeatureDefinition } from "@cosmicdrift/kumiko-renderer-web";
-import { AUDIT_FEATURE, AUDIT_LOG_SCREEN_ID } from "../constants";
+import { AUDIT_FEATURE, AUDIT_LOG_DETAIL_SCREEN_ID, AUDIT_LOG_SCREEN_ID } from "../constants";
+import { AuditLogDetailScreen } from "./audit-log-detail-screen";
 import { AuditLogScreen } from "./audit-log-screen";
 import { defaultTranslations } from "./i18n";
 
@@ -15,6 +16,7 @@ export function auditClient(options?: AuditClientOptions): ClientFeatureDefiniti
     translations: mergeTranslations(defaultTranslations, options?.translations ?? {}),
     components: {
       [AUDIT_LOG_SCREEN_ID]: AuditLogScreen,
+      [AUDIT_LOG_DETAIL_SCREEN_ID]: AuditLogDetailScreen,
     },
   };
 }

package/src/audit/web/index.ts

@@ -1,4 +1,5 @@
 // @runtime client
 
+export { AuditLogDetailScreen } from "./audit-log-detail-screen";
 export { AuditLogScreen } from "./audit-log-screen";
 export { type AuditClientOptions, auditClient } from "./client-plugin";

package/src/jobs/feature.ts

@@ -198,6 +198,7 @@ export function createJobsFeature(): FeatureDefinition {
       id: JOB_RUN_DETAIL_SCREEN_ID,
       type: "custom",
       renderer: { react: { __component: "JobRunDetailScreen" } },
+      listScreenId: JOB_RUNS_SCREEN_ID,
       access: systemAdminAccess,
     });
     r.nav({

package/src/jobs/i18n.ts

@@ -21,13 +21,14 @@ export const JOBS_I18N: Readonly<Record<string, LocalizedString>> = {
   "jobs.runs.col.status": { de: "Status", en: "Status" },
   "jobs.runs.col.started": { de: "Gestartet", en: "Started" },
   "jobs.runs.col.duration": { de: "Dauer (ms)", en: "Duration (ms)" },
-  "jobs.detail.title": { de: "Job-Lauf", en: "Job run" },
   "jobs.detail.loading": { de: "Lade Details…", en: "Loading details…" },
   "jobs.detail.missing": { de: "Lauf nicht gefunden.", en: "Run not found." },
-  "jobs.detail.back": { de: "← Zurück zur Liste", en: "← Back to list" },
   "jobs.detail.field.job": { de: "Job", en: "Job" },
   "jobs.detail.field.status": { de: "Status", en: "Status" },
   "jobs.detail.field.id": { de: "Run-ID", en: "Run ID" },
+  "jobs.detail.field.started": { de: "Gestartet", en: "Started" },
+  "jobs.detail.field.finished": { de: "Beendet", en: "Finished" },
+  "jobs.detail.field.duration": { de: "Dauer (ms)", en: "Duration (ms)" },
   "jobs.detail.field.error": { de: "Fehler", en: "Error" },
   "jobs.detail.logs": { de: "Logs", en: "Logs" },
   "jobs.detail.logs.empty": { de: "Keine Log-Zeilen.", en: "No log lines." },

package/src/jobs/web/job-run-detail-screen.tsx

@@ -31,7 +31,7 @@ type State =
 
 export function JobRunDetailScreen(): ReactNode {
   const t = useTranslation();
-  const { Banner, Button, Card, Heading, Text } = usePrimitives();
+  const { Banner, Button, Card, Text } = usePrimitives();
   const dispatcher = useDispatcher();
   const nav = useNav();
   const runId = nav.route?.entityId;
@@ -102,23 +102,28 @@ export function JobRunDetailScreen(): ReactNode {
 
   return (
     <FormScreenShell testId="job-run-detail-screen" className="flex flex-col gap-6">
-      <Button
-        type="button"
-        variant="secondary"
-        onClick={() => nav.navigate({ screenId: JOB_RUNS_SCREEN_ID })}
-        testId="job-run-back"
-      >
-        {t("jobs.detail.back")}
-      </Button>
-
-      <Heading variant="page">{t("jobs.detail.title")}</Heading>
-
       <Card slots={{ title: run.jobName }}>
         <dl className="grid gap-3 text-sm">
           <div>
             <dt className="font-medium">{t("jobs.detail.field.status")}</dt>
             <dd data-testid="job-run-status">{run.status}</dd>
           </div>
+          <div>
+            <dt className="font-medium">{t("jobs.detail.field.started")}</dt>
+            <dd data-testid="job-run-started">{formatWhen(run.startedAt)}</dd>
+          </div>
+          {run.finishedAt !== undefined && run.finishedAt !== null && (
+            <div>
+              <dt className="font-medium">{t("jobs.detail.field.finished")}</dt>
+              <dd data-testid="job-run-finished">{formatWhen(run.finishedAt)}</dd>
+            </div>
+          )}
+          {run.duration !== undefined && run.duration !== null && (
+            <div>
+              <dt className="font-medium">{t("jobs.detail.field.duration")}</dt>
+              <dd data-testid="job-run-duration">{run.duration}</dd>
+            </div>
+          )}
           <div>
             <dt className="font-medium">{t("jobs.detail.field.id")}</dt>
             <dd>
@@ -167,3 +172,11 @@ export function JobRunDetailScreen(): ReactNode {
     </FormScreenShell>
   );
 }
+
+function formatWhen(value: string): string {
+  try {
+    return new Date(value).toLocaleString();
+  } catch {
+    return value;
+  }
+}

package/src/jobs/web/job-runs-screen.tsx

@@ -1,8 +1,13 @@
 // @runtime client
 // SystemAdmin job-run list with link to detail screen.
 
-import { useDispatcher, useNav, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
-import { FormScreenShell } from "@cosmicdrift/kumiko-renderer-web";
+import {
+  type DataTableSort,
+  useDispatcher,
+  useNav,
+  usePrimitives,
+  useTranslation,
+} from "@cosmicdrift/kumiko-renderer";
 import { type ReactNode, useCallback, useEffect, useState } from "react";
 import { JOB_RUN_DETAIL_SCREEN_ID, JobQueries } from "../constants";
 
@@ -33,11 +38,12 @@ const STATUS_FILTER_OPTIONS = [
 
 export function JobRunsScreen(): ReactNode {
   const t = useTranslation();
-  const { Banner, Card, DataTable, Field, Heading, Input, Text } = usePrimitives();
+  const { Banner, DataTable, Field, Input, Text } = usePrimitives();
   const dispatcher = useDispatcher();
   const nav = useNav();
   const [state, setState] = useState<State>({ kind: "loading" });
   const [statusFilter, setStatusFilter] = useState("");
+  const [sort, setSort] = useState<DataTableSort | null>(null);
 
   const filterOptions = STATUS_FILTER_OPTIONS.map((opt) => ({
     value: opt.value,
@@ -65,80 +71,90 @@ export function JobRunsScreen(): ReactNode {
 
   if (state.kind === "loading") {
     return (
-      <FormScreenShell testId="job-runs-screen">
+      <div className="p-6" data-testid="job-runs-screen">
         <Text variant="small">{t("jobs.runs.loading")}</Text>
-      </FormScreenShell>
+      </div>
     );
   }
 
   if (state.kind === "error") {
     return (
-      <FormScreenShell testId="job-runs-screen">
+      <div className="p-6" data-testid="job-runs-screen">
         <Banner variant="error">{state.message}</Banner>
-      </FormScreenShell>
+      </div>
     );
   }
 
+  const openDetail = (id: string): void =>
+    nav.navigate({ screenId: JOB_RUN_DETAIL_SCREEN_ID, entityId: id });
+
   return (
-    <FormScreenShell testId="job-runs-screen" className="flex max-w-5xl flex-col gap-6">
-      <Heading variant="page">{t("jobs.runs.title")}</Heading>
-
-      <Field id="job-runs-status-filter" label={t("jobs.runs.filter.status")}>
-        <Input
-          kind="select"
-          id="job-runs-status-filter"
-          name="job-runs-status-filter"
-          value={statusFilter}
-          onChange={setStatusFilter}
-          options={filterOptions}
-        />
-      </Field>
-
-      <Card options={{ padded: false }}>
-        <DataTable
-          testId="job-runs-table"
-          columns={[
-            { field: "job", label: t("jobs.runs.col.job"), type: "string", sortable: true },
-            { field: "status", label: t("jobs.runs.col.status"), type: "string", sortable: true },
-            {
-              field: "started",
-              label: t("jobs.runs.col.started"),
-              type: "string",
-              sortable: true,
-            },
-            {
-              field: "duration",
-              label: t("jobs.runs.col.duration"),
-              type: "string",
-              sortable: false,
-            },
-          ]}
-          rows={state.rows.map((row) => ({
-            id: row.id,
-            values: {
-              job: row.jobName,
-              status: row.status,
-              started: formatWhen(row.startedAt),
-              duration: row.duration ?? "—",
-            },
-          }))}
-          rowActions={[
-            {
-              id: "open",
-              label: t("jobs.runs.open"),
-              style: "secondary",
-              onTrigger: (row) =>
-                nav.navigate({ screenId: JOB_RUN_DETAIL_SCREEN_ID, entityId: row.id }),
-            },
-          ]}
-          rowActionMode="inline"
-          emptyState={<Text variant="small">{t("jobs.runs.empty")}</Text>}
-        />
-      </Card>
-    </FormScreenShell>
+    <DataTable
+      testId="job-runs-table"
+      columns={[
+        { field: "job", label: t("jobs.runs.col.job"), type: "string", sortable: true },
+        { field: "status", label: t("jobs.runs.col.status"), type: "string", sortable: true },
+        { field: "started", label: t("jobs.runs.col.started"), type: "string", sortable: true },
+        { field: "duration", label: t("jobs.runs.col.duration"), type: "string", sortable: false },
+      ]}
+      sort={sort}
+      onSortChange={setSort}
+      rows={sortJobRuns(state.rows, sort).map((row) => ({
+        id: row.id,
+        values: {
+          job: row.jobName,
+          status: row.status,
+          started: formatWhen(row.startedAt),
+          duration: row.duration ?? "—",
+        },
+      }))}
+      onRowClick={(row) => openDetail(row.id)}
+      toolbarStart={
+        <Field id="job-runs-status-filter" label={t("jobs.runs.filter.status")}>
+          <Input
+            kind="select"
+            id="job-runs-status-filter"
+            name="job-runs-status-filter"
+            value={statusFilter}
+            onChange={setStatusFilter}
+            options={filterOptions}
+          />
+        </Field>
+      }
+      rowActions={[
+        {
+          id: "open",
+          label: t("jobs.runs.open"),
+          style: "secondary",
+          onTrigger: (row) => openDetail(row.id),
+        },
+      ]}
+      rowActionMode="inline"
+      emptyState={<Text variant="small">{t("jobs.runs.empty")}</Text>}
+    />
   );
 }
 
+// Client-sort over the loaded page (≤50 rows). startedAt is an ISO string, so
+// lexicographic compare is chronological — no Date parsing needed.
+const SORT_ACCESSORS: Record<string, (r: JobRunRow) => string | number> = {
+  job: (r) => r.jobName,
+  status: (r) => r.status,
+  started: (r) => r.startedAt,
+};
+
+function sortJobRuns(rows: readonly JobRunRow[], sort: DataTableSort | null): readonly JobRunRow[] {
+  if (sort === null) return rows;
+  const accessor = SORT_ACCESSORS[sort.field];
+  if (accessor === undefined) return rows;
+  const factor = sort.dir === "asc" ? 1 : -1;
+  return [...rows].sort((a, b) => {
+    const av = accessor(a);
+    const bv = accessor(b);
+    return av < bv ? -factor : av > bv ? factor : 0;
+  });
+}
+
 function formatWhen(value: string): string {
   try {
     return new Date(value).toLocaleString();

package/src/text-content/web/__tests__/group-blocks.test.ts

@@ -190,6 +190,31 @@ describe("groupBlocksByFolder", () => {
     expect(folder?.icon).toBe("folder");
     expect(folder?.target).toBeUndefined();
   });
+  test("tenantIdOverride wird in die Edit-Target-Args gereicht (SystemAdmin SYSTEM-Tenant-Content)", () => {
+    const nodes = inside(
+      groupBlocksByFolder(
+        [block({ slug: "imprint", folder: null }), block({ slug: "hero", folder: "page" })],
+        "00000000-0000-4000-8000-000000000000",
+      ),
+    );
+    // Root-Leaf trägt den Override.
+    expect(nodes[0]?.target?.args).toEqual({
+      slug: "imprint",
+      lang: "de",
+      tenantIdOverride: "00000000-0000-4000-8000-000000000000",
+    });
+    // Auch der Leaf im Folder (rekursiv durchgereicht).
+    const folderChild = childrenArray(nodes[1]?.children)[0];
+    expect(folderChild?.target?.args).toEqual({
+      slug: "hero",
+      lang: "de",
+      tenantIdOverride: "00000000-0000-4000-8000-000000000000",
+    });
+  });
+  test("ohne tenantIdOverride bleiben die Args frei davon (Default: Session-Tenant)", () => {
+    const nodes = inside(groupBlocksByFolder([block({ slug: "imprint", folder: null })]));
+    expect(nodes[0]?.target?.args).toEqual({ slug: "imprint", lang: "de" });
+  });
   test("Wrapper-Folder 'Content' umschließt alle blocks", () => {
     // V.1.5d Wrapper-Convention: groupBlocksByFolder gibt EINEN Knoten
     // zurück (den Wrapper), Inhalt liegt eine Ebene tiefer.

package/src/text-content/web/client-plugin.tsx

@@ -74,13 +74,20 @@ function newFolderNode(): FolderNode {
   return { leaves: [], subFolders: new Map() };
 }
 
-function attachBlock(root: FolderNode, block: BlockSummary): void {
+function attachBlock(root: FolderNode, block: BlockSummary, tenantIdOverride?: string): void {
   const leaf: TreeNode = {
     label: block.title || block.slug,
     target: {
       featureId: "text-content",
       action: "edit",
-      args: { slug: block.slug, lang: block.lang },
+      // tenantIdOverride travels with the node → the editor's by-slug read +
+      // set write target the same tenant the tree was loaded from (SystemAdmin
+      // editing SYSTEM-tenant content). Omitted → session tenant.
+      args: {
+        slug: block.slug,
+        lang: block.lang,
+        ...(tenantIdOverride !== undefined && { tenantIdOverride }),
+      },
     },
     state: block.body ? "filled" : "stub",
   };
@@ -116,10 +123,13 @@ function renderFolderNode(node: FolderNode): TreeNode[] {
   return result;
 }
 
-export function groupBlocksByFolder(blocks: readonly BlockSummary[]): readonly TreeNode[] {
+export function groupBlocksByFolder(
+  blocks: readonly BlockSummary[],
+  tenantIdOverride?: string,
+): readonly TreeNode[] {
   const root = newFolderNode();
   for (const block of blocks) {
-    attachBlock(root, block);
+    attachBlock(root, block, tenantIdOverride);
   }
   const rendered = renderFolderNode(root);
   if (rendered.length === 0) return [];
@@ -133,47 +143,52 @@ export function groupBlocksByFolder(blocks: readonly BlockSummary[]): readonly T
   ];
 }
 
-const treeProvider: TreeChildrenSubscribe = () => (emit, emitError) => {
-  // CSRF-Header bei authenticated requests pflicht (auth-middleware
-  // double-submit pattern). Anonymous/Pre-Login wäre csrf-token=undefined
-  // → header weggelassen → server lässt die anonymous-Variante durch.
-  const headers: Record<string, string> = { "content-type": "application/json" };
-  const csrf = readCsrfToken();
-  if (csrf !== undefined) headers[CSRF_HEADER_NAME] = csrf;
-  fetch("/api/query", {
-    method: "POST",
-    headers,
-    body: JSON.stringify({
-      type: TextContentQueries.byTenant,
-      payload: {},
-    }),
-  })
-    .then(async (r) => {
-      if (!r.ok) {
-        // 403 (CSRF/auth) oder 5xx — explicit error statt silent empty.
-        const text = await r.text().catch(() => r.statusText);
-        throw new Error(`text-content load failed: ${r.status} ${text}`);
-      }
-      return r.json();
-    })
-    .then((data: ByTenantResponse) => {
-      // Der App-seitige r.nav-Knoten IST der "Content"-Container → die
-      // Provider-Kinder sind die Folder/Leaves darunter, nicht der Wrapper.
-      const content = groupBlocksByFolder(data.data.blocks)[0];
-      emit(content !== undefined && Array.isArray(content.children) ? content.children : []);
+// tenantIdOverride (SystemAdmin-only) lets an app point the Content tree at a
+// tenant other than the session's — publicstatus seeds marketing/legal blocks
+// on SYSTEM_TENANT_ID, so its SystemAdmin must read that tenant, not their own.
+function makeTreeProvider(tenantIdOverride?: string): TreeChildrenSubscribe {
+  return () => (emit, emitError) => {
+    // CSRF-Header bei authenticated requests pflicht (auth-middleware
+    // double-submit pattern). Anonymous/Pre-Login wäre csrf-token=undefined
+    // → header weggelassen → server lässt die anonymous-Variante durch.
+    const headers: Record<string, string> = { "content-type": "application/json" };
+    const csrf = readCsrfToken();
+    if (csrf !== undefined) headers[CSRF_HEADER_NAME] = csrf;
+    fetch("/api/query", {
+      method: "POST",
+      headers,
+      body: JSON.stringify({
+        type: TextContentQueries.byTenant,
+        payload: tenantIdOverride !== undefined ? { tenantIdOverride } : {},
+      }),
     })
-    .catch((e) => {
-      // V.1.4: explicit error-Signal via emitError. ProviderBranch zeigt
-      // Banner + Retry-Button. Fallback auf emit([]) wenn der Consumer
-      // kein emitError unterstützt (Tests etc.).
-      if (emitError) {
-        emitError(e instanceof Error ? e : new Error(String(e)));
-      } else {
-        emit([]);
-      }
-    });
-  return () => {};
-};
+      .then(async (r) => {
+        if (!r.ok) {
+          // 403 (CSRF/auth) oder 5xx — explicit error statt silent empty.
+          const text = await r.text().catch(() => r.statusText);
+          throw new Error(`text-content load failed: ${r.status} ${text}`);
+        }
+        return r.json();
+      })
+      .then((data: ByTenantResponse) => {
+        // Der App-seitige r.nav-Knoten IST der "Content"-Container → die
+        // Provider-Kinder sind die Folder/Leaves darunter, nicht der Wrapper.
+        const content = groupBlocksByFolder(data.data.blocks, tenantIdOverride)[0];
+        emit(content !== undefined && Array.isArray(content.children) ? content.children : []);
+      })
+      .catch((e) => {
+        // V.1.4: explicit error-Signal via emitError. ProviderBranch zeigt
+        // Banner + Retry-Button. Fallback auf emit([]) wenn der Consumer
+        // kein emitError unterstützt (Tests etc.).
+        if (emitError) {
+          emitError(e instanceof Error ? e : new Error(String(e)));
+        } else {
+          emit([]);
+        }
+      });
+    return () => {};
+  };
+}
 
 // V.1.3 echte Edit-Form: lädt aktuelle Werte via by-slug-query, lässt
 // TenantAdmin/SystemAdmin title + body editieren, dispatcht set-write
@@ -213,9 +228,12 @@ function TextContentEditor({
   // zu Event-Payloads. Optional-Chain absorbiert fehlende Felder ohne
   // throw, damit der Editor auch bei manuellem URL-Tampering nicht
   // crasht (TargetRef könnte aus old localStorage / URL-State stammen).
-  const args = target.args as { slug?: string; lang?: string } | undefined;
+  const args = target.args as
+    | { slug?: string; lang?: string; tenantIdOverride?: string }
+    | undefined;
   const slug = args?.slug ?? "";
   const lang = args?.lang ?? "";
+  const tenantIdOverride = args?.tenantIdOverride;
 
   const { Form, Field, Input, Button, Banner } = usePrimitives();
   const dispatcher = useDispatcher();
@@ -232,7 +250,7 @@ function TextContentEditor({
     error: loadError,
   } = useQuery<TextBlock | null>(
     TextContentQueries.bySlug,
-    { slug, lang },
+    { slug, lang, ...(tenantIdOverride !== undefined && { tenantIdOverride }) },
     { enabled: slug !== "" && lang !== "" },
   );
 
@@ -266,6 +284,7 @@ function TextContentEditor({
         lang,
         title,
         body: body.length > 0 ? body : null,
+        ...(tenantIdOverride !== undefined && { tenantIdOverride }),
       });
       if (result.isSuccess) {
         setSavedMsg(result.data.isNew ? "Neu angelegt." : "Gespeichert.");
@@ -353,12 +372,18 @@ function TextContentEditor({
 // Label/Icon/Access des Knotens (managed-pages-Konvention) — das Feature
 // liefert nur die Kinder + den Editor. Ohne navId: nur der Resolver, kein
 // Sidebar-Knoten (server-only-Consumer wie money-horse leaken nichts).
-export function textContentClient(opts?: { readonly navId?: string }): ClientFeatureDefinition {
+// `tenantId` (SystemAdmin-only): welchen Tenant der Content-Tree + Editor
+// bedienen — SYSTEM_TENANT_ID für Apps, die Marketing/Legal dort seeden.
+// Weglassen → Session-Tenant (Default; kein Cross-Tenant-Zugriff).
+export function textContentClient(opts?: {
+  readonly navId?: string;
+  readonly tenantId?: string;
+}): ClientFeatureDefinition {
   const navId = opts?.navId;
   return {
     name: "text-content",
     ...(navId !== undefined && {
-      navProviders: { [navId]: treeProvider },
+      navProviders: { [navId]: makeTreeProvider(opts?.tenantId) },
       // SSE-Refresh: jedes text-block-Event re-fired den Provider → Tree live.
       navEntities: { [navId]: ["text-block"] },
     }),

package/src/tier-engine/web/tier-admin-screen.tsx

@@ -93,8 +93,6 @@ export function TierAdminScreen(): ReactNode {
 
   return (
     <FormScreenShell testId="tier-admin-screen" className="flex flex-col gap-6">
-      <Text variant="small">{t("tier-admin.explainer")}</Text>
-
       {tenantsQuery.error !== null && (
         <Banner variant="error" testId="tier-admin-load-error">
           {t("tier-admin.error.load")}
@@ -123,6 +121,8 @@ export function TierAdminScreen(): ReactNode {
           </Button>
         }
       >
+        <Text variant="small">{t("tier-admin.explainer")}</Text>
+
         <Field id="tier-admin-tenant" label={t("tier-admin.tenant.label")} required>
           <Input
             kind="select"

package/src/user-data-rights/feature.ts

@@ -267,12 +267,7 @@ export function createUserDataRightsFeature(opts: UserDataRightsOptions = {}): F
       access: { roles: ["SystemAdmin"] },
     });
 
-    r.translations({
-      keys: {
-        ...USER_DATA_RIGHTS_I18N,
-        "user-data-rights:nav.exportJobs": { de: "DSGVO-Exporte", en: "GDPR exports" },
-      },
-    });
+    r.translations({ keys: USER_DATA_RIGHTS_I18N });
 
     // Dormant Self-Service-Screen (Art. 15/17/18/20): Export, Aktivitäts-
     // protokoll, Einschränkung, Löschung in einem Screen. Kein r.nav — die

package/src/user-data-rights/i18n.ts

@@ -1,6 +1,10 @@
+// @runtime client
+// Server + client i18n for user-data-rights (operator screens + nav). Pure
+// data, importable from the web bundle (web/i18n.ts derives the client keys).
 type LocalizedString = { readonly de: string; readonly en: string };
 
 export const USER_DATA_RIGHTS_I18N: Readonly<Record<string, LocalizedString>> = {
+  "user-data-rights:nav.exportJobs": { de: "DSGVO-Exporte", en: "GDPR exports" },
   "screen:export-job-list.title": { de: "DSGVO-Exporte", en: "GDPR exports" },
   "screen:export-job-detail.title": { de: "Export-Job", en: "Export job" },
   "screen:download-attempt-list.title": { de: "Download-Versuche", en: "Download attempts" },

package/src/user-data-rights/web/i18n.ts

@@ -5,8 +5,24 @@
 // deletion.<step>.<slug>`.
 
 import type { TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
+import { USER_DATA_RIGHTS_I18N } from "../i18n";
 
-export const defaultTranslations: TranslationsByLocale = {
+const LOCALES = ["de", "en"] as const;
+
+// Operator keys (export-job list/detail titles + entity field labels + nav)
+// live in the server i18n; the SystemAdmin entityList screens render them
+// client-side, so the web bundle must carry them too — otherwise raw keys
+// show. Derive from the single server source instead of duplicating.
+const operatorTranslations: TranslationsByLocale = Object.fromEntries(
+  LOCALES.map((locale) => [
+    locale,
+    Object.fromEntries(
+      Object.entries(USER_DATA_RIGHTS_I18N).map(([key, value]) => [key, value[locale]]),
+    ),
+  ]),
+);
+
+const apexTranslations: TranslationsByLocale = {
   de: {
     "userDataRights.deletion.request.title": "Account-Löschung beantragen",
     "userDataRights.deletion.request.intro":
@@ -152,3 +168,8 @@ export const defaultTranslations: TranslationsByLocale = {
       "The download is currently unavailable due to a server configuration issue. The operator has been notified.",
   },
 };
+
+export const defaultTranslations: TranslationsByLocale = {
+  de: { ...apexTranslations["de"], ...operatorTranslations["de"] },
+  en: { ...apexTranslations["en"], ...operatorTranslations["en"] },
+};