@scalio-cloud/ui 0.23.0 → 0.25.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # 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,

package/README.md

@@ -236,6 +236,46 @@ const users = usersApi(api);   // once, outside the component
 <MicrosoftConnection linked={user.microsoft} canUnlink={user.has_password} onLink={...} onUnlink={...} lang={lang} />
 ```
 
+### Rollen und Microsoft Entra (`RoleAdmin`, `RoleSourceSettings`)
+
+```jsx
+import { RoleAdmin, rolesApi, RoleSourceSettings } from "@scalio-cloud/ui/react";
+const roles = rolesApi(api);                               // Nexus: rolesApi(api, { permissions: "/permissions" })
+<RoleAdmin client={roles} lang={lang} notify={toast} confirm={confirm} onChange={reloadUsers} />
+<RoleSourceSettings value={source} tenants onSave={({ source, tenants }) => api.put("/users/role-source", { source, tenant_ids: tenants })} lang={lang} />
+```
+
+The backend is scalio-platform `roles_router` (0.3.0). Built-in roles are read-only; own roles never get the
+permissions the app keeps for administrators.
+
+## Setup wizard (React)
+
+Einrichtungsassistent after the first sign-in, the same in every app (ADR 0060, UISPEC section 3). The app writes
+only its steps; the backend follows scalio-docs `interfaces/setup-wizard.md` (`GET/PUT /api/setup/wizard`).
+
+```jsx
+import { SetupWizard, SetupWizardButton, useSetupWizard, setupWizardApi } from "@scalio-cloud/ui/react";
+
+const wizardClient = setupWizardApi(api);   // once, outside the component ({ base: "/wizard" } for another route)
+
+function AppWizard() {
+  const w = useSetupWizard({ client: wizardClient, enabled: isAdmin });   // opens by itself while needed
+  const steps = [
+    { id: "tenant", label: t("Tenant"), title: t("Connect Microsoft"), description: "...", content: <TenantsSection />,
+      canNext: connected, onNext: async () => { /* save; a rejected promise keeps the step open */ } },
+    { id: "mail", label: t("Email"), title: t("Email (SMTP)"), content: <SmtpForm />, optional: true },
+  ];
+  return <SetupWizard {...w.props} lang={lang} title={t("Set up Foundry")} subtitle={t("...")} steps={steps}
+    success={{ title: t("Setup complete"), text: t("...") }} />;
+}
+
+// Einstellungen: open it again (admins only)
+<SetupWizardButton lang={lang} />
+```
+
+Test IDs: `setup-wizard`, `wizard-stepper(-item)`, `wizard-step-{id}`, `wizard-next`, `wizard-back`, `wizard-skip`,
+`wizard-close`, `wizard-error`, `wizard-success`, `wizard-done`, `settings-open-wizard`.
+
 ## Two-factor card and license panel (React)
 
 The same backend routes in every app, so the apps pass only their axios instance and a few helpers.
@@ -295,12 +335,13 @@ see `fonts/licenses/`. Icons in `react/icons.js`: Lucide, ISC license, see `lice
 
 ## Release
 
-1. Change the files, add a line to `CHANGELOG.md`, bump `version` in `package.json` (semver; tag without `v`).
+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`).
 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.
+   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`.
 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

@@ -410,8 +410,9 @@
 .scalio-users-table tbody tr:hover { background: hsl(var(--muted) / 0.4); }
 .scalio-users-table tr.is-pending { background: rgb(217 119 6 / 0.05); }
 .scalio-users-table tr.is-locked .scalio-users-who { opacity: 0.6; }
-.scalio-users-hide-sm { display: none; }
+.scalio-users-hide-sm, .scalio-users-hide-md { display: none; }
 @media (min-width: 768px) { .scalio-users-hide-sm { display: table-cell; } }
+@media (min-width: 1536px) { .scalio-users-hide-md { display: table-cell; } }
 .scalio-users-who { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
 .scalio-users-avatar {
   display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0;
@@ -419,16 +420,20 @@
 }
 .scalio-users-who-text { min-width: 0; }
 .scalio-users-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-weight: 600; }
