@scalio-cloud/ui 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.9.0
+- New `CommandPalette` (⌘K / Strg+K): finds every page of the sidebar data (`nav`) plus extra `pages`, remembers the
+  last visited pages, and takes app commands as `groups` (Nexus: AI and guarded actions). Arrow keys, Enter, Esc,
+  no dialog library. Helpers `openCommandPalette()` (for the sidebar search button), `paletteShortcut(lang)`,
+  `paletteGroups`, `palettePages`. `LABELS` get the palette texts, `Icons` get History and CornerDownLeft.
+  **No visible change** until an app uses it; Nexus keeps its test ids (`command-palette-input`, `cmd-nav-*`).
+
+## 0.8.1
+- `SupportConnection` fills in the portal address of the instance's stage (`default_portal` from scalio-connect
+  0.5.0: dev -> portaldev, test -> portaltest, others -> portal.scaliocloud.com). **Visible change:** the address
+  field is no longer empty on the settings card. No change with older backends.
+
 ## 0.8.0
 - New `SecurityFactors` (profile: authenticator app, backup codes, passkeys) with `securityApi(api, webauthn)`, and
   `LicensePanel` (status, usage, add-ons, key) with `licenseApi(api)` and `mapScalioLicense`. They replace the copies

package/README.md

@@ -216,6 +216,25 @@ the blocks show the message themselves. `confirm` is the app's dialog (`{title,
 `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`.
 
+## Command palette (React)
+
+Reads the same navigation data as the sidebar. Put it once into the layout; the sidebar search button opens it.
+
+```jsx
+import { CommandPalette, openCommandPalette, paletteShortcut } from "@scalio-cloud/ui/react";
+
+<Sidebar nav={nav} search={{ onOpen: openCommandPalette, shortcut: paletteShortcut(lang) }} ... />
+<CommandPalette nav={nav} activePath={location.pathname} onNavigate={navigate} lang={lang}
+  pages={[{ to: "/profile", label: "Profil" }]}
+  groups={(query) => [{ id: "ai", label: "KI", order: 10, items: [{ id: "ask", label: `Fragen: ${query}`, onSelect: ask, hidden: !query }] }]} />
+```
+
+Pages: every visible sidebar item plus `pages` (each path once), searched by label, `keywords`, section and path.
+Groups sort by `order` (default 60); recent pages (50) show only while the query is empty, pages come last (100).
+An item has `label`, `icon`, `to` or `onSelect`, and optional `keywords`, `hint`, `tone` (`primary`, `danger`),
+`testId` and `alwaysShow`. Without `open` the palette handles ⌘K / Ctrl+K and `openCommandPalette()` itself;
+pass `open` + `onOpenChange` to control it. `recentKey` sets the localStorage key (`false`: no recents).
+
 ## Installing
 
 Public on npmjs.com, no token needed: `yarn add @scalio-cloud/ui` (pin the exact version).

package/nav.css

@@ -362,3 +362,41 @@
 .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)); }
+
+/* Command palette (⌘K) */
+.scalio-palette-root { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 1rem 1rem; }
+.scalio-palette-backdrop { position: fixed; inset: 0; background: rgb(9 9 11 / 0.45); }
+.scalio-palette {
+  position: relative; width: min(40rem, 100%); max-height: min(32rem, 76vh); display: flex; flex-direction: column;
+  background: hsl(var(--background)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); border-radius: 2px;
+  box-shadow: 0 16px 48px rgb(0 0 0 / 0.25); overflow: hidden;
+}
+.scalio-palette-search { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border-bottom: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); }
+.scalio-palette-input {
+  flex: 1; min-width: 0; height: 3rem; border: 0; outline: none; background: transparent; color: hsl(var(--foreground));
+  font: inherit; font-size: 0.9375rem;
+}
+.scalio-palette-input::placeholder { color: hsl(var(--muted-foreground)); }
+.scalio-palette-list { flex: 1 1 auto; overflow-y: auto; padding: 0.25rem 0 0.5rem; overscroll-behavior: contain; }
+.scalio-palette-heading {
+  padding: 0.625rem 0.875rem 0.25rem; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600;
+  letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--muted-foreground));
+}
+.scalio-palette-item {
+  display: flex; align-items: center; gap: 0.625rem; margin: 0 0.375rem; padding: 0.5rem 0.5rem; border-radius: 2px;
+  font-size: 0.875rem; cursor: pointer; border-left: 2px solid transparent;
+}
+.scalio-palette-item.is-active { background: hsl(var(--muted)); border-left-color: hsl(var(--primary)); }
+.scalio-palette-icon { width: 15px; height: 15px; flex-shrink: 0; color: hsl(var(--muted-foreground)); }
+.scalio-palette-item.is-primary .scalio-palette-icon { color: hsl(var(--primary)); }
+.scalio-palette-item.is-danger .scalio-palette-icon { color: hsl(var(--destructive)); }
+.scalio-palette-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.scalio-palette-hint { flex-shrink: 0; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
+.scalio-palette-enter { width: 14px; height: 14px; flex-shrink: 0; color: hsl(var(--muted-foreground)); }
+.scalio-palette-empty { padding: 2rem 1rem; text-align: center; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
+.scalio-palette-foot { padding: 0.5rem 0.875rem; border-top: 1px solid hsl(var(--border)); font-size: 0.6875rem; color: hsl(var(--muted-foreground)); }
+@media (max-width: 640px) {
+  .scalio-palette-root { padding: 0.5rem; padding-top: max(0.5rem, env(safe-area-inset-top, 0px)); }
+  .scalio-palette { max-height: 85vh; }
+  .scalio-palette-foot, .scalio-palette-enter { display: none; }
+}

package/package.json

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

@@ -93,6 +93,11 @@ 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" }],
 ]);
