@scalio-cloud/ui 0.18.1 → 0.20.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.20.0
+Scalio Ideen (ADR 0050): feature requests from the apps, votes and comments, kept centrally in Compass.
+- `supportApi(api, { ideas: true })` adds the routes of scalio-connect 0.8.0 (`ideas_router`). The support drawer then
+  gets a third tab «Ideen»: ideas of this app (most votes, newest, done), vote and take back, «Meine», idea page with
+  the answer from Scalio and comments, and «Idee vorschlagen» with similar ideas shown while typing.
+- With ideas on, the ticket category «Wunsch» leaves the ticket form. A self-hosted installation without a connection
+  shows a link to the public page (`<portal>/ideen`), also in the link-only support view.
+- New export `IdeasPanel`; CSS in `nav.css` (`.scalio-idea-*`, `.scalio-ideas*`).
+- **Visible change:** only in apps that pass `{ ideas: true }`. No token changes.
+
+## 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.
@@ -36,7 +54,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

@@ -116,6 +116,13 @@ With `client` the drawer has the tabs "Neue Anfrage" (category, subject, descrip
 0022), the backend routes come from scalio-connect `scalio_connect.support.web`. `supportApi(api)` takes the app's
 axios instance. The settings card `<SupportConnection client={supportApi(api)} lang={lang} />` connects the
 installation with a one-time code (admins). Without `client` the drawer keeps the old single form with `onSubmit`.
