@scalio-cloud/ui 0.27.1 → 0.28.0

package/README.md

@@ -325,6 +325,31 @@ 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.
 
+## 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,62 @@
 .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; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.27.1",
+  "version": "0.28.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,

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"));
 // After the exports above: auth.js uses LanguageToggle and ThemeToggle from this module.
 Object.assign(module.exports, require("./auth"));