@scalio-cloud/ui 0.28.0 → 0.30.0

package/README.md

@@ -325,6 +325,48 @@ const reset = factoryResetApi(api);   // once, outside the component
 `SettingsField` (label, field, help) and `SettingsRow` (title and help left, a switch or button right; `tone="danger"`)
 keep the fields inside a `SettingsSection` the same in every app.
 
+## Updates im SaaS-Betrieb: Banner und Einstellungen → Updates (React)
+
+Since 0.30.0 (scalio-docs ADR 0074) a SaaS instance shows the update Compass offers it. Server side: scalio-connect
+0.14.0 `saas_updates_router` (`/api/saas-updates*`). Compass runs the update; the app shows the offer, the deadline
+and the maintenance window and passes on the admin's choice (jetzt, verschieben bis zur Frist, automatisch/nur auf
+Klick, eigenes Fenster). Self-hosted instances answer `saas: false` and both blocks render nothing.
+
+```jsx
+import { UpdateBanner, SaasUpdatesPanel, saasUpdatesApi } from "@scalio-cloud/ui/react";
+
+const updates = saasUpdatesApi(api);   // once, outside the component
+<AppShell banner={<UpdateBanner client={updates} lang={lang} onOpen={() => navigate("/settings/updates")} />} … />
+<SaasUpdatesPanel client={updates} lang={lang} notify={(m, tone) => toast[tone === "error" ? "error" : "success"](m)} />
+```
+
+The banner is blue (orange for a security update); people without admin role only see when the update is planned.
+«Später» hides it for this version until the next browser session.
+
+## Benachrichtigungen: E-Mail-Versand und E-Mail-Vorlagen (React)
+
+Since 0.29.0 (ADR 0069 W5) every app sends mail the same way. The server side is scalio-platform 0.8.0 `mail`
+(`Mailer.router`, mounted at `/api/mail`). Both blocks go into the settings group «Benachrichtigungen».
+
+```jsx
+import { MailTransport, MailTemplates, mailApi } from "@scalio-cloud/ui/react";
+import { RichTextEditor } from "@/components/RichTextEditor";   // optional, the app's own editor (Compass: react-quill-new)
+
+const mail = mailApi(api);   // once, outside the component; mailApi(api, "/admin/mail") for another prefix
+<MailTransport client={mail} lang={lang} notify={toast} graphHint={t("...Mail.Send and Mail.ReadWrite...")}>
+  <InboxSettings />           {/* optional blocks after «Testmail» */}
+</MailTransport>
+<MailTemplates client={mail} lang={lang} editor={RichTextEditor} />
+```
+
+`MailTransport` shows three blocks: «E-Mail-Versand» (off, SMTP or Microsoft 365, sender, language; secrets come back
+as a mask and the mask is sent back unchanged), «Testmail» (empty recipient: to me) and «Letzte Mails» (`outbox={false}`
+hides it). On a test instance the backend answers `test_mailbox: true` and the server fields are locked.
+`MailTemplates` picks mail and language, offers the placeholders as buttons, shows the preview of the real rendering
+in a sandboxed frame, and saves, tests («Test an mich») or resets to the built-in text. A switchable mail gets the
+checkbox «Diese Mail senden». The `editor` gets `{value, onChange, testId}`; without it a text field is used, so this
+package keeps no dependencies. With an editor, plain built-in texts are passed as paragraphs (`textToHtml`).
+
 ## Protokoll: Aktionen und Jobs (React)
 
 One menu item «Protokoll» with two tabs like Nexus (scalio-docs ADR 0070). The server side is scalio-platform

package/nav.css

@@ -745,3 +745,35 @@
 .scalio-jobs-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }
 .scalio-jobs-steps { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; }
 .scalio-jobs-steps li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+
