@scalio-cloud/ui 0.27.1 → 0.29.0

package/README.md

@@ -325,6 +325,55 @@ const reset = factoryResetApi(api);   // once, outside the component
 `SettingsField` (label, field, help) and `SettingsRow` (title and help left, a switch or button right; `tone="danger"`)
 keep the fields inside a `SettingsSection` the same in every app.
 
+## Benachrichtigungen: E-Mail-Versand und E-Mail-Vorlagen (React)
+
+Since 0.29.0 (ADR 0069 W5) every app sends mail the same way. The server side is scalio-platform 0.8.0 `mail`
+(`Mailer.router`, mounted at `/api/mail`). Both blocks go into the settings group «Benachrichtigungen».
+
+```jsx
+import { MailTransport, MailTemplates, mailApi } from "@scalio-cloud/ui/react";
+import { RichTextEditor } from "@/components/RichTextEditor";   // optional, the app's own editor (Compass: react-quill-new)
+
+const mail = mailApi(api);   // once, outside the component; mailApi(api, "/admin/mail") for another prefix
+<MailTransport client={mail} lang={lang} notify={toast} graphHint={t("...Mail.Send and Mail.ReadWrite...")}>
+  <InboxSettings />           {/* optional blocks after «Testmail» */}
+</MailTransport>
+<MailTemplates client={mail} lang={lang} editor={RichTextEditor} />
+```
+
+`MailTransport` shows three blocks: «E-Mail-Versand» (off, SMTP or Microsoft 365, sender, language; secrets come back
+as a mask and the mask is sent back unchanged), «Testmail» (empty recipient: to me) and «Letzte Mails» (`outbox={false}`
+hides it). On a test instance the backend answers `test_mailbox: true` and the server fields are locked.
+`MailTemplates` picks mail and language, offers the placeholders as buttons, shows the preview of the real rendering
+in a sandboxed frame, and saves, tests («Test an mich») or resets to the built-in text. A switchable mail gets the
+checkbox «Diese Mail senden». The `editor` gets `{value, onChange, testId}`; without it a text field is used, so this
+package keeps no dependencies. With an editor, plain built-in texts are passed as paragraphs (`textToHtml`).
+
+## Protokoll: Aktionen und Jobs (React)
+
+One menu item «Protokoll» with two tabs like Nexus (scalio-docs ADR 0070). The server side is scalio-platform
+`audit_router` and `jobs_router` (0.7.0).
+
+```jsx
+import { AuditNav, AuditLog, JobsPanel, auditApi, jobsApi } from "@scalio-cloud/ui/react";
+
+const audit = auditApi(api);   // GET /audit, /audit/export.csv
+const jobs = jobsApi(api);     // GET /jobs, /jobs/runs, /jobs/queue, POST /jobs/{key}/run, queue actions
+
+<PageHeader title={L.auditLog} nav={<AuditNav link={NavLink} lang={lang} />} />
+<AuditLog client={audit} lang={lang} notify={toast} actionLabel={(a, lang) => ACTIONS[lang][a]} tenantLabel="Kunde" />
+<JobsPanel client={jobs} lang={lang} notify={toast} canRun={can("jobs.run")} link={Link} confirm={confirm} />
+```
+
+- `AuditLog`: note «unveränderlich», chips with counts (categories from the server), search, filters for action,
+  status, tenant and time range, sortable columns, column picker (person, tenant, IP), CSV with the same filters,
+  «Ältere laden» (cursor), view with «alt → neu», cards on phones. Extras: `toolbar`, `rowActions(entry)`,
+  `renderDetail(entry)` (Nexus KI, Citadel PDF, Nexus steps).
+- `JobsPanel`: tabs Warteschlange (only when the app has one), Läufe (filter by job and status) and Hintergrundjobs
+  (schedule, last run, last result, «Jetzt ausführen» with `canRun`); reloads every 15 seconds (`pollMs`). Extras:
+  `queueActions(item, reload)`, `renderQueueDetail(item, reload)`.
+- `AuditNav`: the tabs `/audit` and `/jobs` (`base` for another prefix, `jobs={false}` hides Jobs).
+
 ## Command palette (React)
 
 Reads the same navigation data as the sidebar. Put it once into the layout; the sidebar search button opens it.

package/nav.css

