@scalio-cloud/ui 0.20.0 → 0.22.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 0.22.0
+Login, Navigation und Banner vereinheitlichen (scalio-docs UISPEC section 3, ADR 0042 Nachtrag 2026-11-01).
+- **Notice in the look of the test mode banner:** thin frame in the tone, 3px bar on the left, tinted background,
+  icon in the tone, text in the normal text colour (also for errors). Colours: red = `error` (Fehler), orange = `warn`
+  (wichtig), green = `ok` (gute Meldung), blue = `info` (Aktion). New aliases `important`, `success`, `action`
+  (`noticeKind`). Banners keep the full frame; stacked banners share one line. Dark mode has its own tones.
+- `SelfTestBanner` is now a `Notice` banner (kind warn) and takes an optional `action` (e.g. link to «Tests»).
+- **Behaviour change:** `normalizeTheme()` returns `system` when nothing (or something unknown) is stored, so every
+  app starts like the device on the first visit and on the login page (before: `light`).
+- New `initialLang(stored, navLang)` / `browserLang()`: stored choice wins, otherwise German for a German browser and
+  English for everything else, the same in every app.
+- **Visible change:** every `Notice` gets the new frame and colours (info notices turn from Klein blue to a lighter
+  blue, error text is no longer red, only bar and icon). No token changes.
+
+## 0.21.0
+Testmodus (scalio-docs ADR 0053, package scalio-selftest).
+- `SelfTestPanel` for the page «Tests»: last runs with verdict, scope, source, version and counts; details per
+  section; «Neu fehlgeschlagen» and «Wieder in Ordnung» since the run before; «Jetzt ausführen» and «Abbrechen» with
+  live progress; schedule (scope and hour of the nightly run). `selftestApi(api)` maps the routes `/e2e/*`.
+- `SelfTestBanner`: hint «Testmodus (SAFE)» while the test mode is on.
+- CSS in `nav.css` (`.scalio-selftest*`).
+- **Visible change:** only in apps that show the new page. No token changes.
+
 ## 0.20.0
 Scalio Ideen (ADR 0050): feature requests from the apps, votes and comments, kept centrally in Compass.
 - `supportApi(api, { ideas: true })` adds the routes of scalio-connect 0.8.0 (`ideas_router`). The support drawer then

package/README.md

@@ -127,7 +127,8 @@ scalio-connect 0.8.0 `peers.web.admin_router`.
 `link` is the router's `NavLink` (it gets `to`, `end`, a `className` function and `onClick`); without it the
 sidebar renders plain links and marks the item for `activePath`. Item test ids default to `nav-<path>`
 (`nav-overview` for `/`), or set `testId`. Page blocks: `KpiTile` (tone `error` = red number),
-`EmptyState` (children = next step), `Loading`, `Notice` (`info`, `ok`, `warn`, `error`), `StatusBadge`
+`EmptyState` (children = next step), `Loading`, `Notice` (`error` red = Fehler, `warn`/`important` orange =
+wichtig, `ok`/`success` green = gute Meldung, `info`/`action` blue = Aktion; `banner` = full width), `StatusBadge`
 (tones `neutral`, `running`, `ok`, `warn`, `error`) and `PageHeader` with `back` for detail pages.
 
 Pages that belong together under one menu item keep their own addresses: the item lists them in `match`

package/nav.css

@@ -260,8 +260,14 @@
 .scalio-spinner { width: 0.875rem; height: 0.875rem; border: 2px solid hsl(var(--border)); border-top-color: hsl(var(--primary)); border-radius: 999px; animation: scalio-spin 0.8s linear infinite; }
 @keyframes scalio-spin { to { transform: rotate(360deg); } }
 @media (prefers-reduced-motion: reduce) { .scalio-spinner { animation: none; } }
