@scalio-cloud/ui 0.6.2 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 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.

package/README.md

@@ -106,11 +106,16 @@ const apps = useScalioApps(() => api.get("/apps").then((r) => r.data));   // onc
 >
   <Routes>...</Routes>
 </AppShell>
-<SupportDrawer open={supportOpen} onClose={...} lang={lang}
-  onSubmit={(d) => api.post("/support/tickets", { ...d, url: location.pathname }).then(() => toast.success(...))}
+<SupportDrawer open={supportOpen} onClose={...} lang={lang} client={supportApi(api)} page={location.pathname}
   context={[["URL", location.pathname], [L.tenant, current?.name]]} />
 ```
 
+With `client` the drawer has the tabs "Neue Anfrage" (category, subject, description, technical details) and
+"Meine Tickets" (list, answers, reply, rating); tickets go to the central support desk in Compass (scalio-docs ADR
+0022), the backend routes come from scalio-connect `scalio_connect.support.web`. `supportApi(api)` takes the app's
+axios instance. The settings card `<SupportConnection client={supportApi(api)} lang={lang} />` connects the
+installation with a one-time code (admins). Without `client` the drawer keeps the old single form with `onSubmit`.
+
 `link` is the router's `NavLink` (it gets `to`, `end`, a `className` function and `onClick`); without it the
 sidebar renders plain links and marks the item for `activePath`. Item test ids default to `nav-<path>`
 (`nav-overview` for `/`), or set `testId`. Page blocks: `KpiTile` (tone `error` = red number),
@@ -184,6 +189,33 @@ import { AuthLayout, AuthHeader, MicrosoftButton, AuthDivider, AuthMessage, Prof
 
 Form fields and buttons stay the app's own (shadcn), so they match the rest of the app.
 
+## 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.
+
+```jsx
+import { SecurityFactors, securityApi, LicensePanel, licenseApi } from "@scalio-cloud/ui/react";
+import { QRCodeSVG } from "qrcode.react";
+import { startRegistration, browserSupportsWebAuthn } from "@simplewebauthn/browser";
+
+const security = securityApi(api, { startRegistration, browserSupportsWebAuthn });   // once, outside the component
+const license = licenseApi(api);
+
+// Profile -> Sicherheit: authenticator app, backup codes, passkeys. Hidden for accounts without a password.
+<SecurityFactors client={security} lang={lang} product="Scalio Citadel" email={user.email}
+  qr={(uri) => <QRCodeSVG value={uri} size={160} />} notify={(text, tone) => toast[tone](text)}
+  confirm={confirm} onMfaChange={(on) => setUser({ ...user, mfa_enabled: on })} />
+
+// Einstellungen -> System -> Lizenz (scalio-license backend: /license, /license/addons)
+<LicensePanel client={license} lang={lang} product="Citadel" kindLabel={licenseKindLabel}
+  featureLabel={licenseFeatureLabel} noFeatures="Nur Drift-Erkennung" notify={...} confirm={confirm} />
+```
+
+`securityApi` reads snake_case and camelCase answers. `notify(text, tone)` gets `"success"` or `"error"`; without it
+the blocks show the message themselves. `confirm` is the app's dialog (`{title, action, danger}` -> Promise<boolean>),
+`window.confirm` otherwise. `formatError(err)` lets the app phrase API errors (for example license limit codes). A license backend with other routes passes its own `client` and a `map(license, {L})`
+that returns the view model described in `react/license.js`.
+
 ## Installing
 
 Public on npmjs.com, no token needed: `yarn add @scalio-cloud/ui` (pin the exact version).

package/nav.css

@@ -144,6 +144,33 @@
 .scalio-support-title { margin: 0; font-family: 'Chivo', sans-serif; font-weight: 700; font-size: 1.125rem; text-transform: uppercase; }
 .scalio-support-context { margin-bottom: 1rem; padding: 0.75rem; border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--muted)); font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; overflow-wrap: anywhere; }
 .scalio-support-form { display: flex; flex-direction: column; gap: 0.375rem; }
+.scalio-support-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
+.scalio-support-tab { flex: 1; padding: 0 0 0.5rem; border: 0; border-bottom: 2px solid transparent; background: none; color: hsl(var(--muted-foreground)); font: inherit; font-size: 0.875rem; cursor: pointer; }
+.scalio-support-tab.is-active { border-bottom-color: hsl(var(--primary)); color: hsl(var(--foreground)); font-weight: 600; }
+.scalio-support-check { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
+.scalio-support-check input { margin-top: 0.125rem; }
+.scalio-support-list, .scalio-support-detail, .scalio-support-conn { display: flex; flex-direction: column; gap: 0.5rem; }
+.scalio-support-item { display: block; width: 100%; padding: 0.75rem; border: 1px solid hsl(var(--border)); border-radius: 2px; background: none; color: inherit; font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer; }
+.scalio-support-item:hover { background: hsl(var(--muted)); }
+.scalio-support-item.is-waiting { border-style: dashed; cursor: default; }
+.scalio-support-item-head { display: flex; justify-content: space-between; gap: 0.5rem; }
+.scalio-support-item-title { margin: 0; font-weight: 600; }
+.scalio-support-number { flex-shrink: 0; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: hsl(var(--primary)); }
+.scalio-support-meta { margin: 0; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
+.scalio-support-empty { padding: 2rem 0; text-align: center; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
+.scalio-support-back { align-self: flex-start; padding: 0; border: 0; background: none; color: hsl(var(--muted-foreground)); font: inherit; font-size: 0.75rem; cursor: pointer; }
+.scalio-support-back:hover { color: hsl(var(--foreground)); }
+.scalio-support-msg { margin: 0; padding: 0.75rem; border: 1px solid hsl(var(--border)); border-radius: 2px; font-size: 0.875rem; white-space: pre-wrap; overflow-wrap: anywhere; }
+.scalio-support-msg.is-support { border-color: hsl(var(--primary) / 0.3); background: hsl(var(--primary) / 0.05); }
+.scalio-support-stars { display: flex; gap: 0.25rem; }
+.scalio-support-stars button { border: 0; background: none; font-size: 1.25rem; line-height: 1; color: #f59e0b; cursor: pointer; }
+.scalio-support-conn { font-size: 0.875rem; }
+.scalio-support-conn-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+.scalio-support-conn-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; margin: 0; font-size: 0.75rem; }
+.scalio-support-conn-facts dt { color: hsl(var(--muted-foreground)); }
+.scalio-support-conn-facts dd { margin: 0; font-family: 'JetBrains Mono', monospace; overflow-wrap: anywhere; }
+.scalio-support-conn-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.scalio-btn-danger { color: hsl(var(--destructive)); }
 .scalio-field-label { margin-top: 0.5rem; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: hsl(var(--muted-foreground)); }
 .scalio-input {
   width: 100%; height: 2.5rem; padding: 0 0.75rem; border: 1px solid hsl(var(--input)); border-radius: 2px;
@@ -243,3 +270,95 @@
 .scalio-settings-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
 .scalio-settings-body { display: flex; flex-direction: column; }
 .scalio-settings-section-footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.25rem; }
+
+/* Button variants for page blocks (base: .scalio-btn in shell.css) */
+.scalio-btn.is-primary { border-color: hsl(var(--primary)); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
+.scalio-btn.is-primary:hover { background: hsl(var(--primary) / 0.9); }
+.scalio-btn.is-ghost { border-color: transparent; background: transparent; color: hsl(var(--muted-foreground)); }
+.scalio-btn.is-ghost:hover { color: hsl(var(--foreground)); background: transparent; }
+.scalio-btn.is-danger { color: hsl(var(--destructive)); }
+.scalio-btn.is-ghost.is-danger { color: hsl(var(--muted-foreground)); }
+.scalio-btn.is-ghost.is-danger:hover { color: hsl(var(--destructive)); }
+.scalio-btn:disabled { opacity: 0.6; cursor: default; }
+
+/* Two-factor card (SecurityFactors) */
+.scalio-security { display: flex; flex-direction: column; gap: 1.5rem; font-size: 0.875rem; }
+.scalio-security-block { display: flex; flex-direction: column; gap: 0.75rem; }
+.scalio-security-head { display: flex; align-items: flex-start; gap: 0.75rem; }
+.scalio-security-head > .scalio-icon { margin-top: 0.125rem; flex-shrink: 0; color: hsl(var(--muted-foreground)); }
+.scalio-security-title { font-weight: 600; font-size: 0.875rem; }
+.scalio-security-hint { margin: 0; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
+.scalio-security-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.scalio-security .is-indented { padding-left: 1.75rem; }
+.scalio-security-form, .scalio-security-confirm { display: flex; flex-direction: column; gap: 0.75rem; }
+.scalio-security-confirm, .scalio-security-codes {
+  max-width: 28rem; padding: 1rem; border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--card));
+  display: flex; flex-direction: column; gap: 0.75rem;
+}
+.scalio-security-field { display: flex; flex-direction: column; gap: 0.25rem; max-width: 20rem; }
+.scalio-security-field .scalio-field-label { margin-top: 0; }
+.scalio-security-confirm .scalio-security-field { max-width: none; }
+.scalio-security-code { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.2em; }
+.scalio-security-qr { display: inline-block; align-self: flex-start; padding: 0.75rem; border-radius: 2px; background: #fff; }
+.scalio-security-secret { font-family: 'JetBrains Mono', monospace; overflow-wrap: anywhere; color: hsl(var(--foreground)); }
+.scalio-security-code-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 1.5rem; font-family: 'JetBrains Mono', monospace; }
+.scalio-security-keys { margin: 0; list-style: none; border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); }
+.scalio-security-keys li { display: flex; align-items: center; gap: 0.75rem; padding: 0.375rem 0; }
+.scalio-security-keys li + li { border-top: 1px solid hsl(var(--border)); }
+.scalio-security-key-name { flex: 1 1 auto; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
+.scalio-security-key-date { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: hsl(var(--muted-foreground)); }
+.scalio-security-keys .scalio-btn { width: 2rem; height: 2rem; padding: 0; }
+
+/* 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; }
+.scalio-license-part + .scalio-license-part { border-top: 1px solid hsl(var(--border)); }
+.scalio-license-title { display: flex; align-items: center; gap: 0.5rem; font-family: 'Chivo', sans-serif; font-weight: 700; }
+.scalio-license-title .scalio-icon { color: hsl(var(--primary)); }
+.scalio-license-hint { margin: 0.25rem 0 0; color: hsl(var(--muted-foreground)); }
+.scalio-license-messages { display: flex; flex-direction: column; gap: 0.25rem; margin: 1.25rem 1.25rem 0; }
+.scalio-license-messages div { display: flex; gap: 0.5rem; }
+.scalio-license-messages .scalio-icon { flex-shrink: 0; margin-top: 0.125rem; }
+.scalio-license-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
+@media (min-width: 768px) { .scalio-license-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+.scalio-license-status { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
+.scalio-license-edition { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+.scalio-license-customer { font-weight: 600; }
+.scalio-license-rows { display: flex; flex-direction: column; gap: 0.375rem; margin: 0; }
+.scalio-license-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
+.scalio-license-rows dt { color: hsl(var(--muted-foreground)); white-space: nowrap; }
+.scalio-license-rows dd { margin: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
+.scalio-license-rows dd.is-mono, .scalio-license-copy { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 400; }
+.scalio-license-copy { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0; border: 0; background: none; color: hsl(var(--muted-foreground)); cursor: pointer; text-align: right; }
+.scalio-license-copy:hover { color: hsl(var(--primary)); }
+.scalio-license .is-ok { color: #15803d; }
+.scalio-license .is-warn { color: #b45309; }
+.scalio-license .is-error { color: hsl(var(--destructive)); }
+.dark .scalio-license .is-ok { color: #4ade80; }
+.dark .scalio-license .is-warn { color: #fbbf24; }
+.scalio-license-sub { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: hsl(var(--muted-foreground)); }
+.scalio-license-features { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.125rem; }
+.scalio-license-features li { display: flex; align-items: center; gap: 0.375rem; }
+.scalio-license-features .scalio-icon { width: 14px; height: 14px; color: #16a34a; }
+.scalio-license-usage { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--muted) / 0.4); }
+.scalio-license-usage .scalio-license-sub { margin-bottom: 0; }
+.scalio-license-bar-head { display: flex; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.25rem; font-size: 0.75rem; }
+.scalio-license-bar-label { font-weight: 600; color: hsl(var(--muted-foreground)); }
+.scalio-license-bar-label::first-letter { text-transform: uppercase; }
+.scalio-license-bar-value { font-family: 'JetBrains Mono', monospace; color: hsl(var(--muted-foreground)); }
+.scalio-license-bar-value.is-error { color: hsl(var(--destructive)); }
+.scalio-license-bar { height: 6px; overflow: hidden; border-radius: 999px; background: hsl(var(--muted)); }
+.scalio-license-bar > div { height: 100%; background: hsl(var(--primary)); }
+.scalio-license-bar > div.is-unlimited { background: #10b981; }
+.scalio-license-bar > div.is-full { background: hsl(var(--destructive)); }
+.scalio-license-addons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; margin-bottom: 1rem; }
+@media (min-width: 640px) { .scalio-license-addons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+.scalio-license-addon { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0.75rem; border: 1px solid hsl(var(--border)); border-radius: 2px; }
+.scalio-license-addon-name { font-weight: 600; }
+.scalio-license-addon-detail { margin: 0.125rem 0 0; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
+.scalio-license-addon .scalio-btn { width: 2rem; height: 2rem; padding: 0; flex-shrink: 0; }
+.scalio-license-empty { margin: 0 0 1rem; color: hsl(var(--muted-foreground)); }
+.scalio-license-form { display: flex; flex-direction: column; gap: 0.5rem; }
+.scalio-license-form textarea { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; }
+.scalio-license-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.scalio-license-addon-error { margin-bottom: 0.5rem; font-size: 0.75rem; color: hsl(var(--destructive)); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.6.2",
+  "version": "0.8.0",
   "description": "Scalio Control Room design tokens, Tailwind preset, self-hosted fonts, the shared app header, sign-in layout, sidebar and page blocks",
   "license": "SEE LICENSE IN README.md",
   "private": false,

package/react/icons.js

@@ -70,4 +70,29 @@ const Activity = icon([
   ["path", { d: "M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" }],
 ]);
 
-module.exports = { Sun, Moon, Monitor, LifeBuoy, LogOut, Menu, Check, X, Search, ChevronDown, Fingerprint, FileStack, ShieldCheck, Hammer, Activity };
+const Smartphone = icon([["rect", { x: 5, y: 2, width: 14, height: 20, rx: 2, ry: 2 }], ["path", { d: "M12 18h.01" }]]);
+const KeyRound = icon([
+  ["path", { d: "M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z" }],
+  ["circle", { cx: 16.5, cy: 7.5, r: 0.5, fill: "currentColor" }],
+]);
+const Trash = icon([
+  ["path", { d: "M3 6h18" }],
+  ["path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }],
+  ["path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }],
+  ["path", { d: "M10 11v6M14 11v6" }],
+]);
+const Copy = icon([
+  ["rect", { width: 14, height: 14, x: 8, y: 8, rx: 2, ry: 2 }],
+  ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" }],
+]);
+const Puzzle = icon([
+  ["path", { d: "M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z" }],
+]);
+const Plus = icon([["path", { d: "M5 12h14M12 5v14" }]]);
+const Alert = icon([
+  ["path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }],
+  ["path", { d: "M12 9v4M12 17h.01" }],
+]);
+
+module.exports = { Sun, Moon, Monitor, LifeBuoy, LogOut, Menu, Check, X, Search, ChevronDown, Fingerprint, FileStack, ShieldCheck, Hammer, Activity,
+  Smartphone, KeyRound, Trash, Copy, Puzzle, Plus, Alert };

package/react/index.js

@@ -333,6 +333,6 @@ module.exports = {
   TEST_IDS,
   initials,
 };
-Object.assign(module.exports, Nav, Blocks, require("./settings"));
+Object.assign(module.exports, Nav, Blocks, require("./settings"), require("./support"), require("./security"), require("./license"));
 // After the exports above: auth.js uses LanguageToggle and ThemeToggle from this module.
 Object.assign(module.exports, require("./auth"));

package/react/labels.js

@@ -59,6 +59,117 @@ const LABELS = {
     send: "Anfrage senden",
     sending: "Wird gesendet …",
     close: "Schliessen",
+    supportNew: "Neue Anfrage",
+    supportMine: "Meine Tickets",
+    supportCategory: "Kategorie",
+    supportCategories: { question: "Frage", bug: "Fehler", wish: "Wunsch", license: "Lizenz", billing: "Rechnung" },
+    supportDiagnostics: "Technische Angaben mitsenden (Version, Lizenzstufe, Browser, letzte Fehler; keine Personendaten)",
+    supportSentAs: "Gesendet als {n}. Die Antwort sehen Sie unter «Meine Tickets» und per E-Mail.",
+    supportQueued: "Gespeichert. Die Anfrage wird gesendet, sobald das Support-Portal erreichbar ist.",
+    supportWaiting: "Wartet auf Versand",
+    supportNotSent: "Nicht gesendet. Bitte schreiben Sie an den Support.",
+    supportNotConnected: "Diese Installation ist noch nicht mit dem Support verbunden. Anfragen werden bis zu 3 Tage aufbewahrt.",
+    supportUnreachable: "Das Support-Portal ist gerade nicht erreichbar.",
+    supportNone: "Noch keine Tickets.",
+    supportFromSupport: "Scalio Support",
+    supportReply: "Antworten",
+    supportReplyPlaceholder: "Ihre Antwort",
+    supportReplySent: "Antwort gesendet.",
+    supportRate: "Wie zufrieden sind Sie mit der Lösung?",
+    supportThanks: "Danke für Ihre Bewertung.",
+    supportStatus: { new: "Neu", open: "Offen", in_progress: "In Bearbeitung", waiting: "Wartet auf Sie", waiting_customer: "Wartet auf Sie", resolved: "Gelöst", closed: "Geschlossen" },
+    supportConnStatus: { unpaired: "Nicht verbunden", pending: "Wartet auf Bestätigung", active: "Verbunden", blocked: "Gesperrt" },
+    supportConnHelp: "Tickets aus dieser Installation gehen an den Scalio Support. Den einmaligen Code erhalten Sie im Scalio-Portal unter Support -> Verbundene Apps.",
+    supportConnHelpConnected: "Tickets aus dieser Installation gehen an den Scalio Support.",
+    supportConnPending: "Ein Administrator Ihrer Organisation muss die Verbindung im Scalio-Portal bestätigen.",
+    supportConnBlocked: "Diese Installation ist für den Support gesperrt. Bitte wenden Sie sich an Scalio.",
+    supportConnKeyLost: "Der Schlüssel dieser Verbindung kann nicht mehr gelesen werden. Bitte verbinden Sie neu.",
+    supportPortal: "Support-Portal",
+    supportCode: "Einmaliger Code",
+    supportInstance: "Instanz",
+    supportSince: "Verbunden seit",
+    supportOutbox: "Warteschlange: {pending} wartend, {failed} nicht gesendet",
+    supportConnect: "Verbinden",
+    supportConnected: "Verbindung hergestellt.",
+    supportCheck: "Verbindung prüfen",
+    supportChecked: "Verbindung geprüft.",
+    supportRemove: "Trennen",
+    supportRemoveConfirm: "Verbindung zum Support trennen? Neue Tickets warten dann, bis wieder verbunden ist.",
+    supportRemoved: "Verbindung getrennt.",
+    // Two-factor card (SecurityFactors) and license panel (LicensePanel)
+    mfa: {
+      backupTitle: "Ihre Backup-Codes",
+      backupHint: "Jeder Code funktioniert einmal, falls Sie Ihr Telefon nicht zur Hand haben. Bewahren Sie die Codes sicher auf, zum Beispiel im Passwort-Manager. Sie werden nur jetzt angezeigt.",
+      copy: "Kopieren",
+      copied: "Kopiert",
+      download: "Herunterladen",
+      saved: "Ich habe die Codes gespeichert",
+      app: "Authenticator-App",
+      on: "Aktiv. Die Anmeldung fragt nach einem Code. Noch {n} Backup-Codes.",
+      off: "Aus. Mit einer App wie Microsoft Authenticator fragt die Anmeldung zusätzlich nach einem 6-stelligen Code.",
+      newCodes: "Neue Backup-Codes",
+      turnOff: "Ausschalten",
+      turnOffTitle: "Authenticator-App ausschalten",
+      turnedOff: "Authenticator-App ausgeschaltet",
+      setUp: "Einrichten",
+      setUpTitle: "Authenticator-App einrichten",
+      scan: "Scannen Sie den QR-Code mit Ihrer Authenticator-App und geben Sie dann den angezeigten Code ein.",
+      key: "Oder geben Sie diesen Schlüssel ein:",
+      code: "Code",
+      activate: "Aktivieren",
+      passkeys: "Passkeys",
+      passkeysHint: "Anmelden mit Face ID, Touch ID, Windows Hello oder einem Sicherheitsschlüssel, ohne Passwort.",
+      addPasskey: "Passkey hinzufügen",
+      passkeyAdded: "Passkey hinzugefügt",
+      device: "Name des Geräts",
+      deviceExample: "z. B. MacBook",
+      used: "genutzt {date}",
+      added: "hinzugefügt {date}",
+      remove: "Entfernen",
+      removePasskey: "Passkey {name} entfernen?",
+      currentPassword: "Aktuelles Passwort",
+      verifying: "Wird geprüft …",
+      continue: "Weiter",
+      cancel: "Abbrechen",
+    },
+    license: {
+      title: "Lizenz",
+      hint: "Lizenzen kaufen und verlängern Sie in Scalio Compass. Der Schlüssel gilt nur für die Installations-ID unten.",
+      managed: "Die Lizenz dieser Instanz wird von Ihrem Anbieter verwaltet.",
+      status: "Status",
+      active: "Aktiv",
+      limited: "Eingeschränkt",
+      trialEnds: "Test endet",
+      maintenanceUntil: "Wartung bis",
+      never: "nie",
+      installationId: "Installations-ID",
+      idCopied: "Installations-ID kopiert",
+      copy: "Kopieren",
+      copyFailed: "Kopieren fehlgeschlagen",
+      domains: "Domains",
+      coverage: "Abdeckung dieser Version",
+      covered: "Abgedeckt",
+      grace: "Kulanzfrist bis {date}",
+      notCovered: "Nicht abgedeckt (schreibgeschützt)",
+      buildDate: "Build-Datum",
+      features: "Funktionen",
+      noFeatures: "Nur die Grundfunktionen",
+      usage: "Nutzung",
+      addons: "Add-ons",
+      included: "Enthalten",
+      noAddons: "Keine Add-ons.",
+      addonPlaceholder: "Add-on-Schlüssel einfügen",
+      add: "Hinzufügen",
+      addonActivated: "Add-on aktiviert",
+      addonRemoved: "Add-on entfernt",
+      key: "Lizenzschlüssel",
+      keyPlaceholder: "Lizenzschlüssel einfügen",
+      activate: "Aktivieren",
+      activated: "Lizenz aktiviert",
+      remove: "Entfernen",
+      removed: "Lizenzschlüssel entfernt",
+      removeConfirm: "Lizenzschlüssel entfernen? {product} läuft danach als Community-Edition.",
+    },
     // States
     loading: "Wird geladen …",
     empty: "Noch keine Einträge.",
@@ -130,6 +241,116 @@ const LABELS = {
     send: "Send request",
     sending: "Sending …",
     close: "Close",
+    supportNew: "New request",
+    supportMine: "My tickets",
+    supportCategory: "Category",
+    supportCategories: { question: "Question", bug: "Bug", wish: "Wish", license: "License", billing: "Billing" },
+    supportDiagnostics: "Include technical details (version, license tier, browser, recent errors; no personal data)",
+    supportSentAs: "Sent as {n}. You will see the answer under “My tickets” and by email.",
+    supportQueued: "Saved. The request will be sent as soon as the support portal is reachable.",
+    supportWaiting: "Waiting to be sent",
+    supportNotSent: "Not sent. Please write to support.",
+    supportNotConnected: "This installation is not connected to support yet. Requests are kept for up to 3 days.",
+    supportUnreachable: "The support portal is not reachable right now.",
+    supportNone: "No tickets yet.",
+    supportFromSupport: "Scalio Support",
+    supportReply: "Reply",
+    supportReplyPlaceholder: "Your reply",
+    supportReplySent: "Reply sent.",
+    supportRate: "How satisfied are you with the solution?",
+    supportThanks: "Thank you for your rating.",
+    supportStatus: { new: "New", open: "Open", in_progress: "In progress", waiting: "Waiting for you", waiting_customer: "Waiting for you", resolved: "Resolved", closed: "Closed" },
+    supportConnStatus: { unpaired: "Not connected", pending: "Waiting for confirmation", active: "Connected", blocked: "Blocked" },
+    supportConnHelp: "Tickets from this installation go to Scalio Support. You get the one-time code in the Scalio portal under Support -> Connected apps.",
+    supportConnHelpConnected: "Tickets from this installation go to Scalio Support.",
+    supportConnPending: "An administrator of your organisation must confirm the connection in the Scalio portal.",
+    supportConnBlocked: "This installation is blocked for support. Please contact Scalio.",
+    supportConnKeyLost: "The key of this connection can no longer be read. Please connect again.",
+    supportPortal: "Support portal",
+    supportCode: "One-time code",
+    supportInstance: "Instance",
+    supportSince: "Connected since",
+    supportOutbox: "Queue: {pending} waiting, {failed} not sent",
+    supportConnect: "Connect",
+    supportConnected: "Connected.",
+    supportCheck: "Check connection",
+    supportChecked: "Connection checked.",
+    supportRemove: "Disconnect",
+    supportRemoveConfirm: "Disconnect from support? New tickets then wait until the instance is connected again.",
+    supportRemoved: "Disconnected.",
+    mfa: {
+      backupTitle: "Your backup codes",
+      backupHint: "Each code works once, if you do not have your phone. Keep them in a safe place, for example your password manager. They are shown only now.",
+      copy: "Copy",
+      copied: "Copied",
+      download: "Download",
+      saved: "I have saved the codes",
+      app: "Authenticator app",
+      on: "On. Sign-in asks for a code. {n} backup codes left.",
+      off: "Off. With an app such as Microsoft Authenticator, sign-in also asks for a 6-digit code.",
+      newCodes: "New backup codes",
+      turnOff: "Turn off",
+      turnOffTitle: "Turn off authenticator app",
+      turnedOff: "Authenticator app turned off",
+      setUp: "Set up",
+      setUpTitle: "Set up authenticator app",
+      scan: "Scan the QR code with your authenticator app, then enter the code it shows.",
+      key: "Or enter this key:",
+      code: "Code",
+      activate: "Activate",
+      passkeys: "Passkeys",
+      passkeysHint: "Sign in with Face ID, Touch ID, Windows Hello or a security key, without a password.",
+      addPasskey: "Add passkey",
+      passkeyAdded: "Passkey added",
+      device: "Name of the device",
+      deviceExample: "e.g. MacBook",
+      used: "used {date}",
+      added: "added {date}",
+      remove: "Remove",
+      removePasskey: "Remove passkey {name}?",
+      currentPassword: "Current password",
+      verifying: "Verifying …",
+      continue: "Continue",
+      cancel: "Cancel",
+    },
+    license: {
+      title: "License",
+      hint: "Buy or extend a license in Scalio Compass. The key is bound to the installation ID below.",
+      managed: "The license of this instance is managed by your provider.",
+      status: "Status",
+      active: "Active",
+      limited: "Limited",
+      trialEnds: "Trial ends",
+      maintenanceUntil: "Maintenance until",
+      never: "never",
+      installationId: "Installation ID",
+      idCopied: "Installation ID copied",
+      copy: "Copy",
+      copyFailed: "Copy failed",
+      domains: "Domains",
+      coverage: "Build coverage",
+      covered: "Covered",
+      grace: "Grace period until {date}",
+      notCovered: "Not covered (read-only)",
+      buildDate: "Build date",
+      features: "Features",
+      noFeatures: "Basic features only",
+      usage: "Usage",
+      addons: "Add-ons",
+      included: "Included",
+      noAddons: "No add-ons.",
+      addonPlaceholder: "Paste an add-on key",
+      add: "Add",
+      addonActivated: "Add-on activated",
+      addonRemoved: "Add-on removed",
+      key: "License key",
+      keyPlaceholder: "Paste the license key",
+      activate: "Activate",
+      activated: "License activated",
+      remove: "Remove",
+      removed: "License key removed",
+      removeConfirm: "Remove the license key? {product} then runs as Community edition.",
+    },
     loading: "Loading …",
     empty: "No entries yet.",
     sections: {
@@ -156,6 +377,8 @@ function labelsFor(lang, overrides) {
     sections: Object.assign({}, base.sections, o.sections),
     sectionHints: Object.assign({}, base.sectionHints, o.sectionHints),
     settingsGroups: Object.assign({}, base.settingsGroups, o.settingsGroups),
+    mfa: Object.assign({}, base.mfa, o.mfa),
+    license: Object.assign({}, base.license, o.license),
   });
 }