@@ -686,3 +686,94 @@
 .dark .scalio-selftest .is-ok, .dark .scalio-selftest li.is-ok .scalio-selftest-status { color: #4ade80; }
 .dark .scalio-selftest .is-warn, .dark .scalio-selftest li.is-warn .scalio-selftest-status { color: #fbbf24; }
 @media (max-width: 640px) { .scalio-selftest-run-head .scalio-btn { margin-left: 0; } }
+
+/* Protokoll: Aktionen und Jobs (ADR 0070, react/audit.js) */
+.scalio-audit, .scalio-jobs { display: flex; flex-direction: column; gap: 1rem; font-size: 0.875rem; }
+.scalio-audit-note { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; border: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.5); color: hsl(var(--muted-foreground)); font-size: 0.75rem; border-radius: 2px; }
+.scalio-audit-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.scalio-audit-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem; border: 1px solid hsl(var(--border)); border-radius: 999px; background: hsl(var(--card)); color: hsl(var(--muted-foreground)); font-size: 0.75rem; font-weight: 600; cursor: pointer; }
+.scalio-audit-chip:hover { border-color: hsl(var(--primary) / 0.5); background: hsl(var(--primary) / 0.05); }
+.scalio-audit-chip.is-active { border-color: hsl(var(--primary)); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
+.scalio-audit-chip-count { font-family: 'JetBrains Mono', monospace; font-size: 0.625rem; opacity: 0.7; }
+.scalio-audit-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; }
+.scalio-audit-toolbar select.scalio-input { width: auto; max-width: 14rem; }
+.scalio-audit-search { position: relative; flex: 1 1 14rem; max-width: 20rem; display: flex; align-items: center; }
+.scalio-audit-search .scalio-icon { position: absolute; left: 0.625rem; color: hsl(var(--muted-foreground)); }
+.scalio-audit-search .scalio-input { width: 100%; padding-left: 2rem; }
+.scalio-audit-date { display: flex; flex-direction: column; gap: 0.125rem; }
+.scalio-audit-date span { color: hsl(var(--muted-foreground)); font-size: 0.6875rem; }
+.scalio-audit-tools { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+.scalio-audit-count, .scalio-audit-mono { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; }
+.scalio-audit-count { color: hsl(var(--muted-foreground)); }
+.scalio-audit-mono { white-space: nowrap; }
+.scalio-audit-cols { position: relative; }
+.scalio-audit-cols-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: flex; flex-direction: column; gap: 0.375rem; min-width: 10rem; padding: 0.625rem 0.75rem; border: 1px solid hsl(var(--border)); background: hsl(var(--popover, var(--card))); border-radius: 2px; box-shadow: 0 6px 18px rgb(0 0 0 / 0.08); }
+.scalio-audit-cols-menu label { display: flex; align-items: center; gap: 0.5rem; }
+.scalio-audit-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
+.scalio-audit-action { font-weight: 600; color: hsl(var(--foreground)); }
+.scalio-audit-sub { margin-top: 0.125rem; color: hsl(var(--muted-foreground)); font-size: 0.75rem; overflow-wrap: anywhere; }
+.scalio-audit-table tr.is-error td:first-child { box-shadow: inset 3px 0 0 hsl(var(--destructive)); }
+.scalio-audit-row-actions { text-align: right; white-space: nowrap; }
+.scalio-audit-row-actions .scalio-btn { margin-left: 0.25rem; }
+.scalio-audit-empty { padding: 2.5rem 1rem; text-align: center; color: hsl(var(--muted-foreground)); }
+.scalio-audit-more { display: flex; justify-content: center; }
+.scalio-audit-cards { display: none; flex-direction: column; gap: 0.75rem; }
+.scalio-audit-card { padding: 1rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); border-radius: 2px; }
+.scalio-audit-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; color: hsl(var(--muted-foreground)); font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; }
+.scalio-audit-card .scalio-audit-row-actions { margin-top: 0.5rem; text-align: left; border-top: 1px solid hsl(var(--border)); padding-top: 0.5rem; }
+@media (max-width: 767px) {
+  .scalio-audit-table-wrap { display: none; }
+  .scalio-audit-cards { display: flex; }
+  .scalio-audit-tools { margin-left: 0; }
+}
+.scalio-audit-dialog { max-width: 42rem; }
+.scalio-audit-dl { display: grid; grid-template-columns: 8rem 1fr; gap: 0.375rem 0.75rem; margin: 0; font-size: 0.8125rem; }
+.scalio-audit-dl dt { color: hsl(var(--muted-foreground)); }
+.scalio-audit-dl dd { margin: 0; overflow-wrap: anywhere; }
+.scalio-audit-changes { margin-top: 1rem; border: 1px solid hsl(var(--border)); border-radius: 2px; }
+.scalio-audit-changes-title { padding: 0.375rem 0.75rem; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.5); color: hsl(var(--muted-foreground)); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
+.scalio-audit-change { display: grid; grid-template-columns: 8rem auto auto 1fr; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; border-top: 1px solid hsl(var(--border)); }
+.scalio-audit-change:first-of-type { border-top: 0; }
+.scalio-audit-field { font-weight: 600; }
+.scalio-audit-old { font-family: 'JetBrains Mono', monospace; color: hsl(var(--muted-foreground)); text-decoration: line-through; }
+.scalio-audit-new { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: #15803d; }
+.dark .scalio-audit-new { color: #4ade80; }
+.scalio-jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1px; background: hsl(var(--border)); border: 1px solid hsl(var(--border)); }
+.scalio-jobs-card { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem; background: hsl(var(--card)); }
+.scalio-jobs-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
+.scalio-jobs-name { font-family: 'Chivo', sans-serif; font-weight: 700; }
+.scalio-jobs-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }
+.scalio-jobs-steps { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; }
+.scalio-jobs-steps li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+
+/* E-Mail-Versand and E-Mail-Vorlagen (ADR 0069 W5, react/mail.js) */
+.scalio-mail-providers { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; border: 0; }
+.scalio-mail-providers legend { width: 100%; margin-bottom: 0.5rem; }
+.scalio-mail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
+.scalio-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+.scalio-mail-test { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
+.scalio-mail-test .scalio-input { flex: 1 1 15rem; width: auto; }
+.scalio-mail-outbox { overflow-x: auto; }
+.scalio-mail-outbox table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
+.scalio-mail-outbox td { padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid hsl(var(--border)); vertical-align: top; }
+.scalio-mail-outbox tr:last-child td { border-bottom: 0; }
+.scalio-mail-time { white-space: nowrap; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
+.scalio-mail-state { text-align: right; padding-right: 0 !important; }
+.scalio-settings-help.is-error { color: hsl(var(--destructive)); }
+.scalio-mail-tokens { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.375rem; }
+.scalio-mail-token {
+  padding: 0.125rem 0.5rem; border: 1px solid hsl(var(--primary) / 0.25); border-radius: 2px; background: hsl(var(--primary) / 0.06);
+  color: hsl(var(--primary)); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; cursor: pointer;
+}
+.scalio-mail-token:hover { background: hsl(var(--primary) / 0.12); }
+.scalio-mail-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: -0.5rem; }
+.scalio-mail-editor { display: grid; grid-template-columns: 1fr; gap: 1rem; }
+.scalio-mail-editor.has-preview { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
+.scalio-mail-editor-pane { min-width: 0; }
+.scalio-mail-body { width: 100%; min-height: 20rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; }
+.scalio-mail-preview { display: flex; flex-direction: column; min-height: 20rem; border: 1px solid hsl(var(--border)); border-radius: 2px; overflow: hidden; }
+.scalio-mail-preview-head { display: flex; justify-content: space-between; padding: 0.5rem 0.75rem; border-bottom: 1px solid hsl(var(--border)); font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
+.scalio-mail-preview-head strong { text-transform: uppercase; letter-spacing: 0.05em; }
+.scalio-mail-preview-subject { padding: 0.5rem 0.75rem; border-bottom: 1px solid hsl(var(--border)); font-size: 0.875rem; }
+.scalio-mail-preview-subject span { font-weight: 600; }
+.scalio-mail-preview iframe { flex: 1; width: 100%; min-height: 16rem; border: 0; background: #fff; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.27.1",
+  "version": "0.29.0",
   "description": "Scalio Control Room design tokens, Tailwind preset, self-hosted fonts, the shared app header, sign-in layout, sidebar and page blocks",
   "license": "SEE LICENSE IN README.md",
   "private": false,
@@ -67,8 +67,8 @@
     "node": ">=18"
   },
   "devDependencies": {
-    "jsdom": "25.0.1",
-    "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "jsdom": "30.1.3",
+    "react": "19.3.1",
+    "react-dom": "19.3.1"
   }
 }

package/react/audit.js

@@ -0,0 +1,619 @@
+"use strict";
+// Protokoll in every app like Nexus (scalio-docs ADR 0070, prot/P1-P9): one menu item «Protokoll» with the tabs
+// Aktionen (/audit) and Jobs (/jobs). AuditLog is the tab Aktionen, JobsPanel the tab Jobs, AuditNav the two tabs.
+// auditApi / jobsApi map the routes of scalio-platform `audit_router` and `jobs_router`.
+const React = require("react");
+const h = React.createElement;
+const Icons = require("./icons");
+const { SubNav } = require("./nav");
+
+const LABELS = {
+  de: {
+    tabActions: "Aktionen",
+    tabJobs: "Jobs",
+    actionsTitle: "Protokoll",
+    actionsHint: "Wer hat wann was gemacht. Einträge werden 365 Tage aufbewahrt.",
+    immutable: "Dies ist ein unveränderliches Protokoll: jede Aktion wird erfasst und kann hier weder bearbeitet noch gelöscht werden.",
+    all: "Alle",
+    search: "Suchen nach Person, Objekt, Text…",
+    allActions: "Alle Aktionen",
+    allStatuses: "Alle Status",
+    allTenants: "Alle Tenants",
+    from: "Von",
+    to: "Bis",
+    reset: "Filter zurücksetzen",
+    columns: "Spalten",
+    exportCsv: "CSV",
+    exported: "CSV heruntergeladen.",
+    time: "Zeit",
+    person: "Person",
+    action: "Aktion",
+    object: "Objekt",
+    tenant: "Tenant",
+    status: "Status",
+    ip: "IP",
+    view: "Ansehen",
+    more: "Ältere laden",
+    empty: "Keine passenden Einträge.",
+    system: "System",
+    changes: "Änderungen (alt → neu)",
+    details: "Details",
+    close: "Schliessen",
+    statuses: { ok: "Erfolgreich", error: "Fehler", blocked: "Blockiert", warning: "Warnung", queued: "Wartet", running: "Läuft",
+      waiting: "Wartet", finished: "Fertig", cancelled: "Abgebrochen", done: "Fertig" },
+    jobsTitle: "Jobs",
+    jobsHint: "Hintergrundjobs, ihre Läufe und wartende Arbeit dieser Instanz.",
+    queue: "Warteschlange",
+    runs: "Läufe",
+    background: "Hintergrundjobs",
+    schedule: "Zeitplan",
+    lastRun: "Letzter Lauf",
+    never: "Noch nie gelaufen",
+    runNow: "Jetzt ausführen",
+    requested: "Angefordert",
+    queued: "Angefordert. Der Job startet in wenigen Sekunden.",
+    ranNow: "Job ausgeführt.",
+    job: "Job",
+    trigger: "Auslöser",
+    triggers: { schedule: "Zeitplan", manual: "von Hand" },
+    duration: "Dauer",
+    result: "Ergebnis",
+    allJobs: "Alle Jobs",
+    noRuns: "Noch keine Läufe.",
+    noQueue: "Nichts in der Warteschlange.",
+    type: "Typ",
+    created: "Erstellt",
+    by: "Von",
+    cancel: "Abbrechen",
+    retry: "Erneut versuchen",
+    delete: "Löschen",
+    open: "Öffnen",
+    steps: "Schritte",
+    done: "Erledigt.",
+  },
+  en: {
+    tabActions: "Actions",
+    tabJobs: "Jobs",
+    actionsTitle: "Activity log",
+    actionsHint: "Who did what and when. Entries are kept for 365 days.",
+    immutable: "This is an immutable log: every action is recorded and cannot be edited or deleted here.",
+    all: "All",
+    search: "Search by person, object, text…",
+    allActions: "All actions",
+    allStatuses: "All statuses",
+    allTenants: "All tenants",
+    from: "From",
+    to: "To",
+    reset: "Reset filters",
+    columns: "Columns",
+    exportCsv: "CSV",
+    exported: "CSV downloaded.",
+    time: "Time",
+    person: "Person",
+    action: "Action",
+    object: "Object",
+    tenant: "Tenant",
+    status: "Status",
+    ip: "IP",
+    view: "View",
+    more: "Load older",
+    empty: "No matching entries.",
+    system: "System",
+    changes: "Changes (old → new)",
+    details: "Details",
+    close: "Close",
+    statuses: { ok: "Succeeded", error: "Failed", blocked: "Blocked", warning: "Warning", queued: "Queued", running: "Running",
+      waiting: "Waiting", finished: "Finished", cancelled: "Cancelled", done: "Done" },
+    jobsTitle: "Jobs",
+    jobsHint: "Background jobs, their runs and queued work of this instance.",
+    queue: "Queue",
+    runs: "Runs",
+    background: "Background jobs",
+    schedule: "Schedule",
+    lastRun: "Last run",
+    never: "Never ran",
+    runNow: "Run now",
+    requested: "Requested",
+    queued: "Requested. The job starts within a few seconds.",
+    ranNow: "Job ran.",
+    job: "Job",
+    trigger: "Trigger",
+    triggers: { schedule: "schedule", manual: "by hand" },
+    duration: "Duration",
+    result: "Result",
+    allJobs: "All jobs",
+    noRuns: "No runs yet.",
+    noQueue: "Nothing queued.",
+    type: "Type",
+    created: "Created",
+    by: "By",
+    cancel: "Cancel",
+    retry: "Retry",
+    delete: "Delete",
+    open: "Open",
+    steps: "Steps",
+    done: "Done.",
+  },
+};
+
+function auditLabels(lang, overrides) {
+  return Object.assign({}, LABELS[lang === "en" ? "en" : "de"], overrides || {});
+}
+
+const TONE = { ok: "ok", finished: "ok", done: "ok", error: "error", blocked: "error", warning: "warn", running: "running",
+  queued: "neutral", waiting: "neutral", cancelled: "neutral" };
+
+function cx() {
+  return Array.prototype.slice.call(arguments).filter(Boolean).join(" ");
+}
+
+function errorText(err) {
+  const d = err && err.response && err.response.data && err.response.data.detail;
+  return typeof d === "string" ? d : (err && err.message) || String(err);
+}
+
+function fmtTime(iso, lang) {
+  if (!iso) return "";
+  try {
+    return new Date(iso).toLocaleString(lang === "en" ? "en-GB" : "de-CH", { dateStyle: "short", timeStyle: "medium" });
+  } catch (e) {
+    return iso;
+  }
+}
+
+function fmtDuration(sec) {
+  if (sec === null || sec === undefined) return "";
+  if (sec < 1) return `${Math.round(sec * 1000)} ms`;
+  if (sec < 60) return `${Math.round(sec * 10) / 10} s`;
+  return `${Math.floor(sec / 60)} min ${Math.round(sec % 60)} s`;
+}
+
+function fmtValue(v) {
+  if (v === null || v === undefined || v === "") return "–";
+  return Array.isArray(v) ? v.join(", ") : String(v);
+}
+
+function clean(params) {
+  const out = {};
+  Object.keys(params || {}).forEach((k) => {
+    const v = params[k];
+    if (v !== "" && v !== null && v !== undefined && v !== "all") out[k] = v;
+  });
+  return out;
+}
+
+// api: axios instance with the app's base URL (/api).
+function auditApi(api, base) {
+  const p = base || "/audit";
+  const data = (x) => x.then((r) => r.data);
+  return {
+    list: (params) => data(api.get(p, { params: clean(params) })),
+    exportCsv: (params) => data(api.get(`${p}/export.csv`, { params: clean(params), responseType: "blob" })),
+  };
+}
+
+function jobsApi(api, base) {
+  const p = base || "/jobs";
+  const data = (x) => x.then((r) => r.data);
+  return {
+    list: () => data(api.get(p)),
+    runs: (params) => data(api.get(`${p}/runs`, { params: clean(params) })),
+    run: (key) => data(api.post(`${p}/${encodeURIComponent(key)}/run`)),
+    queue: (params) => data(api.get(`${p}/queue`, { params: clean(params) })),
+    cancel: (id) => data(api.post(`${p}/queue/${encodeURIComponent(id)}/cancel`)),
+    retry: (id) => data(api.post(`${p}/queue/${encodeURIComponent(id)}/retry`)),
+    remove: (id) => data(api.delete(`${p}/queue/${encodeURIComponent(id)}`)),
+  };
+}
+
+// The two tabs under the menu item «Protokoll». Props: link (router NavLink), activePath, lang, labels, jobs
+// (false hides the tab Jobs), base ({audit: "/audit", jobs: "/jobs"}) for apps under another prefix (Compass).
+function AuditNav(props) {
+  const L = auditLabels(props.lang, props.labels);
+  const base = Object.assign({ audit: "/audit", jobs: "/jobs" }, props.base || {});
+  return h(SubNav, {
+    link: props.link, activePath: props.activePath, testId: props.testId || "audit-subnav",
+    items: [
+      { to: base.audit, label: L.tabActions, end: true, testId: "subnav-actions" },
+      { to: base.jobs, label: L.tabJobs, testId: "subnav-jobs", hidden: props.jobs === false },
+    ],
+  });
+}
+
+function Badge({ status, L, testId }) {
+  return h("span", { className: `scalio-badge is-${TONE[status] || "neutral"}`, "data-testid": testId },
+    (L.statuses && L.statuses[status]) || status || "–");
+}
+
+function Dialog({ title, onClose, children, testId, closeLabel }) {
+  React.useEffect(() => {
+    const key = (e) => { if (e.key === "Escape") onClose(); };
+    document.addEventListener("keydown", key);
+    return () => document.removeEventListener("keydown", key);
+  }, [onClose]);
+  return h("div", { className: "scalio-dialog-root" },
+    h("div", { className: "scalio-dialog-backdrop", onClick: onClose }),
+    h("div", { className: "scalio-dialog scalio-audit-dialog", role: "dialog", "aria-modal": "true", "aria-label": title, "data-testid": testId },
+      h("div", { className: "scalio-dialog-head" },
+        h("div", { className: "scalio-dialog-title" }, title),
+        h("button", { type: "button", className: "scalio-btn is-ghost scalio-btn-icon", onClick: onClose, "aria-label": closeLabel || "×", "data-testid": "dialog-close" },
+          h(Icons.X, { className: "scalio-icon" }))),
+      children));
+}
+
+function who(e, L) {
+  const a = e.actor || {};
+  if (a.kind === "system") return a.name || L.system;
+  return a.name || a.email || "–";
+}
+
+function download(blob, name) {
+  if (typeof window === "undefined" || !window.URL || !window.URL.createObjectURL) return;
+  const url = window.URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = name;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  window.URL.revokeObjectURL(url);
+}
+
+const COLS = ["person", "tenant", "ip"];
+
+function loadCols(key) {
+  try {
+    const raw = window.localStorage.getItem(key);
+    return raw ? JSON.parse(raw) : null;
+  } catch (e) {
+    return null;
+  }
+}
+
+// Tab Aktionen. Props: client (auditApi), lang, labels, notify(text, tone), actionLabel(key, lang) for readable
+// action names, categoryLabel (optional), showTenant (default: when the server lists tenants), tenantLabel ("Kunde"),
+// toolbar (extra buttons, e.g. Nexus KI or Citadel PDF), rowActions(entry) (extra buttons per row), renderDetail(entry)
+// (extra content in the view, e.g. Nexus workflow steps), initialCategory, pageSize, storageKey, testId.
+function AuditLog(props) {
+  const { client, notify } = props;
+  const lang = props.lang === "en" ? "en" : "de";
+  const L = auditLabels(lang, props.labels);
+  const say = (text, tone) => (notify ? notify(text, tone || "success") : null);
+  const actionLabel = (a) => (props.actionLabel ? props.actionLabel(a, lang) || a : a);
+  const [filters, setFilters] = React.useState({ category: props.initialCategory || "all", action: "all", status: "all", tenant: "", since: "", until: "" });
+  const [q, setQ] = React.useState("");
+  const [query, setQuery] = React.useState("");
+  const [data, setData] = React.useState(null);
+  const [items, setItems] = React.useState([]);
+  const [error, setError] = React.useState("");
+  const [busy, setBusy] = React.useState(false);
+  const [open, setOpen] = React.useState(null);
+  const [sort, setSort] = React.useState({ key: "ts", dir: -1 });
+  const storageKey = props.storageKey || "scalio-audit-cols";
+  const [cols, setCols] = React.useState(() => Object.assign({ person: true, tenant: true, ip: false }, (typeof window !== "undefined" && loadCols(storageKey)) || {}));
+  const [colsOpen, setColsOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    const t = setTimeout(() => setQuery(q.trim()), 300);
+    return () => clearTimeout(t);
+  }, [q]);
+
+  const params = React.useMemo(() => Object.assign({}, filters, { q: query, limit: props.pageSize || 200 }), [filters, query, props.pageSize]);
+
+  const load = React.useCallback(async () => {
+    try {
+      const d = await client.list(params);
+      setData(d);
+      setItems(d.items || []);
+      setError("");
+    } catch (err) {
+      setError(errorText(err));
+    }
+  }, [client, params]);
+
+  React.useEffect(() => { load(); }, [load]);
+
+  const more = async () => {
+    if (!data || !data.next) return;
+    setBusy(true);
+    try {
+      const d = await client.list(Object.assign({}, params, { before: data.next }));
+      setItems(items.concat(d.items || []));
+      setData(Object.assign({}, data, { next: d.next }));
+    } catch (err) {
+      say(errorText(err), "error");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const exportCsv = async () => {
+    setBusy(true);
+    try {
+      const blob = await client.exportCsv(Object.assign({}, filters, { q: query, lang }));
+      download(blob, lang === "en" ? "activity-log.csv" : "protokoll.csv");
+      say(L.exported);
+    } catch (err) {
+      say(errorText(err), "error");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const setCol = (k, v) => {
+    const next = Object.assign({}, cols, { [k]: v });
+    setCols(next);
+    try { window.localStorage.setItem(storageKey, JSON.stringify(next)); } catch (e) { /* private window */ }
+  };
+
+  const set = (k, v) => setFilters(Object.assign({}, filters, { [k]: v }));
+  const filtered = !!(query || filters.action !== "all" || filters.status !== "all" || filters.tenant || filters.since || filters.until || filters.category !== "all");
+  const reset = () => { setQ(""); setQuery(""); setFilters({ category: "all", action: "all", status: "all", tenant: "", since: "", until: "" }); };
+
+  if (!data) return error ? h("div", { className: "scalio-notice is-error", role: "alert" }, error) : null;
+
+  const counts = data.counts || {};
+  const cats = data.categories || [];
+  const tenants = data.tenants || [];
+  const showTenant = props.showTenant !== undefined ? props.showTenant : tenants.length > 0;
+  const tenantName = (id) => (tenants.find((t) => t.id === id) || {}).name || id || "–";
+  const catName = (c) => (props.categoryLabel ? props.categoryLabel(c, lang) : c[lang] || c.de || c.key);
+
+  const sortVal = {
+    ts: (e) => e.ts || "",
+    person: (e) => who(e, L).toLowerCase(),
+    action: (e) => actionLabel(e.action).toLowerCase(),
+    status: (e) => e.status || "",
+  };
+  const rows = items.slice().sort((a, b) => {
+    const f = sortVal[sort.key] || sortVal.ts;
+    const x = f(a);
+    const y = f(b);
+    return x < y ? -sort.dir : x > y ? sort.dir : 0;
+  });
+  const th = (key, label, cls) => h("th", { className: cls, key },
+    sortVal[key] ? h("button", { type: "button", className: "scalio-audit-sort", "data-testid": `audit-sort-${key}`,
+      onClick: () => setSort({ key, dir: sort.key === key ? -sort.dir : key === "ts" ? -1 : 1 }) },
+      label, sort.key === key ? (sort.dir < 0 ? " ↓" : " ↑") : "") : label);
+
+  const showPerson = cols.person !== false;
+  const showT = showTenant && cols.tenant !== false;
+  const showIp = !!cols.ip;
+  const colCount = 4 + (showPerson ? 1 : 0) + (showT ? 1 : 0) + (showIp ? 1 : 0);
+  const subline = (e) => [e.target && (e.target.name || e.target.id), e.detail].filter(Boolean).join(" · ");
+
+  return h("section", { className: "scalio-audit", "data-testid": props.testId || "audit-log" },
+    h("div", { className: "scalio-audit-note", "data-testid": "audit-immutable-note" },
+      h(Icons.KeyRound, { className: "scalio-icon", width: 13, height: 13 }), L.immutable),
+    cats.length ? h("div", { className: "scalio-audit-chips", "data-testid": "audit-chips" },
+      [{ key: "all", always: true }].concat(cats).filter((c) => c.always || c.key === filters.category || (counts[c.key] || 0) > 0).map((c) =>
+        h("button", { key: c.key, type: "button", className: cx("scalio-audit-chip", filters.category === c.key && "is-active"),
+          "data-testid": `audit-cat-${c.key}`, onClick: () => setFilters(Object.assign({}, filters, { category: c.key, action: "all" })) },
+          c.key === "all" ? L.all : catName(c), h("span", { className: "scalio-audit-chip-count" }, counts[c.key] || 0)))) : null,
+    h("div", { className: "scalio-audit-toolbar" },
+      h("label", { className: "scalio-audit-search" },
+        h(Icons.Search, { className: "scalio-icon", width: 14, height: 14 }),
+        h("input", { className: "scalio-input", value: q, placeholder: L.search, "aria-label": L.search, "data-testid": "audit-search",
+          onChange: (e) => setQ(e.target.value) })),
+      h("select", { className: "scalio-input", value: filters.action, "aria-label": L.action, "data-testid": "audit-filter-action", onChange: (e) => set("action", e.target.value) },
+        [h("option", { key: "all", value: "all" }, L.allActions)].concat((data.actions || []).map((a) => h("option", { key: a, value: a }, actionLabel(a))))),
+      h("select", { className: "scalio-input", value: filters.status, "aria-label": L.status, "data-testid": "audit-filter-status", onChange: (e) => set("status", e.target.value) },
+        ["all", "ok", "error", "blocked"].map((s) => h("option", { key: s, value: s }, s === "all" ? L.allStatuses : L.statuses[s]))),
+      showTenant ? h("select", { className: "scalio-input", value: filters.tenant, "aria-label": props.tenantLabel || L.tenant, "data-testid": "audit-filter-tenant", onChange: (e) => set("tenant", e.target.value) },
+        [h("option", { key: "", value: "" }, props.allTenantsLabel || L.allTenants)].concat(tenants.map((t) => h("option", { key: t.id, value: t.id }, t.name || t.id)))) : null,
+      h("label", { className: "scalio-audit-date" }, h("span", null, L.from),
+        h("input", { type: "date", className: "scalio-input", value: filters.since, "data-testid": "audit-filter-since", onChange: (e) => set("since", e.target.value) })),
+      h("label", { className: "scalio-audit-date" }, h("span", null, L.to),
+        h("input", { type: "date", className: "scalio-input", value: filters.until, "data-testid": "audit-filter-until", onChange: (e) => set("until", e.target.value) })),
+      filtered ? h("button", { type: "button", className: "scalio-btn is-ghost", "data-testid": "audit-reset", onClick: reset }, L.reset) : null,
+      h("div", { className: "scalio-audit-tools" },
+        h("span", { className: "scalio-audit-count", "data-testid": "audit-count" }, `${items.length} / ${counts.all !== undefined ? counts.all : items.length}`),
+        props.toolbar || null,
+        h("div", { className: "scalio-audit-cols" },
+          h("button", { type: "button", className: "scalio-btn", "aria-expanded": colsOpen, "data-testid": "audit-columns", onClick: () => setColsOpen(!colsOpen) }, L.columns),
+          colsOpen ? h("div", { className: "scalio-audit-cols-menu", "data-testid": "audit-columns-menu" },
+            COLS.filter((k) => k !== "tenant" || showTenant).map((k) => h("label", { key: k },
+              h("input", { type: "checkbox", checked: k === "ip" ? !!cols[k] : cols[k] !== false, "data-testid": `audit-col-${k}`, onChange: (e) => setCol(k, e.target.checked) }),
+              k === "tenant" ? props.tenantLabel || L.tenant : L[k]))) : null),
+        h("button", { type: "button", className: "scalio-btn", disabled: busy, "data-testid": "audit-export-csv", onClick: exportCsv },
+          h(Icons.Download, { className: "scalio-icon" }), L.exportCsv))),
+    error ? h("div", { className: "scalio-notice is-error", role: "alert" }, error) : null,
+    h("div", { className: "scalio-users-table-wrap scalio-audit-table-wrap" },
+      h("table", { className: "scalio-users-table scalio-audit-table", "data-testid": "audit-table" },
+        h("thead", null, h("tr", null,
+          th("ts", L.time),
+          showPerson ? th("person", L.person) : null,
+          th("action", L.action),
+          showT ? th("tenant", props.tenantLabel || L.tenant) : null,
+          showIp ? th("ip", L.ip) : null,
+          th("status", L.status),
+          h("th", { key: "x" }))),
+        h("tbody", null,
+          rows.length === 0 ? h("tr", null, h("td", { colSpan: colCount, className: "scalio-audit-empty", "data-testid": "audit-empty" }, L.empty)) : null,
+          rows.map((e) => h("tr", { key: e.id, "data-testid": "audit-row", className: e.status !== "ok" ? "is-error" : undefined },
+            h("td", { className: "scalio-audit-mono" }, fmtTime(e.ts, lang)),
+            showPerson ? h("td", null, who(e, L)) : null,
+            h("td", null,
+              h("div", { className: "scalio-audit-action" }, actionLabel(e.action)),
+              subline(e) ? h("div", { className: "scalio-audit-sub" }, subline(e)) : null),
+            showT ? h("td", null, e.tenant ? tenantName(e.tenant) : "–") : null,
+            showIp ? h("td", { className: "scalio-audit-mono" }, e.ip || "–") : null,
+            h("td", null, h(Badge, { status: e.status, L })),
+            h("td", { className: "scalio-audit-row-actions" },
+              props.rowActions ? props.rowActions(e) : null,
+              h("button", { type: "button", className: "scalio-btn is-ghost", "data-testid": `audit-view-${e.id}`, onClick: () => setOpen(e) }, L.view))))))),
+    h("div", { className: "scalio-audit-cards", "data-testid": "audit-cards" },
+      rows.length === 0 ? h("div", { className: "scalio-audit-empty" }, L.empty) : null,
+      rows.map((e) => h("div", { key: e.id, className: "scalio-audit-card", "data-testid": "audit-card" },
+        h("div", { className: "scalio-audit-action" }, actionLabel(e.action)),
+        subline(e) ? h("div", { className: "scalio-audit-sub" }, subline(e)) : null,
+        h("div", { className: "scalio-audit-card-meta" }, h(Badge, { status: e.status, L }), h("span", null, `${who(e, L)} · ${fmtTime(e.ts, lang)}`)),
+        h("div", { className: "scalio-audit-row-actions" },
+          props.rowActions ? props.rowActions(e) : null,
+          h("button", { type: "button", className: "scalio-btn is-ghost", onClick: () => setOpen(e) }, L.view))))),
+    data.next ? h("div", { className: "scalio-audit-more" },
+      h("button", { type: "button", className: "scalio-btn", disabled: busy, "data-testid": "audit-more", onClick: more }, L.more)) : null,
+    open ? h(Dialog, { title: actionLabel(open.action), onClose: () => setOpen(null), testId: "audit-detail", closeLabel: L.close },
+      h("dl", { className: "scalio-audit-dl" },
+        h("dt", null, L.time), h("dd", null, fmtTime(open.ts, lang)),
+        h("dt", null, L.person), h("dd", null, who(open, L), open.actor && open.actor.email && open.actor.name ? ` (${open.actor.email})` : ""),
+        h("dt", null, L.status), h("dd", null, h(Badge, { status: open.status, L })),
+        open.target ? [h("dt", { key: "t" }, L.object), h("dd", { key: "tv" }, [open.target.type, open.target.name || open.target.id].filter(Boolean).join(" · "))] : null,
+        open.tenant ? [h("dt", { key: "n" }, props.tenantLabel || L.tenant), h("dd", { key: "nv" }, tenantName(open.tenant))] : null,
+        open.ip ? [h("dt", { key: "i" }, L.ip), h("dd", { key: "iv", className: "scalio-audit-mono" }, open.ip)] : null,
+        open.detail ? [h("dt", { key: "d" }, L.details), h("dd", { key: "dv" }, open.detail)] : null),
+      open.changes && open.changes.length ? h("div", { className: "scalio-audit-changes", "data-testid": "audit-changes" },
+        h("div", { className: "scalio-audit-changes-title" }, L.changes),
+        open.changes.map((c, i) => h("div", { key: i, className: "scalio-audit-change" },
+          h("span", { className: "scalio-audit-field" }, c.field),
+          h("span", { className: "scalio-audit-old" }, fmtValue(c.old)),
+          h("span", null, "→"),
+          h("span", { className: "scalio-audit-new" }, fmtValue(c.new))))) : null,
+      props.renderDetail ? props.renderDetail(open) : null) : null);
+}
+
+function jobName(job, lang) {
+  return (job && (job[lang] || job.de || job.key)) || "";
+}
+
+// Tab Jobs. Props: client (jobsApi), lang, labels, notify(text, tone), confirm({title, text, action, danger}),
+// canRun (may run jobs and act on the queue), link (router Link for queue items with `link`), pollMs (default 15000),
+// renderQueueDetail(item) (extra content, e.g. Nexus steps and debug), queueActions(item) (extra buttons), testId.
+function JobsPanel(props) {
+  const { client, notify } = props;
+  const lang = props.lang === "en" ? "en" : "de";
+  const L = auditLabels(lang, props.labels);
+  const say = (text, tone) => (notify ? notify(text, tone || "success") : null);
+  const pollMs = props.pollMs === undefined ? 15000 : props.pollMs;
+  const [info, setInfo] = React.useState(null);
+  const [runs, setRuns] = React.useState([]);
+  const [queue, setQueue] = React.useState([]);
+  const [tab, setTab] = React.useState(props.initialTab || "");
+  const [runFilter, setRunFilter] = React.useState({ key: "", status: "" });
+  const [busy, setBusy] = React.useState("");
+  const [error, setError] = React.useState("");
+  const [open, setOpen] = React.useState(null);
+
+  const load = React.useCallback(async () => {
+    try {
+      const i = await client.list();
+      const [r, qq] = await Promise.all([client.runs(runFilter), i.queue ? client.queue() : Promise.resolve([])]);
+      setInfo(i);
+      setRuns(r || []);
+      setQueue(qq || []);
+      setError("");
+    } catch (err) {
+      setError(errorText(err));
+    }
+  }, [client, runFilter]);
+
+  React.useEffect(() => { load(); }, [load]);
+  React.useEffect(() => {
+    if (!pollMs) return undefined;
+    const t = setInterval(load, pollMs);
+    return () => clearInterval(t);
+  }, [pollMs, load]);
+
+  if (!info) return error ? h("div", { className: "scalio-notice is-error", role: "alert" }, error) : null;
+  const jobs = info.jobs || [];
+  const actionsOk = info.queue_actions || {};
+  const current = tab || (info.queue ? "queue" : "jobs");
+  const byKey = {};
+  jobs.forEach((j) => { byKey[j.key] = j; });
+
+  const act = async (id, fn, ok, ask) => {
+    if (ask && props.confirm && !(await props.confirm(ask))) return;
+    setBusy(id);
+    try {
+      const res = await fn();
+      say(typeof ok === "function" ? ok(res) : ok);
+      await load();
+    } catch (err) {
+      say(errorText(err), "error");
+    } finally {
+      setBusy("");
+    }
+  };
+
+  const tabs = [
+    info.queue ? { id: "queue", testId: "jobs-tab-queue", label: L.queue, badge: queue.filter((x) => ["queued", "running", "waiting", "error"].includes(x.status)).length || null } : null,
+    { id: "runs", testId: "jobs-tab-runs", label: L.runs },
+    { id: "jobs", testId: "jobs-tab-jobs", label: L.background },
+  ].filter(Boolean);
+
+  const QueueLink = ({ item }) => {
+    if (!item.link) return null;
+    if (props.link) return h(props.link, { to: item.link, className: "scalio-btn is-ghost", "data-testid": `queue-open-${item.id}` }, L.open);
+    return h("a", { href: item.link, className: "scalio-btn is-ghost", "data-testid": `queue-open-${item.id}` }, L.open);
+  };
+
+  return h("section", { className: "scalio-jobs", "data-testid": props.testId || "jobs-panel" },
+    h(SubNav, { items: tabs, value: current, onSelect: setTab, testId: "jobs-tabs" }),
+    error ? h("div", { className: "scalio-notice is-error", role: "alert" }, error) : null,
+
+    current === "jobs" ? h("div", { className: "scalio-jobs-grid", "data-testid": "jobs-background" },
+      jobs.map((j) => h("div", { key: j.key, className: "scalio-jobs-card", "data-testid": `job-${j.key}` },
+        h("div", { className: "scalio-jobs-card-head" },
+          h("div", null,
+            h("div", { className: "scalio-jobs-name" }, jobName(j, lang)),
+            (j[`description_${lang}`] || j.description_de) ? h("div", { className: "scalio-audit-sub" }, j[`description_${lang}`] || j.description_de) : null),
+          j.last_status ? h(Badge, { status: j.last_status, L, testId: `job-status-${j.key}` }) : null),
+        h("dl", { className: "scalio-audit-dl" },
+          (j[`schedule_${lang}`] || j.schedule_de) ? [h("dt", { key: "s" }, L.schedule), h("dd", { key: "sv" }, j[`schedule_${lang}`] || j.schedule_de)] : null,
+          h("dt", null, L.lastRun), h("dd", null, j.last_run ? `${fmtTime(j.last_run, lang)}${j.last_duration !== null && j.last_duration !== undefined ? ` · ${fmtDuration(j.last_duration)}` : ""}` : L.never),
+          j.last_result && j.last_result.summary ? [h("dt", { key: "r" }, L.result), h("dd", { key: "rv" }, j.last_result.summary)] : null),
+        h("div", { className: "scalio-jobs-card-foot" },
+          j.requested ? h("span", { className: "scalio-badge is-running", "data-testid": `job-requested-${j.key}` }, L.requested) : null,
+          props.canRun && j.runnable ? h("button", { type: "button", className: "scalio-btn", disabled: busy === j.key || j.requested, "data-testid": `job-run-${j.key}`,
+            onClick: () => act(j.key, () => client.run(j.key), (res) => (res && res.queued === false ? L.ranNow : L.queued)) },
+            h(Icons.Activity, { className: "scalio-icon" }), L.runNow) : null)))) : null,
+
+    current === "runs" ? h("div", { "data-testid": "jobs-runs" },
+      h("div", { className: "scalio-audit-toolbar" },
+        h("select", { className: "scalio-input", value: runFilter.key, "data-testid": "runs-filter-job", onChange: (e) => setRunFilter(Object.assign({}, runFilter, { key: e.target.value })) },
+          [h("option", { key: "", value: "" }, L.allJobs)].concat(jobs.map((j) => h("option", { key: j.key, value: j.key }, jobName(j, lang))))),
+        h("select", { className: "scalio-input", value: runFilter.status, "data-testid": "runs-filter-status", onChange: (e) => setRunFilter(Object.assign({}, runFilter, { status: e.target.value })) },
+          ["", "ok", "warning", "error"].map((s) => h("option", { key: s, value: s }, s ? L.statuses[s] : L.allStatuses)))),
+      h("div", { className: "scalio-users-table-wrap" },
+        h("table", { className: "scalio-users-table scalio-audit-table", "data-testid": "runs-table" },
+          h("thead", null, h("tr", null, h("th", null, L.time), h("th", null, L.job), h("th", null, L.result), h("th", null, L.trigger), h("th", null, L.duration), h("th", null, L.status))),
+          h("tbody", null,
+            runs.length === 0 ? h("tr", null, h("td", { colSpan: 6, className: "scalio-audit-empty", "data-testid": "runs-empty" }, L.noRuns)) : null,
+            runs.map((r) => h("tr", { key: r.id, "data-testid": "run-row", className: r.status === "error" ? "is-error" : undefined },
+              h("td", { className: "scalio-audit-mono" }, fmtTime(r.ts, lang)),
+              h("td", null, jobName(byKey[r.key], lang) || r.key),
+              h("td", null, r.summary || "–"),
+              h("td", null, (L.triggers[r.trigger] || r.trigger) + (r.by ? ` · ${r.by}` : "")),
+              h("td", { className: "scalio-audit-mono" }, fmtDuration(r.duration)),
+              h("td", null, h(Badge, { status: r.status, L })))))))) : null,
+
+    current === "queue" ? h("div", { "data-testid": "jobs-queue" },
+      h("div", { className: "scalio-users-table-wrap" },
+        h("table", { className: "scalio-users-table scalio-audit-table", "data-testid": "queue-table" },
+          h("thead", null, h("tr", null, h("th", null, L.job), h("th", null, L.type), h("th", null, L.created), h("th", null, L.status), h("th", null))),
+          h("tbody", null,
+            queue.length === 0 ? h("tr", null, h("td", { colSpan: 5, className: "scalio-audit-empty", "data-testid": "queue-empty" }, L.noQueue)) : null,
+            queue.map((it) => h("tr", { key: it.id, "data-testid": "queue-row", className: it.status === "error" ? "is-error" : undefined },
+              h("td", null, h("div", { className: "scalio-audit-action" }, it.title || it.id), it.detail ? h("div", { className: "scalio-audit-sub" }, it.detail) : null),
+              h("td", null, it.type || "–"),
+              h("td", { className: "scalio-audit-mono" }, fmtTime(it.created_at, lang), it.by ? h("div", { className: "scalio-audit-sub" }, it.by) : null),
+              h("td", null, h(Badge, { status: it.status, L })),
+              h("td", { className: "scalio-audit-row-actions" },
+                props.queueActions ? props.queueActions(it, load) : null,
+                (it.steps && it.steps.length) || props.renderQueueDetail ? h("button", { type: "button", className: "scalio-btn is-ghost", "data-testid": `queue-view-${it.id}`, onClick: () => setOpen(it) }, L.steps) : null,
+                h(QueueLink, { item: it }),
+                props.canRun && actionsOk.retry && it.can_retry ? h("button", { type: "button", className: "scalio-btn is-ghost", disabled: busy === it.id, "data-testid": `queue-retry-${it.id}`,
+                  onClick: () => act(it.id, () => client.retry(it.id), L.done) }, L.retry) : null,
+                props.canRun && actionsOk.cancel && it.can_cancel ? h("button", { type: "button", className: "scalio-btn is-ghost is-danger", disabled: busy === it.id, "data-testid": `queue-cancel-${it.id}`,
+                  onClick: () => act(it.id, () => client.cancel(it.id), L.done, { title: L.cancel, text: it.title || it.id, action: L.cancel, danger: true }) }, L.cancel) : null,
+                props.canRun && actionsOk.delete && it.can_delete ? h("button", { type: "button", className: "scalio-btn is-ghost is-danger", disabled: busy === it.id, "data-testid": `queue-delete-${it.id}`,
+                  onClick: () => act(it.id, () => client.remove(it.id), L.done, { title: L.delete, text: it.title || it.id, action: L.delete, danger: true }) }, L.delete) : null))))))) : null,
+
+    open ? h(Dialog, { title: open.title || open.id, onClose: () => setOpen(null), testId: "queue-detail", closeLabel: L.close },
+      open.steps && open.steps.length ? h("ol", { className: "scalio-jobs-steps" },
+        open.steps.map((s, i) => h("li", { key: i, className: `is-${TONE[s.status] || "neutral"}` },
+          h(Badge, { status: s.status, L }), h("span", null, s.name), s.detail ? h("span", { className: "scalio-audit-sub" }, s.detail) : null))) : null,
+      props.renderQueueDetail ? props.renderQueueDetail(open, load) : null) : null);
+}
+
+module.exports = { AuditLog, JobsPanel, AuditNav, auditApi, jobsApi, auditLabels, AUDIT_LABELS: LABELS };

package/react/index.js

@@ -378,6 +378,6 @@ module.exports = {
   TEST_IDS,
   initials,
 };
-Object.assign(module.exports, Nav, Blocks, require("./settings"), require("./support"), require("./beacon"), require("./security"), require("./license"), require("./palette"), require("./unify"), require("./profile"), require("./actions"), require("./selftest"), require("./users"), require("./roles"), require("./wizard"), require("./maintenance"));
+Object.assign(module.exports, Nav, Blocks, require("./settings"), require("./support"), require("./beacon"), require("./security"), require("./license"), require("./palette"), require("./unify"), require("./profile"), require("./actions"), require("./selftest"), require("./users"), require("./roles"), require("./wizard"), require("./maintenance"), require("./audit"), require("./mail"));
 // After the exports above: auth.js uses LanguageToggle and ThemeToggle from this module.
 Object.assign(module.exports, require("./auth"));

package/react/mail.js

@@ -0,0 +1,473 @@
+"use strict";
+// Einstellungen -> Benachrichtigungen (ADR 0069 wartung/W5, Welle 2): «E-Mail-Versand» (MailTransport) and
+// «E-Mail-Vorlagen» (MailTemplates), the same in every app. Backend: scalio-platform `mail` (Mailer.router, /api/mail).
+// The rich text editor comes from the app (prop editor, e.g. react-quill-new like Compass); without it a text field.
+const React = require("react");
+const h = React.createElement;
+const Icons = require("./icons");
+const { SettingsSection, SettingsField: Field } = require("./settings");
+
+const LABELS = {
+  de: {
+    transportTitle: "E-Mail-Versand",
+    transportHint: "Über welchen Server die App Mails schickt. Passwort und Client-Secret werden verschlüsselt gespeichert und nie angezeigt.",
+    provider: "Mails senden mit",
+    providers: { off: "Aus", smtp: "SMTP-Server", graph: "Microsoft 365" },
+    fromName: "Absendername",
+    fromAddress: "Absenderadresse",
+    language: "Sprache der Mails",
+    languageHint: "Gilt, wenn die App die Sprache der empfangenden Person nicht kennt.",
+    host: "Server",
+    port: "Port",
+    security: "Verbindungssicherheit",
+    securities: { starttls: "STARTTLS", ssl: "SSL/TLS", none: "Keine (nicht empfohlen)" },
+    username: "Benutzername",
+    password: "Passwort",
+    tenantId: "Tenant-ID",
+    clientId: "Client-ID der App",
+    clientSecret: "Client-Secret",
+    sender: "Postfach, das sendet",
+    graphHint: "Die App braucht die Anwendungsberechtigung Mail.Send. Beschränken Sie sie in Exchange Online mit «RBAC for Applications» auf das Postfach, das sendet.",
+    testMailbox: "Testinstanz: Mails gehen über das Testpostfach, die Einstellungen hier gelten nicht.",
+    save: "Speichern",
+    saved: "Gespeichert",
+    testTitle: "Testmail",
+    testHint: "Schickt sofort eine Mail mit den gespeicherten Einstellungen und zeigt den Fehler, wenn es nicht klappt.",
+    recipient: "Empfänger (leer: an mich)",
+    sendTest: "Testmail senden",
+    testSent: "Testmail gesendet an {to}",
+    outboxTitle: "Letzte Mails",
+    outboxHint: "Wartende Mails werden alle 30 Sekunden gesendet, bei Fehlern bis zu fünfmal.",
+    outboxEmpty: "Noch keine Mails.",
+    refresh: "Aktualisieren",
+    states: { pending: "Wartet", sent: "Gesendet", failed: "Fehlgeschlagen" },
+    templatesTitle: "E-Mail-Vorlagen",
+    templatesHint: "Betreff und Text jeder Mail pro Sprache. Platzhalter wie {name} werden beim Versand ersetzt. Ohne eigene Vorlage gilt der eingebaute Text.",
+    kind: "Mail",
+    lang: "Sprache",
+    languages: { de: "Deutsch", en: "Englisch" },
+    own: "eigene Vorlage",
+    builtIn: "Eingebauter Text. Speichern Sie, um ihn anzupassen.",
+    custom: "Eigene Vorlage für diese Sprache.",
+    enabled: "Diese Mail senden",
+    tokens: "Platzhalter (Klick fügt ein)",
+    subject: "Betreff",
+    body: "Text",
+    preview: "Vorschau",
+    showPreview: "Vorschau zeigen",
+    hidePreview: "Vorschau ausblenden",
+    sample: "Beispieldaten",
+    saveTemplate: "Vorlage speichern",
+    testToMe: "Test an mich",
+    resetTemplate: "Auf Standard zurücksetzen",
+    templateSaved: "Vorlage gespeichert",
+    templateReset: "Eingebauter Text gilt wieder",
+    off: "Der Versand ist ausgeschaltet. Vorlagen können Sie trotzdem bearbeiten.",
+  },
+  en: {
+    transportTitle: "E-mail sending",
+    transportHint: "Which server the app sends mail through. Password and client secret are stored encrypted and never shown.",
+    provider: "Send mail with",
+    providers: { off: "Off", smtp: "SMTP server", graph: "Microsoft 365" },
+    fromName: "Sender name",
+    fromAddress: "Sender address",
+    language: "Language of the mails",
+    languageHint: "Used when the app does not know the recipient's language.",
+    host: "Server",
+    port: "Port",
+    security: "Connection security",
+    securities: { starttls: "STARTTLS", ssl: "SSL/TLS", none: "None (not recommended)" },
+    username: "User name",
+    password: "Password",
+    tenantId: "Tenant ID",
+    clientId: "Client ID of the app",
+    clientSecret: "Client secret",
+    sender: "Mailbox that sends",
+    graphHint: "The app needs the application permission Mail.Send. Limit it to the sending mailbox with RBAC for Applications in Exchange Online.",
+    testMailbox: "Test instance: mails go through the test mailbox, the settings here do not apply.",
+    save: "Save",
+    saved: "Saved",
+    testTitle: "Test mail",
+    testHint: "Sends a mail at once with the saved settings and shows the error if it fails.",
+    recipient: "Recipient (empty: to me)",
+    sendTest: "Send test mail",
+    testSent: "Test mail sent to {to}",
+    outboxTitle: "Last mails",
+    outboxHint: "Waiting mails are sent every 30 seconds, after an error up to five times.",
+    outboxEmpty: "No mails yet.",
+    refresh: "Refresh",
+    states: { pending: "Waiting", sent: "Sent", failed: "Failed" },
+    templatesTitle: "E-mail templates",
+    templatesHint: "Subject and text of every mail per language. Placeholders like {name} are filled in when the mail is sent. Without an own template the built-in text applies.",
+    kind: "Mail",
+    lang: "Language",
+    languages: { de: "German", en: "English" },
+    own: "own template",
+    builtIn: "Built-in text. Save to change it.",
+    custom: "Own template for this language.",
+    enabled: "Send this mail",
+    tokens: "Placeholders (click to insert)",
+    subject: "Subject",
+    body: "Text",
+    preview: "Preview",
+    showPreview: "Show preview",
+    hidePreview: "Hide preview",
+    sample: "Sample data",
+    saveTemplate: "Save template",
+    testToMe: "Send test to me",
+    resetTemplate: "Reset to default",
+    templateSaved: "Template saved",
+    templateReset: "The built-in text applies again",
+    off: "Sending is switched off. You can still edit the templates.",
+  },
+};
+
+// Plain text (the built-in templates) for a rich text editor: paragraphs and line breaks, HTML escaped.
+function textToHtml(text) {
+  if (!text || /<[a-zA-Z/][^>]*>/.test(text)) return text || "";
+  const esc = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  return esc.split(/\n{2,}/).map((p) => p.trim()).filter(Boolean).map((p) => `<p>${p.replace(/\n/g, "<br>")}</p>`).join("");
+}
+
+function mailLabels(lang, overrides) {
+  return Object.assign({}, LABELS[lang === "en" ? "en" : "de"], overrides || {});
+}
+
+function errorText(err) {
+  const d = err && err.response && err.response.data && err.response.data.detail;
+  if (typeof d === "string") return d;
+  if (Array.isArray(d)) return d.map((x) => (x && x.msg) || String(x)).join(" ");
+  return (err && err.message) || String(err);
+}
+
+function fmtTime(iso, lang) {
+  try {
+    return new Date(iso).toLocaleString(lang === "en" ? "en-GB" : "de-CH", { dateStyle: "short", timeStyle: "short" });
+  } catch (e) {
+    return iso || "";
+  }
+}
+
+// api: axios instance with the app's base URL (/api); base: where the app mounted Mailer.router.
+function mailApi(api, base) {
+  const b = base || "/mail";
+  const data = (r) => r.data;
+  const enc = encodeURIComponent;
+  return {
+    settings: () => api.get(`${b}/settings`).then(data),
+    save: (body) => api.put(`${b}/settings`, body).then(data),
+    test: (to) => api.post(`${b}/test`, { to: to || "" }).then(data),
+    outbox: () => api.get(`${b}/outbox`).then(data),
+    templates: () => api.get(`${b}/templates`).then(data),
+    saveTemplate: (kind, lang, body) => api.put(`${b}/templates/${enc(kind)}/${enc(lang)}`, body).then(data),
+    resetTemplate: (kind, lang) => api.delete(`${b}/templates/${enc(kind)}/${enc(lang)}`).then(data),
+    preview: (body) => api.post(`${b}/templates/preview`, body).then(data),
+    testTemplate: (body) => api.post(`${b}/templates/test`, body).then(data),
+  };
+}
+
+function useMessages(props) {
+  const [msg, setMsg] = React.useState(null);
+  const fmtErr = props.formatError || errorText;
+  return {
+    msg,
+    ok: (text) => (props.notify ? props.notify(text, "success") : setMsg({ tone: "ok", text })),
+    fail: (err) => {
+      const text = fmtErr(err);
+      if (props.notify) props.notify(text, "error");
+      else setMsg({ tone: "error", text });
+    },
+    clear: () => setMsg(null),
+  };
+}
+
+function Notice({ msg, testId }) {
+  if (!msg) return null;
+  return h("div", { className: `scalio-notice is-${msg.tone === "error" ? "error" : "ok"}`, role: msg.tone === "error" ? "alert" : "status", "data-testid": testId }, msg.text);
+}
+
+function input(id, value, onChange, extra) {
+  return h("input", Object.assign({ id, className: "scalio-input", value: value == null ? "" : value, "data-testid": id,
+    onChange: (e) => onChange(e.target.value) }, extra || {}));
+}
+
+function select(id, value, options, onChange, extra) {
+  return h("select", Object.assign({ id, className: "scalio-input", value, "data-testid": id, onChange: (e) => onChange(e.target.value) }, extra || {}),
+    options.map(([v, text]) => h("option", { key: v, value: v }, text)));
+}
+
+// Props: client (mailApi), lang, labels, notify(message, tone), formatError(err), graphHint (the app's own text for
+// the Graph permissions, e.g. Beacon also needs Mail.ReadWrite), children (more blocks after «Testmail», e.g. Beacon's
+// mail intake), outbox (false hides «Letzte Mails»).
+function MailTransport(props) {
+  const { client, lang } = props;
+  const L = mailLabels(lang, props.labels);
+  const m = useMessages(props);
+  const [form, setForm] = React.useState(null);
+  const [busy, setBusy] = React.useState(false);
+  const [to, setTo] = React.useState("");
+  const [testing, setTesting] = React.useState(false);
+  const [testMsg, setTestMsg] = React.useState(null);
+  const [rows, setRows] = React.useState([]);
+  const showOutbox = props.outbox !== false;
+
+  const loadOutbox = React.useCallback(() => {
+    if (!showOutbox) return Promise.resolve();
+    return client.outbox().then((r) => setRows(r || [])).catch(() => setRows([]));
+  }, [client, showOutbox]);
+  React.useEffect(() => {
+    let alive = true;
+    client.settings().then((d) => alive && setForm(d)).catch((e) => alive && m.fail(e));
+    loadOutbox();
+    return () => { alive = false; };
+  }, [client]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (!form) return h(SettingsSection, { id: "mail", title: L.transportTitle, description: L.transportHint, testId: "mail-transport" }, h(Notice, { msg: m.msg, testId: "mail-message" }));
+
+  const set = (patch) => setForm(Object.assign({}, form, patch));
+  const part = (name, key) => (v) => set({ [name]: Object.assign({}, form[name], { [key]: v }) });
+  const locked = !!form.test_mailbox;
+
+  const save = async (e) => {
+    e.preventDefault();
+    setBusy(true);
+    m.clear();
+    try {
+      const body = { provider: form.provider, from_name: form.from_name, from_address: form.from_address, language: form.language };
+      if (form.provider === "smtp") body.smtp = Object.assign({}, form.smtp, { port: Number(form.smtp.port) || 587 });
+      if (form.provider === "graph") body.graph = form.graph;
+      setForm(await client.save(body));
+      m.ok(L.saved);
+    } catch (err) {
+      m.fail(err);
+    }
+    setBusy(false);
+  };
+  const test = async () => {
+    setTesting(true);
+    setTestMsg(null);
+    try {
+      const r = await client.test(to.trim());
+      const text = L.testSent.replace("{to}", (r && r.to) || to);
+      if (props.notify) props.notify(text, "success");
+      else setTestMsg({ tone: "ok", text });
+      loadOutbox();
+    } catch (err) {
+      const text = (props.formatError || errorText)(err);
+      if (props.notify) props.notify(text, "error");
+      else setTestMsg({ tone: "error", text });
+    }
+    setTesting(false);
+  };
+
+  const providers = ["off", "smtp", "graph"];
+  const transport = h(
+    SettingsSection,
+    { id: "mail", title: L.transportTitle, description: L.transportHint, testId: "mail-transport" },
+    h(
+      "form",
+      { className: "scalio-settings-form", onSubmit: save },
+      locked ? h("div", { className: "scalio-notice is-info", "data-testid": "mail-test-mailbox" }, L.testMailbox) : null,
+      h("fieldset", { className: "scalio-mail-providers", disabled: busy || locked },
+        h("legend", { className: "scalio-field-label" }, L.provider),
+        providers.map((id) => h("label", { key: id, className: "scalio-settings-check" },
+          h("input", { type: "radio", name: "mail-provider", checked: form.provider === id, "data-testid": `mail-provider-${id}`,
+            onChange: () => set({ provider: id }) }), h("span", null, L.providers[id])))),
+      form.provider !== "off"
+        ? h("div", { className: "scalio-mail-grid" },
+            h(Field, { id: "mail-from-name", label: L.fromName }, input("mail-from-name", form.from_name, (v) => set({ from_name: v }), { maxLength: 80, disabled: busy })),
+            form.provider === "smtp"
+              ? h(Field, { id: "mail-from", label: L.fromAddress }, input("mail-from", form.from_address, (v) => set({ from_address: v }),
+                  { type: "email", maxLength: 254, placeholder: "noreply@example.com", disabled: busy || locked }))
+              : null,
+            h(Field, { id: "mail-lang", label: L.language, hint: L.languageHint },
+              select("mail-lang", form.language, [["de", L.languages.de], ["en", L.languages.en]], (v) => set({ language: v }), { disabled: busy })))
+        : null,
+      form.provider === "smtp"
+        ? h("div", { className: "scalio-mail-grid", "data-testid": "mail-smtp" },
+            h(Field, { id: "mail-smtp-host", label: L.host }, input("mail-smtp-host", form.smtp.host, part("smtp", "host"), { maxLength: 253, placeholder: "smtp.example.com", disabled: busy || locked })),
+            h(Field, { id: "mail-smtp-port", label: L.port }, input("mail-smtp-port", form.smtp.port, part("smtp", "port"), { type: "number", min: 1, max: 65535, disabled: busy || locked })),
+            h(Field, { id: "mail-smtp-security", label: L.security },
+              select("mail-smtp-security", form.smtp.security, Object.keys(L.securities).map((k) => [k, L.securities[k]]), part("smtp", "security"), { disabled: busy || locked })),
+            h(Field, { id: "mail-smtp-user", label: L.username }, input("mail-smtp-user", form.smtp.username, part("smtp", "username"), { maxLength: 200, autoComplete: "off", disabled: busy || locked })),
+            h(Field, { id: "mail-smtp-password", label: L.password }, input("mail-smtp-password", form.smtp.password, part("smtp", "password"),
+              { type: "password", maxLength: 500, autoComplete: "new-password", disabled: busy || locked })))
+        : null,
+      form.provider === "graph"
+        ? h("div", { "data-testid": "mail-graph" },
+            h("div", { className: "scalio-mail-grid" },
+              h(Field, { id: "mail-graph-tenant", label: L.tenantId }, input("mail-graph-tenant", form.graph.tenant_id, part("graph", "tenant_id"),
+                { maxLength: 36, placeholder: "00000000-0000-0000-0000-000000000000", className: "scalio-input scalio-mono", disabled: busy })),
+              h(Field, { id: "mail-graph-client", label: L.clientId }, input("mail-graph-client", form.graph.client_id, part("graph", "client_id"),
+                { maxLength: 36, placeholder: "00000000-0000-0000-0000-000000000000", className: "scalio-input scalio-mono", disabled: busy })),
+              h(Field, { id: "mail-graph-secret", label: L.clientSecret }, input("mail-graph-secret", form.graph.client_secret, part("graph", "client_secret"),
+                { type: "password", maxLength: 500, autoComplete: "new-password", disabled: busy })),
+              h(Field, { id: "mail-graph-sender", label: L.sender }, input("mail-graph-sender", form.graph.sender, part("graph", "sender"),
+                { type: "email", maxLength: 254, placeholder: "it@example.com", disabled: busy }))),
+            h("p", { className: "scalio-settings-help" }, props.graphHint || L.graphHint))
+        : null,
+      h(Notice, { msg: m.msg, testId: "mail-message" }),
+      h("div", { className: "scalio-settings-section-footer" },
+        h("button", { type: "submit", className: "scalio-btn is-primary", disabled: busy || locked, "data-testid": "mail-save" },
+          h(Icons.Check, { className: "scalio-icon" }), L.save))
+    )
+  );
+
+  const testBlock = h(
+    SettingsSection,
+    { id: "mail-test", title: L.testTitle, description: L.testHint, testId: "mail-test-section" },
+    h("div", { className: "scalio-mail-test" },
+      input("mail-test-to", to, setTo, { type: "email", placeholder: L.recipient, "aria-label": L.recipient, maxLength: 254 }),
+      h("button", { type: "button", className: "scalio-btn", onClick: test, disabled: testing || form.provider === "off", "data-testid": "mail-test" },
+        h(Icons.CornerDownLeft, { className: "scalio-icon" }), L.sendTest)),
+    h(Notice, { msg: testMsg, testId: "mail-test-message" })
+  );
+
+  const outbox = showOutbox
+    ? h(
+        SettingsSection,
+        { id: "mail-outbox", title: L.outboxTitle, description: L.outboxHint, testId: "mail-outbox-section" },
+        h("div", { className: "scalio-settings-section-footer" },
+          h("button", { type: "button", className: "scalio-btn is-ghost", onClick: loadOutbox, "data-testid": "mail-outbox-refresh" }, L.refresh)),
+        rows.length === 0
+          ? h("p", { className: "scalio-settings-text", "data-testid": "mail-outbox-empty" }, L.outboxEmpty)
+          : h("div", { className: "scalio-mail-outbox" },
+              h("table", { "data-testid": "mail-outbox" },
+                h("tbody", null, rows.map((r) => h("tr", { key: r.id },
+                  h("td", { className: "scalio-mail-time" }, fmtTime(r.created_at, lang)),
+                  h("td", null, r.to),
+                  h("td", null, r.subject, r.error ? h("span", { className: "scalio-settings-help is-error" }, r.error) : null),
+                  h("td", { className: "scalio-mail-state" },
+                    h("span", { className: `scalio-badge is-${{ pending: "running", sent: "ok", failed: "error" }[r.status] || "neutral"}` },
+                      L.states[r.status] || r.status)))))))
+      )
+    : null;
+
+  return h(React.Fragment, null, transport, testBlock, props.children || null, outbox);
+}
+
+// Props: client (mailApi), lang, labels, notify, formatError, editor (the app's rich text editor: a component with
+// {value, onChange, testId}; without it a text field), delay (ms before the preview reloads, default 450).
+function MailTemplates(props) {
+  const { client, lang } = props;
+  const L = mailLabels(lang, props.labels);
+  const m = useMessages(props);
+  const [data, setData] = React.useState(null);
+  const [kind, setKind] = React.useState("");
+  const [tlang, setTlang] = React.useState("");
+  const [subject, setSubject] = React.useState("");
+  const [body, setBody] = React.useState("");
+  const [busy, setBusy] = React.useState(false);
+  const [showPreview, setShowPreview] = React.useState(true);
+  const [preview, setPreview] = React.useState({ subject: "", html: "" });
+  const [provider, setProvider] = React.useState(null);
+  const delay = props.delay == null ? 450 : props.delay;
+
+  const apply = (d, k, l) => {
+    setData(d);
+    const kk = k || (d.kinds[0] && d.kinds[0].code) || "";
+    const ll = l || d.language || "de";
+    setKind(kk);
+    setTlang(ll);
+    const meta = d.kinds.find((x) => x.code === kk);
+    const t = meta && meta.texts[ll];
+    setSubject(t ? t.subject : "");
+    setBody(t ? (props.editor ? textToHtml(t.body) : t.body) : "");
+  };
+
+  React.useEffect(() => {
+    let alive = true;
+    client.templates().then((d) => alive && apply(d)).catch((e) => alive && m.fail(e));
+    if (client.settings) client.settings().then((s) => alive && setProvider(s.provider)).catch(() => {});
+    return () => { alive = false; };
+  }, [client]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  React.useEffect(() => {
+    if (!showPreview || !kind || !tlang) return undefined;
+    let alive = true;
+    const t = setTimeout(() => {
+      client.preview({ kind, lang: tlang, subject, body }).then((p) => alive && setPreview(p)).catch(() => {});
+    }, delay);
+    return () => { alive = false; clearTimeout(t); };
+  }, [client, showPreview, kind, tlang, subject, body, delay]);
+
+  const section = (children) => h(SettingsSection, { id: "mail-templates", title: L.templatesTitle, description: L.templatesHint, testId: "mail-templates" }, children);
+  if (!data) return section(h(Notice, { msg: m.msg, testId: "mail-templates-message" }));
+
+  const meta = data.kinds.find((x) => x.code === kind) || data.kinds[0];
+  const text = meta.texts[tlang] || {};
+  const run = async (fn, okText) => {
+    setBusy(true);
+    m.clear();
+    try {
+      const r = await fn();
+      if (okText) m.ok(typeof okText === "function" ? okText(r) : okText);
+    } catch (err) {
+      m.fail(err);
+    }
+    setBusy(false);
+  };
+  const save = () => run(async () => apply(await client.saveTemplate(kind, tlang, { subject, body }), kind, tlang), L.templateSaved);
+  const reset = () => run(async () => apply(await client.resetTemplate(kind, tlang), kind, tlang), L.templateReset);
+  const testMe = () => run(() => client.testTemplate({ kind, lang: tlang, subject, body }), (r) => L.testSent.replace("{to}", (r && r.to) || ""));
+  const toggle = (on) => run(async () => {
+    await client.save({ notify: { [kind]: on } });
+    apply(await client.templates(), kind, tlang);
+  });
+  const insert = (tok) => setBody((b) => `${b || ""}{${tok}}`);
+
+  const Editor = props.editor;
+  const editor = Editor
+    ? h(Editor, { value: body, onChange: setBody, testId: "mail-template-body" })
+    : h("textarea", { id: "mail-template-body", className: "scalio-input scalio-textarea scalio-mail-body", rows: 14, value: body, maxLength: 50000,
+        "data-testid": "mail-template-body", onChange: (e) => setBody(e.target.value) });
+
+  return section(h(
+    "div",
+    { className: "scalio-settings-form" },
+    provider === "off" ? h("div", { className: "scalio-notice is-info", "data-testid": "mail-templates-off" }, L.off) : null,
+    h("div", { className: "scalio-mail-grid" },
+      h(Field, { id: "mail-template-kind", label: L.kind, hint: meta.description[lang === "en" ? "en" : "de"] },
+        select("mail-template-kind", meta.code, data.kinds.map((k) => [k.code, k.name[lang === "en" ? "en" : "de"] +
+          (Object.values(k.texts).some((t) => t.own) ? ` (${L.own})` : "")]), (v) => apply(data, v, tlang))),
+      h(Field, { id: "mail-template-lang", label: L.lang, hint: text.own ? L.custom : L.builtIn },
+        select("mail-template-lang", tlang, data.languages.map((l) => [l, (L.languages[l] || l) + (meta.texts[l] && meta.texts[l].own ? " ✓" : "")]),
+          (v) => apply(data, meta.code, v)))),
+    meta.switchable
+      ? h("label", { className: "scalio-settings-check" },
+          h("input", { type: "checkbox", checked: !!meta.enabled, disabled: busy, "data-testid": "mail-template-enabled", onChange: (e) => toggle(e.target.checked) }),
+          h("span", null, L.enabled))
+      : null,
+    h("div", null,
+      h("span", { className: "scalio-field-label" }, L.tokens),
+      h("div", { className: "scalio-mail-tokens" }, meta.tokens.map((tok) =>
+        h("button", { key: tok, type: "button", className: "scalio-mail-token", onClick: () => insert(tok), "data-testid": `mail-token-${tok}` }, `{${tok}}`)))),
+    h(Field, { id: "mail-template-subject", label: L.subject },
+      input("mail-template-subject", subject, setSubject, { maxLength: 300 })),
+    h("div", { className: "scalio-mail-editor-head" },
+      h("label", { className: "scalio-field-label", htmlFor: "mail-template-body" }, L.body),
+      h("button", { type: "button", className: "scalio-btn is-ghost", onClick: () => setShowPreview((v) => !v), "data-testid": "mail-preview-toggle" },
+        showPreview ? L.hidePreview : L.showPreview)),
+    h("div", { className: showPreview ? "scalio-mail-editor has-preview" : "scalio-mail-editor" },
+      h("div", { className: "scalio-mail-editor-pane" }, editor),
+      showPreview
+        ? h("div", { className: "scalio-mail-preview", "data-testid": "mail-preview" },
+            h("div", { className: "scalio-mail-preview-head" }, h("strong", null, L.preview), h("span", null, L.sample)),
+            h("div", { className: "scalio-mail-preview-subject" }, `${L.subject}: `, h("span", { "data-testid": "mail-preview-subject" }, preview.subject || "–")),
+            h("iframe", { title: L.preview, sandbox: "", "data-testid": "mail-preview-frame",
+              srcDoc: `<!doctype html><html><body style="margin:0;padding:16px;background:#fff;">${preview.html || ""}</body></html>` }))
+        : null),
+    h(Notice, { msg: m.msg, testId: "mail-templates-message" }),
+    h("div", { className: "scalio-settings-section-footer" },
+      text.own
+        ? h("button", { type: "button", className: "scalio-btn is-danger", onClick: reset, disabled: busy, "data-testid": "mail-template-reset" },
+            h(Icons.History, { className: "scalio-icon" }), L.resetTemplate)
+        : null,
+      h("button", { type: "button", className: "scalio-btn", onClick: testMe, disabled: busy || provider === "off", "data-testid": "mail-template-test" },
+        h(Icons.CornerDownLeft, { className: "scalio-icon" }), L.testToMe),
+      h("button", { type: "button", className: "scalio-btn is-primary", onClick: save, disabled: busy || !subject.trim() || !body.trim(), "data-testid": "mail-template-save" },
+        h(Icons.Check, { className: "scalio-icon" }), L.saveTemplate))
+  ));
+}
+
+module.exports = { MailTransport, MailTemplates, mailApi, mailLabels, textToHtml, MAIL_LABELS: LABELS };