@scalio-cloud/ui 0.18.0 → 0.19.0

package/CHANGELOG.md

@@ -1,16 +1,30 @@
 # Changelog
 
+## 0.19.0
+Settings card "Scalio Beacon" for the apps (Beacon phase 3, scalio-docs `concepts/beacon-suite.md`).
+- `BeaconConnection` with `peersApi(api)`: pair the installation with a Beacon instance (address + one-time code from
+  Beacon), show the pairing (address, version, last contact, queue), test it and disconnect. Routes from
+  scalio-connect 0.8.0 (`scalio_connect.peers.web.admin_router`).
+- Labels `beacon*` in German and English.
+- **Visible change:** none until an app shows the card. No token changes.
+
+## 0.18.1
+Page actions after Markus' feedback (2026-10-31, UISPEC section 2 "Page actions"). 0.18.0 was released before these
+changes were merged; apps use 0.18.1.
+- The slot is shown only when a page has actions and pushes the menu down; no reserved room, no separator line.
+- 0.25rem above the buttons, 0.875rem from the last button to the next section heading (half the usual gap).
+- Only Übersicht (first item of a first section without heading) is pinned; further items of that section stay in
+  the menu (Pulse: Geräte).
+- Buttons in the slot: same height (2.25rem), one line, long labels end with "…". Labels without "Neu" (README).
+- **Visible change:** only in apps that set `pageActions`. No token changes.
+
 ## 0.18.0
-Page actions in the sidebar (Markus 2026-10-31, reference Scalio Kontor; scalio-docs ADR 0042 Nachtrag).
+Page actions in the sidebar, first version (Markus 2026-10-31, reference Scalio Kontor; scalio-docs ADR 0042 Nachtrag).
 - New `react/actions.js`: `PageActions` puts a page's actions (Neu …, Import, Zurück) into a fixed slot in the
-  sidebar right below Übersicht from 768px; on phones they stay in the page header. `ActionSlot` for apps with their
-  own sidebar, `useDesktop()` (768px, same as the sidebar).
-- `Sidebar` gets `pageActions`: Übersicht (first section without heading) is pinned on top, then the slot, then the
-  other sections. The slot keeps room for two buttons when empty, so the menu never moves. Not in the phone drawer.
-- CSS (`nav.css`): `.scalio-sidebar-pinned`, `.scalio-action-slot`, `.scalio-side-actions` (buttons stacked, full
-  width). `shell.css`: an empty `.scalio-page-actions` is hidden.
-- `react-dom` is an optional peer dependency (for the portal; every app has it).
-- **Visible change:** none until an app sets `pageActions` and wraps its actions in `PageActions`. No token changes.
+  sidebar right below Übersicht from 768px; on phones they stay in the page header. `ActionSlot`, `useDesktop()`.
+- `Sidebar` gets `pageActions`: Übersicht pinned on top, then the slot (room for two buttons, line below), then the
+  sections. `shell.css`: an empty `.scalio-page-actions` is hidden. `react-dom` is an optional peer dependency.
+- **Visible change:** none until an app sets `pageActions`. No token changes.
 
 ## 0.17.0
 Scalio Pulse is built (scalio-docs ADR 0043, P1 started 2026-10-31).