-.scalio-notice { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 1rem; border: 1px solid; border-left-width: 3px; border-radius: 2px; font-size: 0.875rem; }
-.scalio-notice-icon { flex-shrink: 0; margin-top: 0.125rem; }
+/* Notice: thin frame in the tone, 3px bar on the left, tinted background, icon in the tone (2026-11-01, look of the
+   test mode banner). Red = Fehler, orange = wichtig, green = gute Meldung, blue = Aktion. */
+.scalio-notice {
+  --notice-tone: 37 99 235; display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 1rem;
+  border: 1px solid rgb(var(--notice-tone) / 0.45); border-left: 3px solid rgb(var(--notice-tone)); border-radius: 2px;
+  background: rgb(var(--notice-tone) / 0.08); color: hsl(var(--foreground)); font-size: 0.875rem;
+}
+.scalio-notice-icon, .scalio-notice > .scalio-icon:first-child { flex-shrink: 0; margin-top: 0.125rem; color: rgb(var(--notice-tone)); }
 .scalio-notice-body { flex: 1; min-width: 0; }
 .scalio-notice-title { font-weight: 600; margin-bottom: 0.125rem; }
 .scalio-notice-actions { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
@@ -277,7 +283,11 @@
 }
 .scalio-notice-dismiss:hover { opacity: 1; }
 .scalio-notice-action:focus-visible, .scalio-notice-dismiss:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
-.scalio-notice.is-banner { align-items: center; border-width: 0 0 1px 3px; padding: 0.5rem 1rem; }
+.scalio-notice.is-banner { align-items: center; border-radius: 0; padding: 0.625rem 1rem; }
+.scalio-notice.is-banner .scalio-notice-icon { margin-top: 0; }
+.scalio-notice.is-banner .scalio-notice-title { margin-bottom: 0; }
+.scalio-notice.is-banner .scalio-notice-body { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.75rem; }
+.scalio-notice.is-banner + .scalio-notice.is-banner { border-top-width: 0; }
 @media (max-width: 639px) { .scalio-notice.is-banner { flex-wrap: wrap; } }
 /* Password sign-in choice (Konten und Rollen -> Anmeldung). */
 .scalio-policy { display: flex; flex-direction: column; gap: 0.5rem; }
