@scalio-cloud/ui 0.25.0 → 0.26.0

package/README.md

@@ -335,13 +335,14 @@ see `fonts/licenses/`. Icons in `react/icons.js`: Lucide, ISC license, see `lice
 
 ## Release
 
-1. Change the files, add a file `changelog.d/<name>.md` (never edit `CHANGELOG.md` directly), bump `version` in `package.json` (semver; tag without `v`).
+1. Change the files and bump `version` in `package.json` (semver; tag without `v`).
 2. Merge to `main`, then release it: in the Scalio Dev cockpit (row Scalio UI, "Freigeben" with the version) or
    in GitHub (Actions -> publish -> Run workflow on main, or create the tag/release yourself). The `publish`
    workflow tests and publishes that version to npmjs.com via trusted publishing (no token; npm org
    `scalio-cloud`, trusted publisher Scalio-Cloud / scalio-ui / publish.yml) and, when started by hand or from
-   the cockpit, creates the tag and GitHub release with the CHANGELOG lines. Before merging the version bump, run
-   `python3 tools/changelog.py release <version>` to move `changelog.d/` into `CHANGELOG.md`.
+   the cockpit, creates the tag and GitHub release with the CHANGELOG lines. The changelog lives in scalio-docs
+   `changelog/scalio-ui/` (ADR 0066): every change adds a file `changelog.d/<name>.md` there, and before the release a
+   docs PR runs `python3 tools/changelog.py --repo scalio-ui release <version>`.
 3. Apps update with `yarn upgrade @scalio-cloud/ui@<version>` in their own PR.
 
 `npm test` checks: light/dark variables match, the preset only uses defined variables, all font files exist,

package/nav.css

@@ -484,6 +484,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 +506,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)); }

package/package.json

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

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/CHANGELOG.md

@@ -1,266 +0,0 @@
-# Changelog
-
-## 0.25.0
-Rollen, Microsoft Entra und eigene Rollen in allen Apps angleichen (scalio-docs `concepts/app-roles.md`, `roles/R1`–`R6`).
-- New `RoleAdmin` for Konten und Rollen → Rollen: table «welche Rolle darf was» (permissions as rows, grouped; roles as
-  columns with number of accounts and a license mark), built-in roles read-only, own roles with checkboxes, «Rolle
-  anlegen» (empty or with the permissions of another role), copy, rename, delete (the app refuses roles that are still
-  given). A row «Nur für Administratoren» shows what only the administrator may do.
-- `rolesApi(api, {base, permissions})` for the shared role API of scalio-platform 0.3.0 `roles_router`
-  (`GET /roles/permissions`, `GET/POST /roles`, `PATCH/DELETE /roles/{id}`; Nexus passes `permissions: "/permissions"`).
-  Texts of permissions and roles may be strings or `{de, en}`.
-- New `RoleSourceSettings` for Konten und Rollen → Microsoft Entra: role source (this app or Entra app roles), the
-  Entra values, optional tenant IDs, confirmation before switching to Entra.
-- Styles `.scalio-roles*` in nav.css. No token changes, nothing changes until an app uses the new components.
-- `UserAdmin` (follow-up to 0.23.0, built then but not released): badge «Eingeladen» for open invitations (`invited`
-  on an account, `invite_only` for a row that is only an invitation; such a row offers only «Einladung zurückziehen»,
-  which calls `DELETE /users/{id}`); when the invitation mail could not be sent, the app returns `invite_link` and
-  `UserAdmin` shows the link once; badges below the address, actions wrap, last sign-in only on wide screens,
-  disabled fields greyed.
-
-## 0.24.0
-Einrichtungsassistent als Standard für alle Apps (scalio-docs ADR 0060, contract `interfaces/setup-wizard.md`).
-- New `SetupWizard`: the first-step dialog of Nexus and Kontor as a shared shell. Steps come as configuration
-  (`id`, `label`, `title`, `description`, `content`, `onNext`, `canNext`, `optional`); stepper on top, «Schritt n von
-  m», Zurück/Weiter, «Überspringen» for optional steps, errors of `onNext` keep the step open, short success message
-  at the end. Without `onClose` it cannot be closed; `wide` for steps with tables. Texts DE/EN in `labels.wizard`.
-- `setupWizardApi(api, {base})` for `GET/PUT /api/setup/wizard` (reads snake_case and camelCase), `useSetupWizard()`
-  (loads the state, opens once by itself at the saved step while the setup is needed, saves each step, completes),
-  `openSetupWizard()` and `SetupWizardButton` for Einstellungen.
-- Styles `.scalio-wizard*` in nav.css. No token changes, nothing changes until an app uses the wizard.
-
-## 0.23.0
-Benutzerverwaltung in allen Apps angleichen (scalio-docs ADR 0059, `users/B1`–`B6`, contract `interfaces/app-users.md`).
-- New `UserAdmin` for Konten und Rollen → Benutzer, the same in every app: list with search and badges (Microsoft,
-  Passwort, Rolle aus Entra, Notfall-Administrator, Gesperrt, Wartet auf Freigabe), «Benutzer hinzufügen» (Microsoft,
-  Passwort with a start password shown once, or invitation by e-mail), «Bearbeiten» (name and e-mail only for accounts
-  without Microsoft, role, access, lock, emergency administrator) with the actions new start password, remove password,
-  reset second factor, unlink Microsoft and delete; waiting accounts: role, access, «Freischalten», «Zusammenführen».
-  The app passes roles and an optional access column/field (customers, organisation).
-- `usersApi(api, {base})` for the shared routes (`/users`, Nexus `/admins`), reads snake_case and camelCase.
-- `MicrosoftConnection` for the profile section «Verknüpfungen» (link or unlink one's own Microsoft account).
-- New icons `Pencil`, `Link2`; modal dialog styles (`.scalio-dialog*`). No token changes, nothing changes until an app
-  uses the new components.
-
-## 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
-  gets a third tab «Ideen»: ideas of this app (most votes, newest, done), vote and take back, «Meine», idea page with
-  the answer from Scalio and comments, and «Idee vorschlagen» with similar ideas shown while typing.
-- With ideas on, the ticket category «Wunsch» leaves the ticket form. A self-hosted installation without a connection
-  shows a link to the public page (`<portal>/ideen`), also in the link-only support view.
-- New export `IdeasPanel`; CSS in `nav.css` (`.scalio-idea-*`, `.scalio-ideas*`).
-- **Visible change:** only in apps that pass `{ ideas: true }`. No token changes.
-
-## 0.19.0
-Settings card "Scalio Beacon" for the apps (Beacon phase 3, scalio-docs `concepts/beacon-suite.md`).
-- `BeaconConnection` with `peersApi(api)`: pair the installation with a Beacon instance (address + one-time code from
-  Beacon), show the pairing (address, version, last contact, queue), test it and disconnect. Routes from
-  scalio-connect 0.8.0 (`scalio_connect.peers.web.admin_router`).
-- Labels `beacon*` in German and English.
-- **Visible change:** none until an app shows the card. No token changes.
-
-## 0.18.1
-Page actions after Markus' feedback (2026-10-31, UISPEC section 2 "Page actions"). 0.18.0 was released before these
-changes were merged; apps use 0.18.1.
-- The slot is shown only when a page has actions and pushes the menu down; no reserved room, no separator line.
-- 0.25rem above the buttons, 0.875rem from the last button to the next section heading (half the usual gap).
-- Only Übersicht (first item of a first section without heading) is pinned; further items of that section stay in
-  the menu (Pulse: Geräte).
-- Buttons in the slot: same height (2.25rem), one line, long labels end with "…". Labels without "Neu" (README).
-- **Visible change:** only in apps that set `pageActions`. No token changes.
-
-## 0.18.0
-Page actions in the sidebar, first version (Markus 2026-10-31, reference Scalio Kontor; scalio-docs ADR 0042 Nachtrag).
-- New `react/actions.js`: `PageActions` puts a page's actions (Neu …, Import, Zurück) into a fixed slot in the
-  sidebar right below Übersicht from 768px; on phones they stay in the page header. `ActionSlot`, `useDesktop()`.
-- `Sidebar` gets `pageActions`: Übersicht pinned on top, then the slot (room for two buttons, line below), then the
-  sections. `shell.css`: an empty `.scalio-page-actions` is hidden. `react-dom` is an optional peer dependency.
-- **Visible change:** none until an app sets `pageActions`. No token changes.
-
-## 0.17.0
-Scalio Pulse is built (scalio-docs ADR 0043, P1 started 2026-10-31).
-- Product switcher: "Pulse" is no longer marked "bald"; it behaves like the other apps (link from `SCALIO_APP_LINKS`).
-- `manualUrl("pulse")`: docs.scaliopulse.com / devdocs.scaliopulse.com.
-- **Visible change:** after the upgrade, Pulse in the switcher loses the "bald" badge and is greyed out until the
-  instance has a link for it. No token changes.
-
-## 0.16.0
-Same profile page in every app, reference Scalio Nexus (Markus 2026-10-31, scalio-docs ADR 0042 Nachtrag).
-- New `react/profile.js`: `ProfileIdentity` (letters, name, email · role), `ThemeChoice` (Hell, Dunkel, System as
-  option cards), `LanguageChoice` (flags, `fixed` for an instance-wide language), `TimezoneChoice` (searchable
-  list, "Automatisch" = browser), `PasswordChange` (current, new, confirm; mismatch check, error from the API).
-- Helpers: `setUserTimezone`, `currentTz`, `browserTz`, `listTimezones`, `tzOffset` (apps format dates with
-  `currentTz()`), `applyTheme(mode)` / `resolveTheme` / `normalizeTheme` for light, dark and system.
-- Icons `Globe`, `Clock`; labels `profile_` (DE/EN). Default security hint now names authenticator app and passkeys.
-- **Visible change:** none until an app uses the new parts. No token changes.
-
-## 0.15.0
-New app Scalio Beacon (service desk, scalio-docs ADR 0044).
-- Product switcher: entry "Beacon" (icon `RadioTower`) between Citadel and Pulse, available like the others.
-- `manualUrl("beacon")`: docs.scaliobeacon.com / devdocs.scaliobeacon.com.
-- **Visible change:** every app shows "Beacon" in the switcher after its upgrade (greyed out until the instance
-  has a link in `SCALIO_APP_LINKS`). No token changes.
-
-## 0.14.0
-UI alignment round 1, follow-up (scalio-docs ADR 0042, Markus 2026-10-30).
-- `accountGroups({ lang, base, show })` and `accountArea(part)`: Konten und Rollen in the structure of the settings
-  page (groups Personen, Rechte, Sicherheit; one address per area, `/accounts/<area>`).
-- `SettingsLayout` takes `root` (e.g. "Konten und Rollen") for the crumb, title fallback and nav label.
-- `SubNav` with `value` and `onSelect` renders in-page tabs (buttons, `role="tablist"`).
-- New CSS classes `.scalio-tabs` / `.scalio-tab` in `nav.css`: in-page tabs (shadcn Tabs) look like the sub
-  navigation (underline, like Nexus "Gruppen").
-- **Visible change:** none until an app uses the new parts. No token changes.
-
-## 0.13.0
-UI alignment round 1 (scalio-docs ADR 0041).
-- `editionBadges(license, { admin, demo, lang })` and `EditionBadges`: edition badge next to the product name from the
-  scalio-license state (Free, plan, trial with days left, demo; read-only or grace for administrators). `Brand`
-  takes `brand.badges` and shows them on the name line.
-- `adminSection({ audit, accounts, settings })`: the sidebar section "Verwaltung" with fixed order, words and icons
-  (new inline icons `ScrollText`, `Users`, `Settings`, `Info`).
-- `ApiStatus` / `useApiStatus(check)`: nothing while the API answers, a red badge "API nicht erreichbar" when not.
-- `Notice` gets an icon, `action`, `onDismiss` ("Später") and `banner` (full width above the page).
-- `accountTabs()` (Benutzer, Rollen, Microsoft Entra, Anmeldung, Organisationen), `PasswordPolicySelect` and
-  `policyAllowed()`: "nur Notfall-Administrator" and "aus" stay disabled until an emergency administrator exists.
-- **Visible change:** existing `Notice` boxes get an icon in front and lay out as a row. Everything else only where
-  an app uses the new parts. No token changes.
-
-## 0.12.0
-- New manual button in `AppHeader` (prop `docsUrl`): a book icon between theme and support that opens the product
-  manual in a new tab; `DocsButton` on its own, `manualUrl(product, { stage, lang })` builds the address
-  (`devdocs.<domain>` on dev and test, `docs.<domain>` on production, demo and self-hosted, German under `/de/`).
-  **Visible change** only in apps that pass `docsUrl`; no token changes.
-
-## 0.11.0
-- Self-hosted support (ADR 0022, T11; needs scalio-connect 0.7.0 in the backend): `supportApi` gets `status()` and
-  `setButtonHidden(hidden)`. The support drawer asks `status()` first; a self-hosted installation without a
-  connection shows no form, only a note and the button "Zum Scalio-Portal" (`<portal>/support`). The card
-  "Support-Verbindung" gets the switch "Support-Knopf in der Kopfzeile ausblenden". **Visible change** only where
-  the backend reports `link_only` or the client has `setButtonHidden`; no token changes.
-
-## 0.10.0
-- `LicensePanel` takes more from an app's own `map`: a `hint` per usage bar (e.g. base + add-on seats), add-ons with
-  `badges`, `detail`, `tone` (`info`/`warn`) and `removable: false`, `addonErrors` (invalid add-ons, removable),
-  `addonsHidden`, `addonsReadOnly` and `keyReadOnly` (a note instead of the form) and a `copied` text per row.
-  Lets Nexus keep its trials, demo mode and badges on the shared panel. **No visible change** for apps that use
-  `mapScalioLicense`.
-
-## 0.9.0
-- New `CommandPalette` (⌘K / Strg+K): finds every page of the sidebar data (`nav`) plus extra `pages`, remembers the
-  last visited pages, and takes app commands as `groups` (Nexus: AI and guarded actions). Arrow keys, Enter, Esc,
-  no dialog library. Helpers `openCommandPalette()` (for the sidebar search button), `paletteShortcut(lang)`,
-  `paletteGroups`, `palettePages`. `LABELS` get the palette texts, `Icons` get History and CornerDownLeft.
-  **No visible change** until an app uses it; Nexus keeps its test ids (`command-palette-input`, `cmd-nav-*`).
-
-## 0.8.1
-- `SupportConnection` fills in the portal address of the instance's stage (`default_portal` from scalio-connect
-  0.5.0: dev -> portaldev, test -> portaltest, others -> portal.scaliocloud.com). **Visible change:** the address
-  field is no longer empty on the settings card. No change with older backends.
-
-## 0.8.0
-- New `SecurityFactors` (profile: authenticator app, backup codes, passkeys) with `securityApi(api, webauthn)`, and
-  `LicensePanel` (status, usage, add-ons, key) with `licenseApi(api)` and `mapScalioLicense`. They replace the copies
-  in Citadel, Foundry, Rosetta and Nexus. `LABELS` get `mfa` and `license` texts, `Icons` get Smartphone, KeyRound,
-  Trash, Copy, Puzzle, Plus, Alert, and `.scalio-btn` gets the variants `is-primary`, `is-ghost`, `is-danger`.
-  **No visible change** until an app uses the new blocks; then they look the same in every app.
-
-## 0.7.0
-- `SupportDrawer` takes `client` (from the new `supportApi(api)`) and `page`: tabs "Neue Anfrage" (category,
-  subject, description, technical details) and "Meine Tickets" (list, answers from support, reply, rating) for the
-  central support desk (ADR 0022). New settings card `SupportConnection` (portal address and one-time code, status,
-  check, disconnect). `LABELS` get the support texts. **Visible change only for apps that pass `client`**; without
-  it the drawer keeps its single form.
-
-## 0.6.2
-- **Visible change for apps using `SettingsLayout`:** the settings area uses the full width of the window (was at most
-  64rem), so wide screens show more cards side by side. No change for other apps.
-
-## 0.6.1
-- **Visible change for apps using `SettingsLayout`:** the settings page has no outer padding of its own any more;
-  the app's content area brings it (0.6.0 had both, so the page got a double margin). No change for other apps.
-
-## 0.6.0
-- New `SettingsLayout` and `SettingsSection` for the settings page (UISPEC "Einstellungen"): sub-navigation on
-  the left in fixed groups (Allgemein, app groups, Verbindungen, Benachrichtigungen, Sicherheit, System) with a
-  search, a select on phones, crumb and title of the area; areas look like the profile page. Below three areas
-  the sub-navigation is left out. `LABELS` gets the group names. No change for apps that do not use them.
-
-## 0.5.2
-- Navigation items take `match` (further paths that mark the item active), for one menu item over several pages.
-- New `SubNav` (tabs as links on top of a page) and `WorkspaceSwitcher` (Identity / HR in Nexus). No change for
-  apps that do not use them.
-
-## 0.5.1
-- Phones: the context select (tenant, customer) is hidden in the header below 640px, there is no room next to
-  the header buttons. `AppShell` takes `drawerTop` and shows it above the navigation in the phone drawer.
-
-## 0.5.0
-- **Visible change:** `rounded-sm` is now 2px as UISPEC says (was 0px from the preset). Buttons, fields, cards and
-  badges in Nexus, Citadel and Foundry get barely visible round corners; Rosetta already had 2px and can drop its
-  own `borderRadius` override.
-- New app frame in `@scalio-cloud/ui/react`: `AppShell`, `Sidebar` (navigation as data: sections, hidden items,
-  badges, search button, one main action, version), `NavDrawer` for phones, `ContextSelect` for tenant, customer or
-  organisation in the header.
-- Moved here from the apps: `ProductSwitcher` with `PRODUCTS`, `switcherHref`, `stageBadge`, `scalioFeatures`,
-  `useScalioApps`, and `SupportDrawer` (the app passes the send function). Same test ids as before.
-- Page blocks: `KpiTile`, `EmptyState`, `Loading`, `Notice`, `StatusBadge`; `PageHeader` takes `back`.
-- `LABELS` gets the shared navigation words (Übersicht, Verwaltung, Protokoll, Konten und Rollen, Einstellungen, ...).
-- New `nav.css` (imported by `index.css`). No other visual change for apps that do not use the new parts.
-
-## 0.4.1
-- No change to tokens, styles or components. CI and publish workflow on current action versions (past Node 20).
-
-## 0.4.0
-- New sign-in building blocks in `@scalio-cloud/ui/react`: `AuthLayout` (app brand on a dark grid on the left, form
-  on the right, language and optional theme top right, small brand above the form on phones), `AuthHeader`,
-  `MicrosoftButton`, `AuthDivider` ("oder mit E-Mail"), `AuthMessage`.
-- New `ProfileSection` and `PROFILE_SECTIONS` for the profile page (Konto, Darstellung, Sprache und Region,
-  Sicherheit, Verknüpfungen), title and hint on the left, content in a card on the right.
-- More shared words in `LABELS` (Anmelden, Passwort vergessen?, Passwort ändern, Zwei-Faktor-Anmeldung, ...).
-- New `auth.css` (imported by `index.css`). No visual change for apps that do not use the new components.
-
-## 0.3.0
-- New `@scalio-cloud/ui/react`: shared app header (`AppHeader` with status, language, theme, support and user menu
-  in a fixed order), `UserMenu`, `LanguageToggle`, `ThemeToggle`, `SupportButton`, `PageHeader`, `VersionTag`.
-  Only peer dependency is React (optional for apps that use just the tokens).
-- New `shell.css` (imported by `index.css`): styles for these parts with `scalio-*` classes. No visual change for
-  apps that do not use the components.
-
-## 0.2.0
-- Dark mode colours from Scalio Rosetta: sidebar and other `bg-muted` areas are now darker than the page
-  (before: lighter grey), primary blue in dark mode `223 100% 45%` (before: brighter `223 85% 62%`), card,
-  border and input slightly adjusted. Light mode unchanged.
-
-## 0.1.2
-- Published via npm trusted publishing (GitHub Actions OIDC), no npm token. Content unchanged.
-
-## 0.1.1
-- Published publicly on npmjs.com instead of GitHub Packages (no token needed to install). Content unchanged.
-
-## 0.1.0
-- First version: Control Room tokens (light/dark, taken 1:1 from Scalio Nexus), Tailwind preset, self-hosted
-  fonts Chivo / IBM Plex Sans / JetBrains Mono. Compiled against Nexus it gives the same CSS as Nexus's own config.