@@ -30,7 +44,7 @@ Same profile page in every app, reference Scalio Nexus (Markus 2026-10-31, scali
 - **Visible change:** none until an app uses the new parts. No token changes.
 
 ## 0.15.0
-New app Scalio Beacon (service desk, scalio-docs ADR 0043).
+New app Scalio Beacon (service desk, scalio-docs ADR 0044).
 - Product switcher: entry "Beacon" (icon `RadioTower`) between Citadel and Pulse, available like the others.
 - `manualUrl("beacon")`: docs.scaliobeacon.com / devdocs.scaliobeacon.com.
 - **Visible change:** every app shows "Beacon" in the switcher after its upgrade (greyed out until the instance

package/README.md

@@ -117,6 +117,10 @@ With `client` the drawer has the tabs "Neue Anfrage" (category, subject, descrip
 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`.
 
+The settings card `<BeaconConnection client={peersApi(api)} lang={lang} />` pairs the app with Scalio Beacon
+(address and one-time code from Beacon, Einstellungen -> Verbundene Apps); findings then go to Beacon. Backend:
+scalio-connect 0.8.0 `peers.web.admin_router`.
+
 `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),
@@ -130,16 +134,17 @@ on top. An app with two work areas (Nexus Identity and HR) puts `<WorkspaceSwitc
 into the sidebar's `top`.
 
 **Page actions in the sidebar** (from 0.18.0, UISPEC section 2): `<Sidebar pageActions ... />` keeps Übersicht (the
-first section without a heading) on top and adds a fixed slot right below it. A page wraps its actions in
-`<PageActions>`; from 768px they move into the slot, on phones they stay in the page header. The slot keeps room for
-two buttons even when a page has none, so the menu never moves.
+first item of a first section without heading) on top and adds a slot right below it. A page wraps its actions in
+`<PageActions>`; from 768px they move into the slot, on phones they stay in the page header. The slot takes no
+room on pages without actions; with actions it pushes the menu down.
 
 ```jsx
-<PageHeader title="Kontakte" actions={<PageActions><Button onClick={add}><Plus /> Neuer Kontakt</Button></PageActions>} />
+<PageHeader title="Kontakte" actions={<PageActions><Button onClick={add}><Plus /> Kontakt</Button></PageActions>} />
 <PageHeader title={doc.number} actions={<PageActions><Button variant="outline" asChild><Link to="/invoices"><ArrowLeft /> Zurück</Link></Button></PageActions>} />
 ```
 
 Only actions that start something or lead away go there (Neu …, Import, Scannen, Zurück), at most two per page.
+Labels without "Neu"/"New": the + icon says it ("+ Kontakt", not "+ Neuer Kontakt").
 Filters, search, tabs and Speichern stay on the page. Apps with their own sidebar place `<ActionSlot />` themselves.
 
 ## Settings page (React)

package/nav.css

@@ -17,16 +17,23 @@
 .scalio-sidebar-top { padding: 0.75rem 0.75rem 0; }
 .scalio-sidebar-scroll { flex: 1 1 auto; overflow-y: auto; padding: 0.5rem 0 0.75rem; }
 .scalio-nav-section + .scalio-nav-section { margin-top: 0.25rem; }
-/* Page actions (react/actions.js): Übersicht stays on top, then a fixed slot for the page's actions. The slot
-   keeps room for two buttons even when empty, so the menu below never moves. */
+/* Page actions (react/actions.js): Übersicht stays on top, then the slot for the page's actions. The slot takes no
+   room when a page has no actions; with actions it shows them and pushes the menu down. No separator line. */
 .scalio-sidebar-pinned { flex-shrink: 0; padding-top: 0.5rem; }
-.scalio-action-slot {
-  flex-shrink: 0; box-sizing: border-box; min-height: 6.25rem; margin: 0 0.75rem; padding: 0.5rem 0 0.75rem;
-  border-bottom: 1px solid hsl(var(--border));
-}
+.scalio-action-slot { flex-shrink: 0; margin: 0 0.75rem; }
 .scalio-sidebar-scroll.has-action-slot { padding-top: 0; }
-.scalio-side-actions, .scalio-side-actions > div { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; }
-.scalio-side-actions > :not(div), .scalio-side-actions > div > * { width: 100%; justify-content: center; }
+.scalio-side-actions, .scalio-side-actions > div { display: flex; flex-direction: column; align-items: stretch; gap: 0.375rem; }
+.scalio-side-actions { padding-top: 0.25rem; }
+/* Below the buttons: half the usual space before the next heading (0.875rem instead of 1.75rem), a little room
+   before a plain menu item. */
+.scalio-action-slot:has(.scalio-side-actions:not(:empty)) + .scalio-sidebar-scroll > .scalio-nav-section:first-child > .scalio-nav-heading { padding-top: 0.875rem; }
+.scalio-action-slot:has(.scalio-side-actions:not(:empty)) + .scalio-sidebar-scroll > .scalio-nav-section:first-child:not(:has(> .scalio-nav-heading)) { padding-top: 0.375rem; }
+.scalio-side-actions:empty { display: none; }
+/* Same height for every button (2.25rem), one line; a long label is cut with "…". */
+.scalio-side-actions > :not(div), .scalio-side-actions > div > * {
+  box-sizing: border-box; width: 100%; height: 2.25rem; min-height: 0; margin: 0; justify-content: center;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
 .scalio-side-actions input[type="file"], .scalio-side-actions [hidden] { display: none; }
 .scalio-nav-heading {
   padding: 1.25rem 1.25rem 0.5rem; font-size: 11px; font-weight: 700; text-transform: uppercase;

package/package.json

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

@@ -1,7 +1,7 @@
 "use strict";
 // Page actions in the sidebar (UISPEC section 2, "Seitenaktionen", from 0.18.0). Buttons such as "Neu ...",
-// "Import" or "Zurück" sit in a fixed slot right below Übersicht, close to the navigation, instead of far
-// right in the page header. The slot keeps its height when a page has no actions, so the menu never moves.
+// "Import" or "Zurück" sit right below Übersicht, close to the navigation, instead of far right in the page
+// header. The slot takes no room when a page has no actions; with actions it pushes the menu down.
 // Phones have no sidebar: there the actions stay in the page header.
 //
 // The app turns the slot on with <Sidebar pageActions />; a page wraps its actions in <PageActions>.

package/react/beacon.js

@@ -0,0 +1,112 @@
+"use strict";
+// Settings card "Scalio Beacon" (Beacon phase 3, scalio-docs concepts/beacon-suite.md): an app (Citadel, Rosetta,
+// Foundry, Nexus) pairs with a Beacon instance using the address and one-time code from Beacon (Einstellungen ->
+// Verbundene Apps); findings then go to Beacon and become tickets. Backend routes from scalio-connect
+// (`scalio_connect.peers.web.admin_router`); peersApi(api) maps them for an axios-like client.
+const React = require("react");
+const h = React.createElement;
+const { labelsFor } = require("./labels");
+
+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;
+  return (err && err.message) || String(err);
+}
+
+function fmtDate(value, lang) {
+  if (!value) return "";
+  const d = new Date(value);
+  if (isNaN(d.getTime())) return String(value);
+  return d.toLocaleString(lang === "en" ? "en-GB" : "de-CH", { dateStyle: "medium", timeStyle: "short" });
+}
+
+// api: axios instance with the app's base URL (/api). Every method resolves to the response body.
+function peersApi(api) {
+  const data = (p) => p.then((r) => r.data);
+  const enc = encodeURIComponent;
+  return {
+    list: () => data(api.get("/peers")),
+    connect: (url, code) => data(api.post("/peers", { url, code })),
+    check: (id) => data(api.post(`/peers/${enc(id)}/check`)),
+    remove: (id) => data(api.delete(`/peers/${enc(id)}`)),
+  };
+}
+
+function BeaconConnection({ client, lang, labels, onChange }) {
+  const L = labelsFor(lang, labels);
+  const [st, setSt] = React.useState(null);
+  const [url, setUrl] = React.useState("");
+  const [code, setCode] = React.useState("");
+  const [busy, setBusy] = React.useState(false);
+  const [error, setError] = React.useState("");
+  const [note, setNote] = React.useState("");
+  const load = React.useCallback(() => client.list().then((d) => setSt(d)).catch((err) => (setError(errorText(err)), setSt(false))), [client]);
+  React.useEffect(() => { load(); }, [load]);
+  const run = async (fn, ok) => {
+    setBusy(true);
+    setError("");
+    setNote("");
+    try {
+      const d = await fn();
+      if (d && d.ok === false) throw new Error(L.beaconCheckFailed.replace("{detail}", d.detail || d.status));
+      setCode("");
+      setNote(typeof ok === "function" ? ok(d) : ok);
+      await load();
+      if (onChange) onChange(d);
+    } catch (err) {
+      setError(errorText(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+  if (st === null) return h("div", { className: "scalio-support-meta" }, L.loading);
+  if (st === false) return h("div", { className: "scalio-notice is-error", role: "alert" }, error);
+  const beacons = (st.peers || []).filter((p) => p.app === "beacon");
+  return h(
+    "div",
+    { className: "scalio-support-conn", "data-testid": "beacon-connection" },
+    h("p", { className: "scalio-support-meta" }, beacons.length ? L.beaconHelpConnected : L.beaconHelp),
+    beacons.map((p) => {
+      const q = p.queue || {};
+      return h(
+        "div",
+        { key: p.id, className: "scalio-support-conn", "data-testid": "beacon-peer" },
+        h("div", { className: "scalio-support-conn-head" },
+          h("span", { className: "scalio-badge " + (p.usable ? "is-ok" : "is-error") }, p.usable ? L.beaconConnected : L.beaconKeyLost)),
+        h("dl", { className: "scalio-support-conn-facts" },
+          h("dt", null, L.beaconAddress), h("dd", null, p.url),
+          p.version ? h(React.Fragment, null, h("dt", null, L.version), h("dd", null, p.version)) : null,
+          h("dt", null, L.supportSince), h("dd", null, fmtDate(p.paired_at, lang)),
+          h("dt", null, L.beaconLastContact), h("dd", null, fmtDate(p.last_seen, lang))),
+        q.pending || q.failed
+          ? h("div", { className: "scalio-support-meta", "data-testid": "beacon-queue" },
+              L.supportOutbox.replace("{pending}", q.pending || 0).replace("{failed}", q.failed || 0) + (q.last_error ? ` (${q.last_error})` : ""))
+          : null,
+        h("div", { className: "scalio-support-conn-actions" },
+          h("button", { type: "button", className: "scalio-btn", disabled: busy, "data-testid": "beacon-check",
+            onClick: () => run(() => client.check(p.id), (d) => L.beaconChecked.replace("{version}", (d && d.version) || "")) }, L.supportCheck),
+          h("button", { type: "button", className: "scalio-btn scalio-btn-danger", disabled: busy, "data-testid": "beacon-remove",
+            onClick: () => (typeof window === "undefined" || window.confirm(L.beaconRemoveConfirm)) && run(() => client.remove(p.id), L.supportRemoved) },
+            L.supportRemove))
+      );
+    }),
+    note ? h("div", { className: "scalio-notice is-ok", "data-testid": "beacon-note" }, note) : null,
+    error ? h("div", { className: "scalio-notice is-error", role: "alert", "data-testid": "beacon-error" }, error) : null,
+    beacons.length
+      ? null
+      : h(
+          "form",
+          { className: "scalio-support-form", onSubmit: (e) => { e.preventDefault(); run(() => client.connect(url.trim(), code.trim()), L.beaconPaired); } },
+          h("label", { className: "scalio-field-label", htmlFor: "beacon-url" }, L.beaconAddress),
+          h("input", { id: "beacon-url", className: "scalio-input", placeholder: "https://beacon.example.com", value: url, required: true,
+            onChange: (e) => setUrl(e.target.value), "data-testid": "beacon-url-input" }),
+          h("label", { className: "scalio-field-label", htmlFor: "beacon-code" }, L.beaconCode),
+          h("input", { id: "beacon-code", className: "scalio-input", placeholder: "bpc_…", value: code, required: true,
+            onChange: (e) => setCode(e.target.value), "data-testid": "beacon-code-input" }),
+          h("button", { type: "submit", className: "scalio-btn-primary", disabled: busy, "data-testid": "beacon-connect-btn" }, L.supportConnect)
+        )
+  );
+}
+
+module.exports = { peersApi, BeaconConnection };

package/react/index.js

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

package/react/labels.js

@@ -140,6 +140,19 @@ const LABELS = {
     supportRemove: "Trennen",
     supportRemoveConfirm: "Verbindung zum Support trennen? Neue Tickets warten dann, bis wieder verbunden ist.",
     supportRemoved: "Verbindung getrennt.",
+    // Scalio Beacon (connected apps, Beacon phase 3)
+    beaconTitle: "Scalio Beacon",
+    beaconHelp: "Befunde dieser Installation gehen an Scalio Beacon und werden dort Tickets. Adresse und Kopplungscode erhalten Sie in Beacon unter Einstellungen -> Verbundene Apps.",
+    beaconHelpConnected: "Befunde dieser Installation gehen an Scalio Beacon und werden dort Tickets.",
+    beaconAddress: "Beacon-Adresse",
+    beaconCode: "Kopplungscode",
+    beaconConnected: "Verbunden",
+    beaconKeyLost: "Schlüssel nicht lesbar, bitte neu verbinden",
+    beaconLastContact: "Letzter Kontakt",
+    beaconPaired: "Mit Beacon verbunden.",
+    beaconChecked: "Verbindung funktioniert (Beacon {version}).",
+    beaconCheckFailed: "Keine Verbindung: {detail}",
+    beaconRemoveConfirm: "Verbindung zu Beacon trennen? Befunde gehen dann nicht mehr an Beacon; die Tickets dort bleiben.",
     // Two-factor card (SecurityFactors) and license panel (LicensePanel)
     mfa: {
       backupTitle: "Ihre Backup-Codes",
@@ -384,6 +397,19 @@ const LABELS = {
     supportRemove: "Disconnect",
     supportRemoveConfirm: "Disconnect from support? New tickets then wait until the instance is connected again.",
     supportRemoved: "Disconnected.",
+    // Scalio Beacon (connected apps, Beacon phase 3)
+    beaconTitle: "Scalio Beacon",
+    beaconHelp: "Findings of this installation go to Scalio Beacon and become tickets there. You get the address and the pairing code in Beacon under Settings -> Connected apps.",
+    beaconHelpConnected: "Findings of this installation go to Scalio Beacon and become tickets there.",
+    beaconAddress: "Beacon address",
+    beaconCode: "Pairing code",
+    beaconConnected: "Connected",
+    beaconKeyLost: "Key cannot be read, please connect again",
+    beaconLastContact: "Last contact",
+    beaconPaired: "Connected with Beacon.",
+    beaconChecked: "Connection works (Beacon {version}).",
+    beaconCheckFailed: "No connection: {detail}",
+    beaconRemoveConfirm: "Disconnect from Beacon? Findings no longer go to Beacon; the tickets there stay.",
     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.",

package/react/nav.js

@@ -102,8 +102,8 @@ function SearchButton({ search, lang, labels, testIdPrefix, onNavigate }) {
 
 // Sidebar. variant "desktop" shows from 768px, "drawer" is the same content inside NavDrawer.
 // link: the router's NavLink (gets to, end, className(fn), onClick); without it plain <a> + activePath.
-// pageActions: a fixed slot for the page's actions (react/actions.js) right below Übersicht, desktop only.
-// Übersicht (the first section when it has no heading) then stays on top and does not scroll.
+// pageActions: a slot for the page's actions (react/actions.js) right below Übersicht, desktop only.
+// Übersicht (first item of the first section when it has no heading) then stays on top and does not scroll.
 function Sidebar(props) {
   const {
     nav, link, activePath, top, search, primaryAction, footer, version, commit, lang, labels,
@@ -113,8 +113,10 @@ function Sidebar(props) {
   const L = labelsFor(lang, labels);
   const sections = visibleSections(nav);
   const slot = !!pageActions && variant !== "drawer";
-  const pinned = slot && sections.length && !sections[0].label ? sections[0] : null;
-  const rest = pinned ? sections.slice(1) : sections;
+  // Only Übersicht (first item of a first section without heading) is pinned; the rest of that section scrolls.
+  const first = sections[0];
+  const pinned = slot && first && !first.label ? Object.assign({}, first, { items: first.items.slice(0, 1) }) : null;
+  const rest = !pinned ? sections : first.items.length > 1 ? [Object.assign({}, first, { items: first.items.slice(1) })].concat(sections.slice(1)) : sections.slice(1);
   const section = (sec, i) =>
     h(
       "div",