+/* E-Mail-Versand and E-Mail-Vorlagen (ADR 0069 W5, react/mail.js) */
+.scalio-mail-providers { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; border: 0; }
+.scalio-mail-providers legend { width: 100%; margin-bottom: 0.5rem; }
+.scalio-mail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
+.scalio-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+.scalio-mail-test { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
+.scalio-mail-test .scalio-input { flex: 1 1 15rem; width: auto; }
+.scalio-mail-outbox { overflow-x: auto; }
+.scalio-mail-outbox table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
+.scalio-mail-outbox td { padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid hsl(var(--border)); vertical-align: top; }
+.scalio-mail-outbox tr:last-child td { border-bottom: 0; }
+.scalio-mail-time { white-space: nowrap; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
+.scalio-mail-state { text-align: right; padding-right: 0 !important; }
+.scalio-settings-help.is-error { color: hsl(var(--destructive)); }
+.scalio-mail-tokens { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.375rem; }
+.scalio-mail-token {
+  padding: 0.125rem 0.5rem; border: 1px solid hsl(var(--primary) / 0.25); border-radius: 2px; background: hsl(var(--primary) / 0.06);
+  color: hsl(var(--primary)); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; cursor: pointer;
+}
+.scalio-mail-token:hover { background: hsl(var(--primary) / 0.12); }
+.scalio-mail-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: -0.5rem; }
+.scalio-mail-editor { display: grid; grid-template-columns: 1fr; gap: 1rem; }
+.scalio-mail-editor.has-preview { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
+.scalio-mail-editor-pane { min-width: 0; }
+.scalio-mail-body { width: 100%; min-height: 20rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; }
+.scalio-mail-preview { display: flex; flex-direction: column; min-height: 20rem; border: 1px solid hsl(var(--border)); border-radius: 2px; overflow: hidden; }
+.scalio-mail-preview-head { display: flex; justify-content: space-between; padding: 0.5rem 0.75rem; border-bottom: 1px solid hsl(var(--border)); font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
+.scalio-mail-preview-head strong { text-transform: uppercase; letter-spacing: 0.05em; }
+.scalio-mail-preview-subject { padding: 0.5rem 0.75rem; border-bottom: 1px solid hsl(var(--border)); font-size: 0.875rem; }
+.scalio-mail-preview-subject span { font-weight: 600; }
+.scalio-mail-preview iframe { flex: 1; width: 100%; min-height: 16rem; border: 0; background: #fff; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.28.0",
+  "version": "0.30.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,
@@ -67,8 +67,8 @@
     "node": ">=18"
   },
   "devDependencies": {
-    "jsdom": "25.0.1",
-    "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "jsdom": "30.1.3",
+    "react": "19.3.1",
+    "react-dom": "19.3.1"
   }
 }

package/react/index.js

@@ -378,6 +378,6 @@ module.exports = {
   TEST_IDS,
   initials,
 };
-Object.assign(module.exports, Nav, Blocks, require("./settings"), require("./support"), require("./beacon"), require("./security"), require("./license"), require("./palette"), require("./unify"), require("./profile"), require("./actions"), require("./selftest"), require("./users"), require("./roles"), require("./wizard"), require("./maintenance"), require("./audit"));
+Object.assign(module.exports, Nav, Blocks, require("./settings"), require("./support"), require("./beacon"), require("./security"), require("./license"), require("./palette"), require("./unify"), require("./profile"), require("./actions"), require("./selftest"), require("./users"), require("./roles"), require("./wizard"), require("./maintenance"), require("./audit"), require("./mail"), require("./saas_updates"));
 // After the exports above: auth.js uses LanguageToggle and ThemeToggle from this module.
 Object.assign(module.exports, require("./auth"));

package/react/mail.js

@@ -0,0 +1,474 @@
+"use strict";
+// Einstellungen -> Benachrichtigungen (ADR 0069 wartung/W5, Welle 2): «E-Mail-Versand» (MailTransport) and
+// «E-Mail-Vorlagen» (MailTemplates), the same in every app. Backend: scalio-platform `mail` (Mailer.router, /api/mail).
+// The rich text editor comes from the app (prop editor, e.g. react-quill-new like Compass); without it a text field.
+const React = require("react");
+const h = React.createElement;
+const Icons = require("./icons");
+const { SettingsSection, SettingsField: Field } = require("./settings");
+
+const LABELS = {
+  de: {
+    transportTitle: "E-Mail-Versand",
+    transportHint: "Über welchen Server die App Mails schickt. Passwort und Client-Secret werden verschlüsselt gespeichert und nie angezeigt.",
+    provider: "Mails senden mit",
+    providers: { off: "Aus", smtp: "SMTP-Server", graph: "Microsoft 365" },
+    fromName: "Absendername",
+    fromAddress: "Absenderadresse",
+    language: "Sprache der Mails",
+    languageHint: "Gilt, wenn die App die Sprache der empfangenden Person nicht kennt.",
+    host: "Server",
+    port: "Port",
+    security: "Verbindungssicherheit",
+    securities: { starttls: "STARTTLS", ssl: "SSL/TLS", none: "Keine (nicht empfohlen)" },
+    username: "Benutzername",
+    password: "Passwort",
+    tenantId: "Tenant-ID",
+    clientId: "Client-ID der App",
+    clientSecret: "Client-Secret",
+    sender: "Postfach, das sendet",
+    graphHint: "Die App braucht die Anwendungsberechtigung Mail.Send. Beschränken Sie sie in Exchange Online mit «RBAC for Applications» auf das Postfach, das sendet.",
+    testMailbox: "Testinstanz: Mails gehen über das Testpostfach, die Einstellungen hier gelten nicht.",
+    save: "Speichern",
+    saved: "Gespeichert",
+    testTitle: "Testmail",
+    testHint: "Schickt sofort eine Mail mit den gespeicherten Einstellungen und zeigt den Fehler, wenn es nicht klappt.",
+    recipient: "Empfänger (leer: an mich)",
+    sendTest: "Testmail senden",
+    testSent: "Testmail gesendet an {to}",
+    outboxTitle: "Letzte Mails",
+    outboxHint: "Wartende Mails werden alle 30 Sekunden gesendet, bei Fehlern bis zu fünfmal.",
+    outboxEmpty: "Noch keine Mails.",
+    refresh: "Aktualisieren",
+    states: { pending: "Wartet", sent: "Gesendet", failed: "Fehlgeschlagen" },
+    templatesTitle: "E-Mail-Vorlagen",
+    templatesHint: "Betreff und Text jeder Mail pro Sprache. Platzhalter wie {name} werden beim Versand ersetzt. Ohne eigene Vorlage gilt der eingebaute Text.",
+    kind: "Mail",
+    lang: "Sprache",
+    languages: { de: "Deutsch", en: "Englisch" },
+    own: "eigene Vorlage",
+    builtIn: "Eingebauter Text. Speichern Sie, um ihn anzupassen.",
+    custom: "Eigene Vorlage für diese Sprache.",
+    enabled: "Diese Mail senden",
+    tokens: "Platzhalter (Klick fügt ein)",
+    subject: "Betreff",
+    body: "Text",
+    preview: "Vorschau",
+    showPreview: "Vorschau zeigen",
+    hidePreview: "Vorschau ausblenden",
+    sample: "Beispieldaten",
+    saveTemplate: "Vorlage speichern",
+    testToMe: "Test an mich",
+    resetTemplate: "Auf Standard zurücksetzen",
+    templateSaved: "Vorlage gespeichert",
+    templateReset: "Eingebauter Text gilt wieder",
+    off: "Der Versand ist ausgeschaltet. Vorlagen können Sie trotzdem bearbeiten.",
+  },
+  en: {
+    transportTitle: "E-mail sending",
+    transportHint: "Which server the app sends mail through. Password and client secret are stored encrypted and never shown.",
+    provider: "Send mail with",
+    providers: { off: "Off", smtp: "SMTP server", graph: "Microsoft 365" },
+    fromName: "Sender name",
+    fromAddress: "Sender address",
+    language: "Language of the mails",
+    languageHint: "Used when the app does not know the recipient's language.",
+    host: "Server",
+    port: "Port",
+    security: "Connection security",
+    securities: { starttls: "STARTTLS", ssl: "SSL/TLS", none: "None (not recommended)" },
+    username: "User name",
+    password: "Password",
+    tenantId: "Tenant ID",
+    clientId: "Client ID of the app",
+    clientSecret: "Client secret",
+    sender: "Mailbox that sends",
+    graphHint: "The app needs the application permission Mail.Send. Limit it to the sending mailbox with RBAC for Applications in Exchange Online.",
+    testMailbox: "Test instance: mails go through the test mailbox, the settings here do not apply.",
+    save: "Save",
+    saved: "Saved",
+    testTitle: "Test mail",
+    testHint: "Sends a mail at once with the saved settings and shows the error if it fails.",
+    recipient: "Recipient (empty: to me)",
+    sendTest: "Send test mail",
+    testSent: "Test mail sent to {to}",
+    outboxTitle: "Last mails",
+    outboxHint: "Waiting mails are sent every 30 seconds, after an error up to five times.",
+    outboxEmpty: "No mails yet.",
+    refresh: "Refresh",
+    states: { pending: "Waiting", sent: "Sent", failed: "Failed" },
+    templatesTitle: "E-mail templates",
+    templatesHint: "Subject and text of every mail per language. Placeholders like {name} are filled in when the mail is sent. Without an own template the built-in text applies.",
+    kind: "Mail",
+    lang: "Language",
+    languages: { de: "German", en: "English" },
+    own: "own template",
+    builtIn: "Built-in text. Save to change it.",
+    custom: "Own template for this language.",
+    enabled: "Send this mail",
+    tokens: "Placeholders (click to insert)",
+    subject: "Subject",
+    body: "Text",
+    preview: "Preview",
+    showPreview: "Show preview",
+    hidePreview: "Hide preview",
+    sample: "Sample data",
+    saveTemplate: "Save template",
+    testToMe: "Send test to me",
+    resetTemplate: "Reset to default",
+    templateSaved: "Template saved",
+    templateReset: "The built-in text applies again",
+    off: "Sending is switched off. You can still edit the templates.",
+  },
+};
+
+// Plain text (the built-in templates) for a rich text editor: paragraphs and line breaks, HTML escaped.
+function textToHtml(text) {
+  if (!text || /<[a-zA-Z/][^>]*>/.test(text)) return text || "";
+  const esc = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  // Quill keeps a paragraph per line, so an empty paragraph keeps the blank line between two paragraphs.
+  return esc.split(/\n{2,}/).map((p) => p.trim()).filter(Boolean).map((p) => `<p>${p.replace(/\n/g, "<br>")}</p>`).join("<p><br></p>");
+}
+
+function mailLabels(lang, overrides) {
+  return Object.assign({}, LABELS[lang === "en" ? "en" : "de"], overrides || {});
+}
+
+function errorText(err) {
+  const d = err && err.response && err.response.data && err.response.data.detail;
+  if (typeof d === "string") return d;
+  if (Array.isArray(d)) return d.map((x) => (x && x.msg) || String(x)).join(" ");
+  return (err && err.message) || String(err);
+}
+
+function fmtTime(iso, lang) {
+  try {
+    return new Date(iso).toLocaleString(lang === "en" ? "en-GB" : "de-CH", { dateStyle: "short", timeStyle: "short" });
+  } catch (e) {
+    return iso || "";
+  }
+}
+
+// api: axios instance with the app's base URL (/api); base: where the app mounted Mailer.router.
+function mailApi(api, base) {
+  const b = base || "/mail";
+  const data = (r) => r.data;
+  const enc = encodeURIComponent;
+  return {
+    settings: () => api.get(`${b}/settings`).then(data),
+    save: (body) => api.put(`${b}/settings`, body).then(data),
+    test: (to) => api.post(`${b}/test`, { to: to || "" }).then(data),
+    outbox: () => api.get(`${b}/outbox`).then(data),
+    templates: () => api.get(`${b}/templates`).then(data),
+    saveTemplate: (kind, lang, body) => api.put(`${b}/templates/${enc(kind)}/${enc(lang)}`, body).then(data),
+    resetTemplate: (kind, lang) => api.delete(`${b}/templates/${enc(kind)}/${enc(lang)}`).then(data),
+    preview: (body) => api.post(`${b}/templates/preview`, body).then(data),
+    testTemplate: (body) => api.post(`${b}/templates/test`, body).then(data),
+  };
+}
+
+function useMessages(props) {
+  const [msg, setMsg] = React.useState(null);
+  const fmtErr = props.formatError || errorText;
+  return {
+    msg,
+    ok: (text) => (props.notify ? props.notify(text, "success") : setMsg({ tone: "ok", text })),
+    fail: (err) => {
+      const text = fmtErr(err);
+      if (props.notify) props.notify(text, "error");
+      else setMsg({ tone: "error", text });
+    },
+    clear: () => setMsg(null),
+  };
+}
+
+function Notice({ msg, testId }) {
+  if (!msg) return null;
+  return h("div", { className: `scalio-notice is-${msg.tone === "error" ? "error" : "ok"}`, role: msg.tone === "error" ? "alert" : "status", "data-testid": testId }, msg.text);
+}
+
+function input(id, value, onChange, extra) {
+  return h("input", Object.assign({ id, className: "scalio-input", value: value == null ? "" : value, "data-testid": id,
+    onChange: (e) => onChange(e.target.value) }, extra || {}));
+}
+
+function select(id, value, options, onChange, extra) {
+  return h("select", Object.assign({ id, className: "scalio-input", value, "data-testid": id, onChange: (e) => onChange(e.target.value) }, extra || {}),
+    options.map(([v, text]) => h("option", { key: v, value: v }, text)));
+}
+
+// Props: client (mailApi), lang, labels, notify(message, tone), formatError(err), graphHint (the app's own text for
+// the Graph permissions, e.g. Beacon also needs Mail.ReadWrite), children (more blocks after «Testmail», e.g. Beacon's
+// mail intake), outbox (false hides «Letzte Mails»).
+function MailTransport(props) {
+  const { client, lang } = props;
+  const L = mailLabels(lang, props.labels);
+  const m = useMessages(props);
+  const [form, setForm] = React.useState(null);
+  const [busy, setBusy] = React.useState(false);
+  const [to, setTo] = React.useState("");
+  const [testing, setTesting] = React.useState(false);
+  const [testMsg, setTestMsg] = React.useState(null);
+  const [rows, setRows] = React.useState([]);
+  const showOutbox = props.outbox !== false;
+
+  const loadOutbox = React.useCallback(() => {
+    if (!showOutbox) return Promise.resolve();
+    return client.outbox().then((r) => setRows(r || [])).catch(() => setRows([]));
+  }, [client, showOutbox]);
+  React.useEffect(() => {
+    let alive = true;
+    client.settings().then((d) => alive && setForm(d)).catch((e) => alive && m.fail(e));
+    loadOutbox();
+    return () => { alive = false; };
+  }, [client]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (!form) return h(SettingsSection, { id: "mail", title: L.transportTitle, description: L.transportHint, testId: "mail-transport" }, h(Notice, { msg: m.msg, testId: "mail-message" }));
+
+  const set = (patch) => setForm(Object.assign({}, form, patch));
+  const part = (name, key) => (v) => set({ [name]: Object.assign({}, form[name], { [key]: v }) });
+  const locked = !!form.test_mailbox;
+
+  const save = async (e) => {
+    e.preventDefault();
+    setBusy(true);
+    m.clear();
+    try {
+      const body = { provider: form.provider, from_name: form.from_name, from_address: form.from_address, language: form.language };
+      if (form.provider === "smtp") body.smtp = Object.assign({}, form.smtp, { port: Number(form.smtp.port) || 587 });
+      if (form.provider === "graph") body.graph = form.graph;
+      setForm(await client.save(body));
+      m.ok(L.saved);
+    } catch (err) {
+      m.fail(err);
+    }
+    setBusy(false);
+  };
+  const test = async () => {
+    setTesting(true);
+    setTestMsg(null);
+    try {
+      const r = await client.test(to.trim());
+      const text = L.testSent.replace("{to}", (r && r.to) || to);
+      if (props.notify) props.notify(text, "success");
+      else setTestMsg({ tone: "ok", text });
+      loadOutbox();
+    } catch (err) {
+      const text = (props.formatError || errorText)(err);
+      if (props.notify) props.notify(text, "error");
+      else setTestMsg({ tone: "error", text });
+    }
+    setTesting(false);
+  };
+
+  const providers = ["off", "smtp", "graph"];
+  const transport = h(
+    SettingsSection,
+    { id: "mail", title: L.transportTitle, description: L.transportHint, testId: "mail-transport" },
+    h(
+      "form",
+      { className: "scalio-settings-form", onSubmit: save },
+      locked ? h("div", { className: "scalio-notice is-info", "data-testid": "mail-test-mailbox" }, L.testMailbox) : null,
+      h("fieldset", { className: "scalio-mail-providers", disabled: busy || locked },
+        h("legend", { className: "scalio-field-label" }, L.provider),
+        providers.map((id) => h("label", { key: id, className: "scalio-settings-check" },
+          h("input", { type: "radio", name: "mail-provider", checked: form.provider === id, "data-testid": `mail-provider-${id}`,
+            onChange: () => set({ provider: id }) }), h("span", null, L.providers[id])))),
+      form.provider !== "off"
+        ? h("div", { className: "scalio-mail-grid" },
+            h(Field, { id: "mail-from-name", label: L.fromName }, input("mail-from-name", form.from_name, (v) => set({ from_name: v }), { maxLength: 80, disabled: busy })),
+            form.provider === "smtp"
+              ? h(Field, { id: "mail-from", label: L.fromAddress }, input("mail-from", form.from_address, (v) => set({ from_address: v }),
+                  { type: "email", maxLength: 254, placeholder: "noreply@example.com", disabled: busy || locked }))
+              : null,
+            h(Field, { id: "mail-lang", label: L.language, hint: L.languageHint },
+              select("mail-lang", form.language, [["de", L.languages.de], ["en", L.languages.en]], (v) => set({ language: v }), { disabled: busy })))
+        : null,
+      form.provider === "smtp"
+        ? h("div", { className: "scalio-mail-grid", "data-testid": "mail-smtp" },
+            h(Field, { id: "mail-smtp-host", label: L.host }, input("mail-smtp-host", form.smtp.host, part("smtp", "host"), { maxLength: 253, placeholder: "smtp.example.com", disabled: busy || locked })),
+            h(Field, { id: "mail-smtp-port", label: L.port }, input("mail-smtp-port", form.smtp.port, part("smtp", "port"), { type: "number", min: 1, max: 65535, disabled: busy || locked })),
+            h(Field, { id: "mail-smtp-security", label: L.security },
+              select("mail-smtp-security", form.smtp.security, Object.keys(L.securities).map((k) => [k, L.securities[k]]), part("smtp", "security"), { disabled: busy || locked })),
+            h(Field, { id: "mail-smtp-user", label: L.username }, input("mail-smtp-user", form.smtp.username, part("smtp", "username"), { maxLength: 200, autoComplete: "off", disabled: busy || locked })),
+            h(Field, { id: "mail-smtp-password", label: L.password }, input("mail-smtp-password", form.smtp.password, part("smtp", "password"),
+              { type: "password", maxLength: 500, autoComplete: "new-password", disabled: busy || locked })))
+        : null,
+      form.provider === "graph"
+        ? h("div", { "data-testid": "mail-graph" },
+            h("div", { className: "scalio-mail-grid" },
+              h(Field, { id: "mail-graph-tenant", label: L.tenantId }, input("mail-graph-tenant", form.graph.tenant_id, part("graph", "tenant_id"),
+                { maxLength: 36, placeholder: "00000000-0000-0000-0000-000000000000", className: "scalio-input scalio-mono", disabled: busy })),
+              h(Field, { id: "mail-graph-client", label: L.clientId }, input("mail-graph-client", form.graph.client_id, part("graph", "client_id"),
+                { maxLength: 36, placeholder: "00000000-0000-0000-0000-000000000000", className: "scalio-input scalio-mono", disabled: busy })),
+              h(Field, { id: "mail-graph-secret", label: L.clientSecret }, input("mail-graph-secret", form.graph.client_secret, part("graph", "client_secret"),
+                { type: "password", maxLength: 500, autoComplete: "new-password", disabled: busy })),
+              h(Field, { id: "mail-graph-sender", label: L.sender }, input("mail-graph-sender", form.graph.sender, part("graph", "sender"),
+                { type: "email", maxLength: 254, placeholder: "it@example.com", disabled: busy }))),
+            h("p", { className: "scalio-settings-help" }, props.graphHint || L.graphHint))
+        : null,
+      h(Notice, { msg: m.msg, testId: "mail-message" }),
+      h("div", { className: "scalio-settings-section-footer" },
+        h("button", { type: "submit", className: "scalio-btn is-primary", disabled: busy || locked, "data-testid": "mail-save" },
+          h(Icons.Check, { className: "scalio-icon" }), L.save))
+    )
+  );
+
+  const testBlock = h(
+    SettingsSection,
+    { id: "mail-test", title: L.testTitle, description: L.testHint, testId: "mail-test-section" },
+    h("div", { className: "scalio-mail-test" },
+      input("mail-test-to", to, setTo, { type: "email", placeholder: L.recipient, "aria-label": L.recipient, maxLength: 254 }),
+      h("button", { type: "button", className: "scalio-btn", onClick: test, disabled: testing || form.provider === "off", "data-testid": "mail-test" },
+        h(Icons.CornerDownLeft, { className: "scalio-icon" }), L.sendTest)),
+    h(Notice, { msg: testMsg, testId: "mail-test-message" })
+  );
+
+  const outbox = showOutbox
+    ? h(
+        SettingsSection,
+        { id: "mail-outbox", title: L.outboxTitle, description: L.outboxHint, testId: "mail-outbox-section" },
+        h("div", { className: "scalio-settings-section-footer" },
+          h("button", { type: "button", className: "scalio-btn is-ghost", onClick: loadOutbox, "data-testid": "mail-outbox-refresh" }, L.refresh)),
+        rows.length === 0
+          ? h("p", { className: "scalio-settings-text", "data-testid": "mail-outbox-empty" }, L.outboxEmpty)
+          : h("div", { className: "scalio-mail-outbox" },
+              h("table", { "data-testid": "mail-outbox" },
+                h("tbody", null, rows.map((r) => h("tr", { key: r.id },
+                  h("td", { className: "scalio-mail-time" }, fmtTime(r.created_at, lang)),
+                  h("td", null, r.to),
+                  h("td", null, r.subject, r.error ? h("span", { className: "scalio-settings-help is-error" }, r.error) : null),
+                  h("td", { className: "scalio-mail-state" },
+                    h("span", { className: `scalio-badge is-${{ pending: "running", sent: "ok", failed: "error" }[r.status] || "neutral"}` },
+                      L.states[r.status] || r.status)))))))
+      )
+    : null;
+
+  return h(React.Fragment, null, transport, testBlock, props.children || null, outbox);
+}
+
+// Props: client (mailApi), lang, labels, notify, formatError, editor (the app's rich text editor: a component with
+// {value, onChange, testId}; without it a text field), delay (ms before the preview reloads, default 450).
+function MailTemplates(props) {
+  const { client, lang } = props;
+  const L = mailLabels(lang, props.labels);
+  const m = useMessages(props);
+  const [data, setData] = React.useState(null);
+  const [kind, setKind] = React.useState("");
+  const [tlang, setTlang] = React.useState("");
+  const [subject, setSubject] = React.useState("");
+  const [body, setBody] = React.useState("");
+  const [busy, setBusy] = React.useState(false);
+  const [showPreview, setShowPreview] = React.useState(true);
+  const [preview, setPreview] = React.useState({ subject: "", html: "" });
+  const [provider, setProvider] = React.useState(null);
+  const delay = props.delay == null ? 450 : props.delay;
+
+  const apply = (d, k, l) => {
+    setData(d);
+    const kk = k || (d.kinds[0] && d.kinds[0].code) || "";
+    const ll = l || d.language || "de";
+    setKind(kk);
+    setTlang(ll);
+    const meta = d.kinds.find((x) => x.code === kk);
+    const t = meta && meta.texts[ll];
+    setSubject(t ? t.subject : "");
+    setBody(t ? (props.editor ? textToHtml(t.body) : t.body) : "");
+  };
+
+  React.useEffect(() => {
+    let alive = true;
+    client.templates().then((d) => alive && apply(d)).catch((e) => alive && m.fail(e));
+    if (client.settings) client.settings().then((s) => alive && setProvider(s.provider)).catch(() => {});
+    return () => { alive = false; };
+  }, [client]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  React.useEffect(() => {
+    if (!showPreview || !kind || !tlang) return undefined;
+    let alive = true;
+    const t = setTimeout(() => {
+      client.preview({ kind, lang: tlang, subject, body }).then((p) => alive && setPreview(p)).catch(() => {});
+    }, delay);
+    return () => { alive = false; clearTimeout(t); };
+  }, [client, showPreview, kind, tlang, subject, body, delay]);
+
+  const section = (children) => h(SettingsSection, { id: "mail-templates", title: L.templatesTitle, description: L.templatesHint, testId: "mail-templates" }, children);
+  if (!data) return section(h(Notice, { msg: m.msg, testId: "mail-templates-message" }));
+
+  const meta = data.kinds.find((x) => x.code === kind) || data.kinds[0];
+  const text = meta.texts[tlang] || {};
+  const run = async (fn, okText) => {
+    setBusy(true);
+    m.clear();
+    try {
+      const r = await fn();
+      if (okText) m.ok(typeof okText === "function" ? okText(r) : okText);
+    } catch (err) {
+      m.fail(err);
+    }
+    setBusy(false);
+  };
+  const save = () => run(async () => apply(await client.saveTemplate(kind, tlang, { subject, body }), kind, tlang), L.templateSaved);
+  const reset = () => run(async () => apply(await client.resetTemplate(kind, tlang), kind, tlang), L.templateReset);
+  const testMe = () => run(() => client.testTemplate({ kind, lang: tlang, subject, body }), (r) => L.testSent.replace("{to}", (r && r.to) || ""));
+  const toggle = (on) => run(async () => {
+    await client.save({ notify: { [kind]: on } });
+    apply(await client.templates(), kind, tlang);
+  });
+  const insert = (tok) => setBody((b) => `${b || ""}{${tok}}`);
+
+  const Editor = props.editor;
+  const editor = Editor
+    ? h(Editor, { value: body, onChange: setBody, testId: "mail-template-body" })
+    : h("textarea", { id: "mail-template-body", className: "scalio-input scalio-textarea scalio-mail-body", rows: 14, value: body, maxLength: 50000,
+        "data-testid": "mail-template-body", onChange: (e) => setBody(e.target.value) });
+
+  return section(h(
+    "div",
+    { className: "scalio-settings-form" },
+    provider === "off" ? h("div", { className: "scalio-notice is-info", "data-testid": "mail-templates-off" }, L.off) : null,
+    h("div", { className: "scalio-mail-grid" },
+      h(Field, { id: "mail-template-kind", label: L.kind, hint: meta.description[lang === "en" ? "en" : "de"] },
+        select("mail-template-kind", meta.code, data.kinds.map((k) => [k.code, k.name[lang === "en" ? "en" : "de"] +
+          (Object.values(k.texts).some((t) => t.own) ? ` (${L.own})` : "")]), (v) => apply(data, v, tlang))),
+      h(Field, { id: "mail-template-lang", label: L.lang, hint: text.own ? L.custom : L.builtIn },
+        select("mail-template-lang", tlang, data.languages.map((l) => [l, (L.languages[l] || l) + (meta.texts[l] && meta.texts[l].own ? " ✓" : "")]),
+          (v) => apply(data, meta.code, v)))),
+    meta.switchable
+      ? h("label", { className: "scalio-settings-check" },
+          h("input", { type: "checkbox", checked: !!meta.enabled, disabled: busy, "data-testid": "mail-template-enabled", onChange: (e) => toggle(e.target.checked) }),
+          h("span", null, L.enabled))
+      : null,
+    h("div", null,
+      h("span", { className: "scalio-field-label" }, L.tokens),
+      h("div", { className: "scalio-mail-tokens" }, meta.tokens.map((tok) =>
+        h("button", { key: tok, type: "button", className: "scalio-mail-token", onClick: () => insert(tok), "data-testid": `mail-token-${tok}` }, `{${tok}}`)))),
+    h(Field, { id: "mail-template-subject", label: L.subject },
+      input("mail-template-subject", subject, setSubject, { maxLength: 300 })),
+    h("div", { className: "scalio-mail-editor-head" },
+      h("label", { className: "scalio-field-label", htmlFor: "mail-template-body" }, L.body),
+      h("button", { type: "button", className: "scalio-btn is-ghost", onClick: () => setShowPreview((v) => !v), "data-testid": "mail-preview-toggle" },
+        showPreview ? L.hidePreview : L.showPreview)),
+    h("div", { className: showPreview ? "scalio-mail-editor has-preview" : "scalio-mail-editor" },
+      h("div", { className: "scalio-mail-editor-pane" }, editor),
+      showPreview
+        ? h("div", { className: "scalio-mail-preview", "data-testid": "mail-preview" },
+            h("div", { className: "scalio-mail-preview-head" }, h("strong", null, L.preview), h("span", null, L.sample)),
+            h("div", { className: "scalio-mail-preview-subject" }, `${L.subject}: `, h("span", { "data-testid": "mail-preview-subject" }, preview.subject || "–")),
+            h("iframe", { title: L.preview, sandbox: "", "data-testid": "mail-preview-frame",
+              srcDoc: `<!doctype html><html><body style="margin:0;padding:16px;background:#fff;">${preview.html || ""}</body></html>` }))
+        : null),
+    h(Notice, { msg: m.msg, testId: "mail-templates-message" }),
+    h("div", { className: "scalio-settings-section-footer" },
+      text.own
+        ? h("button", { type: "button", className: "scalio-btn is-danger", onClick: reset, disabled: busy, "data-testid": "mail-template-reset" },
+            h(Icons.History, { className: "scalio-icon" }), L.resetTemplate)
+        : null,
+      h("button", { type: "button", className: "scalio-btn", onClick: testMe, disabled: busy || provider === "off", "data-testid": "mail-template-test" },
+        h(Icons.CornerDownLeft, { className: "scalio-icon" }), L.testToMe),
+      h("button", { type: "button", className: "scalio-btn is-primary", onClick: save, disabled: busy || !subject.trim() || !body.trim(), "data-testid": "mail-template-save" },
+        h(Icons.Check, { className: "scalio-icon" }), L.saveTemplate))
+  ));
+}
+
+module.exports = { MailTransport, MailTemplates, mailApi, mailLabels, textToHtml, MAIL_LABELS: LABELS };

package/react/saas_updates.js

@@ -0,0 +1,274 @@
+"use strict";
+// SaaS updates from Compass (scalio-docs ADR 0074): UpdateBanner on every page (blue, security orange) and
+// SaasUpdatesPanel in Einstellungen -> Updates for admins. Backend: scalio-connect `saas_updates_router`
+// (GET /saas-updates/banner, GET /saas-updates, POST /saas-updates/{now,postpone,mode,window}). Compass runs the
+// update; the app only shows the offer and passes on the customer's choice.
+const React = require("react");
+const h = React.createElement;
+const Icons = require("./icons");
+const { Notice } = require("./blocks");
+const { SettingsSection, SettingsField: Field } = require("./settings");
+
+const LABELS = {
+  de: {
+    title: "Updates",
+    hint: "Scalio stellt neue Versionen bereit. Sie wählen, wann Ihre Instanz aktualisiert wird, spätestens bis zur Frist.",
+    current: "Aktuelle Version",
+    available: "Version {version} ist verfügbar",
+    security: "Sicherheitsupdate {version} ist verfügbar",
+    bannerText: "Spätestens am {due}.",
+    bannerPlanned: "Geplant: {planned}.",
+    bannerManual: "Wird erst auf Klick oder zur Frist installiert.",
+    bannerAction: "Ansehen",
+    plannedTitle: "Update am {planned}",
+    plannedText: "Version {version} wird installiert. Die Anwendung ist dabei kurz nicht erreichbar.",
+    later: "Später",
+    none: "Ihre Instanz ist aktuell.",
+    notes: "Was ist neu",
+    due: "Frist",
+    planned: "Geplant",
+    plannedNone: "erst auf Klick, spätestens zur Frist",
+    held: "Scalio hält dieses Update für Ihre Instanz noch zurück.",
+    forced: "Scalio hat den Termin festgelegt.",
+    now: "Jetzt aktualisieren",
+    nowConfirm: "Version {version} jetzt installieren? Die Anwendung ist einige Minuten nicht erreichbar.",
+    postpone: "Verschieben bis",
+    postponeGo: "Verschieben",
+    mode: "Verhalten",
+    modeAuto: "Automatisch im Wartungsfenster",
+    modeManual: "Nur auf Klick (spätestens zur Frist)",
+    window: "Wartungsfenster",
+    windowHint: "Updates laufen nur in diesem Fenster. Ohne eigenes Fenster gilt der Standard von Scalio.",
+    days: "Tage (keiner = jeden Tag)",
+    start: "Beginn",
+    hours: "Dauer (Stunden)",
+    tz: "Zeitzone",
+    save: "Fenster speichern",
+    useDefault: "Standard verwenden",
+    ownWindow: "eigenes Fenster",
+    defaultWindow: "Standard",
+    last: "Letztes Update",
+    lastDone: "{version} installiert am {at}",
+    lastError: "{version} fehlgeschlagen am {at}, zurück auf der alten Version",
+    unreachable: "Compass ist gerade nicht erreichbar. Updates laufen trotzdem wie geplant.",
+    saved: "Gespeichert.",
+    weekdays: ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"],
+  },
+  en: {
+    title: "Updates",
+    hint: "Scalio provides new versions. You choose when your instance is updated, at the latest by the deadline.",
+    current: "Current version",
+    available: "Version {version} is available",
+    security: "Security update {version} is available",
+    bannerText: "At the latest on {due}.",
+    bannerPlanned: "Planned: {planned}.",
+    bannerManual: "Installed only on a click or at the deadline.",
+    bannerAction: "View",
+    plannedTitle: "Update on {planned}",
+    plannedText: "Version {version} will be installed. The application is briefly unavailable.",
+    later: "Later",
+    none: "Your instance is up to date.",
+    notes: "What's new",
+    due: "Deadline",
+    planned: "Planned",
+    plannedNone: "only on a click, at the latest at the deadline",
+    held: "Scalio is still holding this update back for your instance.",
+    forced: "Scalio has set the date.",
+    now: "Update now",
+    nowConfirm: "Install version {version} now? The application is unavailable for a few minutes.",
+    postpone: "Postpone until",
+    postponeGo: "Postpone",
+    mode: "Behaviour",
+    modeAuto: "Automatically in the maintenance window",
+    modeManual: "Only on a click (at the latest at the deadline)",
+    window: "Maintenance window",
+    windowHint: "Updates run only in this window. Without an own window, Scalio's default applies.",
+    days: "Days (none = every day)",
+    start: "Start",
+    hours: "Duration (hours)",
+    tz: "Time zone",
+    save: "Save window",
+    useDefault: "Use default",
+    ownWindow: "own window",
+    defaultWindow: "default",
+    last: "Last update",
+    lastDone: "{version} installed on {at}",
+    lastError: "{version} failed on {at}, back on the old version",
+    unreachable: "Compass cannot be reached right now. Updates still run as planned.",
+    saved: "Saved.",
+    weekdays: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+  },
+};
+
+function labels(lang, overrides) {
+  return Object.assign({}, LABELS[lang === "en" ? "en" : "de"], overrides || {});
+}
+
+function fill(text, vars) {
+  return Object.keys(vars || {}).reduce((s, k) => s.split(`{${k}}`).join(vars[k] == null ? "" : vars[k]), text);
+}
+
+function when(iso, lang) {
+  if (!iso) return "";
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  return d.toLocaleString(lang === "en" ? "en-GB" : "de-CH", { dateStyle: "medium", timeStyle: "short" });
+}
+
+function errorText(err) {
+  const d = err && err.response && err.response.data && err.response.data.detail;
+  if (typeof d === "string") return d;
+  return (err && err.message) || String(err);
+}
+
+// api: axios instance with the app's base URL (/api).
+function saasUpdatesApi(api) {
+  return {
+    banner: () => api.get("/saas-updates/banner").then((r) => r.data),
+    state: (refresh) => api.get(refresh ? "/saas-updates?refresh=1" : "/saas-updates").then((r) => r.data),
+    act: (op, body) => api.post(`/saas-updates/${op}`, body || {}).then((r) => r.data),
+  };
+}
+
+// Props: client (saasUpdatesApi), lang, labels, settingsTo (address of Einstellungen -> Updates), onOpen() (e.g. navigate),
+// storage (default sessionStorage; «Später» hides the banner for this version until the next session).
+function UpdateBanner(props) {
+  const L = labels(props.lang, props.labels);
+  const [data, setData] = React.useState(null);
+  const [hidden, setHidden] = React.useState(false);
+  React.useEffect(() => {
+    let alive = true;
+    props.client.banner().then((d) => alive && setData(d)).catch(() => {});
+    return () => { alive = false; };
+  }, [props.client]);
+  const offer = data && data.saas && data.offer;
+  const key = offer ? `scalio-update-later-${offer.version}` : "";
+  const store = props.storage || (typeof window !== "undefined" ? window.sessionStorage : null);
+  let dismissed = hidden;
+  try { dismissed = dismissed || (!!key && !!store && store.getItem(key) === "1"); } catch (e) { /* private mode */ }
+  if (!offer || dismissed) return null;
+  const later = () => {
+    try { if (store) store.setItem(key, "1"); } catch (e) { /* private mode */ }
+    setHidden(true);
+  };
+  if (!data.can_act) {
+    if (!offer.planned_at) return null;
+    return h(Notice, { kind: "info", banner: true, testId: "saas-update-banner", title: fill(L.plannedTitle, { planned: when(offer.planned_at, props.lang) }),
+      onDismiss: later, dismissLabel: L.later }, fill(L.plannedText, { version: offer.version }));
+  }
+  const text = [fill(L.bannerText, { due: when(offer.due_at, props.lang) }),
+    offer.planned_at ? fill(L.bannerPlanned, { planned: when(offer.planned_at, props.lang) }) : L.bannerManual].join(" ");
+  // onOpen (e.g. the router's navigate) wins over a plain link to settingsTo.
+  const action = props.onOpen
+    ? { label: L.bannerAction, onClick: props.onOpen, testId: "saas-update-banner-open" }
+    : props.settingsTo ? { label: L.bannerAction, href: props.settingsTo, testId: "saas-update-banner-open" } : null;
+  return h(Notice, {
+    kind: offer.kind === "security" ? "warn" : "info", banner: true, testId: "saas-update-banner",
+    title: fill(offer.kind === "security" ? L.security : L.available, { version: offer.version }),
+    action, onDismiss: later, dismissLabel: L.later,
+  }, text);
+}
+
+const EMPTY_WINDOW = { days: [], start: "02:00", hours: 3, tz: "Europe/Zurich" };
+
+// Props: client (saasUpdatesApi), lang, labels, notify(message, tone), formatError(err).
+function SaasUpdatesPanel(props) {
+  const L = labels(props.lang, props.labels);
+  const fmtErr = props.formatError || errorText;
+  const [st, setSt] = React.useState(null);
+  const [busy, setBusy] = React.useState(false);
+  const [error, setError] = React.useState("");
+  const [until, setUntil] = React.useState("");
+  const [win, setWin] = React.useState(EMPTY_WINDOW);
+
+  const take = (d) => {
+    setSt(d);
+    if (d && d.window) setWin(Object.assign({}, EMPTY_WINDOW, d.window));
+  };
+  React.useEffect(() => {
+    let alive = true;
+    props.client.state().then((d) => alive && take(d)).catch((e) => alive && setError(fmtErr(e)));
+    return () => { alive = false; };
+  }, [props.client]);
+
+  const act = async (op, body) => {
+    setBusy(true);
+    setError("");
+    try {
+      take(await props.client.act(op, body));
+      if (props.notify) props.notify(L.saved, "ok");
+    } catch (e) {
+      const t = fmtErr(e);
+      if (props.notify) props.notify(t, "error");
+      setError(t);
+    }
+    setBusy(false);
+  };
+
+  if (!st) return h(SettingsSection, { id: "updates", title: L.title, description: L.hint, testId: "saas-updates" },
+    error ? h("div", { className: "scalio-notice is-error", role: "alert" }, error) : null);
+  if (st.saas === false) return null;
+
+  const offer = st.offer;
+  const rows = [];
+  if (st.reachable === false) rows.push(h("div", { key: "u", className: "scalio-notice is-warn", "data-testid": "saas-updates-unreachable" }, L.unreachable));
+  rows.push(h(Field, { key: "cur", label: L.current }, h("div", { className: "scalio-settings-text", "data-testid": "saas-updates-current" }, st.current_version || "–")));
+  if (!offer) {
+    if (st.reachable !== false) rows.push(h("p", { key: "none", className: "scalio-settings-text", "data-testid": "saas-updates-none" }, L.none));
+  } else {
+    const due = offer.due_at ? offer.due_at.slice(0, 10) : "";
+    rows.push(h("div", { key: "offer", className: cxNotice(offer), "data-testid": "saas-updates-offer" },
+      h("div", { className: "scalio-notice-body" },
+        h("div", { className: "scalio-notice-title" }, fill(offer.kind === "security" ? L.security : L.available, { version: offer.version })),
+        h("div", { className: "scalio-notice-text" },
+          `${L.due}: ${when(offer.due_at, props.lang)} · ${L.planned}: ${offer.planned_at ? when(offer.planned_at, props.lang) : L.plannedNone}`,
+          offer.held ? h("div", null, L.held) : null, offer.forced ? h("div", null, L.forced) : null))));
+    if (offer.notes) rows.push(h(Field, { key: "notes", label: L.notes },
+      h("pre", { className: "scalio-settings-text", style: { whiteSpace: "pre-wrap" }, "data-testid": "saas-updates-notes" }, offer.notes)));
+    if (!offer.forced) {
+      rows.push(h("div", { key: "acts", className: "scalio-settings-section-footer" },
+        h("button", { type: "button", className: "scalio-btn is-solid", disabled: busy || offer.held, "data-testid": "saas-updates-now",
+          onClick: () => { if (window.confirm(fill(L.nowConfirm, { version: offer.version }))) act("now"); } },
+          h(Icons.Download, { className: "scalio-icon" }), L.now)));
+      rows.push(h(Field, { key: "post", id: "saas-updates-until", label: L.postpone },
+        h("div", { style: { display: "flex", gap: "0.5rem" } },
+          h("input", { id: "saas-updates-until", type: "date", className: "scalio-input", value: until, max: due, disabled: busy,
+            "data-testid": "saas-updates-until", onChange: (e) => setUntil(e.target.value) }),
+          h("button", { type: "button", className: "scalio-btn", disabled: busy || !until, "data-testid": "saas-updates-postpone",
+            onClick: () => act("postpone", { until: new Date(`${until}T00:00:00`).toISOString() }) }, L.postponeGo))));
+    }
+  }
+  rows.push(h(Field, { key: "mode", label: L.mode },
+    ["auto", "manual"].map((m) => h("label", { key: m, className: "scalio-settings-check" },
+      h("input", { type: "radio", name: "saas-updates-mode", checked: st.mode === m, disabled: busy, "data-testid": `saas-updates-mode-${m}`,
+        onChange: () => act("mode", { mode: m }) }),
+      h("span", null, m === "auto" ? L.modeAuto : L.modeManual)))));
+  const toggleDay = (d) => setWin(Object.assign({}, win, { days: win.days.includes(d) ? win.days.filter((x) => x !== d) : win.days.concat([d]).sort() }));
+  rows.push(h(Field, { key: "win", label: `${L.window} (${st.own_window ? L.ownWindow : L.defaultWindow})`, hint: L.windowHint },
+    h("div", { className: "scalio-settings-text" }, L.days),
+    h("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem" } },
+      L.weekdays.map((name, d) => h("label", { key: d, className: "scalio-settings-check" },
+        h("input", { type: "checkbox", checked: win.days.includes(d), disabled: busy, "data-testid": `saas-updates-day-${d}`, onChange: () => toggleDay(d) }),
+        h("span", null, name)))),
+    h("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", marginTop: "0.5rem" } },
+      h("label", null, L.start, " ", h("input", { type: "time", className: "scalio-input", value: win.start, disabled: busy, "data-testid": "saas-updates-start",
+        onChange: (e) => setWin(Object.assign({}, win, { start: e.target.value })) })),
+      h("label", null, L.hours, " ", h("input", { type: "number", min: 1, max: 12, className: "scalio-input", value: win.hours, disabled: busy, "data-testid": "saas-updates-hours",
+        onChange: (e) => setWin(Object.assign({}, win, { hours: Number(e.target.value) })) })),
+      h("label", null, L.tz, " ", h("input", { className: "scalio-input", value: win.tz, disabled: busy, "data-testid": "saas-updates-tz",
+        onChange: (e) => setWin(Object.assign({}, win, { tz: e.target.value })) }))),
+    h("div", { className: "scalio-settings-section-footer" },
+      h("button", { type: "button", className: "scalio-btn", disabled: busy, "data-testid": "saas-updates-save-window", onClick: () => act("window", { window: win }) }, L.save),
+      st.own_window ? h("button", { type: "button", className: "scalio-btn", disabled: busy, "data-testid": "saas-updates-default-window", onClick: () => act("window", {}) }, L.useDefault) : null)));
+  if (st.last) rows.push(h(Field, { key: "last", label: L.last },
+    h("div", { className: "scalio-settings-text", "data-testid": "saas-updates-last" },
+      fill(st.last.state === "done" ? L.lastDone : L.lastError, { version: st.last.version, at: when(st.last.at, props.lang) }))));
+  if (error) rows.push(h("div", { key: "err", className: "scalio-notice is-error", role: "alert", "data-testid": "saas-updates-error" }, error));
+  return h(SettingsSection, { id: "updates", title: L.title, description: L.hint, testId: "saas-updates" }, rows);
+}
+
+function cxNotice(offer) {
+  return `scalio-notice ${offer.kind === "security" ? "is-warn" : "is-info"}`;
+}
+
+module.exports = { UpdateBanner, SaasUpdatesPanel, saasUpdatesApi, SAAS_UPDATE_LABELS: LABELS };