-.scalio-users-mail { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
+.scalio-users-mail { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: hsl(var(--muted-foreground)); white-space: nowrap; }
+.scalio-users-badges { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
 .scalio-users-you { font-size: 10px; font-weight: 700; text-transform: uppercase; color: hsl(var(--primary)); }
 .scalio-users-role { font-size: 0.8125rem; }
 .scalio-users-date { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: hsl(var(--muted-foreground)); white-space: nowrap; }
-.scalio-users-actions { text-align: right; white-space: nowrap; }
-.scalio-users-actions > * + * { margin-left: 0.375rem; }
+.scalio-users-actions { text-align: right; }
+.scalio-users-actions-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.375rem; }
+.scalio-users-actions .scalio-btn { height: 2rem; }
+.scalio-users-actions .scalio-btn-icon { width: 2rem; }
 .scalio-users-select { height: 2rem; padding: 0 0.5rem; font-size: 0.8125rem; width: auto; }
 .scalio-users-empty, .scalio-users-loading { margin: 0; padding: 2rem 1rem; text-align: center; color: hsl(var(--muted-foreground)); border: 1px dashed hsl(var(--border)); border-radius: 2px; }
 .scalio-users-field { display: flex; flex-direction: column; gap: 0.25rem; }
 .scalio-users-field .scalio-field-label { margin-top: 0; }
+.scalio-dialog .scalio-input:disabled, .scalio-users .scalio-input:disabled { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); cursor: not-allowed; }
 .scalio-users-hint { margin: 0; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
 .scalio-users-modes { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 0.5rem; }
 .scalio-users-modes legend { margin-bottom: 0.25rem; }
@@ -464,6 +469,58 @@
 .scalio-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
 .scalio-dialog-left { margin-right: auto; }
 
+/* Roles (RoleAdmin, RoleSourceSettings; scalio-docs concepts/app-roles.md) */
+.scalio-roles-table th.scalio-roles-col, .scalio-roles-cell { text-align: center; }
+.scalio-roles-table th.scalio-roles-col { min-width: 7.5rem; vertical-align: top; text-transform: none; letter-spacing: 0; }
+.scalio-roles-table th.scalio-roles-col.is-own { background: hsl(var(--primary) / 0.05); }
+.scalio-roles-perm { text-align: left; min-width: 14rem; }
+.scalio-roles-name { font-size: 0.8125rem; font-weight: 700; color: hsl(var(--foreground)); }
+.scalio-roles-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem; margin-top: 0.25rem; font-size: 10px; font-weight: 500; color: hsl(var(--muted-foreground)); }
+.scalio-roles-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.125rem; margin-top: 0.375rem; }
+.scalio-roles-tool { height: 1.5rem; padding: 0 0.375rem; font-size: 10px; }
+.scalio-roles-tool.is-danger { color: hsl(var(--destructive)); }
+.scalio-roles-group td { padding-top: 1rem; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: hsl(var(--muted-foreground)); background: hsl(var(--muted) / 0.4); }
+.scalio-roles-yes { color: #15803d; }
+.dark .scalio-roles-yes { color: #4ade80; }
+.scalio-roles-no { color: hsl(var(--muted-foreground)); }
+.scalio-roles-lic { margin-left: 0.375rem; }
+.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 */
+.scalio-wizard-root { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgb(0 0 0 / 0.5); }
+.scalio-wizard {
+  display: flex; flex-direction: column; gap: 1rem; width: calc(100vw - 2rem); max-width: 42rem; max-height: 90vh; overflow-y: auto;
+  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-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)); }
+.scalio-wizard-stepper { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
+.scalio-wizard-stepper-item { display: flex; flex: 1 1 0; min-width: 0; align-items: center; gap: 0.5rem; }
+.scalio-wizard-dot {
+  display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 999px;
+  background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); font-size: 0.75rem; font-weight: 700;
+}
+.scalio-wizard-dot.is-current { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
+.scalio-wizard-dot.is-done, .scalio-wizard-success-icon { background: #059669; color: #fff; }
+.scalio-wizard-label { display: none; white-space: nowrap; font-size: 0.75rem; font-weight: 500; color: hsl(var(--muted-foreground)); }
+.scalio-wizard-label.is-current { color: hsl(var(--foreground)); }
+@media (min-width: 1024px) { .scalio-wizard-label { display: block; } }
+.scalio-wizard-line { flex: 1 1 0; min-width: 0.5rem; height: 1px; background: hsl(var(--border)); }
+.scalio-wizard-count { margin: 0; font-size: 0.75rem; font-weight: 500; color: hsl(var(--muted-foreground)); }
+.scalio-wizard-step { display: flex; flex-direction: column; gap: 0.75rem; }
+.scalio-wizard-step-title { margin: 0; font-size: 0.875rem; font-weight: 700; }
+.scalio-wizard-text { margin: 0; color: hsl(var(--muted-foreground)); }
+.scalio-wizard-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; }
+.scalio-wizard-actions-right { display: flex; align-items: center; gap: 0.5rem; }
+.scalio-wizard-success { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1.5rem 0; text-align: center; }
+.scalio-wizard-success .scalio-wizard-step-title { font-size: 1.125rem; }
+.scalio-wizard-success .scalio-wizard-text { max-width: 28rem; }
+.scalio-wizard-success .scalio-btn { margin-top: 0.5rem; }
+.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-part { padding: 1.25rem; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.23.0",
+  "version": "0.25.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/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"));
+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"));
 // After the exports above: auth.js uses LanguageToggle and ThemeToggle from this module.
 Object.assign(module.exports, require("./auth"));

package/react/labels.js