+`supportApi(api, { ideas: true })` adds the tab "Ideen" (Scalio Ideen, ADR 0050; backend router
+`scalio_connect.support.ideas_web.ideas_router`, scalio-connect 0.8.0): ideas of the app with votes and comments and
+"Idee vorschlagen" with similar ideas; the ticket category "Wunsch" then moves there.
+
+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>`

package/nav.css

@@ -192,6 +192,24 @@
 .scalio-support-msg { margin: 0; padding: 0.75rem; border: 1px solid hsl(var(--border)); border-radius: 2px; font-size: 0.875rem; white-space: pre-wrap; overflow-wrap: anywhere; }
 .scalio-support-msg.is-support { border-color: hsl(var(--primary) / 0.3); background: hsl(var(--primary) / 0.05); }
 .scalio-support-stars { display: flex; gap: 0.25rem; }
+/* Scalio Ideen tab in the support drawer (ADR 0050) */
+.scalio-ideas { display: flex; flex-direction: column; gap: 0.75rem; }
+.scalio-ideas-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; }
+.scalio-ideas-bar .scalio-support-tab { flex: 0 0 auto; }
+.scalio-ideas-sort { width: auto; margin-left: auto; padding-block: 0.25rem; font-size: 0.75rem; }
+.scalio-idea-row { display: grid; grid-template-columns: 3rem 1fr; gap: 0.75rem; align-items: start; padding: 0.75rem; border: 1px solid hsl(var(--border)); border-radius: 2px; font-size: 0.875rem; cursor: pointer; }
+.scalio-idea-row:hover { background: hsl(var(--muted)); }
+.scalio-idea-row:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
+.scalio-idea-row.is-static { padding: 0; border: 0; cursor: default; }
+.scalio-idea-row.is-static:hover { background: none; }
+.scalio-idea-body { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; overflow-wrap: anywhere; }
+.scalio-idea-vote { display: flex; flex-direction: column; align-items: center; padding: 0.25rem 0; border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--background)); color: inherit; font: inherit; cursor: pointer; }
+.scalio-idea-vote:hover:not(:disabled) { border-color: hsl(var(--primary)); }
+.scalio-idea-vote:disabled { opacity: 0.6; cursor: default; }
+.scalio-idea-vote.is-voted { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.08); color: hsl(var(--primary)); }
+.scalio-idea-vote-n { font-family: 'JetBrains Mono', monospace; font-size: 1rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
+.scalio-idea-vote-l { font-size: 0.625rem; color: hsl(var(--muted-foreground)); }
+.scalio-ideas-page { align-self: flex-start; text-decoration: underline; }
 .scalio-support-stars button { border: 0; background: none; font-size: 1.25rem; line-height: 1; color: #f59e0b; cursor: pointer; }
 .scalio-support-conn { font-size: 0.875rem; }
 .scalio-support-conn-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.18.1",
+  "version": "0.20.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/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,45 @@ const LABELS = {
     supportRemove: "Trennen",
     supportRemoveConfirm: "Verbindung zum Support trennen? Neue Tickets warten dann, bis wieder verbunden ist.",
     supportRemoved: "Verbindung getrennt.",
+    ideasTab: "Ideen",
+    ideasAll: "Alle",
+    ideasMine: "Meine",
+    ideasSuggest: "Idee vorschlagen",
+    ideasSort: "Sortierung",
+    ideasSortTop: "Meiste Stimmen",
+    ideasSortNew: "Neueste",
+    ideasSortDone: "Erledigt",
+    ideasVote: "Abstimmen",
+    ideasVoted: "Abgestimmt",
+    ideasVotes: "Stimmen",
+    ideasComments: "Kommentare",
+    ideasComment: "Kommentar schreiben",
+    ideasAnswer: "Antwort von Scalio",
+    ideasNone: "Noch keine Ideen für dieses Produkt.",
+    ideasTitle: "Titel",
+    ideasTitleHelp: "Ein Satz, z.B. «An offene Zugriffsprüfungen erinnern»",
+    ideasDescriptionHelp: "Was möchten Sie erreichen? Wer würde es nutzen?",
+    ideasSimilar: "Ähnliche Ideen gibt es schon. Vielleicht lieber dort abstimmen:",
+    ideasSubmit: "Idee einreichen",
+    ideasSent: "Danke. Ihre Idee {n} erscheint nach unserer Prüfung für alle.",
+    ideasWaiting: "Wartet auf Prüfung: vorerst sehen nur Sie diese Idee.",
+    ideasWaitingShort: "wartet auf Prüfung",
+    ideasLinkOnly: "Diese Installation ist nicht mit Scalio verbunden. Ideen können Sie auf der öffentlichen Seite einreichen und abstimmen.",
+    ideasOpenPage: "Zur Seite Scalio Ideen",
+    ideasStatus: { new: "neu", open: "offen", reviewed: "geprüft", planned: "geplant", in_progress: "in Arbeit", done: "erledigt", declined: "abgelehnt", merged: "zusammengeführt" },
+    // 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 +423,45 @@ const LABELS = {
     supportRemove: "Disconnect",
     supportRemoveConfirm: "Disconnect from support? New tickets then wait until the instance is connected again.",
     supportRemoved: "Disconnected.",
+    ideasTab: "Ideas",
+    ideasAll: "All",
+    ideasMine: "Mine",
+    ideasSuggest: "Suggest an idea",
+    ideasSort: "Sort",
+    ideasSortTop: "Most votes",
+    ideasSortNew: "Newest",
+    ideasSortDone: "Done",
+    ideasVote: "Vote",
+    ideasVoted: "Voted",
+    ideasVotes: "votes",
+    ideasComments: "comments",
+    ideasComment: "Write a comment",
+    ideasAnswer: "Answer from Scalio",
+    ideasNone: "No ideas for this product yet.",
+    ideasTitle: "Title",
+    ideasTitleHelp: "One sentence, e.g. “Remind owners about open access reviews”",
+    ideasDescriptionHelp: "What do you want to achieve? Who would use it?",
+    ideasSimilar: "Similar ideas exist already. Maybe vote there instead:",
+    ideasSubmit: "Submit idea",
+    ideasSent: "Thank you. Your idea {n} becomes visible to everyone after our review.",
+    ideasWaiting: "Waiting for review: only you see this idea for now.",
+    ideasWaitingShort: "waiting for review",
+    ideasLinkOnly: "This installation is not connected to Scalio. You can suggest and vote for ideas on the public page.",
+    ideasOpenPage: "Open Scalio Ideas",
+    ideasStatus: { new: "new", open: "open", reviewed: "reviewed", planned: "planned", in_progress: "in progress", done: "done", declined: "declined", merged: "merged" },
+    // 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/support.js

@@ -4,6 +4,9 @@
 // them for an axios-like client. SupportDesk is the body of SupportDrawer when it gets a `client`:
 // "Neue Anfrage" (category, subject, description, diagnostics) and "Meine Tickets" (list, detail, reply, rating).
 // SupportConnection is the settings card "Support-Verbindung" (portal address + one-time code).
+// Scalio Ideen (ADR 0050): supportApi(api, { ideas: true }) adds the tab "Ideen" (routes of
+// scalio_connect.support.ideas_web): ideas of this app with votes and comments, and "Idee vorschlagen" with similar
+// ideas shown while typing. The category "Wunsch" then leaves the ticket form.
 const React = require("react");
 const h = React.createElement;
 const { labelsFor } = require("./labels");
@@ -16,10 +19,23 @@ function cx() {
 }
 
 // api: axios instance with the app's base URL (/api). Every method resolves to the response body.
-function supportApi(api) {
+function supportApi(api, options) {
   const data = (p) => p.then((r) => r.data);
   const enc = encodeURIComponent;
+  const ideas = options && options.ideas
+    ? {
+        status: () => data(api.get("/ideas/status")),
+        list: (params) => data(api.get("/ideas", { params: params || {} })),
+        similar: (text) => data(api.get("/ideas/similar", { params: { text } })),
+        mine: () => data(api.get("/ideas/mine")),
+        get: (ref) => data(api.get(`/ideas/${enc(ref)}`)),
+        submit: (idea) => data(api.post("/ideas", idea)),
+        vote: (ref, on) => data(api.post(`/ideas/${enc(ref)}/vote`, { on })),
+        comment: (ref, body) => data(api.post(`/ideas/${enc(ref)}/comments`, { body })),
+      }
+    : null;
   return {
+    ideas,
     create: (ticket) => data(api.post("/support/tickets", ticket)),
     list: () => data(api.get("/support/tickets")),
     get: (id) => data(api.get(`/support/tickets/${enc(id)}`)),
@@ -53,6 +69,7 @@ function statusText(L, s) {
 }
 
 function NewTicket({ client, page, L, onSent }) {
+  const categories = client.ideas ? CATEGORIES.filter((c) => c !== "wish") : CATEGORIES;
   const [category, setCategory] = React.useState("question");
   const [subject, setSubject] = React.useState("");
   const [description, setDescription] = React.useState("");
@@ -83,7 +100,7 @@ function NewTicket({ client, page, L, onSent }) {
     h(
       "select",
       { id: "support-category", className: "scalio-input", value: category, onChange: (e) => setCategory(e.target.value), "data-testid": "ticket-category-select" },
-      CATEGORIES.map((c) => h("option", { key: c, value: c }, L.supportCategories[c]))
+      categories.map((c) => h("option", { key: c, value: c }, L.supportCategories[c]))
     ),
     h("label", { className: "scalio-field-label", htmlFor: "support-subject" }, L.subject),
     h("input", {
@@ -226,14 +243,194 @@ function TicketDetail({ client, id, L, lang, onBack }) {
 }
 
 // Self-hosted without a connection (ADR 0022, T11): no form, only the way to the portal's support page.
-function PortalLink({ status, L }) {
+function PortalLink({ status, L, ideasLink }) {
   return h(
     "div",
     { className: "scalio-support-form", "data-testid": "support-link-only" },
     h("p", { className: "scalio-support-meta" }, L.supportLinkOnly),
     h("a", { className: "scalio-btn-primary", href: status.portal_page, target: "_blank", rel: "noopener noreferrer",
       "data-testid": "support-portal-link" }, L.supportOpenPortal),
-    h("p", { className: "scalio-support-meta" }, L.supportLinkOnlyAdmin)
+    h("p", { className: "scalio-support-meta" }, L.supportLinkOnlyAdmin),
+    ideasLink ? h("a", { className: "scalio-support-meta scalio-ideas-page", href: ideasLink, target: "_blank", rel: "noopener noreferrer",
+      "data-testid": "support-ideas-link" }, L.ideasOpenPage) : null
+  );
+}
+
+
+// ---------------- Scalio Ideen ----------------
+function ideaStatus(L, s) {
+  return (L.ideasStatus && L.ideasStatus[s]) || s;
+}
+
+function VoteBtn({ idea, L, onVote }) {
+  const closed = ["done", "declined", "merged"].includes(idea.status);
+  return h(
+    "button",
+    {
+      type: "button", className: cx("scalio-idea-vote", idea.voted && "is-voted"), disabled: closed && !idea.voted,
+      "aria-pressed": !!idea.voted, title: idea.voted ? L.ideasVoted : L.ideasVote, "data-testid": `idea-vote-${idea.number}`,
+      onClick: (e) => { e.stopPropagation(); onVote(idea); },
+    },
+    h("span", { className: "scalio-idea-vote-n" }, String(idea.votes || 0)),
+    h("span", { className: "scalio-idea-vote-l" }, L.ideasVotes)
+  );
+}
+
+function IdeaForm({ ideas, L, onDone }) {
+  const [title, setTitle] = React.useState("");
+  const [description, setDescription] = React.useState("");
+  const [similar, setSimilar] = React.useState([]);
+  const [busy, setBusy] = React.useState(false);
+  const [error, setError] = React.useState("");
+  React.useEffect(() => {
+    if (title.trim().length < 4) { setSimilar([]); return undefined; }
+    let alive = true;
+    const t = setTimeout(() => {
+      ideas.similar(`${title} ${description}`).then((d) => alive && setSimilar((d && d.ideas) || [])).catch(() => alive && setSimilar([]));
+    }, 300);
+    return () => { alive = false; clearTimeout(t); };
+  }, [ideas, title, description]);
+  const submit = async (e) => {
+    e.preventDefault();
+    setBusy(true);
+    setError("");
+    try {
+      const res = await ideas.submit({ title: title.trim(), description: description.trim() });
+      setTitle("");
+      setDescription("");
+      onDone(L.ideasSent.replace("{n}", (res && res.number) || ""));
+    } catch (err) {
+      setError(errorText(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return h(
+    "form",
+    { className: "scalio-support-form", onSubmit: submit, "data-testid": "idea-form" },
+    h("label", { className: "scalio-field-label", htmlFor: "idea-title" }, L.ideasTitle),
+    h("input", { id: "idea-title", className: "scalio-input", value: title, required: true, minLength: 5, maxLength: 140,
+      placeholder: L.ideasTitleHelp, onChange: (e) => setTitle(e.target.value), "data-testid": "idea-title-input" }),
+    similar.length
+      ? h(
+          "div",
+          { className: "scalio-notice is-warn", "data-testid": "idea-similar" },
+          h("div", null, L.ideasSimilar),
+          similar.map((s) => h("div", { key: s.id, className: "scalio-support-meta" }, `${s.number} · ${s.title} (${s.votes} ${L.ideasVotes})`))
+        )
+      : null,
+    h("label", { className: "scalio-field-label", htmlFor: "idea-description" }, L.description),
+    h("textarea", { id: "idea-description", className: "scalio-input scalio-textarea", rows: 4, value: description, maxLength: 10000,
+      placeholder: L.ideasDescriptionHelp, onChange: (e) => setDescription(e.target.value), "data-testid": "idea-description-input" }),
+    error ? h("div", { className: "scalio-notice is-error", role: "alert", "data-testid": "idea-error" }, error) : null,
+    h("button", { type: "submit", className: "scalio-btn-primary", disabled: busy, "data-testid": "idea-submit-btn" }, busy ? L.sending : L.ideasSubmit)
+  );
+}
+
+function IdeaDetail({ ideas, ref_, L, lang, onBack }) {
+  const [idea, setIdea] = React.useState(null);
+  const [text, setText] = React.useState("");
+  const [error, setError] = React.useState("");
+  const load = React.useCallback(() => ideas.get(ref_).then(setIdea).catch((err) => { setError(errorText(err)); setIdea(false); }), [ideas, ref_]);
+  React.useEffect(() => { load(); }, [load]);
+  const back = h("button", { type: "button", className: "scalio-support-back", onClick: onBack, "data-testid": "idea-back" }, `‹ ${L.ideasTab}`);
+  if (idea === null) return h("div", null, back, h("div", { className: "scalio-support-meta" }, L.loading));
+  if (idea === false) return h("div", null, back, h("div", { className: "scalio-notice is-error", role: "alert" }, error));
+  const vote = async () => {
+    try { await ideas.vote(idea.number, !idea.voted); await load(); } catch (err) { setError(errorText(err)); }
+  };
+  const send = async () => {
+    try { await ideas.comment(idea.number, text.trim()); setText(""); await load(); } catch (err) { setError(errorText(err)); }
+  };
+  return h(
+    "div",
+    { className: "scalio-support-detail", "data-testid": "idea-detail" },
+    back,
+    h("div", { className: "scalio-idea-row is-static" },
+      h(VoteBtn, { idea, L, onVote: vote }),
+      h("div", { className: "scalio-idea-body" },
+        h("h4", { className: "scalio-support-item-title" }, idea.title),
+        h("div", { className: "scalio-support-meta" }, `${idea.number} · ${ideaStatus(L, idea.status)}${idea.author ? ` · ${idea.author}` : ""}`),
+        idea.public === false ? h("div", { className: "scalio-support-meta" }, L.ideasWaiting) : null)),
+    idea.description ? h("p", { className: "scalio-support-msg" }, idea.description) : null,
+    idea.answer && idea.answer.body
+      ? h("div", { className: "scalio-support-msg is-support" }, h("div", { className: "scalio-support-meta" }, L.ideasAnswer), h("div", null, idea.answer.body))
+      : null,
+    (idea.comments || []).map((c) =>
+      h("div", { key: c.id, className: cx("scalio-support-msg", c.official && "is-support") },
+        h("div", { className: "scalio-support-meta" }, `${c.author} · ${fmtDate(c.created_at, lang)}`),
+        h("div", null, c.body))
+    ),
+    error ? h("div", { className: "scalio-notice is-error", role: "alert" }, error) : null,
+    idea.status !== "merged"
+      ? h("div", { className: "scalio-support-form" },
+          h("textarea", { className: "scalio-input scalio-textarea", rows: 3, value: text, placeholder: L.ideasComment,
+            "aria-label": L.ideasComment, onChange: (e) => setText(e.target.value), "data-testid": "idea-comment-input" }),
+          h("button", { type: "button", className: "scalio-btn-primary", disabled: !text.trim(), onClick: send, "data-testid": "idea-comment-btn" }, L.send))
+      : null
+  );
+}
+
+function IdeasPanel({ ideas, L, lang }) {
+  const [status, setStatus] = React.useState(null);
+  const [view, setView] = React.useState("list");
+  const [sort, setSort] = React.useState("top");
+  const [rows, setRows] = React.useState(null);
+  const [open, setOpen] = React.useState(null);
+  const [note, setNote] = React.useState("");
+  const [error, setError] = React.useState("");
+  React.useEffect(() => {
+    let alive = true;
+    ideas.status().then((d) => alive && setStatus(d || {})).catch(() => alive && setStatus({}));
+    return () => { alive = false; };
+  }, [ideas]);
+  const load = React.useCallback(() => {
+    setRows(null);
+    const p = view === "mine" ? ideas.mine() : ideas.list({ sort });
+    return p.then((d) => setRows((d && d.ideas) || [])).catch((err) => { setError(errorText(err)); setRows([]); });
+  }, [ideas, sort, view]);
+  React.useEffect(() => { if (status && status.connected && view !== "new") load(); }, [status, view, load]);
+  if (status === null) return h("div", { className: "scalio-support-meta" }, L.loading);
+  if (!status.connected) {
+    return h("div", { className: "scalio-support-form", "data-testid": "ideas-link-only" },
+      h("p", { className: "scalio-support-meta" }, L.ideasLinkOnly),
+      status.page ? h("a", { className: "scalio-btn-primary", href: status.page, target: "_blank", rel: "noopener noreferrer", "data-testid": "ideas-page-link" }, L.ideasOpenPage) : null);
+  }
+  if (open) return h(IdeaDetail, { ideas, ref_: open, L, lang, onBack: () => { setOpen(null); load(); } });
+  const vote = async (idea) => {
+    try {
+      const res = await ideas.vote(idea.number, !idea.voted);
+      setRows((list) => (list || []).map((r) => (r.id === idea.id ? { ...r, votes: res.votes, voted: res.voted } : r)));
+    } catch (err) { setError(errorText(err)); }
+  };
+  const pill = (key, label) => h("button", { type: "button", className: cx("scalio-support-tab", view === key && "is-active"),
+    onClick: () => { setView(key); setNote(""); setError(""); }, "data-testid": `ideas-view-${key}` }, label);
+  return h(
+    "div",
+    { className: "scalio-ideas", "data-testid": "ideas-panel" },
+    h("div", { className: "scalio-ideas-bar" },
+      pill("list", L.ideasAll), pill("mine", L.ideasMine), pill("new", L.ideasSuggest),
+      view === "list"
+        ? h("select", { className: "scalio-input scalio-ideas-sort", value: sort, "aria-label": L.ideasSort,
+            onChange: (e) => setSort(e.target.value), "data-testid": "ideas-sort" },
+            h("option", { value: "top" }, L.ideasSortTop), h("option", { value: "new" }, L.ideasSortNew), h("option", { value: "done" }, L.ideasSortDone))
+        : null),
+    note ? h("div", { className: "scalio-notice is-ok", "data-testid": "ideas-note" }, note) : null,
+    error ? h("div", { className: "scalio-notice is-error", role: "alert" }, error) : null,
+    view === "new"
+      ? h(IdeaForm, { ideas, L, onDone: (text) => { setNote(text); setView("mine"); } })
+      : rows === null
+        ? h("div", { className: "scalio-support-meta" }, L.loading)
+        : h("div", { className: "scalio-support-list" },
+            rows.length ? null : h("div", { className: "scalio-support-empty" }, L.ideasNone),
+            rows.map((i) => h("div", { key: i.id, role: "button", tabIndex: 0, className: "scalio-idea-row", "data-testid": `idea-row-${i.number}`,
+              onClick: () => setOpen(i.number), onKeyDown: (e) => { if (e.key === "Enter") setOpen(i.number); } },
+              h(VoteBtn, { idea: i, L, onVote: vote }),
+              h("div", { className: "scalio-idea-body" },
+                h("div", { className: "scalio-support-item-title" }, i.title),
+                h("div", { className: "scalio-support-meta" },
+                  `${ideaStatus(L, i.status)} · ${i.number}${i.comment_count ? ` · ${i.comment_count} ${L.ideasComments}` : ""}${i.public === false ? ` · ${L.ideasWaitingShort}` : ""}`))))),
+    status.page ? h("a", { className: "scalio-support-meta scalio-ideas-page", href: status.page, target: "_blank", rel: "noopener noreferrer" }, L.ideasOpenPage) : null
   );
 }
 
@@ -255,15 +452,19 @@ function SupportDesk({ client, page, lang, labels }) {
       onClick: () => { setTab(key); setTicket(null); setNote(""); }, "data-testid": `support-tab-${key}`,
     }, label);
   if (status === null) return h("div", { className: "scalio-support-meta" }, L.loading);
-  if (status.link_only && status.portal_page) return h(PortalLink, { status, L });
+  if (status.link_only && status.portal_page) {
+    return h(PortalLink, { status, L, ideasLink: client.ideas && status.portal ? `${status.portal}/ideen` : "" });
+  }
   return h(
     React.Fragment,
     null,
-    h("div", { className: "scalio-support-tabs", role: "tablist" }, tabBtn("new", L.supportNew), tabBtn("mine", L.supportMine)),
+    h("div", { className: "scalio-support-tabs", role: "tablist" }, tabBtn("new", L.supportNew), tabBtn("mine", L.supportMine),
+      client.ideas ? tabBtn("ideas", L.ideasTab) : null),
     note ? h("div", { className: "scalio-notice is-ok", "data-testid": "support-note" }, note) : null,
     tab === "new" ? h(NewTicket, { client, page, L, onSent: (text) => { setNote(text); setTab("mine"); } }) : null,
     tab === "mine" && !ticket ? h(MyTickets, { client, L, lang, onOpen: (id) => { setNote(""); setTicket(id); } }) : null,
-    tab === "mine" && ticket ? h(TicketDetail, { client, id: ticket, L, lang, onBack: () => setTicket(null) }) : null
+    tab === "mine" && ticket ? h(TicketDetail, { client, id: ticket, L, lang, onBack: () => setTicket(null) }) : null,
+    tab === "ideas" && client.ideas ? h(IdeasPanel, { ideas: client.ideas, L, lang }) : null
   );
 }
 
@@ -369,4 +570,4 @@ function SupportConnection({ client, lang, labels, onChange }) {
   );
 }
 
-module.exports = { supportApi, SupportDesk, SupportConnection, SUPPORT_CATEGORIES: CATEGORIES };
+module.exports = { supportApi, SupportDesk, SupportConnection, IdeasPanel, SUPPORT_CATEGORIES: CATEGORIES };