+const History = icon([
+  ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }],
+  ["path", { d: "M3 3v5h5M12 7v5l4 2" }],
+]);
+const CornerDownLeft = icon([["path", { d: "M20 4v7a4 4 0 0 1-4 4H4" }], ["path", { d: "m9 10-5 5 5 5" }]]);
 
 module.exports = { Sun, Moon, Monitor, LifeBuoy, LogOut, Menu, Check, X, Search, ChevronDown, Fingerprint, FileStack, ShieldCheck, Hammer, Activity,
-  Smartphone, KeyRound, Trash, Copy, Puzzle, Plus, Alert };
+  Smartphone, KeyRound, Trash, Copy, Puzzle, Plus, Alert, History, CornerDownLeft };

package/react/index.js

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

package/react/labels.js

@@ -38,6 +38,13 @@ const LABELS = {
     search: "Suchen",
     navigation: "Navigation",
     closeMenu: "Menü schliessen",
+    // Command palette (⌘K)
+    paletteTitle: "Suche",
+    palettePlaceholder: "Seite oder Befehl suchen …",
+    palettePages: "Seiten",
+    paletteRecent: "Zuletzt besucht",
+    paletteEmpty: "Nichts gefunden",
+    paletteHint: "Pfeiltasten zum Wählen, Enter zum Öffnen, Esc zum Schliessen",
     tenant: "Tenant",
     customer: "Kunde",
     // Settings page (fixed groups, same order in every app)
@@ -223,6 +230,13 @@ const LABELS = {
     search: "Search",
     navigation: "Navigation",
     closeMenu: "Close menu",
+    // Command palette (⌘K)
+    paletteTitle: "Search",
+    palettePlaceholder: "Find a page or command …",
+    palettePages: "Pages",
+    paletteRecent: "Recently visited",
+    paletteEmpty: "Nothing found",
+    paletteHint: "Arrow keys to choose, Enter to open, Esc to close",
     tenant: "Tenant",
     customer: "Customer",
     settingsGroups: { general: "General", connections: "Connections", notifications: "Notifications", security: "Security", system: "System" },

package/react/palette.js

@@ -0,0 +1,346 @@
+"use strict";
+// Command palette (⌘K / Ctrl+K). Reads the same navigation data as the sidebar, so every page the
+// sidebar shows can also be found here. Apps add their own commands as groups (Nexus: AI, actions).
+// No dialog library (N8): plain overlay, focus stays in the input, arrow keys move the selection.
+const React = require("react");
+const h = React.createElement;
+const Icons = require("./icons");
+const { labelsFor } = require("./labels");
+const { visibleSections } = require("./nav");
+
+const OPEN_EVENT = "open-command-palette";
+
+function cx() {
+  return Array.prototype.slice.call(arguments).filter(Boolean).join(" ");
+}
+
+function slug(s) {
+  return String(s || "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+}
+
+// Apple devices show ⌘K, everything else Ctrl+K (German keyboards: Strg+K). Both keys work everywhere.
+function isApplePlatform(nav) {
+  const n = nav || (typeof navigator !== "undefined" ? navigator : undefined);
+  if (!n) return false;
+  const platform = (n.userAgentData && n.userAgentData.platform) || n.platform || n.userAgent || "";
+  return /mac|iphone|ipad|ipod/i.test(platform);
+}
+
+function paletteShortcut(lang, nav) {
+  if (isApplePlatform(nav)) return "⌘K";
+  return lang === "en" ? "Ctrl+K" : "Strg+K";
+}
+
+// Opens the palette from anywhere (sidebar search button, header, help texts).
+function openCommandPalette() {
+  if (typeof window !== "undefined") window.dispatchEvent(new window.CustomEvent(OPEN_EVENT));
+}
+
+function pageTestId(item) {
+  return item.testId || `nav-${item.id || slug(item.to === "/" ? "overview" : item.to)}`;
+}
+
+// Every visible sidebar item plus extra pages (e.g. profile or settings areas), each path once.
+function palettePages(nav, pages) {
+  const seen = new Set();
+  const out = [];
+  visibleSections(nav).forEach((s) => s.items.forEach((i) => add(i, s.label)));
+  (pages || []).filter((p) => p && !p.hidden).forEach((p) => add(p, p.section));
+  function add(item, section) {
+    if (!item.to || seen.has(item.to)) return;
+    seen.add(item.to);
+    out.push(Object.assign({}, item, { section: item.section || section }));
+  }
+  return out;
+}
+
+function normalize(s) {
+  return String(s || "").toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "");
+}
+
+// Every word of the query must appear in the label, the keywords, the section or the path.
+function matches(item, query) {
+  const words = normalize(query).split(/\s+/).filter(Boolean);
+  if (!words.length) return true;
+  const hay = normalize([item.label, item.keywords, item.section, item.to].flat().filter(Boolean).join(" "));
+  return words.every((w) => hay.includes(w));
+}
+
+function readRecent(key) {
+  try {
+    const v = JSON.parse(window.localStorage.getItem(key) || "[]");
+    return Array.isArray(v) ? v.filter((p) => typeof p === "string") : [];
+  } catch (e) {
+    return [];
+  }
+}
+
+function writeRecent(key, list) {
+  try {
+    window.localStorage.setItem(key, JSON.stringify(list));
+  } catch (e) {
+    // Private windows can refuse storage; the palette works without recents.
+  }
+}
+
+// Builds the visible groups for a query. Exported for tests and for apps that render their own list.
+// groups: [{ id, label, order, items: [{ id, label, icon, to | onSelect, keywords, testId, alwaysShow, tone, hint }] }]
+// Order: app groups by `order` (default 60), recent pages (50, only without a query), pages (100).
+function paletteGroups({ nav, pages, groups, query, recent, activePath, labels, lang }) {
+  const L = labelsFor(lang, labels);
+  const all = palettePages(nav, pages);
+  const q = String(query || "").trim();
+  const out = [];
+  const extra = typeof groups === "function" ? groups(q) : groups;
+  (extra || []).forEach((g, gi) => {
+    if (!g) return;
+    const items = (g.items || []).filter((i) => i && !i.hidden && (i.alwaysShow || matches(Object.assign({ section: g.label }, i), q)));
+    if (items.length) {
+      out.push({
+        id: g.id || `group-${gi}`,
+        label: g.label,
+        order: g.order != null ? g.order : 60,
+        items: items.map((i, ii) => Object.assign({}, i, { key: `${g.id || gi}:${i.id || i.to || ii}`, testId: i.testId || `cmd-${slug(g.id || gi)}-${slug(i.id || i.to || ii)}` })),
+      });
+    }
+  });
+  if (!q && recent && recent.length) {
+    const items = recent
+      .filter((p) => p !== activePath)
+      .map((p) => all.find((i) => i.to === p))
+      .filter(Boolean)
+      .slice(0, 4)
+      .map((i) => Object.assign({}, i, { key: `recent:${i.to}`, icon: Icons.History, testId: `cmd-recent-${pageTestId(i)}` }));
+    if (items.length) out.push({ id: "recent", label: L.paletteRecent, order: 50, items });
+  }
+  const found = all.filter((i) => matches(i, q));
+  if (found.length) {
+    out.push({
+      id: "pages",
+      label: L.palettePages,
+      order: 100,
+      items: found.map((i) => Object.assign({}, i, { key: `page:${i.to}`, testId: `cmd-nav-${pageTestId(i)}` })),
+    });
+  }
+  return out.sort((a, b) => a.order - b.order);
+}
+
+// ⌘K / Ctrl+K toggles, the open event opens. Returns [open, setOpen].
+function useCommandPaletteHotkey(enabled) {
+  const [open, setOpen] = React.useState(false);
+  React.useEffect(() => {
+    if (enabled === false) return undefined;
+    function onKey(e) {
+      if ((e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey && (e.key === "k" || e.key === "K")) {
+        e.preventDefault();
+        setOpen((o) => !o);
+      }
+    }
+    function onOpen() {
+      setOpen(true);
+    }
+    document.addEventListener("keydown", onKey);
+    window.addEventListener(OPEN_EVENT, onOpen);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      window.removeEventListener(OPEN_EVENT, onOpen);
+    };
+  }, [enabled]);
+  return [open, setOpen];
+}
+
+// The palette. Uncontrolled by default (own ⌘K handling); pass open + onOpenChange to control it.
+// onNavigate(to): the router's navigate; without it the browser follows the path.
+// recentKey: localStorage key of the visited pages (false = no recents).
+function CommandPalette(props) {
+  const {
+    nav, pages, groups, onNavigate, activePath, recentKey, lang, labels, placeholder, empty,
+    hotkey, testId, onQueryChange,
+  } = props;
+  const controlled = props.open !== undefined;
+  const [ownOpen, setOwnOpen] = useCommandPaletteHotkey(!controlled && hotkey !== false);
+  const open = controlled ? !!props.open : ownOpen;
+  const setOpen = React.useCallback(
+    (v) => {
+      if (controlled) {
+        if (props.onOpenChange) props.onOpenChange(v);
+      } else setOwnOpen(v);
+    },
+    [controlled, props.onOpenChange, setOwnOpen] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  const L = labelsFor(lang, labels);
+  const key = recentKey === false ? null : recentKey || "scalio.recentPages";
+  const [query, setQuery] = React.useState("");
+  const [active, setActive] = React.useState(0);
+  const [recent, setRecent] = React.useState([]);
+  const inputRef = React.useRef(null);
+  const listRef = React.useRef(null);
+  const restoreRef = React.useRef(null);
+  const idBase = React.useRef(`scalio-palette-${Math.random().toString(36).slice(2, 8)}`).current;
+
+  // Remember visited pages that the palette knows (only paths, nothing else).
+  React.useEffect(() => {
+    if (!key || !activePath) return;
+    if (!palettePages(nav, pages).some((i) => i.to === activePath)) return;
+    const cur = readRecent(key);
+    writeRecent(key, [activePath].concat(cur.filter((p) => p !== activePath)).slice(0, 6));
+  }, [activePath, key]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  React.useEffect(() => {
+    if (!open) return undefined;
+    restoreRef.current = typeof document !== "undefined" ? document.activeElement : null;
+    setQuery("");
+    setActive(0);
+    if (onQueryChange) onQueryChange("");
+    if (key) setRecent(readRecent(key));
+    const t = setTimeout(() => inputRef.current && inputRef.current.focus(), 0);
+    return () => {
+      clearTimeout(t);
+      const back = restoreRef.current;
+      if (back && typeof back.focus === "function" && document.contains(back)) back.focus();
+    };
+  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const shown = open ? paletteGroups({ nav, pages, groups, query, recent, activePath, labels, lang }) : [];
+  const flat = [];
+  shown.forEach((g) => g.items.forEach((i) => flat.push(i)));
+  const current = Math.min(active, Math.max(flat.length - 1, 0));
+
+  React.useEffect(() => {
+    if (!open || !listRef.current) return;
+    const el = listRef.current.querySelector(`[data-index="${current}"]`);
+    if (el && el.scrollIntoView) el.scrollIntoView({ block: "nearest" });
+  }, [current, open]);
+
+  if (!open) return null;
+
+  function choose(item) {
+    if (!item) return;
+    setOpen(false);
+    if (item.onSelect) item.onSelect(item);
+    else if (item.to) {
+      if (onNavigate) onNavigate(item.to);
+      else if (typeof window !== "undefined") window.location.assign(item.to);
+    }
+  }
+
+  function onKeyDown(e) {
+    if (e.key === "ArrowDown" || (e.ctrlKey && e.key === "n")) {
+      e.preventDefault();
+      setActive(flat.length ? (current + 1) % flat.length : 0);
+    } else if (e.key === "ArrowUp" || (e.ctrlKey && e.key === "p")) {
+      e.preventDefault();
+      setActive(flat.length ? (current - 1 + flat.length) % flat.length : 0);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setActive(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      setActive(Math.max(flat.length - 1, 0));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      choose(flat[current]);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      setOpen(false);
+    } else if (e.key === "Tab") {
+      // Focus stays in the input; Tab moves through the results like the arrow keys.
+      e.preventDefault();
+      if (flat.length) setActive(e.shiftKey ? (current - 1 + flat.length) % flat.length : (current + 1) % flat.length);
+    }
+  }
+
+  let index = -1;
+  const activeId = flat.length ? `${idBase}-opt-${current}` : undefined;
+  return h(
+    "div",
+    { className: "scalio-palette-root", "data-testid": testId || "command-palette" },
+    h("div", { className: "scalio-palette-backdrop", onMouseDown: () => setOpen(false), "data-testid": "command-palette-backdrop" }),
+    h(
+      "div",
+      { className: "scalio-palette", role: "dialog", "aria-modal": "true", "aria-label": L.paletteTitle },
+      h(
+        "div",
+        { className: "scalio-palette-search" },
+        h(Icons.Search, { className: "scalio-icon" }),
+        h("input", {
+          ref: inputRef,
+          className: "scalio-palette-input",
+          type: "text",
+          role: "combobox",
+          "aria-expanded": "true",
+          "aria-controls": `${idBase}-list`,
+          "aria-activedescendant": activeId,
+          "aria-autocomplete": "list",
+          autoComplete: "off",
+          spellCheck: false,
+          placeholder: placeholder || L.palettePlaceholder,
+          value: query,
+          onChange: (e) => {
+            setQuery(e.target.value);
+            setActive(0);
+            if (onQueryChange) onQueryChange(e.target.value);
+          },
+          onKeyDown,
+          "data-testid": "command-palette-input",
+        }),
+        h("kbd", { className: "scalio-kbd" }, "Esc")
+      ),
+      h(
+        "div",
+        { className: "scalio-palette-list", id: `${idBase}-list`, role: "listbox", "aria-label": L.paletteTitle, ref: listRef, "data-testid": "command-palette-list" },
+        flat.length === 0
+          ? h("div", { className: "scalio-palette-empty", "data-testid": "command-palette-empty" }, empty || L.paletteEmpty)
+          : shown.map((g) =>
+              h(
+                "div",
+                { key: g.id, className: "scalio-palette-group", role: "group", "aria-labelledby": `${idBase}-g-${g.id}`, "data-group": g.id },
+                g.label ? h("div", { className: "scalio-palette-heading", id: `${idBase}-g-${g.id}`, role: "presentation" }, g.label) : null,
+                g.items.map((item) => {
+                  index += 1;
+                  const i = index;
+                  const Icon = item.icon;
+                  const on = i === current;
+                  return h(
+                    "div",
+                    {
+                      key: item.key,
+                      id: `${idBase}-opt-${i}`,
+                      role: "option",
+                      "aria-selected": on ? "true" : "false",
+                      "data-index": i,
+                      className: cx("scalio-palette-item", on && "is-active", item.tone && `is-${item.tone}`),
+                      onMouseMove: () => {
+                        if (!on) setActive(i);
+                      },
+                      onMouseDown: (e) => e.preventDefault(),
+                      onClick: () => choose(item),
+                      "data-testid": item.testId,
+                    },
+                    Icon ? h(Icon, { className: "scalio-palette-icon", "aria-hidden": "true" }) : h("span", { className: "scalio-palette-icon" }),
+                    h("span", { className: "scalio-palette-label" }, item.label),
+                    item.hint || (g.id === "pages" && item.section) || (g.id === "recent" && item.section)
+                      ? h("span", { className: "scalio-palette-hint" }, item.hint || item.section)
+                      : null,
+                    on ? h(Icons.CornerDownLeft, { className: "scalio-palette-enter" }) : null
+                  );
+                })
+              )
+            )
+      ),
+      h("div", { className: "scalio-palette-foot" }, L.paletteHint)
+    )
+  );
+}
+
+module.exports = {
+  CommandPalette,
+  useCommandPaletteHotkey,
+  openCommandPalette,
+  paletteGroups,
+  palettePages,
+  paletteShortcut,
+  isApplePlatform,
+  OPEN_PALETTE_EVENT: OPEN_EVENT,
+};

package/react/support.js

@@ -257,7 +257,11 @@ function SupportConnection({ client, lang, labels, onChange }) {
   const [note, setNote] = React.useState("");
   React.useEffect(() => {
     let alive = true;
-    client.connection().then((d) => alive && setSt(d)).catch((err) => alive && (setError(errorText(err)), setSt(false)));
+    client.connection().then((d) => {
+      if (!alive) return;
+      setSt(d);
+      if (d && d.default_portal) setPortal((p) => p || d.default_portal); // the portal of this instance's stage
+    }).catch((err) => alive && (setError(errorText(err)), setSt(false)));
     return () => { alive = false; };
   }, [client]);
   const run = async (fn, ok) => {