@scalio-cloud/ui 0.25.1 → 0.27.0

package/README.md

@@ -295,7 +295,8 @@ const license = licenseApi(api);
 
 // Einstellungen -> System -> Lizenz (scalio-license backend: /license, /license/addons)
 <LicensePanel client={license} lang={lang} product="Citadel" kindLabel={licenseKindLabel}
-  featureLabel={licenseFeatureLabel} noFeatures="Nur Drift-Erkennung" notify={...} confirm={confirm} />
+  featureLabel={licenseFeatureLabel} noFeatures={t("Drift detection only")} notify={...} confirm={confirm} />
+// noFeatures only when the app has a better text than «Nur die Grundfunktionen»
 ```
 
 `securityApi` reads snake_case and camelCase answers. `notify(text, tone)` gets `"success"` or `"error"`; without it
@@ -304,6 +305,25 @@ the blocks show the message themselves. `confirm` is the app's dialog (`{title,
 that returns the view model described in `react/license.js`. Nexus does this: its `map` adds trial badges, seat hints, invalid
 add-ons and read-only notes (demo mode), and passes its trial notices as `statusExtra` and the reminder settings as `children`.
 
+Since 0.27.0 (ADR 0069) the panel shows three areas in the settings form (title and hint left, card right): «Status und
+Nutzung», «Add-ons», «Lizenzschlüssel». `children` with `extraTitle` (and `extraHint`) becomes a fourth area.
+
+## Gruppe System: Zurücksetzen and helpers (React)
+
+Every app shows Einstellungen → System in the same order: Lizenz, Updates, Sicherung, Zurücksetzen (`settingsGroups`
+sorts the group `system` that way). The reset block talks to scalio-platform `factory_reset`
+(`GET`/`POST /api/admin/factory-reset`):
+
+```jsx
+import { FactoryReset, factoryResetApi, SettingsField, SettingsRow } from "@scalio-cloud/ui/react";
+
+const reset = factoryResetApi(api);   // once, outside the component
+<FactoryReset client={reset} lang={lang} tokenKey="citadel_token" backupTo="/settings/backup" link={Link} />
+```
+
+`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.
+
 ## 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

@@ -356,6 +356,18 @@
 .scalio-settings-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
 .scalio-settings-body { display: flex; flex-direction: column; }
 .scalio-settings-section-footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.25rem; }
+/* Content of a settings area (ADR 0069 W1): text, help under a field, checkbox with text, a form. */
+.scalio-settings-form { display: flex; flex-direction: column; gap: 1rem; margin: 0; }
+.scalio-settings-text { margin: 0; font-size: 0.875rem; line-height: 1.5; }
+.scalio-settings-help { display: block; margin: 0.25rem 0 0; font-size: 0.75rem; color: hsl(var(--muted-foreground)); line-height: 1.5; }
+.scalio-settings-check { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; cursor: pointer; }
+.scalio-settings-check input { margin-top: 0.2rem; }
+.scalio-settings-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
+.scalio-settings-row-text { min-width: 0; font-size: 0.875rem; }
+.scalio-settings-row-text strong { display: block; font-weight: 600; }
+.scalio-settings-row + .scalio-settings-row { padding-top: 1rem; border-top: 1px solid hsl(var(--border)); }
+.scalio-settings-row.is-danger strong { color: hsl(var(--destructive)); }
+.scalio-notice .scalio-btn { margin-left: auto; flex-shrink: 0; }
 
 /* Button variants for page blocks (base: .scalio-btn in shell.css) */
 .scalio-btn.is-primary { border-color: hsl(var(--primary)); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
@@ -363,6 +375,9 @@
 .scalio-btn.is-ghost { border-color: transparent; background: transparent; color: hsl(var(--muted-foreground)); }
 .scalio-btn.is-ghost:hover { color: hsl(var(--foreground)); background: transparent; }
 .scalio-btn.is-danger { color: hsl(var(--destructive)); }
+.scalio-btn.is-danger.is-solid { border-color: hsl(var(--destructive)); background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground, 0 0% 100%)); }
+.scalio-btn.is-danger.is-solid:hover { background: hsl(var(--destructive) / 0.9); }
+.scalio-btn:disabled { opacity: 0.5; cursor: not-allowed; }
 .scalio-btn.is-ghost.is-danger { color: hsl(var(--muted-foreground)); }
 .scalio-btn.is-ghost.is-danger:hover { color: hsl(var(--destructive)); }
 .scalio-btn:disabled { opacity: 0.6; cursor: default; }
@@ -484,6 +499,19 @@
 .dark .scalio-roles-yes { color: #4ade80; }
 .scalio-roles-no { color: hsl(var(--muted-foreground)); }
 .scalio-roles-lic { margin-left: 0.375rem; }
+.scalio-roles-cell > svg, .scalio-roles-cell > input, .scalio-roles-cell > .scalio-roles-no { display: block; margin-left: auto; margin-right: auto; }
+.scalio-roles-table th.scalio-roles-col.is-mine, .scalio-roles-cell.is-mine { background: hsl(var(--primary) / 0.08); }
+.scalio-roles-table th.scalio-roles-col.is-mine .scalio-roles-name { color: hsl(var(--primary)); }
+.scalio-roles-mine { margin-bottom: 0.25rem; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: hsl(var(--primary)); }
+.scalio-tenant-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid hsl(var(--border)); border-radius: 2px; }
+.scalio-tenant-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.625rem 0.875rem; border-bottom: 1px solid hsl(var(--border)); }
+.scalio-tenant-row:last-child { border-bottom: 0; }
+.scalio-tenant-who { min-width: 0; }
+.scalio-tenant-domain { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-weight: 600; overflow-wrap: anywhere; }
+.scalio-tenant-id { margin-top: 0.125rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
+.scalio-tenant-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+.scalio-tenant-manual { display: flex; flex-direction: column; gap: 0.5rem; max-width: 28rem; }
+.scalio-btn.is-disabled { pointer-events: none; opacity: 0.5; }
 .scalio-roles-source { display: flex; flex-direction: column; gap: 0.875rem; padding: 1rem; border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--card)); font-size: 0.875rem; }
 
 /* Setup wizard (SetupWizard, ADR 0060): design of the Nexus wizard, first built in Kontor */
@@ -493,7 +521,7 @@
   padding: 1.5rem; border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--background)); color: hsl(var(--foreground));
   box-shadow: 0 16px 40px rgb(0 0 0 / 0.25); font-size: 0.875rem;
 }
-.scalio-wizard.is-wide { max-width: 56rem; }
+.scalio-wizard.is-wide { max-width: 72rem; }
 .scalio-wizard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
 .scalio-wizard-title { margin: 0; font-family: 'Chivo', sans-serif; font-size: 1.5rem; font-weight: 900; line-height: 1.2; text-transform: uppercase; letter-spacing: -0.025em; }
 .scalio-wizard-subtitle { margin: 0.25rem 0 0; color: hsl(var(--muted-foreground)); }
@@ -522,13 +550,13 @@
 .scalio-wizard-success-icon { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 999px; }
 
 /* License panel (LicensePanel) */
-.scalio-license { border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--card)); color: hsl(var(--card-foreground)); font-size: 0.875rem; }
+.scalio-license { font-size: 0.875rem; } /* areas in the settings form (ADR 0069); the cards come from .scalio-profile-section-body */
 .scalio-license-part { padding: 1.25rem; }
 .scalio-license-part + .scalio-license-part { border-top: 1px solid hsl(var(--border)); }
 .scalio-license-title { display: flex; align-items: center; gap: 0.5rem; font-family: 'Chivo', sans-serif; font-weight: 700; }
 .scalio-license-title .scalio-icon { color: hsl(var(--primary)); }
 .scalio-license-hint { margin: 0.25rem 0 0; color: hsl(var(--muted-foreground)); }
-.scalio-license-messages { display: flex; flex-direction: column; gap: 0.25rem; margin: 1.25rem 1.25rem 0; }
+.scalio-license-messages { display: flex; flex-direction: column; gap: 0.25rem; }
 .scalio-license-messages div { display: flex; gap: 0.5rem; }
 .scalio-license-messages .scalio-icon { flex-shrink: 0; margin-top: 0.125rem; }
 .scalio-license-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }

package/package.json

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

@@ -132,7 +132,8 @@ const Globe = icon([
   ["path", { d: "M2 12h20" }],
 ]);
 const Clock = icon([["circle", { cx: 12, cy: 12, r: 10 }], ["path", { d: "M12 6v6l4 2" }]]);
+const Download = icon([["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }], ["path", { d: "m7 10 5 5 5-5" }], ["path", { d: "M12 15V3" }]]);
 
 module.exports = { Sun, Moon, Monitor, LifeBuoy, BookOpen, LogOut, Menu, Check, X, Search, ChevronDown, Fingerprint, FileStack, ShieldCheck, Hammer, Activity,
   Smartphone, KeyRound, Trash, Copy, Puzzle, Plus, Pencil, Link2, Alert, History, CornerDownLeft,
-  Users, Settings, ScrollText, Info, RadioTower, Globe, Clock };
+  Users, Settings, ScrollText, Info, RadioTower, Globe, Clock, Download };

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

package/react/labels.js

@@ -64,7 +64,7 @@ const LABELS = {
       graceTip: "Diese Version liegt nach Ihrem Lizenzdatum und wechselt nach der Kulanzzeit in den Nur-Lesen-Modus.",
     },
     accountGroups: { people: "Personen", access: "Rechte" },
-    accountTabs: { users: "Benutzer", roles: "Rollen", entra: "Microsoft Entra", signIn: "Anmeldung", organizations: "Organisationen" },
+    accountTabs: { users: "Benutzer", roles: "Rollen", entra: "Rollen aus Entra ID", signIn: "Anmeldung", organizations: "Organisationen" },
     passwordPolicy: {
       label: "Anmeldung mit Passwort",
       local: "Erlaubt",
@@ -325,10 +325,26 @@ const LABELS = {
       continue: "Weiter",
       cancel: "Abbrechen",
     },
+    reset: {
+      title: "Auf Werkseinstellungen zurücksetzen",
+      hint: "Alle Daten löschen und die Instanz neu einrichten.",
+      saas: "Diese Instanz wird im Kundenportal (Scalio Compass) zurückgesetzt: Abos, Mandant verwalten, Instanz zurücksetzen. Das Portal zeigt den neuen Einrichtungscode.",
+      text: "Löscht alle Daten dieser Instanz: Benutzer, Einstellungen und alles, was Sie erfasst haben. Die Installations-ID bleibt, die Lizenz auch, ausser Sie entfernen sie. Danach startet die Instanz wieder mit der Ersteinrichtung; den neuen Einrichtungscode finden Sie im Log des Backends.",
+      warn: "Das lässt sich nicht rückgängig machen. Sichern Sie vorher, was Sie noch brauchen.",
+      backupFirst: "Zuerst sichern",
+      confirm: "Zur Bestätigung RESET eingeben",
+      removeLicense: "Lizenz ebenfalls entfernen",
+      removeLicenseHint: "Danach läuft die Instanz als freie Edition, bis wieder ein Lizenzschlüssel eingetragen ist. Die Installations-ID bleibt.",
+      password: "Ihr Passwort",
+      run: "Auf Werkseinstellungen zurücksetzen",
+    },
     license: {
       title: "Lizenz",
       hint: "Lizenzen kaufen und verlängern Sie in Scalio Compass. Der Schlüssel gilt nur für die Installations-ID unten.",
       managed: "Die Lizenz dieser Instanz wird von Ihrem Anbieter verwaltet.",
+      statusTitle: "Status und Nutzung",
+      addonsHint: "Zusätzliche Module oder Plätze. Jedes Add-on hat einen eigenen Schlüssel aus Scalio Compass.",
+      keyHint: "Der Schlüssel aus Scalio Compass. Er gilt sofort, ohne Neustart.",
       status: "Status",
       active: "Aktiv",
       limited: "Eingeschränkt",
@@ -460,7 +476,7 @@ const LABELS = {
       graceTip: "This version is past your license date and turns read-only after the grace period.",
     },
     accountGroups: { people: "People", access: "Permissions" },
-    accountTabs: { users: "Users", roles: "Roles", entra: "Microsoft Entra", signIn: "Sign-in", organizations: "Organizations" },
+    accountTabs: { users: "Users", roles: "Roles", entra: "Roles from Entra ID", signIn: "Sign-in", organizations: "Organizations" },
     passwordPolicy: {
       label: "Password sign-in",
       local: "Allowed",
@@ -717,10 +733,26 @@ const LABELS = {
       continue: "Continue",
       cancel: "Cancel",
     },
+    reset: {
+      title: "Reset to factory settings",
+      hint: "Wipe all data and set the instance up again.",
+      saas: "This instance is reset in the customer portal (Scalio Compass): Subscriptions, Manage tenant, Reset instance. The portal shows the new setup code.",
+      text: "Deletes all data of this instance: users, settings and everything you created. The installation ID stays, and the license too unless you remove it. Afterwards the instance starts with the first-run setup again; the new setup code is in the log of the backend.",
+      warn: "This cannot be undone. Back up what you still need first.",
+      backupFirst: "Back up first",
+      confirm: "Type RESET to confirm",
+      removeLicense: "Remove the license as well",
+      removeLicenseHint: "Afterwards the instance runs as the free edition until a license key is entered again. The installation ID stays.",
+      password: "Your password",
+      run: "Reset to factory settings",
+    },
     license: {
       title: "License",
       hint: "Buy or extend a license in Scalio Compass. The key is bound to the installation ID below.",
       managed: "The license of this instance is managed by your provider.",
+      statusTitle: "Status and usage",
+      addonsHint: "Extra modules or seats. Every add-on has its own key from Scalio Compass.",
+      keyHint: "The key from Scalio Compass. It applies right away, no restart needed.",
       status: "Status",
       active: "Active",
       limited: "Limited",

package/react/license.js

@@ -6,6 +6,7 @@ const React = require("react");
 const h = React.createElement;
 const Icons = require("./icons");
 const { labelsFor } = require("./labels");
+const { SettingsSection } = require("./settings");
 
 function cx() {
   return Array.prototype.slice.call(arguments).filter(Boolean).join(" ");
@@ -105,7 +106,8 @@ function UsageBar({ item }) {
 // Props: client (licenseApi or the same shape), map(license, {L, lang, kindLabel, featureLabel}) -> view model,
 // lang, labels, product ("Citadel", for the remove question), kindLabel(k), featureLabel(f), noFeatures (text when
 // the license has no features), notify(message, tone), confirm({title, action, danger}), onChange(license), children
-// (extra parts at the end, e.g. a policy form), formatError(err) -> text, className.
+// (extra parts at the end, e.g. a policy form; extraTitle/extraHint make them an own area), formatError(err) -> text,
+// className.
 function LicensePanel(props) {
   const { client, lang, notify, confirm, onChange } = props;
   const L = labelsFor(lang, props.labels).license;
@@ -179,133 +181,131 @@ function LicensePanel(props) {
         : h("dd", { className: cx(r.mono && "is-mono"), "data-testid": r.testId }, r.tone ? h("span", { className: `is-${r.tone}` }, r.value) : r.value)
     );
 
-  return h(
-    "section",
-    { className: cx("scalio-license", props.className), "data-testid": props.testId || "license-panel" },
-    h(
-      "div",
-      { className: "scalio-license-part" },
-      h("div", { className: "scalio-license-title" }, h(Icons.ShieldCheck, { className: "scalio-icon" }), L.title),
-      h("p", { className: "scalio-license-hint" }, m.managed ? L.managed : L.hint)
-    ),
-    note ? h("div", { className: cx("scalio-notice", note.tone === "error" ? "is-error" : "is-ok"), style: { margin: "1.25rem 1.25rem 0" }, role: "status" }, note.text) : null,
+  // ADR 0069 (wartung/W1): three areas in the settings form, title and hint left, card right.
+  const statusCard = [
+    note ? h("div", { key: "note", className: cx("scalio-notice", note.tone === "error" ? "is-error" : "is-ok"), role: "status" }, note.text) : null,
     m.messages.length
-      ? h("div", { className: "scalio-notice is-warn scalio-license-messages", "data-testid": "license-messages" },
+      ? h("div", { key: "msg", className: "scalio-notice is-warn scalio-license-messages", "data-testid": "license-messages" },
           m.messages.map((t) => h("div", { key: t }, h(Icons.Alert, { className: "scalio-icon" }), h("span", null, t))))
       : null,
     h(
       "div",
-      { className: "scalio-license-part scalio-license-grid" },
+      { key: "status", className: "scalio-license-status" },
       h(
         "div",
-        { className: "scalio-license-status" },
-        h(
-          "div",
-          { className: "scalio-license-edition" },
-          h("span", { className: cx("scalio-badge", m.licensed ? "is-ok" : "is-warn"), "data-testid": "license-edition" }, m.edition),
-          m.customer ? h("span", { className: "scalio-license-customer" }, m.customer) : null
-        ),
-        h("dl", { className: "scalio-license-rows" }, m.rows.map(row)),
-        m.features
-          ? h(
-              "div",
-              null,
-              h("div", { className: "scalio-license-hint", style: { marginBottom: "0.25rem" } }, L.features),
-              m.features.length
-                ? h("ul", { className: "scalio-license-features", "data-testid": "license-features" },
-                    m.features.map((f) => h("li", { key: f.key }, h(Icons.Check, { className: "scalio-icon" }), f.label)))
-                : h("p", { className: "scalio-license-hint" }, props.noFeatures || L.noFeatures)
-            )
-          : null,
-        props.statusExtra || null
+        { className: "scalio-license-edition" },
+        h("span", { className: cx("scalio-badge", m.licensed ? "is-ok" : "is-warn"), "data-testid": "license-edition" }, m.edition),
+        m.customer ? h("span", { className: "scalio-license-customer" }, m.customer) : null
       ),
-      m.usage.length
-        ? h("div", { className: "scalio-license-usage" }, h("div", { className: "scalio-license-sub" }, L.usage), m.usage.map((u) => h(UsageBar, { key: u.key, item: u })))
-        : null
-    ),
-    m.addonsHidden ? null : h(
-      "div",
-      { className: "scalio-license-part", "data-testid": "license-addons" },
-      h("div", { className: "scalio-license-sub" }, h(Icons.Puzzle, { className: "scalio-icon", width: 14, height: 14 }), L.addons),
-      m.addons.length
+      h("dl", { className: "scalio-license-rows" }, m.rows.map(row)),
+      m.features
         ? h(
             "div",
-            { className: "scalio-license-addons" },
-            m.addons.map((a) =>
+            null,
+            h("div", { className: "scalio-license-hint", style: { marginBottom: "0.25rem" } }, L.features),
+            m.features.length
+              ? h("ul", { className: "scalio-license-features", "data-testid": "license-features" },
+                  m.features.map((f) => h("li", { key: f.key }, h(Icons.Check, { className: "scalio-icon" }), f.label)))
+              : h("p", { className: "scalio-license-hint", "data-testid": "license-no-features" }, props.noFeatures || L.noFeatures)
+          )
+        : null,
+      props.statusExtra || null
+    ),
+    m.usage.length
+      ? h("div", { key: "usage", className: "scalio-license-usage" }, h("div", { className: "scalio-license-sub" }, L.usage), m.usage.map((u) => h(UsageBar, { key: u.key, item: u })))
+      : null,
+  ];
+
+  const addonCard = [
+    m.addons.length
+      ? h(
+          "div",
+          { key: "list", className: "scalio-license-addons" },
+          m.addons.map((a) =>
+            h(
+              "div",
+              { key: a.id, className: cx("scalio-license-addon", a.tone && `tone-${a.tone}`), "data-testid": `addon-card-${a.id}` },
               h(
                 "div",
-                { key: a.id, className: cx("scalio-license-addon", a.tone && `tone-${a.tone}`), "data-testid": `addon-card-${a.id}` },
+                { style: { minWidth: 0 } },
                 h(
                   "div",
-                  { style: { minWidth: 0 } },
-                  h(
-                    "div",
-                    { className: "scalio-license-addon-name" },
-                    a.name,
-                    (a.badges || []).map((b) =>
-                      h("span", { key: b.label, className: cx("scalio-badge", b.tone && `is-${b.tone}`), "data-testid": b.testId }, b.label))
-                  ),
-                  h("p", { className: "scalio-license-addon-detail" },
-                    a.detail !== undefined
-                      ? a.detail
-                      : [a.seats ? `+${a.seats}` : h("span", { key: "i", className: "is-ok" }, L.included), a.exp ? ` · ${L.maintenanceUntil} ${a.exp}` : ""])
+                  { className: "scalio-license-addon-name" },
+                  a.name,
+                  (a.badges || []).map((b) =>
+                    h("span", { key: b.label, className: cx("scalio-badge", b.tone && `is-${b.tone}`), "data-testid": b.testId }, b.label))
                 ),
-                m.managed || m.addonsReadOnly || a.removable === false
-                  ? null
-                  : h("button", { type: "button", className: "scalio-btn is-ghost is-danger", disabled: busy, title: L.remove, "aria-label": L.remove,
-                      "data-testid": `addon-remove-${a.id}`, onClick: () => run(() => client.removeAddon(a), L.addonRemoved) },
-                      h(Icons.Trash, { className: "scalio-icon" }))
-              )
+                h("p", { className: "scalio-license-addon-detail" },
+                  a.detail !== undefined
+                    ? a.detail
+                    : [a.seats ? `+${a.seats}` : h("span", { key: "i", className: "is-ok" }, L.included), a.exp ? ` · ${L.maintenanceUntil} ${a.exp}` : ""])
+              ),
+              m.managed || m.addonsReadOnly || a.removable === false
+                ? null
+                : h("button", { type: "button", className: "scalio-btn is-ghost is-danger", disabled: busy, title: L.remove, "aria-label": L.remove,
+                    "data-testid": `addon-remove-${a.id}`, onClick: () => run(() => client.removeAddon(a), L.addonRemoved) },
+                    h(Icons.Trash, { className: "scalio-icon" }))
             )
           )
-        : h("p", { className: "scalio-license-empty" }, L.noAddons),
-      m.addonErrors.map((e) =>
-        h(
-          "div",
-          { key: e.key, className: "scalio-license-addon-error", "data-testid": e.testId },
-          h("span", null, e.error),
-          e.addon && !m.managed && !m.addonsReadOnly
-            ? h("button", { type: "button", className: "scalio-license-link", disabled: busy, "data-testid": `addon-remove-${e.addon.id}`,
-                onClick: () => run(() => client.removeAddon(e.addon), L.addonRemoved) }, L.remove)
-            : null
         )
-      ),
-      m.addonsReadOnly
-        ? h("div", { className: "scalio-notice is-info", "data-testid": "license-addon-readonly" }, m.addonsReadOnly)
-        : m.managed
-        ? null
-        : h(
-            "div",
-            { className: "scalio-license-form" },
-            h("textarea", { className: "scalio-input scalio-textarea", rows: 2, value: addon, placeholder: L.addonPlaceholder, disabled: busy,
-              "aria-label": L.addonPlaceholder, "data-testid": "license-addon-input", onChange: (e) => setAddon(e.target.value) }),
-            h("div", { className: "scalio-license-actions" },
-              h("button", { type: "button", className: "scalio-btn is-primary", disabled: busy || !addon.trim(), onClick: addAddon, "data-testid": "license-addon-add" },
-                h(Icons.Plus, { className: "scalio-icon" }), L.add))
-          )
+      : h("p", { key: "empty", className: "scalio-license-empty" }, L.noAddons),
+    m.addonErrors.map((e) =>
+      h(
+        "div",
+        { key: `err-${e.key}`, className: "scalio-license-addon-error", "data-testid": e.testId },
+        h("span", null, e.error),
+        e.addon && !m.managed && !m.addonsReadOnly
+          ? h("button", { type: "button", className: "scalio-license-link", disabled: busy, "data-testid": `addon-remove-${e.addon.id}`,
+              onClick: () => run(() => client.removeAddon(e.addon), L.addonRemoved) }, L.remove)
+          : null
+      )
     ),
-    m.keyReadOnly && !m.managed
-      ? h("div", { className: "scalio-license-part" }, h("div", { className: "scalio-notice is-info", "data-testid": "license-key-readonly" }, m.keyReadOnly))
+    m.addonsReadOnly
+      ? h("div", { key: "ro", className: "scalio-notice is-info", "data-testid": "license-addon-readonly" }, m.addonsReadOnly)
       : m.managed
       ? null
       : h(
           "div",
-          { className: "scalio-license-part scalio-license-form" },
-          h("div", { className: "scalio-license-sub" }, h(Icons.KeyRound, { className: "scalio-icon", width: 14, height: 14 }), L.key),
-          h("textarea", { className: "scalio-input scalio-textarea", rows: 3, value: key, placeholder: L.keyPlaceholder, disabled: busy,
-            "aria-label": L.keyPlaceholder, "data-testid": "license-key-input", onChange: (e) => setKey(e.target.value) }),
-          h(
-            "div",
-            { className: "scalio-license-actions" },
-            h("button", { type: "button", className: "scalio-btn is-primary", disabled: busy || !key.trim(), onClick: activate, "data-testid": "license-activate" },
-              h(Icons.ShieldCheck, { className: "scalio-icon" }), L.activate),
-            m.keyPresent
-              ? h("button", { type: "button", className: "scalio-btn is-danger", disabled: busy, onClick: remove, "data-testid": "license-remove" },
-                  h(Icons.Trash, { className: "scalio-icon" }), L.remove)
-              : null
-          )
+          { key: "form", className: "scalio-license-form" },
+          h("textarea", { className: "scalio-input scalio-textarea", rows: 2, value: addon, placeholder: L.addonPlaceholder, disabled: busy,
+            "aria-label": L.addonPlaceholder, "data-testid": "license-addon-input", onChange: (e) => setAddon(e.target.value) }),
+          h("div", { className: "scalio-license-actions" },
+            h("button", { type: "button", className: "scalio-btn is-primary", disabled: busy || !addon.trim(), onClick: addAddon, "data-testid": "license-addon-add" },
+              h(Icons.Plus, { className: "scalio-icon" }), L.add))
         ),
-    props.children ? h("div", { className: "scalio-license-part" }, props.children) : null
+  ];
+
+  const keyCard = m.keyReadOnly
+    ? h("div", { className: "scalio-notice is-info", "data-testid": "license-key-readonly" }, m.keyReadOnly)
+    : h(
+        "div",
+        { className: "scalio-license-form" },
+        h("textarea", { className: "scalio-input scalio-textarea", rows: 3, value: key, placeholder: L.keyPlaceholder, disabled: busy,
+          "aria-label": L.keyPlaceholder, "data-testid": "license-key-input", onChange: (e) => setKey(e.target.value) }),
+        h(
+          "div",
+          { className: "scalio-license-actions" },
+          h("button", { type: "button", className: "scalio-btn is-primary", disabled: busy || !key.trim(), onClick: activate, "data-testid": "license-activate" },
+            h(Icons.ShieldCheck, { className: "scalio-icon" }), L.activate),
+          m.keyPresent
+            ? h("button", { type: "button", className: "scalio-btn is-danger", disabled: busy, onClick: remove, "data-testid": "license-remove" },
+                h(Icons.Trash, { className: "scalio-icon" }), L.remove)
+            : null
+        )
+      );
+
+  return h(
+    "div",
+    { className: cx("scalio-license", props.className), "data-testid": props.testId || "license-panel" },
+    h(SettingsSection, { id: "license-status", title: L.statusTitle, description: m.managed ? L.managed : L.hint, testId: "license-status-section" }, statusCard),
+    m.addonsHidden ? null : h(SettingsSection, { id: "license-addons", title: L.addons, description: L.addonsHint, testId: "license-addons" }, addonCard),
+    m.managed ? null : h(SettingsSection, { id: "license-key", title: L.key, description: L.keyHint, testId: "license-key-section" }, keyCard),
+    // Extra parts of an app (Nexus: reminders): with extraTitle as an own area, else as they are.
+    props.children
+      ? props.extraTitle
+        ? h(SettingsSection, { id: "license-extra", title: props.extraTitle, description: props.extraHint, testId: "license-extra" }, props.children)
+        : props.children
+      : null
   );
 }
 

package/react/maintenance.js

@@ -0,0 +1,106 @@
+"use strict";
+// Einstellungen -> System (ADR 0069, wartung/W2): blocks every app shows the same way. Today: Zurücksetzen (W7, after
+// Citadel). Backend: scalio-platform `factory_reset` (GET/POST /api/admin/factory-reset).
+const React = require("react");
+const h = React.createElement;
+const Icons = require("./icons");
+const { labelsFor } = require("./labels");
+const { SettingsSection, SettingsField: Field } = require("./settings");
+
+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);
+}
+
+// api: axios instance with the app's base URL (/api).
+function factoryResetApi(api) {
+  return {
+    info: () => api.get("/admin/factory-reset").then((r) => r.data),
+    run: (body) => api.post("/admin/factory-reset", body).then((r) => r.data),
+  };
+}
+
+// Props: client (factoryResetApi), lang, labels, tokenKey (localStorage key of the app's token, removed after the
+// reset), onDone() (default: go to /login), backupTo (address of Einstellungen -> Sicherung; shows «Zuerst sichern»),
+// link (the router's Link for backupTo), notify(message, tone), formatError(err).
+function FactoryReset(props) {
+  const { client, lang } = props;
+  const L = labelsFor(lang, props.labels).reset;
+  const fmtErr = props.formatError || errorText;
+  const [info, setInfo] = React.useState(null);
+  const [confirm, setConfirm] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [removeLicense, setRemoveLicense] = React.useState(false);
+  const [busy, setBusy] = React.useState(false);
+  const [error, setError] = React.useState("");
+
+  React.useEffect(() => {
+    let alive = true;
+    client.info().then((d) => alive && setInfo(d)).catch(() => alive && setInfo({ available: false }));
+    return () => { alive = false; };
+  }, [client]);
+
+  const ready = confirm.trim() === "RESET" && (!info || !info.password || !!password);
+  const run = async (e) => {
+    e.preventDefault();
+    if (!ready) return;
+    setBusy(true);
+    setError("");
+    try {
+      await client.run({ confirm, password, remove_license: removeLicense });
+      try { if (props.tokenKey) window.localStorage.removeItem(props.tokenKey); } catch (x) { /* private mode */ }
+      if (props.onDone) props.onDone();
+      else window.location.href = "/login";
+    } catch (err) {
+      const text = fmtErr(err);
+      if (props.notify) props.notify(text, "error");
+      else setError(text);
+      setBusy(false);
+    }
+  };
+
+  const backup = props.backupTo
+    ? h(props.link || "a", Object.assign({ className: "scalio-btn", "data-testid": "factory-reset-backup" },
+        props.link ? { to: props.backupTo } : { href: props.backupTo }), h(Icons.Download, { className: "scalio-icon" }), L.backupFirst)
+    : null;
+
+  return h(
+    SettingsSection,
+    { id: "reset", title: L.title, description: L.hint, testId: "factory-reset" },
+    info && !info.available
+      ? h("p", { className: "scalio-settings-text", "data-testid": "factory-reset-saas" }, L.saas)
+      : null,
+    info && info.available
+      ? h(
+          "form",
+          { className: "scalio-settings-form", onSubmit: run },
+          h("p", { className: "scalio-settings-text" }, props.text || L.text),
+          h("div", { className: "scalio-notice is-warn", "data-testid": "factory-reset-warn" },
+            h("span", null, L.warn), backup),
+          h(Field, { id: "factory-reset-confirm", label: L.confirm },
+            h("input", { id: "factory-reset-confirm", className: "scalio-input", value: confirm, autoComplete: "off", disabled: busy,
+              "data-testid": "factory-reset-confirm", onChange: (e) => setConfirm(e.target.value) })),
+          h(
+            "label",
+            { className: "scalio-settings-check" },
+            h("input", { type: "checkbox", checked: removeLicense, disabled: busy, "data-testid": "factory-reset-remove-license",
+              onChange: (e) => setRemoveLicense(e.target.checked) }),
+            h("span", null, L.removeLicense, h("span", { className: "scalio-settings-help" }, L.removeLicenseHint))
+          ),
+          info.password
+            ? h(Field, { id: "factory-reset-password", label: L.password },
+                h("input", { id: "factory-reset-password", type: "password", className: "scalio-input", value: password, disabled: busy,
+                  autoComplete: "current-password", "data-testid": "factory-reset-password", onChange: (e) => setPassword(e.target.value) }))
+            : null,
+          error ? h("div", { className: "scalio-notice is-error", role: "alert", "data-testid": "factory-reset-error" }, error) : null,
+          h("div", { className: "scalio-settings-section-footer" },
+            h("button", { type: "submit", className: "scalio-btn is-danger is-solid", disabled: busy || !ready, "data-testid": "factory-reset-run" },
+              h(Icons.Trash, { className: "scalio-icon" }), L.run))
+        )
+      : null
+  );
+}
+
+module.exports = { FactoryReset, factoryResetApi };

package/react/roles.js

@@ -1,9 +1,10 @@
 "use strict";
-// Konten und Rollen -> Rollen and -> Microsoft Entra, the same in every Scalio app (scalio-docs concepts/app-roles.md,
+// Konten und Rollen -> Rollen and -> Rollen aus Entra ID, the same in every Scalio app (scalio-docs concepts/app-roles.md,
 // roles/R1-R6). rolesApi(api, opts) maps the shared role API of scalio-platform `roles_router` (GET /roles/permissions,
 // GET/POST /roles, PATCH/DELETE /roles/{id}); RoleAdmin shows "welche Rolle darf was" (permissions as rows, roles as
-// columns), built-in roles read-only, own roles with checkboxes, add / copy / rename / delete. RoleSourceSettings is
-// the role source (Scalio app or Entra app roles) with the Entra values and, where the app has them, the tenant IDs.
+// columns), built-in roles read-only, own roles with checkboxes, add / copy / rename / delete; the column of the signed-in
+// person's role is marked. RoleSourceSettings is the role source (Scalio app or Entra app roles) with the Entra values
+// and the list of tenants whose roles count, with «Tenant hinzufügen» by admin consent (ADR 0068).
 const React = require("react");
 const h = React.createElement;
 const Icons = require("./icons");
@@ -47,8 +48,26 @@ const TEXT = {
     sourceEntra: "Microsoft Entra ID (App-Rollen)",
     hintLocal: "Sie vergeben die Rollen unter Benutzer. Werte für Entra ID, falls Sie später umstellen:",
     hintEntra: "Ab der nächsten Anmeldung entscheiden die App-Rollen der Unternehmensanwendung «Scalio» für jedes Microsoft-Konto. Wer keine Rolle hat, kann sich nicht mehr anmelden. Eigene Rollen und lokale Konten vergeben Sie weiter hier. Werte:",
-    tenants: "Microsoft-Tenant-IDs",
-    tenantsHint: "Nur App-Rollen aus diesen Tenants zählen, durch Komma getrennt.",
+    yourRole: "Ihre Rolle",
+    tenants: "Vertraute Tenants",
+    tenantsHint: "Nur App-Rollen aus diesen Tenants zählen, und Personen aus diesen Tenants können sich anmelden.",
+    tenantsEmpty: "Noch kein Tenant. Mit «Tenant hinzufügen» gibt ein Admin des Tenants die Zustimmung für die App «Scalio».",
+    tenantAdd: "Tenant hinzufügen",
+    tenantAddHint: "Sie melden sich als Admin des Tenants bei Microsoft an und stimmen der App «Scalio» zu.",
+    tenantManual: "Von Hand eintragen",
+    tenantManualHint: "Nur wenn ein Admin des Tenants der App «Scalio» schon zugestimmt hat.",
+    tenantId: "Tenant-ID",
+    tenantAddManual: "Eintragen",
+    tenantInvalid: "Das ist keine Tenant-ID (GUID).",
+    tenantRemove: "Entfernen",
+    tenantRemoveTitle: "Tenant «{name}» entfernen?",
+    tenantRemoveText: "App-Rollen aus diesem Tenant zählen dann nicht mehr. Die Unternehmensanwendung im Tenant bleibt; entfernen Sie sie dort bei Bedarf selbst.",
+    tenantFixed: "Fest",
+    tenantAdded: "Tenant hinzugefügt.",
+    tenantRemoved: "Tenant entfernt.",
+    consentCancelled: "Die Zustimmung wurde abgebrochen.",
+    consentFailed: "Die Zustimmung hat nicht geklappt. Melden Sie sich mit einem Konto an, das in diesem Tenant Admin ist.",
+    consentForbidden: "Nur Admins dieser App können einen Tenant hinzufügen.",
     entraConfirm: "Rollen aus Entra ID übernehmen?",
     entraConfirmText: "Ab der nächsten Anmeldung entscheiden die App-Rollen in Entra ID für jedes Microsoft-Konto. Personen ohne Rolle können sich nicht mehr anmelden.",
     entraAction: "Entra ID verwenden",
@@ -90,8 +109,26 @@ const TEXT = {
     sourceEntra: "Microsoft Entra ID (app roles)",
     hintLocal: "You give roles under Users. Values for Entra ID, in case you switch later:",
     hintEntra: "From the next sign-in, the app roles of the enterprise application “Scalio” decide for every Microsoft account. People without a role can no longer sign in. Own roles and local accounts are still given here. Values:",
-    tenants: "Microsoft tenant IDs",
-    tenantsHint: "Only app roles from these tenants count, separated by commas.",
+    yourRole: "Your role",
+    tenants: "Trusted tenants",
+    tenantsHint: "Only app roles from these tenants count, and people from these tenants can sign in.",
+    tenantsEmpty: "No tenant yet. With “Add tenant” an admin of the tenant consents to the app “Scalio”.",
+    tenantAdd: "Add tenant",
+    tenantAddHint: "You sign in to Microsoft as an admin of the tenant and consent to the app “Scalio”.",
+    tenantManual: "Enter by hand",
+    tenantManualHint: "Only if an admin of the tenant already consented to the app “Scalio”.",
+    tenantId: "Tenant ID",
+    tenantAddManual: "Add",
+    tenantInvalid: "This is not a tenant ID (GUID).",
+    tenantRemove: "Remove",
+    tenantRemoveTitle: "Remove the tenant “{name}”?",
+    tenantRemoveText: "App roles from this tenant no longer count. The enterprise application stays in the tenant; remove it there yourself if needed.",
+    tenantFixed: "Fixed",
+    tenantAdded: "Tenant added.",
+    tenantRemoved: "Tenant removed.",
+    consentCancelled: "The consent was cancelled.",
+    consentFailed: "The consent did not work. Sign in with an account that is an admin in this tenant.",
+    consentForbidden: "Only admins of this app can add a tenant.",
     entraConfirm: "Take roles from Entra ID?",
     entraConfirmText: "From the next sign-in, the app roles in Entra ID decide for every Microsoft account. People without a role can no longer sign in.",
     entraAction: "Use Entra ID",
@@ -265,9 +302,11 @@ function RoleAdmin(props) {
   const byGroup = (g) => catalog.permissions.filter((p) => (p.group || "") === g || (!groups.includes(p.group || "") && g === groups[0]));
   const usersText = (r) => (r.users === null ? "" : r.users === 1 ? L.oneUser : fill(L.users, { n: r.users }));
 
+  const mine = (r) => props.currentRole !== undefined && props.currentRole !== null && String(props.currentRole) === r.id;
   const head = h("tr", null,
     h("th", { className: "scalio-roles-perm" }, L.permission),
-    roles.map((r) => h("th", { key: r.id, className: cx("scalio-roles-col", r.builtin ? "is-builtin" : "is-own"), "data-testid": `role-col-${r.id}` },
+    roles.map((r) => h("th", { key: r.id, className: cx("scalio-roles-col", r.builtin ? "is-builtin" : "is-own", mine(r) && "is-mine"), "data-testid": `role-col-${r.id}` },
+      mine(r) ? h("div", { className: "scalio-roles-mine", "data-testid": "role-yours" }, L.yourRole) : null,
       h("div", { className: "scalio-roles-name" }, tr(r.name, lang)),
       h("div", { className: "scalio-roles-meta" },
         h("span", null, r.builtin ? L.builtin : L.own),
@@ -282,10 +321,10 @@ function RoleAdmin(props) {
   const cell = (r, p) => {
     const has = r.admin || r.permissions.includes(p.key);
     if (r.builtin || !canEdit) {
-      return h("td", { key: r.id, className: "scalio-roles-cell", "data-testid": `role-cell-${r.id}-${p.key}` },
+      return h("td", { key: r.id, className: cx("scalio-roles-cell", mine(r) && "is-mine"), "data-testid": `role-cell-${r.id}-${p.key}` },
         has ? h(Icons.Check, { className: "scalio-icon scalio-roles-yes", "aria-label": "✓" }) : h("span", { className: "scalio-roles-no", "aria-label": "–" }, "–"));
     }
-    return h("td", { key: r.id, className: "scalio-roles-cell" },
+    return h("td", { key: r.id, className: cx("scalio-roles-cell", mine(r) && "is-mine") },
       h("input", { type: "checkbox", checked: has, disabled: busy, onChange: () => toggle(r, p.key),
         "aria-label": `${tr(r.name, lang)}: ${tr(p.label, lang)}`, "data-testid": `role-check-${r.id}-${p.key}` }));
   };
@@ -303,7 +342,7 @@ function RoleAdmin(props) {
   body.push(h("tr", { key: "admin-only", className: "scalio-roles-group" }, h("td", { colSpan: roles.length + 1 }, L.adminOnly)));
   body.push(h("tr", { key: "admin-row" },
     h("td", { className: "scalio-roles-perm" }, L.adminAll),
-    roles.map((r) => h("td", { key: r.id, className: "scalio-roles-cell" },
+    roles.map((r) => h("td", { key: r.id, className: cx("scalio-roles-cell", mine(r) && "is-mine") },
       r.admin ? h(Icons.Check, { className: "scalio-icon scalio-roles-yes", "aria-label": "✓" }) : h("span", { className: "scalio-roles-no" }, "–")))));
 
   const dialogEl = dialog ? h(Dialog, { title: dialog.mode === "add" ? L.addTitle : L.renameTitle, onClose: close, testId: "role-dialog" },
@@ -339,46 +378,128 @@ function RoleAdmin(props) {
     dialogEl);
 }
 
-// Props: value {source: "local"|"entra", values: [...], tenants?: [...]}, onSave({source, tenants}) -> Promise,
-// tenants (show the tenant field), lang, labels, confirm, notify, formatError, disabled, testId.
+const GUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
+// A tenant entry: "tid" (old lists) or {tid, domain, fixed, label, href}.
+function tenantOf(x) {
+  if (typeof x === "string") return { tid: x.trim().toLowerCase(), domain: "" };
+  return Object.assign({}, x, { tid: String(x.tid || x.id || "").trim().toLowerCase(), domain: x.domain || "" });
+}
+
+// Back from «Tenant hinzufügen»: ?entra_tenant=added|cancelled|failed|forbidden (scalio-identity 0.5.0).
+function consentResult() {
+  if (typeof window === "undefined" || !window.location) return "";
+  try {
+    const url = new URL(window.location.href);
+    const res = url.searchParams.get("entra_tenant") || "";
+    if (res && window.history && window.history.replaceState) {
+      url.searchParams.delete("entra_tenant");
+      window.history.replaceState(window.history.state, "", url.pathname + url.search + url.hash);
+    }
+    return res;
+  } catch (e) {
+    return "";
+  }
+}
+
+// Props: value {source: "local"|"entra", values: [...], tenants?: [tid | {tid, domain, fixed}]},
+// onSave({source, tenants: [{tid, domain}]}) -> Promise, tenants (show the tenant list), consentUrl (button «Tenant
+// hinzufügen», e.g. "/api/auth/scalio/consent"), manual (default true: enter a tenant ID by hand), fixed (one fixed
+// tenant, no add or remove: Nexus), extraTenants [{tid, domain, label, href}] and extraTitle (view only: Rosetta's
+// customer tenants), lang, labels, confirm, notify, formatError, disabled, testId.
 function RoleSourceSettings(props) {
   const lang = props.lang === "en" ? "en" : "de";
   const L = rolesText(lang, props.labels);
   const v = props.value || { source: "local", values: [] };
+  const list = (v.tenants || []).map(tenantOf).filter((t) => t.tid);
   const [source, setSource] = React.useState(v.source || "local");
-  const [tenants, setTenants] = React.useState((v.tenants || []).join(", "));
+  const [manual, setManual] = React.useState(null); // null = closed, else the typed id
   const [busy, setBusy] = React.useState(false);
-  React.useEffect(() => { setSource(v.source || "local"); setTenants((v.tenants || []).join(", ")); }, [v.source, (v.tenants || []).join(",")]);
-  const dirty = source !== (v.source || "local") || (props.tenants && tenants !== (v.tenants || []).join(", "));
-  const save = async () => {
-    if (source === "entra" && v.source !== "entra" && !(await ask(props.confirm, L.entraConfirm, L.entraConfirmText, L.entraAction, false))) return;
+  const [error, setError] = React.useState("");
+  const say = (text, tone) => props.notify && props.notify(text, tone || "success");
+  const fmt = props.formatError || errorText;
+  React.useEffect(() => { setSource(v.source || "local"); }, [v.source]);
+  React.useEffect(() => {
+    const res = consentResult();
+    if (res === "added") say(L.tenantAdded);
+    else if (res === "cancelled") say(L.consentCancelled, "error");
+    else if (res === "forbidden") say(L.consentForbidden, "error");
+    else if (res) say(L.consentFailed, "error");
+  }, []);
+  const dirty = source !== (v.source || "local");
+  const store = async (src, tenants, okText) => {
     setBusy(true);
+    setError("");
     try {
-      await props.onSave({ source, tenants: tenants.split(/[\s,;]+/).filter(Boolean) });
-      if (props.notify) props.notify(L.saved, "success");
+      await props.onSave({ source: src, tenants: tenants.map((t) => ({ tid: t.tid, domain: t.domain || "" })) });
+      say(okText || L.saved);
+      return true;
     } catch (e) {
-      if (props.notify) props.notify((props.formatError || errorText)(e), "error");
+      say(fmt(e), "error");
+      return false;
     } finally {
       setBusy(false);
     }
   };
+  const save = async () => {
+    if (source === "entra" && v.source !== "entra" && !(await ask(props.confirm, L.entraConfirm, L.entraConfirmText, L.entraAction, false))) return;
+    store(source, list.filter((t) => !t.fixed));
+  };
+  const remove = async (t) => {
+    if (!(await ask(props.confirm, fill(L.tenantRemoveTitle, { name: t.domain || t.tid }), L.tenantRemoveText, L.tenantRemove))) return;
+    store(v.source || "local", list.filter((x) => !x.fixed && x.tid !== t.tid), L.tenantRemoved);
+  };
+  const addManual = async (e) => {
+    e.preventDefault();
+    const tid = (manual || "").trim().toLowerCase();
+    if (!GUID.test(tid)) { setError(L.tenantInvalid); return; }
+    if (list.some((t) => t.tid === tid)) { setManual(null); return; }
+    if (await store(v.source || "local", [...list.filter((t) => !t.fixed), { tid, domain: "" }], L.tenantAdded)) setManual(null);
+  };
   const values = (v.values || []).map((x) => (typeof x === "string" ? x : x.value || x.name)).filter(Boolean);
+  const off = props.disabled || busy;
+  const row = (t, extra) => h("li", { key: t.tid, className: "scalio-tenant-row", "data-testid": `tenant-${t.tid}` },
+    h("div", { className: "scalio-tenant-who" },
+      h("div", { className: "scalio-tenant-domain" }, t.href ? h("a", { href: t.href }, t.domain || t.label || t.tid) : (t.domain || t.label || t.tid),
+        t.label && t.domain ? h("span", { className: "scalio-badge" }, t.label) : null),
+      t.domain || t.label ? h("div", { className: "scalio-tenant-id" }, t.tid) : null),
+    extra ? null : t.fixed || props.fixed
+      ? h("span", { className: "scalio-badge" }, L.tenantFixed)
+      : h("button", { type: "button", className: "scalio-btn is-ghost scalio-roles-tool is-danger", onClick: () => remove(t), disabled: off, "data-testid": `tenant-remove-${t.tid}` }, L.tenantRemove));
+  const tenantBlock = props.tenants ? h("div", { className: "scalio-users-field", "data-testid": "role-source-tenants" },
+    h("div", { className: "scalio-field-label" }, L.tenants),
+    list.length
+      ? h("ul", { className: "scalio-tenant-list" }, list.map((t) => row(t, false)))
+      : h("p", { className: "scalio-users-hint", "data-testid": "tenants-empty" }, L.tenantsEmpty),
+    h("p", { className: "scalio-users-hint" }, L.tenantsHint),
+    props.fixed ? null : h("div", { className: "scalio-tenant-actions" },
+      props.consentUrl ? h("a", { className: cx("scalio-btn is-primary", off && "is-disabled"), href: props.consentUrl, title: L.tenantAddHint, "data-testid": "tenant-add" },
+        h(Icons.Plus, { className: "scalio-icon" }), L.tenantAdd) : null,
+      props.manual !== false && manual === null ? h("button", { type: "button", className: "scalio-btn", onClick: () => { setError(""); setManual(""); }, disabled: off, "data-testid": "tenant-manual" }, L.tenantManual) : null),
+    manual !== null ? h("form", { className: "scalio-tenant-manual", onSubmit: addManual },
+      h("label", { className: "scalio-field-label", htmlFor: "tenant-manual-id" }, L.tenantId),
+      h("input", { id: "tenant-manual-id", className: "scalio-input", value: manual, autoFocus: true, placeholder: "00000000-0000-0000-0000-000000000000",
+        onChange: (e) => setManual(e.target.value), disabled: off, "data-testid": "tenant-manual-id" }),
+      h("p", { className: "scalio-users-hint" }, L.tenantManualHint),
+      error ? h("p", { className: "scalio-notice is-error", role: "alert", "data-testid": "tenant-manual-error" }, error) : null,
+      h("div", { className: "scalio-tenant-actions" },
+        h("button", { type: "button", className: "scalio-btn is-ghost", onClick: () => setManual(null) }, L.cancel),
+        h("button", { type: "submit", className: "scalio-btn is-primary", disabled: off || !manual.trim(), "data-testid": "tenant-manual-save" }, L.tenantAddManual))) : null,
+    props.extraTenants && props.extraTenants.length ? h("div", { className: "scalio-users-field", "data-testid": "role-source-extra" },
+      props.extraTitle ? h("div", { className: "scalio-field-label" }, props.extraTitle) : null,
+      h("ul", { className: "scalio-tenant-list" }, props.extraTenants.map(tenantOf).map((t) => row(t, true)))) : null) : null;
   return h("div", { className: "scalio-roles-source", "data-testid": props.testId || "role-source" },
     h("div", { className: "scalio-users-field" },
       h("label", { className: "scalio-field-label", htmlFor: "role-source-select" }, L.source),
-      h("select", { id: "role-source-select", className: "scalio-input scalio-users-select", value: source, disabled: props.disabled || busy,
-        onChange: (e) => setSource(e.target.value), "data-testid": "role-source-select" },
-        h("option", { value: "local" }, L.sourceLocal),
-        h("option", { value: "entra" }, L.sourceEntra))),
-    props.tenants ? h("div", { className: "scalio-users-field" },
-      h("label", { className: "scalio-field-label", htmlFor: "role-source-tenants" }, L.tenants),
-      h("input", { id: "role-source-tenants", className: "scalio-input", value: tenants, disabled: props.disabled || busy,
-        onChange: (e) => setTenants(e.target.value), "data-testid": "role-source-tenants" }),
-      h("p", { className: "scalio-users-hint" }, L.tenantsHint)) : null,
+      h("div", { className: "scalio-tenant-actions" },
+        h("select", { id: "role-source-select", className: "scalio-input scalio-users-select", value: source, disabled: off,
+          onChange: (e) => setSource(e.target.value), "data-testid": "role-source-select" },
+          h("option", { value: "local" }, L.sourceLocal),
+          h("option", { value: "entra" }, L.sourceEntra)),
+        h("button", { type: "button", className: "scalio-btn is-primary", onClick: save, disabled: off || !dirty, "data-testid": "role-source-save" }, L.save))),
     h("p", { className: "scalio-users-hint", "data-testid": "role-source-hint" }, source === "entra" ? L.hintEntra : L.hintLocal, " ",
       values.map((x, i) => h(React.Fragment, { key: x }, i ? ", " : "", h("code", null, x)))),
-    h("div", null,
-      h("button", { type: "button", className: "scalio-btn is-primary", onClick: save, disabled: props.disabled || busy || !dirty, "data-testid": "role-source-save" }, L.save)));
+    tenantBlock);
 }
 
 module.exports = { RoleAdmin, RoleSourceSettings, rolesApi, rolesText };

package/react/settings.js

@@ -23,12 +23,19 @@ function orderGroups(groups) {
   return pick(FIXED_HEAD).concat(list.filter((g) => fixed.indexOf(g.id) < 0), pick(FIXED_TAIL));
 }
 
+// Gruppe System is the same in every app (ADR 0069 W2): Lizenz, Updates, Sicherung, Zurücksetzen, then the rest.
+const SYSTEM_ORDER = ["license", "updates", "backup", "reset"];
+function systemFirst(items) {
+  const rank = (i) => (SYSTEM_ORDER.indexOf(i.id) < 0 ? SYSTEM_ORDER.length : SYSTEM_ORDER.indexOf(i.id));
+  return items.map((i, n) => [i, n]).sort((a, b) => rank(a[0]) - rank(b[0]) || a[1] - b[1]).map((x) => x[0]);
+}
+
 // Visible groups with their visible items, in the fixed order. Empty groups disappear.
 function settingsGroups(groups, L) {
   return orderGroups(groups)
     .map((g) => Object.assign({}, g, {
       label: g.label || (L && L.settingsGroups && L.settingsGroups[g.id]) || g.id,
-      items: (g.items || []).filter((i) => i && !i.hidden),
+      items: (g.id === "system" ? systemFirst : (x) => x)((g.items || []).filter((i) => i && !i.hidden)),
     }))
     .filter((g) => g.items.length > 0);
 }
@@ -215,4 +222,25 @@ function SettingsSection({ id, title, description, children, footer, testId }) {
   );
 }
 
-module.exports = { SettingsLayout, SettingsSection, settingsGroups, matchSetting, SETTINGS_GROUP_ORDER: FIXED_HEAD.concat(["<app>"], FIXED_TAIL) };
+// A labelled field inside an area: label above, help text below (ADR 0069 W1). htmlFor ties the label to the input.
+function SettingsField({ id, label, hint, children, testId }) {
+  return h(
+    "div",
+    { className: "scalio-profile-field", "data-testid": testId },
+    label ? h("label", { className: "scalio-field-label", htmlFor: id }, label) : null,
+    children,
+    hint ? h("p", { className: "scalio-settings-help" }, hint) : null
+  );
+}
+
+// A switch or button on the right of a text: title, help, control (e.g. the app's own Switch).
+function SettingsRow({ title, hint, children, testId, tone }) {
+  return h(
+    "div",
+    { className: cx("scalio-settings-row", tone && `is-${tone}`), "data-testid": testId },
+    h("div", { className: "scalio-settings-row-text" }, h("strong", null, title), hint ? h("span", { className: "scalio-settings-help" }, hint) : null),
+    children
+  );
+}
+
+module.exports = { SettingsLayout, SettingsSection, SettingsField, SettingsRow, settingsGroups, matchSetting, SETTINGS_GROUP_ORDER: FIXED_HEAD.concat(["<app>"], FIXED_TAIL), SYSTEM_ORDER };