@@ -13,6 +13,19 @@ const LABELS = {
     userMenu: "Benutzermenü",
     menu: "Menü",
     version: "Version",
+    wizard: {
+      step: "Schritt {n} von {total}",
+      back: "Zurück",
+      next: "Weiter",
+      finish: "Einrichtung abschliessen",
+      skip: "Überspringen",
+      close: "Später",
+      done: "Los geht's",
+      successTitle: "Einrichtung abgeschlossen",
+      successText: "Alles ist bereit. Sie können jede Einstellung später unter Einstellungen ändern.",
+      open: "Einrichtungsassistent",
+      openHint: "Die Fragen der Ersteinrichtung noch einmal durchgehen.",
+    },
     // Sign-in and profile (same words in every app)
     signIn: "Anmelden",
     microsoft: "Mit Microsoft anmelden",
@@ -195,6 +208,13 @@ const LABELS = {
       emergency: "Notfall-Administrator",
       locked: "Gesperrt",
       pending: "Wartet auf Freigabe",
+      invitedBadge: "Eingeladen",
+      inviteLinkTitle: "Einladung erstellt",
+      inviteLinkText: "Die Mail an {email} konnte nicht gesendet werden. Geben Sie diesen Link weiter; er gilt einmal.",
+      revokeInvite: "Einladung zurückziehen",
+      revokeTitle: "Einladung an {email} zurückziehen?",
+      revokeText: "Der Link in der Mail funktioniert danach nicht mehr.",
+      revoked: "Einladung zurückgezogen.",
       approve: "Freischalten",
       merge: "Zusammenführen",
       edit: "Bearbeiten",
@@ -391,6 +411,19 @@ const LABELS = {
     userMenu: "User menu",
     menu: "Menu",
     version: "Version",
+    wizard: {
+      step: "Step {n} of {total}",
+      back: "Back",
+      next: "Continue",
+      finish: "Finish setup",
+      skip: "Skip",
+      close: "Later",
+      done: "Let's go",
+      successTitle: "Setup complete",
+      successText: "Everything is ready. You can change any setting later under Settings.",
+      open: "Setup wizard",
+      openHint: "Go through the first-time setup questions again.",
+    },
     signIn: "Sign in",
     microsoft: "Sign in with Microsoft",
     redirecting: "Redirecting …",
@@ -567,6 +600,13 @@ const LABELS = {
       emergency: "Emergency administrator",
       locked: "Locked",
       pending: "Waiting for approval",
+      invitedBadge: "Invited",
+      inviteLinkTitle: "Invitation created",
+      inviteLinkText: "The mail to {email} could not be sent. Pass on this link; it works once.",
+      revokeInvite: "Withdraw invitation",
+      revokeTitle: "Withdraw the invitation to {email}?",
+      revokeText: "The link in the mail stops working.",
+      revoked: "Invitation withdrawn.",
       approve: "Approve",
       merge: "Merge",
       edit: "Edit",
@@ -766,6 +806,7 @@ function labelsFor(lang, overrides) {
     accountTabs: Object.assign({}, base.accountTabs, o.accountTabs),
     passwordPolicy: Object.assign({}, base.passwordPolicy, o.passwordPolicy),
     profile_: Object.assign({}, base.profile_, o.profile_),
+    wizard: Object.assign({}, base.wizard, o.wizard),
   });
 }
 

package/react/roles.js

@@ -0,0 +1,384 @@
+"use strict";
+// Konten und Rollen -> Rollen and -> Microsoft Entra, 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.
+const React = require("react");
+const h = React.createElement;
+const Icons = require("./icons");
+
+const TEXT = {
+  de: {
+    loading: "Wird geladen …",
+    permission: "Recht",
+    add: "Rolle anlegen",
+    addTitle: "Rolle anlegen",
+    name: "Name",
+    description: "Beschreibung (optional)",
+    copyFrom: "Rechte übernehmen von",
+    none: "keiner Rolle (leer beginnen)",
+    create: "Anlegen",
+    cancel: "Abbrechen",
+    save: "Speichern",
+    rename: "Umbenennen",
+    renameTitle: "Rolle umbenennen",
+    copy: "Kopieren",
+    copyOf: "Kopie von {name}",
+    remove: "Löschen",
+    removeTitle: "Rolle «{name}» löschen?",
+    removeText: "Konten mit dieser Rolle müssen vorher eine andere Rolle bekommen.",
+    builtin: "Eingebaut",
+    own: "Eigene Rolle",
+    users: "{n} Konten",
+    oneUser: "1 Konto",
+    license: "Zählt für die Lizenz",
+    licenseHint: "Rechte mit diesem Zeichen machen eine Rolle lizenzpflichtig.",
+    adminAll: "Alle Rechte, auch Einstellungen, Benutzer und Lizenz",
+    adminOnly: "Nur für Administratoren",
+    created: "Rolle «{name}» angelegt.",
+    saved: "Gespeichert.",
+    removed: "Rolle gelöscht.",
+    empty: "Noch keine eigenen Rollen. Mit «Rolle anlegen» stellen Sie eine Rolle aus einzelnen Rechten zusammen.",
+    readOnly: "Eingebaute Rollen sind fest. Für andere Rechte legen Sie eine eigene Rolle an, z. B. als Kopie.",
+    // RoleSourceSettings
+    source: "Rollen kommen aus",
+    sourceLocal: "dieser App",
+    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.",
+    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",
+  },
+  en: {
+    loading: "Loading …",
+    permission: "Permission",
+    add: "Add role",
+    addTitle: "Add role",
+    name: "Name",
+    description: "Description (optional)",
+    copyFrom: "Take permissions from",
+    none: "no role (start empty)",
+    create: "Add",
+    cancel: "Cancel",
+    save: "Save",
+    rename: "Rename",
+    renameTitle: "Rename role",
+    copy: "Copy",
+    copyOf: "Copy of {name}",
+    remove: "Delete",
+    removeTitle: "Delete the role “{name}”?",
+    removeText: "Accounts with this role need another role first.",
+    builtin: "Built-in",
+    own: "Own role",
+    users: "{n} accounts",
+    oneUser: "1 account",
+    license: "Counts for the license",
+    licenseHint: "Permissions with this mark make a role count for the license.",
+    adminAll: "Every permission, including settings, users and license",
+    adminOnly: "Administrators only",
+    created: "Role “{name}” added.",
+    saved: "Saved.",
+    removed: "Role deleted.",
+    empty: "No own roles yet. With “Add role” you put a role together from single permissions.",
+    readOnly: "Built-in roles are fixed. For other permissions add an own role, for example as a copy.",
+    source: "Roles come from",
+    sourceLocal: "this app",
+    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.",
+    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",
+  },
+};
+
+function rolesText(lang, overrides) {
+  return Object.assign({}, TEXT[lang === "en" ? "en" : "de"], overrides || {});
+}
+
+function cx() {
+  return Array.prototype.slice.call(arguments).filter(Boolean).join(" ");
+}
+
+function fill(text, values) {
+  return String(text || "").replace(/\{(\w+)\}/g, (m, k) => (values && values[k] !== undefined ? values[k] : m));
+}
+
+// A text that is either a string or {de, en}.
+function tr(value, lang) {
+  if (value && typeof value === "object") return value[lang === "en" ? "en" : "de"] || value.en || value.de || "";
+  return value || "";
+}
+
+function errorText(err) {
+  const d = err && err.response && err.response.data && err.response.data.detail;
+  if (typeof d === "string") return d;
+  if (d && typeof d.message === "string") return d.message;
+  if (Array.isArray(d)) return d.map((x) => (x && x.msg) || String(x)).join(" ");
+  return (err && err.message) || String(err);
+}
+
+function normalizeRole(d, builtin) {
+  return {
+    id: String(d.id),
+    name: d.name,
+    description: d.description || "",
+    builtin: d.builtin !== undefined ? !!d.builtin : !!builtin,
+    admin: !!(d.admin || d.isAdmin),
+    permissions: Array.isArray(d.permissions) ? d.permissions : [],
+    license: !!d.license,
+    users: typeof d.users === "number" ? d.users : null,
+  };
+}
+
+// api: axios instance with the app's base URL (/api). opts.base ("/roles"), opts.permissions (Nexus "/permissions").
+function rolesApi(api, opts) {
+  const base = (opts && opts.base) || "/roles";
+  const permsUrl = (opts && opts.permissions) || `${base}/permissions`;
+  const one = (id) => `${base}/${encodeURIComponent(id)}`;
+  return {
+    permissions: () => api.get(permsUrl).then((r) => ({ permissions: r.data.permissions || [], groups: r.data.groups || [] })),
+    list: () => api.get(base).then((r) => [
+      ...(r.data.builtin || []).map((d) => normalizeRole(d, true)),
+      ...(r.data.custom || []).map((d) => normalizeRole(d, false)),
+    ]),
+    create: (body) => api.post(base, body).then((r) => normalizeRole(r.data, false)),
+    update: (id, patch) => api.patch(one(id), patch).then((r) => normalizeRole(r.data, false)),
+    remove: (id) => api.delete(one(id)).then(() => true),
+  };
+}
+
+async function ask(confirm, title, text, action, danger) {
+  if (confirm) return !!(await confirm({ title, text, action, danger: danger !== false }));
+  return typeof window !== "undefined" && window.confirm ? window.confirm(title) : true;
+}
+
+function Dialog({ title, onClose, children, testId }) {
+  React.useEffect(() => {
+    const key = (e) => { if (e.key === "Escape") onClose(); };
+    document.addEventListener("keydown", key);
+    return () => document.removeEventListener("keydown", key);
+  }, [onClose]);
+  return h(
+    "div",
+    { className: "scalio-dialog-root" },
+    h("div", { className: "scalio-dialog-backdrop", onClick: onClose }),
+    h(
+      "div",
+      { className: "scalio-dialog", role: "dialog", "aria-modal": "true", "aria-label": title, "data-testid": testId },
+      h(
+        "div",
+        { className: "scalio-dialog-head" },
+        h("div", { className: "scalio-dialog-title" }, title),
+        h("button", { type: "button", className: "scalio-btn is-ghost scalio-btn-icon", onClick: onClose, "aria-label": "×", "data-testid": "dialog-close" },
+          h(Icons.X, { className: "scalio-icon" }))
+      ),
+      children
+    )
+  );
+}
+
+// Props: client (rolesApi), lang, labels (overrides), notify(message, tone), confirm({title, text, action, danger}),
+// formatError(err), canEdit (default true), onChange() after every change, testId.
+function RoleAdmin(props) {
+  const lang = props.lang === "en" ? "en" : "de";
+  const L = rolesText(lang, props.labels);
+  const client = props.client;
+  const canEdit = props.canEdit !== false;
+  const [catalog, setCatalog] = React.useState(null);
+  const [roles, setRoles] = React.useState(null);
+  const [dialog, setDialog] = React.useState(null); // {mode: "add"|"rename", role}
+  const [form, setForm] = React.useState({ name: "", description: "", from: "" });
+  const [error, setError] = React.useState("");
+  const [busy, setBusy] = React.useState(false);
+  const fmt = props.formatError || errorText;
+  const say = (text, tone) => props.notify && props.notify(text, tone || "success");
+
+  const load = React.useCallback(() => {
+    return Promise.all([client.permissions(), client.list()])
+      .then(([c, r]) => { setCatalog(c); setRoles(r); })
+      .catch((e) => { setCatalog({ permissions: [], groups: [] }); setRoles([]); say(fmt(e), "error"); });
+  }, [client]);
+  React.useEffect(() => { load(); }, [load]);
+
+  const changed = () => { if (props.onChange) props.onChange(); return load(); };
+  const run = async (fn, okText, after) => {
+    setBusy(true);
+    setError("");
+    try {
+      const res = await fn();
+      if (okText) say(okText);
+      if (after) after(res);
+      await changed();
+      return true;
+    } catch (e) {
+      if (dialog) setError(fmt(e)); else say(fmt(e), "error");
+      return false;
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  if (!catalog || !roles) return h("div", { className: "scalio-users-loading" }, L.loading);
+
+  const own = roles.filter((r) => !r.builtin);
+  const toggle = (role, key) => {
+    const has = role.permissions.includes(key);
+    const permissions = has ? role.permissions.filter((p) => p !== key) : [...role.permissions, key];
+    setRoles(roles.map((r) => (r.id === role.id ? Object.assign({}, r, { permissions }) : r)));
+    run(() => client.update(role.id, { permissions }), null);
+  };
+  const openAdd = (from) => {
+    setError("");
+    setForm({ name: from ? fill(L.copyOf, { name: tr(from.name, lang) }) : "", description: "", from: from ? from.id : "" });
+    setDialog({ mode: "add" });
+  };
+  const openRename = (role) => {
+    setError("");
+    setForm({ name: tr(role.name, lang), description: role.description || "", from: "" });
+    setDialog({ mode: "rename", role });
+  };
+  const close = () => { setDialog(null); setError(""); };
+  const submit = (e) => {
+    e.preventDefault();
+    const name = form.name.trim();
+    if (dialog.mode === "add") {
+      const src = roles.find((r) => r.id === form.from);
+      const permissions = src ? src.permissions : [];
+      run(() => client.create({ name, description: form.description.trim(), permissions }), fill(L.created, { name }), () => setDialog(null));
+    } else {
+      run(() => client.update(dialog.role.id, { name, description: form.description.trim() }), L.saved, () => setDialog(null));
+    }
+  };
+  const remove = async (role) => {
+    if (!(await ask(props.confirm, fill(L.removeTitle, { name: tr(role.name, lang) }), L.removeText, L.remove))) return;
+    run(() => client.remove(role.id), L.removed);
+  };
+
+  const groups = catalog.groups && catalog.groups.length ? catalog.groups : [""];
+  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 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}` },
+      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),
+        usersText(r) ? h("span", null, usersText(r)) : null,
+        r.license ? h("span", { className: "scalio-badge is-warn", title: L.license, "data-testid": `role-license-${r.id}` }, "€") : null),
+      canEdit ? h("div", { className: "scalio-roles-tools" },
+        h("button", { type: "button", className: "scalio-btn is-ghost scalio-roles-tool", onClick: () => openAdd(r), disabled: busy, title: L.copy, "data-testid": `role-copy-${r.id}` }, L.copy),
+        !r.builtin ? h("button", { type: "button", className: "scalio-btn is-ghost scalio-roles-tool", onClick: () => openRename(r), disabled: busy, title: L.rename, "data-testid": `role-rename-${r.id}` }, L.rename) : null,
+        !r.builtin ? h("button", { type: "button", className: "scalio-btn is-ghost scalio-roles-tool is-danger", onClick: () => remove(r), disabled: busy, title: L.remove, "data-testid": `role-delete-${r.id}` }, L.remove) : null
+      ) : null)));
+
+  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}` },
+        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" },
+      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}` }));
+  };
+
+  const body = [];
+  groups.forEach((g) => {
+    const rows = byGroup(g);
+    if (!rows.length) return;
+    if (g) body.push(h("tr", { key: `g-${g}`, className: "scalio-roles-group" }, h("td", { colSpan: roles.length + 1 }, g)));
+    rows.forEach((p) => body.push(h("tr", { key: p.key, "data-testid": `role-row-${p.key}` },
+      h("td", { className: "scalio-roles-perm" }, tr(p.label, lang),
+        p.license ? h("span", { className: "scalio-badge is-warn scalio-roles-lic", title: L.license }, "€") : null),
+      roles.map((r) => cell(r, p)))));
+  });
+  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" },
+      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" },
+    h("form", { className: "scalio-dialog-body", onSubmit: submit },
+      h("div", { className: "scalio-users-field" },
+        h("label", { className: "scalio-field-label", htmlFor: "role-name" }, L.name),
+        h("input", { id: "role-name", className: "scalio-input", value: form.name, required: true, maxLength: 60, autoFocus: true,
+          onChange: (e) => setForm(Object.assign({}, form, { name: e.target.value })), "data-testid": "role-name" })),
+      h("div", { className: "scalio-users-field" },
+        h("label", { className: "scalio-field-label", htmlFor: "role-description" }, L.description),
+        h("input", { id: "role-description", className: "scalio-input", value: form.description, maxLength: 300,
+          onChange: (e) => setForm(Object.assign({}, form, { description: e.target.value })), "data-testid": "role-description" })),
+      dialog.mode === "add" ? h("div", { className: "scalio-users-field" },
+        h("label", { className: "scalio-field-label", htmlFor: "role-from" }, L.copyFrom),
+        h("select", { id: "role-from", className: "scalio-input", value: form.from, onChange: (e) => setForm(Object.assign({}, form, { from: e.target.value })), "data-testid": "role-from" },
+          h("option", { value: "" }, L.none),
+          roles.filter((r) => !r.admin).map((r) => h("option", { key: r.id, value: r.id }, tr(r.name, lang))))) : null,
+      error ? h("p", { className: "scalio-notice is-error scalio-users-error", role: "alert", "data-testid": "role-dialog-error" }, error) : null,
+      h("div", { className: "scalio-dialog-actions" },
+        h("button", { type: "button", className: "scalio-btn is-ghost", onClick: close }, L.cancel),
+        h("button", { type: "submit", className: "scalio-btn is-primary", disabled: busy || !form.name.trim(), "data-testid": "role-save" },
+          dialog.mode === "add" ? L.create : L.save)))) : null;
+
+  return h("div", { className: "scalio-users scalio-roles", "data-testid": props.testId || "role-admin" },
+    h("div", { className: "scalio-users-bar" },
+      h("p", { className: "scalio-users-hint" }, own.length ? L.readOnly : L.empty),
+      canEdit ? h("button", { type: "button", className: "scalio-btn is-primary", onClick: () => openAdd(null), disabled: busy, "data-testid": "role-add" },
+        h(Icons.Plus, { className: "scalio-icon" }), L.add) : null),
+    h("div", { className: "scalio-users-table-wrap" },
+      h("table", { className: "scalio-users-table scalio-roles-table", "data-testid": "roles-table" },
+        h("thead", null, head), h("tbody", null, body))),
+    catalog.permissions.some((p) => p.license) ? h("p", { className: "scalio-users-hint" }, h("span", { className: "scalio-badge is-warn" }, "€"), " ", L.licenseHint) : null,
+    dialogEl);
+}
+
+// Props: value {source: "local"|"entra", values: [...], tenants?: [...]}, onSave({source, tenants}) -> Promise,
+// tenants (show the tenant field), 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 [source, setSource] = React.useState(v.source || "local");
+  const [tenants, setTenants] = React.useState((v.tenants || []).join(", "));
+  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;
+    setBusy(true);
+    try {
+      await props.onSave({ source, tenants: tenants.split(/[\s,;]+/).filter(Boolean) });
+      if (props.notify) props.notify(L.saved, "success");
+    } catch (e) {
+      if (props.notify) props.notify((props.formatError || errorText)(e), "error");
+    } finally {
+      setBusy(false);
+    }
+  };
+  const values = (v.values || []).map((x) => (typeof x === "string" ? x : x.value || x.name)).filter(Boolean);
+  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("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)));
+}
+
+module.exports = { RoleAdmin, RoleSourceSettings, rolesApi, rolesText };

package/react/users.js

@@ -52,6 +52,10 @@ function normalizeUser(d) {
     name: pick(d, ["name"]) || "",
     role: pick(d, ["role"]) || "",
     pending: !!pick(d, ["access_pending", "accessPending", "pendingAccess"]),
+    // invited: the invitation mail is out, the person has not chosen a password yet. inviteOnly: the row is only an
+    // invitation (no account yet, Foundry): it can only be withdrawn.
+    invited: !!pick(d, ["invited", "invitePending"]),
+    inviteOnly: !!pick(d, ["invite_only", "inviteOnly"]),
     microsoft: !!pick(d, ["microsoft", "entra_linked", "external"]),
     managedBy: pick(d, ["managed_by", "roleManagedBy"]) || "",
     hasPassword: !!pick(d, ["has_password", "hasPassword"]),
@@ -72,7 +76,9 @@ function usersApi(api, opts) {
   const secret = (r) => pick(r.data, ["start_password", "startPassword"]) || "";
   return {
     list: () => api.get(base).then((r) => (Array.isArray(r.data) ? r.data : r.data.users || []).map(normalizeUser)),
-    create: (body) => api.post(base, body).then((r) => ({ user: normalizeUser(r.data.user || r.data), startPassword: secret(r) })),
+    // inviteLink: only when the invitation mail could not be sent (the admin passes the link on).
+    create: (body) => api.post(base, body).then((r) => ({ user: normalizeUser(r.data.user || r.data), startPassword: secret(r),
+      inviteLink: pick(r.data, ["invite_link", "inviteLink"]) || "" })),
     update: (id, patch) => api.patch(one(id), patch).then((r) => normalizeUser(r.data.user || r.data)),
     approve: (id, body) => api.post(`${one(id)}/approve`, body).then(() => true),
     merge: (id, into) => api.post(`${one(id)}/merge`, { into }).then(() => true),
@@ -191,6 +197,7 @@ function UserAdmin(props) {
     if (form.access !== null && form.access !== undefined) body.access = form.access;
     run(() => client.create(body), null, (res) => {
       if (res.startPassword) showSecret(res.user, res.startPassword, true);
+      else if (res.inviteLink) setDialog({ mode: "secret", user: res.user, password: res.inviteLink, link: true });
       else {
         say(form.signIn === "invite" ? fill(L.invited, { email: body.email }) : fill(L.created, { email: body.email }));
         close();
@@ -216,12 +223,14 @@ function UserAdmin(props) {
       removePassword: [L.removePasswordTitle, L.removePasswordText, L.removePasswordAction],
       mfa: [L.resetMfaTitle, L.resetMfaText, L.resetMfaAction],
       unlink: [L.unlinkTitle, L.unlinkText, L.unlinkAction],
-      remove: [L.removeTitle, L.removeText, L.removeAction] }[kind];
+      remove: [L.removeTitle, L.removeText, L.removeAction],
+      revoke: [L.revokeTitle, L.revokeText, L.revokeInvite] }[kind];
     if (!(await ask(confirm, fill(t[0], { email: u.email }), t[1], t[2], t[3]))) return;
     if (kind === "password") return run(() => client.newPassword(u.id), null, (pw) => showSecret(u, pw, false));
     if (kind === "removePassword") return run(() => client.removePassword(u.id), L.passwordRemoved);
     if (kind === "mfa") return run(() => client.resetMfa(u.id), L.mfaReset);
     if (kind === "unlink") return run(() => client.unlinkMicrosoft(u.id), L.unlinked);
+    if (kind === "revoke") return run(() => client.remove(u.id), L.revoked);
     return run(() => client.remove(u.id), L.removed);
   };
 
@@ -249,7 +258,7 @@ function UserAdmin(props) {
     h("select", Object.assign({ className: "scalio-input scalio-users-select", value, onChange: (e) => onChange(e.target.value) }, attrs),
       roles.map((r) => h("option", { key: r.value, value: r.value }, r.label)));
   const errorBox = error ? h("p", { className: "scalio-notice is-error scalio-users-error", role: "alert", "data-testid": "user-dialog-error" }, error) : null;
-  const mergeTargets = (u) => rows.filter((r) => r.id !== u.id && !r.pending && !r.microsoft);
+  const mergeTargets = (u) => rows.filter((r) => r.id !== u.id && !r.pending && !r.microsoft && !r.inviteOnly);
 
   const header = h(
     "div",
@@ -270,7 +279,7 @@ function UserAdmin(props) {
           h("thead", null, h("tr", null,
             h("th", null, L.user), h("th", null, L.role),
             props.accessColumn ? h("th", { className: "scalio-users-hide-sm" }, props.accessColumn.label) : null,
-            h("th", { className: "scalio-users-hide-sm" }, L.lastLogin), h("th", null))),
+            h("th", { className: "scalio-users-hide-md" }, L.lastLogin), h("th", null))),
           h("tbody", null, shown.map((u) => h(
             "tr",
             { key: u.id, "data-testid": `user-row-${u.email}`, className: cx(u.pending && "is-pending", !u.active && "is-locked") },
@@ -281,14 +290,16 @@ function UserAdmin(props) {
               h("div", { className: "scalio-users-who-text" },
                 h("div", { className: "scalio-users-name" },
                   u.name || u.email,
-                  u.id === me ? h("span", { className: "scalio-users-you" }, L.you) : null,
+                  u.id === me ? h("span", { className: "scalio-users-you" }, L.you) : null),
+                h("div", { className: "scalio-users-mail" }, u.email),
+                h("div", { className: "scalio-users-badges" },
                   u.microsoft ? badge("running", "Microsoft", `user-ms-${u.email}`) : null,
                   u.hasPassword ? badge("neutral", L.password, `user-pw-${u.email}`) : null,
                   u.managedBy === "entra" ? badge("running", L.managedByEntra, `user-entra-${u.email}`) : null,
                   u.emergency && u.role === adminRole ? badge("error", L.emergency, `user-emergency-${u.email}`) : null,
                   !u.active && !u.pending ? badge("neutral", L.locked, `user-locked-${u.email}`) : null,
-                  u.pending ? badge("warn", L.pending, `user-pending-${u.email}`) : null),
-                h("div", { className: "scalio-users-mail" }, u.email))
+                  u.invited || u.inviteOnly ? badge("warn", L.invitedBadge, `user-invited-${u.email}`) : null,
+                  u.pending ? badge("warn", L.pending, `user-pending-${u.email}`) : null))
             )),
             h("td", null, u.pending && u.managedBy !== "entra"
               ? roleSelect(pendingRole[u.id] || props.defaultRole || (roles[0] && roles[0].value), (v) => setPendingRole(Object.assign({}, pendingRole, { [u.id]: v })),
@@ -297,9 +308,12 @@ function UserAdmin(props) {
             props.accessColumn ? h("td", { className: "scalio-users-hide-sm" }, u.pending && props.accessField
               ? props.accessField(pendingAccess[u.id], (v) => setPendingAccess(Object.assign({}, pendingAccess, { [u.id]: v })), pendingRole[u.id] || props.defaultRole, u)
               : props.accessColumn.render(u)) : null,
-            h("td", { className: "scalio-users-hide-sm scalio-users-date" }, u.lastLogin ? fmtDate(u.lastLogin, lang) : "–"),
-            h("td", { className: "scalio-users-actions" }, u.pending
-              ? h(React.Fragment, null,
+            h("td", { className: "scalio-users-hide-md scalio-users-date" }, u.lastLogin ? fmtDate(u.lastLogin, lang) : "–"),
+            h("td", { className: "scalio-users-actions" }, u.inviteOnly
+              ? h("button", { type: "button", className: "scalio-btn is-ghost is-danger", onClick: () => action(u, "revoke"), disabled: busy,
+                  "data-testid": `user-revoke-${u.email}` }, L.revokeInvite)
+              : u.pending
+              ? h("div", { className: "scalio-users-actions-row" },
                   h("button", { type: "button", className: "scalio-btn is-primary", onClick: () => approve(u), disabled: busy, "data-testid": `user-approve-${u.email}` }, L.approve),
                   mergeTargets(u).length ? h("button", { type: "button", className: "scalio-btn", onClick: () => openMerge(u), "data-testid": `user-merge-${u.email}` }, L.merge) : null,
                   h("button", { type: "button", className: "scalio-btn is-ghost is-danger scalio-btn-icon", onClick: () => action(u, "remove"), title: L.removeAction,
@@ -407,9 +421,10 @@ function UserAdmin(props) {
       const c = typeof navigator !== "undefined" && navigator.clipboard;
       if (c) c.writeText(dialog.password).then(() => say(L.copied), () => null);
     };
-    body = h(Dialog, { title: dialog.created ? fill(L.createdTitle, { email: dialog.user.email }) : L.secretTitle, onClose: close, testId: "user-secret-dialog" },
+    const title = dialog.link ? L.inviteLinkTitle : dialog.created ? fill(L.createdTitle, { email: dialog.user.email }) : L.secretTitle;
+    body = h(Dialog, { title, onClose: close, testId: "user-secret-dialog" },
       h("div", { className: "scalio-dialog-body" },
-        h("p", { className: "scalio-users-hint" }, fill(L.secretText, { email: dialog.user.email })),
+        h("p", { className: "scalio-users-hint" }, fill(dialog.link ? L.inviteLinkText : L.secretText, { email: dialog.user.email })),
         h("div", { className: "scalio-users-secret", "data-testid": "user-start-password" }, dialog.password),
         h("div", { className: "scalio-dialog-actions" },
           h("button", { type: "button", className: "scalio-btn", onClick: copy, "data-testid": "user-copy-password" }, h(Icons.Copy, { className: "scalio-icon" }), L.copy),

package/react/wizard.js

@@ -0,0 +1,239 @@
+"use strict";
+// Setup wizard ("Einrichtungsassistent", ADR 0060, UISPEC section 3): the same first-step dialog in every app.
+// Design of the Nexus SetupWizard, first built in Kontor (#59): dialog, stepper on top, Zurück/Weiter, Überspringen
+// for optional steps, a short success message at the end. The shell knows no app: steps come as configuration.
+// Progress lives in the app's backend (GET/PUT /api/setup/wizard, scalio-docs interfaces/setup-wizard.md);
+// setupWizardApi() and useSetupWizard() do the wiring, so an app only writes its steps.
+const React = require("react");
+const h = React.createElement;
+const Icons = require("./icons");
+const { labelsFor } = require("./labels");
+const { Notice } = require("./blocks");
+
+const OPEN_SETUP_WIZARD = "scalio:open-setup-wizard";
+
+// Opens the wizard from anywhere (Einstellungen button, dashboard card). useSetupWizard listens for it.
+function openSetupWizard(step) {
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(new window.CustomEvent(OPEN_SETUP_WIZARD, { detail: { step: step || 0 } }));
+}
+
+function normalizeWizardState(d) {
+  const o = d || {};
+  const pick = (a, b) => (o[a] !== undefined ? o[a] : o[b]);
+  return {
+    needed: !!o.needed,
+    completed: !!o.completed,
+    lastStep: Number(pick("last_step", "lastStep")) || 0,
+    canEdit: pick("can_edit", "canEdit") === undefined ? true : !!pick("can_edit", "canEdit"),
+  };
+}
+
+// The shared route. `api` is the app's axios-like client (get/put returning { data }).
+function setupWizardApi(api, opts) {
+  const base = (opts && opts.base) || "/setup/wizard";
+  return {
+    get: () => api.get(base).then((r) => normalizeWizardState(r.data)),
+    save: (step) => api.put(base, { last_step: step }).then(() => true),
+    complete: () => api.put(base, { completed: true }).then(() => true),
+  };
+}
+
+// State, auto-open and saving for SetupWizard. Spread `props` into <SetupWizard> and add title and steps.
+// Opens by itself once per mount while the setup is needed and the person may edit it, at the saved step;
+// openSetupWizard() opens it again at the beginning. `closable: false` hides «Später» (e.g. nothing exists yet).
+function useSetupWizard(opts) {
+  const client = opts && opts.client;
+  const enabled = !opts || opts.enabled !== false;
+  const [state, setState] = React.useState(null);
+  const [open, setOpen] = React.useState(false);
+  const [step, setStep] = React.useState(0);
+  const auto = React.useRef(false);
+  const stateRef = React.useRef(null);
+  stateRef.current = state;
+
+  const reload = React.useCallback(() => {
+    if (!client) return Promise.resolve(null);
+    return client.get().then((s) => { setState(s); return s; }, () => null);
+  }, [client]);
+
+  React.useEffect(() => {
+    if (enabled) reload();
+  }, [enabled, reload]);
+
+  React.useEffect(() => {
+    if (state && state.needed && state.canEdit && !auto.current) {
+      auto.current = true;
+      setStep(state.lastStep);
+      setOpen(true);
+    }
+  }, [state]);
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return undefined;
+    const onOpen = (e) => {
+      const s = stateRef.current;
+      if (s && !s.canEdit) return;
+      setStep((e && e.detail && e.detail.step) || 0);
+      setOpen(true);
+    };
+    window.addEventListener(OPEN_SETUP_WIZARD, onOpen);
+    return () => window.removeEventListener(OPEN_SETUP_WIZARD, onOpen);
+  }, []);
+
+  const close = () => setOpen(false);
+  const props = {
+    open,
+    step,
+    onStepChange: (n) => {
+      setStep(n);
+      if (client) client.save(n).catch(() => {});
+    },
+    onFinish: async () => {
+      if (client) await client.complete();
+      setState((s) => Object.assign({}, s, { needed: false, completed: true }));
+      if (opts && opts.onCompleted) opts.onCompleted();
+    },
+    onClose: opts && opts.closable === false ? undefined : close,
+    onDone: close,
+  };
+  return { state, open, setOpen, step, setStep, reload, props };
+}
+
+function StepDot({ index, current }) {
+  const cls = index < current ? "is-done" : index === current ? "is-current" : "";
+  return h("span", { className: `scalio-wizard-dot ${cls}`.trim() }, index < current ? h(Icons.Check, { width: 14, height: 14 }) : index + 1);
+}
+
+function SetupWizard(props) {
+  const { open, title, subtitle, steps, step, onStepChange, onFinish, onClose, firstStepAction, onDone, testId, wide } = props;
+  const L = Object.assign({}, labelsFor(props.lang).wizard, props.labels);
+  const success = props.success || { title: L.successTitle, text: L.successText };
+  const [busy, setBusy] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [finished, setFinished] = React.useState(false);
+  const list = steps || [];
+  const index = Math.min(Math.max(step || 0, 0), list.length - 1);
+  const current = list[index];
+  const last = index === list.length - 1;
+
+  React.useEffect(() => setError(null), [index]);
+  React.useEffect(() => {
+    if (!open) setFinished(false);
+  }, [open]);
+  React.useEffect(() => {
+    if (!open || !onClose) return undefined;
+    const onKey = (e) => {
+      if (e.key === "Escape" && !busy) onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose, busy]);
+
+  if (!open || !current) return null;
+
+  async function next(save) {
+    setBusy(true);
+    setError(null);
+    try {
+      if (save && current.onNext) await current.onNext();
+      if (last) {
+        await onFinish();
+        setFinished(true);
+      } else {
+        onStepChange(index + 1);
+      }
+    } catch (err) {
+      setError((err && err.message) || String(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const left = index > 0
+    ? { label: L.back, onClick: () => onStepChange(index - 1) }
+    : firstStepAction || (onClose ? { label: L.close, onClick: onClose } : null);
+
+  const head = h(
+    "div",
+    { className: "scalio-wizard-head" },
+    h("div", null,
+      h("h2", { className: "scalio-wizard-title" }, title),
+      subtitle && !finished ? h("p", { className: "scalio-wizard-subtitle" }, subtitle) : null),
+    onClose
+      ? h("button", { type: "button", className: "scalio-btn scalio-btn-icon is-ghost", onClick: onClose, "aria-label": L.close, "data-testid": "wizard-close" },
+          h(Icons.X, null))
+      : null
+  );
+
+  const body = finished
+    ? h(
+        "div",
+        { className: "scalio-wizard-success", "data-testid": "wizard-success" },
+        h("span", { className: "scalio-wizard-success-icon" }, h(Icons.Check, { width: 24, height: 24 })),
+        h("h3", { className: "scalio-wizard-step-title" }, success.title),
+        h("p", { className: "scalio-wizard-text" }, success.text),
+        h("button", { type: "button", className: "scalio-btn is-primary", onClick: onDone || onClose, "data-testid": "wizard-done", autoFocus: true }, L.done)
+      )
+    : h(
+        React.Fragment,
+        null,
+        h(
+          "ol",
+          { className: "scalio-wizard-stepper", "data-testid": "wizard-stepper" },
+          list.map((s, i) =>
+            h(
+              "li",
+              { key: s.id, className: "scalio-wizard-stepper-item", "data-testid": "wizard-stepper-item", "aria-current": i === index ? "step" : undefined },
+              h(StepDot, { index: i, current: index }),
+              h("span", { className: `scalio-wizard-label${i === index ? " is-current" : ""}` }, s.label),
+              i < list.length - 1 ? h("span", { className: "scalio-wizard-line" }) : null
+            )
+          )
+        ),
+        h("p", { className: "scalio-wizard-count" }, L.step.replace("{n}", String(index + 1)).replace("{total}", String(list.length))),
+        h(
+          "section",
+          { className: "scalio-wizard-step", "data-testid": `wizard-step-${current.id}` },
+          h("div", null,
+            h("h3", { className: "scalio-wizard-step-title" }, current.title),
+            current.description ? h("p", { className: "scalio-wizard-text" }, current.description) : null),
+          current.content
+        ),
+        error ? h(Notice, { kind: "error", icon: false, testId: "wizard-error", lang: props.lang }, error) : null,
+        h(
+          "div",
+          { className: "scalio-wizard-actions" },
+          left
+            ? h("button", { type: "button", className: "scalio-btn", onClick: left.onClick, disabled: busy, "data-testid": "wizard-back" }, left.label)
+            : h("span", null),
+          h(
+            "div",
+            { className: "scalio-wizard-actions-right" },
+            current.optional
+              ? h("button", { type: "button", className: "scalio-btn is-ghost", onClick: () => next(false), disabled: busy, "data-testid": "wizard-skip" }, L.skip)
+              : null,
+            h(
+              "button",
+              { type: "button", className: "scalio-btn is-primary", onClick: () => next(true), disabled: busy || current.canNext === false, "data-testid": "wizard-next" },
+              busy ? h("span", { className: "scalio-spinner", "aria-hidden": "true" }) : null,
+              last ? L.finish : L.next
+            )
+          )
+        )
+      );
+
+  return h(
+    "div",
+    { className: "scalio-wizard-root", onMouseDown: (e) => { if (e.target === e.currentTarget && !busy && onClose) onClose(); } },
+    h("div", { role: "dialog", "aria-modal": "true", "aria-label": title, className: wide ? "scalio-wizard is-wide" : "scalio-wizard", "data-testid": testId || "setup-wizard" }, head, body)
+  );
+}
+
+// Button for Einstellungen (UISPEC: the wizard can always be opened again, by people who may edit the setup).
+function SetupWizardButton({ lang, labels, testId, className }) {
+  const L = Object.assign({}, labelsFor(lang).wizard, labels);
+  return h("button", { type: "button", className: className || "scalio-btn", onClick: () => openSetupWizard(0), "data-testid": testId || "settings-open-wizard", title: L.openHint }, L.open);
+}
+
+module.exports = { SetupWizard, SetupWizardButton, useSetupWizard, setupWizardApi, normalizeWizardState, openSetupWizard, OPEN_SETUP_WIZARD };