@@ -286,10 +296,15 @@
 .scalio-policy-help { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
 .scalio-policy-help.is-warn { color: #b45309; }
 .dark .scalio-policy-help.is-warn { color: #fbbf24; }
-.scalio-notice.is-info { border-color: hsl(var(--primary) / 0.35); background: hsl(var(--primary) / 0.06); }
-.scalio-notice.is-ok { border-color: rgb(22 163 74 / 0.4); background: rgb(22 163 74 / 0.08); }
-.scalio-notice.is-warn { border-color: rgb(217 119 6 / 0.45); background: rgb(217 119 6 / 0.1); }
-.scalio-notice.is-error { border-color: hsl(var(--destructive) / 0.5); background: hsl(var(--destructive) / 0.08); color: hsl(var(--destructive)); }
+.scalio-notice.is-info { --notice-tone: 37 99 235; }
+.scalio-notice.is-ok { --notice-tone: 22 163 74; }
+.scalio-notice.is-warn { --notice-tone: 217 119 6; }
+.scalio-notice.is-error { --notice-tone: 220 38 38; }
+.dark .scalio-notice.is-info { --notice-tone: 96 165 250; }
+.dark .scalio-notice.is-ok { --notice-tone: 74 222 128; }
+.dark .scalio-notice.is-warn { --notice-tone: 245 158 11; }
+.dark .scalio-notice.is-error { --notice-tone: 248 113 113; }
+.dark .scalio-notice { background: rgb(var(--notice-tone) / 0.12); }
 .scalio-badge {
   display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.0625rem 0.375rem; border: 1px solid; border-radius: 2px;
   font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
@@ -479,3 +494,41 @@
 .dark .scalio-license-addon.tone-warn { border-color: rgb(251 191 36 / 0.4); background: rgb(251 191 36 / 0.08); }
 .scalio-license-addon-error { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
 .scalio-license-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
+
+/* Self-check page (SelfTestPanel, ADR 0053) */
+.scalio-selftest { border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--card)); color: hsl(var(--card-foreground)); font-size: 0.875rem; }
+.scalio-selftest-part { padding: 1.25rem; }
+.scalio-selftest-part + .scalio-selftest-part { border-top: 1px solid hsl(var(--border)); }
+.scalio-selftest-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
+.scalio-selftest-title { display: flex; align-items: center; gap: 0.5rem; font-family: 'Chivo', sans-serif; font-weight: 700; }
+.scalio-selftest-title .scalio-icon { color: hsl(var(--primary)); }
+.scalio-selftest-hint { margin: 0.25rem 0 0; color: hsl(var(--muted-foreground)); }
+.scalio-selftest-actions { display: flex; gap: 0.5rem; }
+.scalio-selftest-sub { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.75rem; font-weight: 600; }
+.scalio-selftest-live { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
+.scalio-selftest-live-head { display: flex; justify-content: space-between; color: hsl(var(--muted-foreground)); font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; }
+.scalio-selftest-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
+.scalio-selftest-form label { display: flex; flex-direction: column; gap: 0.25rem; min-width: 10rem; }
+.scalio-selftest-form label span { color: hsl(var(--muted-foreground)); font-size: 0.75rem; }
+.scalio-selftest-run { border-top: 1px solid hsl(var(--border)); padding: 0.625rem 0; }
+.scalio-selftest-run:first-of-type { border-top: 0; }
+.scalio-selftest-run-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
+.scalio-selftest-when, .scalio-selftest-version { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; }
+.scalio-selftest-source, .scalio-selftest-version { color: hsl(var(--muted-foreground)); }
+.scalio-selftest-counts { display: inline-flex; gap: 0.5rem; font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; }
+.scalio-selftest-run-head .scalio-btn { margin-left: auto; }
+.scalio-selftest-run-body { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.75rem; }
+.scalio-selftest-run-body ul { margin: 0.25rem 0 0; padding-left: 1rem; }
+.scalio-selftest-sections { display: flex; flex-direction: column; gap: 0.75rem; }
+.scalio-selftest-section-title { font-weight: 600; margin-bottom: 0.25rem; }
+.scalio-selftest-section ul { list-style: none; margin: 0; padding: 0; }
+.scalio-selftest-section li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 0.5rem; padding: 0.1875rem 0; }
+.scalio-selftest-status { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; font-weight: 600; }
+.scalio-selftest-detail { grid-column: 2; color: hsl(var(--muted-foreground)); font-size: 0.75rem; overflow-wrap: anywhere; }
+.scalio-selftest .is-ok, .scalio-selftest li.is-ok .scalio-selftest-status { color: #15803d; }
+.scalio-selftest .is-warn, .scalio-selftest li.is-warn .scalio-selftest-status { color: #b45309; }
+.scalio-selftest .is-error, .scalio-selftest li.is-error .scalio-selftest-status { color: hsl(var(--destructive)); }
+.scalio-selftest .is-neutral { color: hsl(var(--muted-foreground)); }
+.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; } }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.20.0",
+  "version": "0.22.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/blocks.js

@@ -50,13 +50,20 @@ function Loading({ label, lang, labels, testId }) {
   );
 }
 
-// kind: info, ok, warn, error. One notice style for every hint in every app (ADR 0041 A6): eckig, icon, bold
-// title, one sentence, at most one main action plus "Später". banner: full width above the page (AppShell
-// prop banner), several stack, the most important first. action: { label, onClick | href, testId }.
+// One notice style for every hint in every app (ADR 0042 A6): thin frame, coloured bar on the left, icon, bold
+// title, one sentence, at most one main action plus "Später". Colours (2026-11-01): red = error (Fehler),
+// orange = warn (wichtig, e.g. test mode, licence), green = ok (gute Meldung), blue = info (Aktion, e.g. grant
+// consent). The aliases important, success and action name the same kinds. banner: full width above the page
+// (AppShell prop banner), several stack, the most important first. action: { label, onClick | href, testId }.
 const NOTICE_ICONS = { info: "Info", ok: "Check", warn: "Alert", error: "Alert" };
+const NOTICE_KINDS = { info: "info", action: "info", ok: "ok", success: "ok", warn: "warn", important: "warn", error: "error" };
+
+function noticeKind(kind) {
+  return Object.prototype.hasOwnProperty.call(NOTICE_KINDS, kind) ? NOTICE_KINDS[kind] : "info";
+}
 
 function Notice({ kind, title, children, action, onDismiss, dismissLabel, banner, icon, lang, labels, testId }) {
-  const k = ["info", "ok", "warn", "error"].indexOf(kind) >= 0 ? kind : "info";
+  const k = noticeKind(kind);
   const L = labelsFor(lang, labels);
   const Icons = require("./icons");
   const Icon = icon === false ? null : icon || Icons[NOTICE_ICONS[k]];
@@ -93,4 +100,4 @@ function StatusBadge({ tone: t, children, testId }) {
   return h("span", { className: cx("scalio-badge", `is-${tone(t, "neutral")}`), "data-testid": testId }, children);
 }
 
-module.exports = { KpiTile, EmptyState, Loading, Notice, StatusBadge, TONES };
+module.exports = { KpiTile, EmptyState, Loading, Notice, noticeKind, StatusBadge, TONES };

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

package/react/profile.js

@@ -86,8 +86,19 @@ function applyTheme(mode) {
     else if (mq.removeListener) mq.removeListener(set);
   };
 }
+// Nothing stored yet (first visit, login page) means "system": every app starts like the device.
 function normalizeTheme(value) {
-  return value === "dark" || value === "system" ? value : "light";
+  return value === "dark" || value === "light" ? value : "system";
+}
+
+// --- language ----------------------------------------------------------------------------------------
+// The same rule in every app: a stored choice wins; otherwise German for a German browser, English for the rest.
+function browserLang(navLang) {
+  const v = navLang !== undefined ? navLang : (typeof navigator !== "undefined" && navigator.language) || "";
+  return String(v || "").toLowerCase().startsWith("de") ? "de" : "en";
+}
+function initialLang(stored, navLang) {
+  return stored === "de" || stored === "en" ? stored : browserLang(navLang);
 }
 
 // --- blocks ------------------------------------------------------------------------------------------
@@ -324,4 +335,6 @@ module.exports = {
   resolveTheme,
   applyTheme,
   normalizeTheme,
+  browserLang,
+  initialLang,
 };

package/react/selftest.js

@@ -0,0 +1,280 @@
+"use strict";
+// Page «Tests» of the test mode (scalio-docs ADR 0053, package scalio-selftest): last runs, live progress,
+// run now / cancel, nightly schedule, results per section, what broke and what recovered since the run before.
+// selftestApi(api) maps the routes of scalio-selftest (/e2e/*). SelfTestBanner shows the hint on every page.
+const React = require("react");
+const h = React.createElement;
+const Icons = require("./icons");
+
+const LABELS = {
+  de: {
+    title: "Selbsttest",
+    hint: "Diese Instanz prüft sich selbst von aussen: Schnittstellen und Browser, mit eigenen Testkonten.",
+    off: "Der Testmodus ist auf dieser Instanz aus (TEST_MODE und SCALIO_STAGE dev oder test). Gezeigt werden nur frühere Läufe.",
+    banner: "Testmodus ({suite}): Diese Instanz prüft sich automatisch selbst.",
+    runNow: "Jetzt ausführen",
+    queued: "Lauf angefordert. Er startet innerhalb einer Minute.",
+    cancel: "Abbrechen",
+    cancelling: "Abbruch angefordert.",
+    running: "Läuft",
+    waiting: "Wartet auf den Start",
+    checks: "Prüfungen",
+    never: "Noch keine Läufe.",
+    schedule: "Zeitplan",
+    suite: "Umfang",
+    hour: "Nachtlauf um",
+    noNight: "kein Nachtlauf",
+    save: "Speichern",
+    saved: "Zeitplan gespeichert.",
+    safeHint: "SAFE prüft nur mit eigenen Daten und simulierten Microsoft-Schichten. FULL schreibt auch in den Test-Tenant.",
+    runs: "Läufe",
+    newFailures: "Neu fehlgeschlagen",
+    recovered: "Wieder in Ordnung",
+    was: "vorher {s}",
+    sources: { manual: "von Hand", scheduled: "Nachtlauf", deploy: "nach Deploy" },
+    verdicts: { PASS: "Bestanden", WARN: "Warnung", FAIL: "Fehler", SKIP: "Übersprungen", CANCELLED: "Abgebrochen" },
+    show: "Details",
+    hide: "Ausblenden",
+    version: "Version",
+  },
+  en: {
+    title: "Self-check",
+    hint: "This instance checks itself from the outside: API and browser, with its own test accounts.",
+    off: "The test mode is off on this instance (TEST_MODE and SCALIO_STAGE dev or test). Only earlier runs are shown.",
+    banner: "Test mode ({suite}): this instance checks itself automatically.",
+    runNow: "Run now",
+    queued: "Run requested. It starts within a minute.",
+    cancel: "Cancel",
+    cancelling: "Cancel requested.",
+    running: "Running",
+    waiting: "Waiting to start",
+    checks: "checks",
+    never: "No runs yet.",
+    schedule: "Schedule",
+    suite: "Scope",
+    hour: "Nightly run at",
+    noNight: "no nightly run",
+    save: "Save",
+    saved: "Schedule saved.",
+    safeHint: "SAFE checks with own data and simulated Microsoft layers only. FULL also writes to the test tenant.",
+    runs: "Runs",
+    newFailures: "Newly failing",
+    recovered: "Recovered",
+    was: "was {s}",
+    sources: { manual: "by hand", scheduled: "nightly", deploy: "after deploy" },
+    verdicts: { PASS: "Passed", WARN: "Warning", FAIL: "Failed", SKIP: "Skipped", CANCELLED: "Cancelled" },
+    show: "Details",
+    hide: "Hide",
+    version: "Version",
+  },
+};
+
+function selftestLabels(lang, overrides) {
+  const base = LABELS[lang === "en" ? "en" : "de"];
+  return Object.assign({}, base, overrides || {});
+}
+
+const TONE = { PASS: "ok", WARN: "warn", FAIL: "error", SKIP: "neutral", CANCELLED: "neutral" };
+
+function fill(text, values) {
+  return String(text || "").replace(/\{(\w+)\}/g, (m, k) => (values && values[k] !== undefined ? values[k] : m));
+}
+
+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);
+}
+
+// api: axios instance with the app's base URL (/api).
+function selftestApi(api) {
+  const data = (p) => p.then((r) => r.data);
+  return {
+    health: () => data(api.get("/e2e/health")),
+    runs: () => data(api.get("/e2e/runs")),
+    progress: () => data(api.get("/e2e/progress")),
+    setConfig: (cfg) => data(api.post("/e2e/config", cfg)),
+    run: () => data(api.post("/e2e/run")),
+    cancel: () => data(api.post("/e2e/cancel")),
+  };
+}
+
+function fmtTime(iso, lang) {
+  if (!iso) return "";
+  try {
+    return new Date(iso).toLocaleString(lang === "en" ? "en-GB" : "de-CH", { dateStyle: "short", timeStyle: "short" });
+  } catch (e) {
+    return iso;
+  }
+}
+
+function Verdict({ verdict, L }) {
+  return h("span", { className: `scalio-badge is-${TONE[verdict] || "neutral"}`, "data-testid": "selftest-verdict" },
+    (L.verdicts && L.verdicts[verdict]) || verdict || "-");
+}
+
+function Counts({ counts }) {
+  const c = counts || {};
+  return h("span", { className: "scalio-selftest-counts" },
+    ["PASS", "FAIL", "WARN", "SKIP"].map((k) => h("span", { key: k, className: `is-${TONE[k]}` }, `${k} ${c[k] || 0}`)));
+}
+
+function groupBySection(results) {
+  const out = [];
+  const index = {};
+  (results || []).forEach((r) => {
+    if (!(r.section in index)) {
+      index[r.section] = out.length;
+      out.push({ section: r.section, items: [] });
+    }
+    out[index[r.section]].items.push(r);
+  });
+  return out;
+}
+
+function ResultList({ results }) {
+  return h("div", { className: "scalio-selftest-sections" },
+    groupBySection(results).map((g) =>
+      h("div", { key: g.section, className: "scalio-selftest-section" },
+        h("div", { className: "scalio-selftest-section-title" }, g.section),
+        h("ul", null, g.items.map((r, i) =>
+          h("li", { key: r.name + i, className: `is-${TONE[r.status] || "neutral"}`, "data-testid": "selftest-result" },
+            h("span", { className: "scalio-selftest-status" }, r.status),
+            h("span", { className: "scalio-selftest-name" }, r.name),
+            r.detail ? h("span", { className: "scalio-selftest-detail" }, r.detail) : null))))));
+}
+
+function RunRow({ run, L, lang }) {
+  const [open, setOpen] = React.useState(false);
+  const reg = run.regression || {};
+  return h("div", { className: "scalio-selftest-run", "data-testid": "selftest-run" },
+    h("div", { className: "scalio-selftest-run-head" },
+      h(Verdict, { verdict: run.verdict, L }),
+      h("span", { className: "scalio-selftest-when" }, fmtTime(run.ranAt, lang)),
+      h("span", { className: "scalio-badge is-neutral" }, run.suite),
+      h("span", { className: "scalio-selftest-source" }, (L.sources && L.sources[run.source]) || run.source),
+      run.version ? h("span", { className: "scalio-selftest-version" }, `${run.version}${run.commit ? ` · ${String(run.commit).slice(0, 7)}` : ""}`) : null,
+      h(Counts, { counts: run.counts }),
+      run.results ? h("button", { type: "button", className: "scalio-btn is-ghost", onClick: () => setOpen(!open), "data-testid": "selftest-run-toggle" },
+        open ? L.hide : L.show) : null),
+    open ? h("div", { className: "scalio-selftest-run-body" },
+      (reg.newFailures || []).length ? h("div", { className: "scalio-notice is-error", "data-testid": "selftest-new-failures" },
+        h("strong", null, L.newFailures), h("ul", null, reg.newFailures.map((r, i) =>
+          h("li", { key: i }, `${r.section} / ${r.name}`, r.was ? ` (${fill(L.was, { s: r.was })})` : "")))) : null,
+      (reg.recovered || []).length ? h("div", { className: "scalio-notice is-ok", "data-testid": "selftest-recovered" },
+        h("strong", null, L.recovered), h("ul", null, reg.recovered.map((r, i) => h("li", { key: i }, `${r.section} / ${r.name}`)))) : null,
+      h(ResultList, { results: run.results })) : null);
+}
+
+// Props: client (selftestApi or same shape), lang, labels, notify(text, tone), pollMs (default 3000), testId.
+function SelfTestPanel(props) {
+  const { client, lang, notify } = props;
+  const L = selftestLabels(lang, props.labels);
+  const pollMs = props.pollMs === undefined ? 3000 : props.pollMs;
+  const [health, setHealth] = React.useState(null);
+  const [runs, setRuns] = React.useState([]);
+  const [progress, setProgress] = React.useState(null);
+  const [error, setError] = React.useState("");
+  const [cfg, setCfg] = React.useState({ suite: "", runHour: -1 });
+  const [busy, setBusy] = React.useState(false);
+  const say = (text, tone) => (notify ? notify(text, tone || "success") : null);
+
+  const load = React.useCallback(async () => {
+    try {
+      const [hh, rr, pp] = await Promise.all([client.health(), client.runs(), client.progress()]);
+      setHealth(hh);
+      setRuns(rr.runs || []);
+      setProgress(pp);
+      setCfg({ suite: hh.suite || "", runHour: hh.runHour === null || hh.runHour === undefined ? -1 : hh.runHour });
+      setError("");
+    } catch (err) {
+      setError(errorText(err));
+    }
+  }, [client]);
+
+  React.useEffect(() => { load(); }, [load]);
+  const active = !!(progress && (progress.running || progress.queued));
+  React.useEffect(() => {
+    if (!active || !pollMs) return undefined;
+    const t = setInterval(async () => {
+      try {
+        const p = await client.progress();
+        setProgress(p);
+        if (!p.running && !p.queued) load();
+      } catch (e) { /* keep the last state */ }
+    }, pollMs);
+    return () => clearInterval(t);
+  }, [active, pollMs, client, load]);
+
+  if (!health) return error ? h("div", { className: "scalio-notice is-error", role: "alert" }, error) : null;
+  const enabled = !!health.enabled;
+
+  const act = async (fn, ok) => {
+    setBusy(true);
+    try {
+      await fn();
+      if (ok) say(ok);
+      await load();
+    } catch (err) {
+      say(errorText(err), "error");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const done = progress ? (progress.results || []).length : 0;
+  const total = Math.max(done, (progress && progress.expectedTotal) || 0);
+  const pct = total ? Math.round((done / total) * 100) : 0;
+  const hours = [-1].concat(Array.from({ length: 24 }, (_, i) => i));
+
+  return h("section", { className: "scalio-selftest", "data-testid": props.testId || "selftest-panel" },
+    h("div", { className: "scalio-selftest-part" },
+      h("div", { className: "scalio-selftest-head" },
+        h("div", null,
+          h("div", { className: "scalio-selftest-title" }, h(Icons.Activity, { className: "scalio-icon" }), L.title,
+            health.suite ? h("span", { className: "scalio-badge is-running", "data-testid": "selftest-suite" }, health.suite) : null),
+          h("p", { className: "scalio-selftest-hint" }, enabled ? L.hint : L.off)),
+        enabled ? h("div", { className: "scalio-selftest-actions" },
+          active
+            ? h("button", { type: "button", className: "scalio-btn is-danger", disabled: busy, "data-testid": "selftest-cancel",
+                onClick: () => act(() => client.cancel(), L.cancelling) }, h(Icons.X, { className: "scalio-icon" }), L.cancel)
+            : h("button", { type: "button", className: "scalio-btn is-primary", disabled: busy, "data-testid": "selftest-run-now",
+                onClick: () => act(() => client.run(), L.queued) }, h(Icons.Activity, { className: "scalio-icon" }), L.runNow)) : null),
+      active ? h("div", { className: "scalio-selftest-live", "data-testid": "selftest-live" },
+        h("div", { className: "scalio-selftest-live-head" },
+          h("span", null, progress.running ? L.running : L.waiting),
+          h("span", null, `${done}${total ? ` / ${total}` : ""} ${L.checks}`)),
+        h("div", { className: "scalio-license-bar" }, h("div", { style: { width: `${pct}%` } })),
+        progress.running ? h(ResultList, { results: (progress.results || []).slice(-8) }) : null) : null),
+    enabled ? h("div", { className: "scalio-selftest-part" },
+      h("div", { className: "scalio-selftest-sub" }, h(Icons.Clock, { className: "scalio-icon", width: 14, height: 14 }), L.schedule),
+      h("div", { className: "scalio-selftest-form" },
+        h("label", null, h("span", null, L.suite),
+          h("select", { className: "scalio-input", value: cfg.suite, "data-testid": "selftest-suite-select",
+            onChange: (e) => setCfg(Object.assign({}, cfg, { suite: e.target.value })) },
+            (health.suites || []).map((s) => h("option", { key: s, value: s }, s)))),
+        h("label", null, h("span", null, L.hour),
+          h("select", { className: "scalio-input", value: String(cfg.runHour), "data-testid": "selftest-hour-select",
+            onChange: (e) => setCfg(Object.assign({}, cfg, { runHour: Number(e.target.value) })) },
+            hours.map((x) => h("option", { key: x, value: String(x) }, x === -1 ? L.noNight : `${String(x).padStart(2, "0")}:00`)))),
+        h("button", { type: "button", className: "scalio-btn", disabled: busy, "data-testid": "selftest-save",
+          onClick: () => act(() => client.setConfig({ suite: cfg.suite, runHour: cfg.runHour }), L.saved) }, L.save)),
+      h("p", { className: "scalio-selftest-hint" }, L.safeHint)) : null,
+    h("div", { className: "scalio-selftest-part" },
+      h("div", { className: "scalio-selftest-sub" }, L.runs),
+      runs.length ? runs.map((r) => h(RunRow, { key: r.id || r.ranAt, run: r, L, lang }))
+        : h("p", { className: "scalio-selftest-hint", "data-testid": "selftest-empty" }, L.never)));
+}
+
+// Hint above the page content while the test mode is on: a Notice banner, kind warn (orange = wichtig), the same
+// in every app. Props: health ({enabled, suite}) or suite, lang, labels, optional action ({ label, href | onClick })
+// e.g. to the page «Tests».
+function SelfTestBanner(props) {
+  const suite = props.suite || (props.health && props.health.enabled && props.health.suite);
+  if (!suite) return null;
+  const L = selftestLabels(props.lang, props.labels);
+  const { Notice } = require("./blocks");
+  return h(Notice, { kind: "warn", banner: true, icon: Icons.Activity, title: fill(L.banner, { suite }), action: props.action,
+    lang: props.lang, testId: "selftest-banner" });
+}
+
+module.exports = { SelfTestPanel, SelfTestBanner, selftestApi, selftestLabels, SELFTEST_LABELS: LABELS };