@scalio-cloud/ui 0.6.1 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.7.0
+- `SupportDrawer` takes `client` (from the new `supportApi(api)`) and `page`: tabs "Neue Anfrage" (category,
+  subject, description, technical details) and "Meine Tickets" (list, answers from support, reply, rating) for the
+  central support desk (ADR 0022). New settings card `SupportConnection` (portal address and one-time code, status,
+  check, disconnect). `LABELS` get the support texts. **Visible change only for apps that pass `client`**; without
+  it the drawer keeps its single form.
+
+## 0.6.2
+- **Visible change for apps using `SettingsLayout`:** the settings area uses the full width of the window (was at most
+  64rem), so wide screens show more cards side by side. No change for other apps.
+
 ## 0.6.1
 - **Visible change for apps using `SettingsLayout`:** the settings page has no outer padding of its own any more;
   the app's content area brings it (0.6.0 had both, so the page got a double margin). No change for other apps.

package/README.md

@@ -106,11 +106,16 @@ const apps = useScalioApps(() => api.get("/apps").then((r) => r.data));   // onc
 >
   <Routes>...</Routes>
 </AppShell>
-<SupportDrawer open={supportOpen} onClose={...} lang={lang}
-  onSubmit={(d) => api.post("/support/tickets", { ...d, url: location.pathname }).then(() => toast.success(...))}
+<SupportDrawer open={supportOpen} onClose={...} lang={lang} client={supportApi(api)} page={location.pathname}
   context={[["URL", location.pathname], [L.tenant, current?.name]]} />
 ```
 
+With `client` the drawer has the tabs "Neue Anfrage" (category, subject, description, technical details) and
+"Meine Tickets" (list, answers, reply, rating); tickets go to the central support desk in Compass (scalio-docs ADR
+0022), the backend routes come from scalio-connect `scalio_connect.support.web`. `supportApi(api)` takes the app's
+axios instance. The settings card `<SupportConnection client={supportApi(api)} lang={lang} />` connects the
+installation with a one-time code (admins). Without `client` the drawer keeps the old single form with `onSubmit`.
+
 `link` is the router's `NavLink` (it gets `to`, `end`, a `className` function and `onClick`); without it the
 sidebar renders plain links and marks the item for `activePath`. Item test ids default to `nav-<path>`
 (`nav-overview` for `/`), or set `testId`. Page blocks: `KpiTile` (tone `error` = red number),

package/nav.css

@@ -144,6 +144,33 @@
 .scalio-support-title { margin: 0; font-family: 'Chivo', sans-serif; font-weight: 700; font-size: 1.125rem; text-transform: uppercase; }
 .scalio-support-context { margin-bottom: 1rem; padding: 0.75rem; border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--muted)); font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; overflow-wrap: anywhere; }
 .scalio-support-form { display: flex; flex-direction: column; gap: 0.375rem; }
+.scalio-support-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
+.scalio-support-tab { flex: 1; padding: 0 0 0.5rem; border: 0; border-bottom: 2px solid transparent; background: none; color: hsl(var(--muted-foreground)); font: inherit; font-size: 0.875rem; cursor: pointer; }
+.scalio-support-tab.is-active { border-bottom-color: hsl(var(--primary)); color: hsl(var(--foreground)); font-weight: 600; }
+.scalio-support-check { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
+.scalio-support-check input { margin-top: 0.125rem; }
+.scalio-support-list, .scalio-support-detail, .scalio-support-conn { display: flex; flex-direction: column; gap: 0.5rem; }
+.scalio-support-item { display: block; width: 100%; padding: 0.75rem; border: 1px solid hsl(var(--border)); border-radius: 2px; background: none; color: inherit; font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer; }
+.scalio-support-item:hover { background: hsl(var(--muted)); }
+.scalio-support-item.is-waiting { border-style: dashed; cursor: default; }
+.scalio-support-item-head { display: flex; justify-content: space-between; gap: 0.5rem; }
+.scalio-support-item-title { margin: 0; font-weight: 600; }
+.scalio-support-number { flex-shrink: 0; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: hsl(var(--primary)); }
+.scalio-support-meta { margin: 0; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
+.scalio-support-empty { padding: 2rem 0; text-align: center; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
+.scalio-support-back { align-self: flex-start; padding: 0; border: 0; background: none; color: hsl(var(--muted-foreground)); font: inherit; font-size: 0.75rem; cursor: pointer; }
+.scalio-support-back:hover { color: hsl(var(--foreground)); }
+.scalio-support-msg { margin: 0; padding: 0.75rem; border: 1px solid hsl(var(--border)); border-radius: 2px; font-size: 0.875rem; white-space: pre-wrap; overflow-wrap: anywhere; }
+.scalio-support-msg.is-support { border-color: hsl(var(--primary) / 0.3); background: hsl(var(--primary) / 0.05); }
+.scalio-support-stars { display: flex; gap: 0.25rem; }
+.scalio-support-stars button { border: 0; background: none; font-size: 1.25rem; line-height: 1; color: #f59e0b; cursor: pointer; }
+.scalio-support-conn { font-size: 0.875rem; }
+.scalio-support-conn-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+.scalio-support-conn-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; margin: 0; font-size: 0.75rem; }
+.scalio-support-conn-facts dt { color: hsl(var(--muted-foreground)); }
+.scalio-support-conn-facts dd { margin: 0; font-family: 'JetBrains Mono', monospace; overflow-wrap: anywhere; }
+.scalio-support-conn-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.scalio-btn-danger { color: hsl(var(--destructive)); }
 .scalio-field-label { margin-top: 0.5rem; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: hsl(var(--muted-foreground)); }
 .scalio-input {
   width: 100%; height: 2.5rem; padding: 0 0.75rem; border: 1px solid hsl(var(--input)); border-radius: 2px;
@@ -238,7 +265,8 @@
 .scalio-settings-item.is-active { border-left-color: hsl(var(--primary)); color: hsl(var(--foreground)); font-weight: 600; background: hsl(var(--muted)); }
 .scalio-settings-item:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
 .scalio-settings-empty { margin: 0; padding: 0 0.75rem; font-size: 0.8125rem; color: hsl(var(--muted-foreground)); }
-.scalio-settings-main { flex: 1 1 auto; min-width: 0; max-width: 64rem; }
+/* Full width: the areas arrange their cards in a grid that grows with the window. */
+.scalio-settings-main { flex: 1 1 auto; min-width: 0; }
 .scalio-settings-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
 .scalio-settings-body { display: flex; flex-direction: column; }
 .scalio-settings-section-footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.25rem; }

package/package.json

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

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

package/react/labels.js

@@ -59,6 +59,43 @@ const LABELS = {
     send: "Anfrage senden",
     sending: "Wird gesendet …",
     close: "Schliessen",
+    supportNew: "Neue Anfrage",
+    supportMine: "Meine Tickets",
+    supportCategory: "Kategorie",
+    supportCategories: { question: "Frage", bug: "Fehler", wish: "Wunsch", license: "Lizenz", billing: "Rechnung" },
+    supportDiagnostics: "Technische Angaben mitsenden (Version, Lizenzstufe, Browser, letzte Fehler; keine Personendaten)",
+    supportSentAs: "Gesendet als {n}. Die Antwort sehen Sie unter «Meine Tickets» und per E-Mail.",
+    supportQueued: "Gespeichert. Die Anfrage wird gesendet, sobald das Support-Portal erreichbar ist.",
+    supportWaiting: "Wartet auf Versand",
+    supportNotSent: "Nicht gesendet. Bitte schreiben Sie an den Support.",
+    supportNotConnected: "Diese Installation ist noch nicht mit dem Support verbunden. Anfragen werden bis zu 3 Tage aufbewahrt.",
+    supportUnreachable: "Das Support-Portal ist gerade nicht erreichbar.",
+    supportNone: "Noch keine Tickets.",
+    supportFromSupport: "Scalio Support",
+    supportReply: "Antworten",
+    supportReplyPlaceholder: "Ihre Antwort",
+    supportReplySent: "Antwort gesendet.",
+    supportRate: "Wie zufrieden sind Sie mit der Lösung?",
+    supportThanks: "Danke für Ihre Bewertung.",
+    supportStatus: { new: "Neu", open: "Offen", in_progress: "In Bearbeitung", waiting: "Wartet auf Sie", waiting_customer: "Wartet auf Sie", resolved: "Gelöst", closed: "Geschlossen" },
+    supportConnStatus: { unpaired: "Nicht verbunden", pending: "Wartet auf Bestätigung", active: "Verbunden", blocked: "Gesperrt" },
+    supportConnHelp: "Tickets aus dieser Installation gehen an den Scalio Support. Den einmaligen Code erhalten Sie im Scalio-Portal unter Support -> Verbundene Apps.",
+    supportConnHelpConnected: "Tickets aus dieser Installation gehen an den Scalio Support.",
+    supportConnPending: "Ein Administrator Ihrer Organisation muss die Verbindung im Scalio-Portal bestätigen.",
+    supportConnBlocked: "Diese Installation ist für den Support gesperrt. Bitte wenden Sie sich an Scalio.",
+    supportConnKeyLost: "Der Schlüssel dieser Verbindung kann nicht mehr gelesen werden. Bitte verbinden Sie neu.",
+    supportPortal: "Support-Portal",
+    supportCode: "Einmaliger Code",
+    supportInstance: "Instanz",
+    supportSince: "Verbunden seit",
+    supportOutbox: "Warteschlange: {pending} wartend, {failed} nicht gesendet",
+    supportConnect: "Verbinden",
+    supportConnected: "Verbindung hergestellt.",
+    supportCheck: "Verbindung prüfen",
+    supportChecked: "Verbindung geprüft.",
+    supportRemove: "Trennen",
+    supportRemoveConfirm: "Verbindung zum Support trennen? Neue Tickets warten dann, bis wieder verbunden ist.",
+    supportRemoved: "Verbindung getrennt.",
     // States
     loading: "Wird geladen …",
     empty: "Noch keine Einträge.",
@@ -130,6 +167,43 @@ const LABELS = {
     send: "Send request",
     sending: "Sending …",
     close: "Close",
+    supportNew: "New request",
+    supportMine: "My tickets",
+    supportCategory: "Category",
+    supportCategories: { question: "Question", bug: "Bug", wish: "Wish", license: "License", billing: "Billing" },
+    supportDiagnostics: "Include technical details (version, license tier, browser, recent errors; no personal data)",
+    supportSentAs: "Sent as {n}. You will see the answer under “My tickets” and by email.",
+    supportQueued: "Saved. The request will be sent as soon as the support portal is reachable.",
+    supportWaiting: "Waiting to be sent",
+    supportNotSent: "Not sent. Please write to support.",
+    supportNotConnected: "This installation is not connected to support yet. Requests are kept for up to 3 days.",
+    supportUnreachable: "The support portal is not reachable right now.",
+    supportNone: "No tickets yet.",
+    supportFromSupport: "Scalio Support",
+    supportReply: "Reply",
+    supportReplyPlaceholder: "Your reply",
+    supportReplySent: "Reply sent.",
+    supportRate: "How satisfied are you with the solution?",
+    supportThanks: "Thank you for your rating.",
+    supportStatus: { new: "New", open: "Open", in_progress: "In progress", waiting: "Waiting for you", waiting_customer: "Waiting for you", resolved: "Resolved", closed: "Closed" },
+    supportConnStatus: { unpaired: "Not connected", pending: "Waiting for confirmation", active: "Connected", blocked: "Blocked" },
+    supportConnHelp: "Tickets from this installation go to Scalio Support. You get the one-time code in the Scalio portal under Support -> Connected apps.",
+    supportConnHelpConnected: "Tickets from this installation go to Scalio Support.",
+    supportConnPending: "An administrator of your organisation must confirm the connection in the Scalio portal.",
+    supportConnBlocked: "This installation is blocked for support. Please contact Scalio.",
+    supportConnKeyLost: "The key of this connection can no longer be read. Please connect again.",
+    supportPortal: "Support portal",
+    supportCode: "One-time code",
+    supportInstance: "Instance",
+    supportSince: "Connected since",
+    supportOutbox: "Queue: {pending} waiting, {failed} not sent",
+    supportConnect: "Connect",
+    supportConnected: "Connected.",
+    supportCheck: "Check connection",
+    supportChecked: "Connection checked.",
+    supportRemove: "Disconnect",
+    supportRemoveConfirm: "Disconnect from support? New tickets then wait until the instance is connected again.",
+    supportRemoved: "Disconnected.",
     loading: "Loading …",
     empty: "No entries yet.",
     sections: {

package/react/nav.js

@@ -411,9 +411,11 @@ function resetScalioApps() {
 }
 
 // --- Support drawer ---------------------------------------------------------------------------
-// onSubmit({ subject, description }) sends the request (and shows the app's toast); a thrown error is
-// shown in the drawer. context: rows like [["URL", "/drifts"], ["Tenant", "Contoso"]].
-function SupportDrawer({ open, onClose, onSubmit, context, lang, labels }) {
+// With client (supportApi(api), see support.js): tabs "Neue Anfrage" and "Meine Tickets"; tickets go to the
+// central support desk (ADR 0022), page is the current path. Without client: one form, onSubmit({ subject,
+// description }) sends it (and shows the app's toast); a thrown error is shown in the drawer.
+// context: rows like [["URL", "/drifts"], ["Tenant", "Contoso"]].
+function SupportDrawer({ open, onClose, onSubmit, client, page, context, lang, labels }) {
   const L = labelsFor(lang, labels);
   const [subject, setSubject] = React.useState("");
   const [description, setDescription] = React.useState("");
@@ -467,7 +469,9 @@ function SupportDrawer({ open, onClose, onSubmit, context, lang, labels }) {
             context.map((row, i) => h("div", { key: i }, `${row[0]}: ${row[1] == null || row[1] === "" ? "—" : row[1]}`))
           )
         : null,
-      h(
+      client
+        ? h(require("./support").SupportDesk, { client, page, lang, labels })
+        : h(
         "form",
         { className: "scalio-support-form", onSubmit: submit },
         h("label", { className: "scalio-field-label", htmlFor: "support-subject" }, L.subject),

package/react/support.js

@@ -0,0 +1,336 @@
+"use strict";
+// Support desk in the apps (ADR 0022): tickets go to the central Scalio support desk in Compass, the app only
+// relays them. The backend routes come from scalio-connect (`scalio_connect.support.web`); supportApi(api) maps
+// 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).
+const React = require("react");
+const h = React.createElement;
+const { labelsFor } = require("./labels");
+
+const CATEGORIES = ["question", "bug", "wish", "license", "billing"];
+const DONE = ["resolved", "closed"];
+
+function cx() {
+  return Array.prototype.slice.call(arguments).filter(Boolean).join(" ");
+}
+
+// api: axios instance with the app's base URL (/api). Every method resolves to the response body.
+function supportApi(api) {
+  const data = (p) => p.then((r) => r.data);
+  const enc = encodeURIComponent;
+  return {
+    create: (ticket) => data(api.post("/support/tickets", ticket)),
+    list: () => data(api.get("/support/tickets")),
+    get: (id) => data(api.get(`/support/tickets/${enc(id)}`)),
+    reply: (id, body) => data(api.post(`/support/tickets/${enc(id)}/messages`, { body })),
+    rate: (id, score) => data(api.post(`/support/tickets/${enc(id)}/rating`, { score })),
+    connection: () => data(api.get("/support/connection")),
+    connect: (portal_url, code) => data(api.post("/support/connection", { portal_url, code })),
+    check: () => data(api.post("/support/connection/check")),
+    disconnect: () => data(api.delete("/support/connection")),
+  };
+}
+
+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" });
+}
+
+function statusText(L, s) {
+  return (L.supportStatus && L.supportStatus[s]) || s;
+}
+
+function NewTicket({ client, page, L, onSent }) {
+  const [category, setCategory] = React.useState("question");
+  const [subject, setSubject] = React.useState("");
+  const [description, setDescription] = React.useState("");
+  const [diagnostics, setDiagnostics] = React.useState(true);
+  const [busy, setBusy] = React.useState(false);
+  const [error, setError] = React.useState("");
+  const submit = async (e) => {
+    e.preventDefault();
+    setBusy(true);
+    setError("");
+    try {
+      const browser = diagnostics && typeof navigator !== "undefined" ? String(navigator.userAgent || "").slice(0, 300) : "";
+      const res = await client.create({ category, subject, description, url: page || "", diagnostics, browser });
+      setSubject("");
+      setDescription("");
+      setCategory("question");
+      onSent(res && res.number ? L.supportSentAs.replace("{n}", res.number) : L.supportQueued);
+    } catch (err) {
+      setError(errorText(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return h(
+    "form",
+    { className: "scalio-support-form", onSubmit: submit },
+    h("label", { className: "scalio-field-label", htmlFor: "support-category" }, L.supportCategory),
+    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]))
+    ),
+    h("label", { className: "scalio-field-label", htmlFor: "support-subject" }, L.subject),
+    h("input", {
+      id: "support-subject", className: "scalio-input", value: subject, required: true, minLength: 3, maxLength: 200,
+      onChange: (e) => setSubject(e.target.value), "data-testid": "ticket-subject-input",
+    }),
+    h("label", { className: "scalio-field-label", htmlFor: "support-description" }, L.description),
+    h("textarea", {
+      id: "support-description", className: "scalio-input scalio-textarea", rows: 5, value: description, required: true,
+      minLength: 3, maxLength: 5000, onChange: (e) => setDescription(e.target.value), "data-testid": "ticket-description-input",
+    }),
+    h(
+      "label",
+      { className: "scalio-support-check", "data-testid": "ticket-diagnostics-toggle" },
+      h("input", { type: "checkbox", checked: diagnostics, onChange: (e) => setDiagnostics(e.target.checked) }),
+      h("span", null, L.supportDiagnostics)
+    ),
+    error ? h("div", { className: "scalio-notice is-error", role: "alert", "data-testid": "support-error" }, error) : null,
+    h("button", { type: "submit", className: "scalio-btn-primary", disabled: busy, "data-testid": "ticket-submit-btn" }, busy ? L.sending : L.send)
+  );
+}
+
+function Waiting({ item, L }) {
+  return h(
+    "div",
+    { className: "scalio-support-item is-waiting" },
+    item.subject ? h("div", { className: "scalio-support-item-title" }, item.subject) : null,
+    h("div", { className: "scalio-support-meta" }, item.state === "failed" ? L.supportNotSent : L.supportWaiting)
+  );
+}
+
+function MyTickets({ client, L, lang, onOpen }) {
+  const [data, setData] = React.useState(null);
+  React.useEffect(() => {
+    let alive = true;
+    client.list().then((d) => alive && setData(d)).catch(() => alive && setData({ tickets: [], queued: [], reachable: false }));
+    return () => { alive = false; };
+  }, [client]);
+  if (!data) return h("div", { className: "scalio-support-meta" }, L.loading);
+  const tickets = data.tickets || [];
+  const queued = data.queued || [];
+  return h(
+    "div",
+    { className: "scalio-support-list", "data-testid": "support-my-tickets" },
+    data.connected === false ? h("div", { className: "scalio-support-meta" }, L.supportNotConnected) : null,
+    data.reachable === false ? h("div", { className: "scalio-notice is-warn" }, L.supportUnreachable) : null,
+    queued.map((q) => h(Waiting, { key: q.id, item: q, L })),
+    tickets.map((t) =>
+      h(
+        "button",
+        { key: t.id, type: "button", className: "scalio-support-item", onClick: () => onOpen(t.id), "data-testid": `support-ticket-${t.id}` },
+        h(
+          "div",
+          { className: "scalio-support-item-head" },
+          h("span", { className: "scalio-support-item-title" }, t.title),
+          t.number ? h("span", { className: "scalio-support-number" }, t.number) : null
+        ),
+        h("div", { className: "scalio-support-meta" }, `${statusText(L, t.status)} · ${fmtDate(t.last_activity_at || t.created_at, lang)}`)
+      )
+    ),
+    !tickets.length && !queued.length ? h("div", { className: "scalio-support-empty" }, L.supportNone) : null
+  );
+}
+
+function TicketDetail({ client, id, L, lang, onBack }) {
+  const [tk, setTk] = React.useState(null);
+  const [reply, setReply] = React.useState("");
+  const [busy, setBusy] = React.useState(false);
+  const [error, setError] = React.useState("");
+  const [note, setNote] = React.useState("");
+  const load = React.useCallback(() => client.get(id).then(setTk).catch((err) => { setError(errorText(err)); setTk(false); }), [client, id]);
+  React.useEffect(() => { load(); }, [load]);
+  const send = async (fn, ok) => {
+    setBusy(true);
+    setError("");
+    try {
+      await fn();
+      setReply("");
+      setNote(ok);
+      await load();
+    } catch (err) {
+      setError(errorText(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+  const back = h("button", { type: "button", className: "scalio-support-back", onClick: onBack, "data-testid": "support-back" }, `‹ ${L.supportMine}`);
+  if (tk === null) return h("div", null, back, h("div", { className: "scalio-support-meta" }, L.loading));
+  if (tk === false) return h("div", null, back, h("div", { className: "scalio-notice is-error", role: "alert" }, error));
+  return h(
+    "div",
+    { className: "scalio-support-detail", "data-testid": "support-ticket-detail" },
+    back,
+    h("div", { className: "scalio-support-number" }, `${tk.number || ""} · ${statusText(L, tk.status)}`),
+    h("h4", { className: "scalio-support-item-title" }, tk.title),
+    tk.description ? h("p", { className: "scalio-support-msg" }, tk.description) : null,
+    (tk.messages || []).map((m) =>
+      h(
+        "div",
+        { key: m.id, className: cx("scalio-support-msg", m.from_support && "is-support") },
+        h("div", { className: "scalio-support-meta" }, `${m.from_support ? L.supportFromSupport : m.author_name || ""} · ${fmtDate(m.created_at, lang)}`),
+        h("div", null, m.body)
+      )
+    ),
+    (tk.queued || []).map((q) => h(Waiting, { key: q.id, item: q, L })),
+    note ? h("div", { className: "scalio-notice is-ok", "data-testid": "support-note" }, note) : null,
+    error ? h("div", { className: "scalio-notice is-error", role: "alert", "data-testid": "support-error" }, error) : null,
+    tk.status !== "closed"
+      ? h(
+          "div",
+          { className: "scalio-support-form" },
+          h("textarea", {
+            className: "scalio-input scalio-textarea", rows: 3, value: reply, placeholder: L.supportReplyPlaceholder,
+            "aria-label": L.supportReply, onChange: (e) => setReply(e.target.value), "data-testid": "ticket-reply-input",
+          }),
+          h(
+            "button",
+            { type: "button", className: "scalio-btn-primary", disabled: busy || !reply.trim(), "data-testid": "ticket-reply-btn",
+              onClick: () => send(() => client.reply(id, reply.trim()), L.supportReplySent) },
+            L.supportReply
+          )
+        )
+      : null,
+    DONE.includes(tk.status) && !tk.csat_score
+      ? h(
+          "div",
+          { className: "scalio-support-rating", "data-testid": "ticket-rating" },
+          h("div", { className: "scalio-support-meta" }, L.supportRate),
+          h(
+            "div",
+            { className: "scalio-support-stars" },
+            [1, 2, 3, 4, 5].map((n) =>
+              h("button", { key: n, type: "button", disabled: busy, "aria-label": String(n), "data-testid": `ticket-rate-${n}`,
+                onClick: () => send(() => client.rate(id, n), L.supportThanks) }, "★")
+            )
+          )
+        )
+      : null
+  );
+}
+
+function SupportDesk({ client, page, lang, labels }) {
+  const L = labelsFor(lang, labels);
+  const [tab, setTab] = React.useState("new");
+  const [ticket, setTicket] = React.useState(null);
+  const [note, setNote] = React.useState("");
+  const tabBtn = (key, label) =>
+    h("button", {
+      type: "button", role: "tab", "aria-selected": tab === key, className: cx("scalio-support-tab", tab === key && "is-active"),
+      onClick: () => { setTab(key); setTicket(null); setNote(""); }, "data-testid": `support-tab-${key}`,
+    }, label);
+  return h(
+    React.Fragment,
+    null,
+    h("div", { className: "scalio-support-tabs", role: "tablist" }, tabBtn("new", L.supportNew), tabBtn("mine", L.supportMine)),
+    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
+  );
+}
+
+const CONN_TONE = { active: "is-ok", pending: "is-warn", blocked: "is-error", unpaired: "is-neutral" };
+
+// Settings card. client: supportApi(api). Shown to admins only; the backend answers 403 for others.
+function SupportConnection({ client, lang, labels, onChange }) {
+  const L = labelsFor(lang, labels);
+  const [st, setSt] = React.useState(null);
+  const [portal, setPortal] = React.useState("");
+  const [code, setCode] = React.useState("");
+  const [busy, setBusy] = React.useState(false);
+  const [error, setError] = React.useState("");
+  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)));
+    return () => { alive = false; };
+  }, [client]);
+  const run = async (fn, ok) => {
+    setBusy(true);
+    setError("");
+    setNote("");
+    try {
+      const d = await fn();
+      setSt(d);
+      setCode("");
+      setNote(ok);
+      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 connected = st.status !== "unpaired";
+  const outbox = st.outbox || {};
+  return h(
+    "div",
+    { className: "scalio-support-conn", "data-testid": "support-connection" },
+    h(
+      "div",
+      { className: "scalio-support-conn-head" },
+      h("span", { className: cx("scalio-badge", CONN_TONE[st.status] || "is-neutral"), "data-testid": "support-connection-status" },
+        (L.supportConnStatus && L.supportConnStatus[st.status]) || st.status),
+      st.status === "active" && st.detail ? h("span", null, st.detail) : null
+    ),
+    h("p", { className: "scalio-support-meta" }, connected ? L.supportConnHelpConnected : L.supportConnHelp),
+    st.status === "pending" ? h("div", { className: "scalio-notice is-warn" }, L.supportConnPending) : null,
+    st.status === "blocked" ? h("div", { className: "scalio-notice is-error" }, L.supportConnBlocked) : null,
+    connected && st.key_ok === false ? h("div", { className: "scalio-notice is-error" }, L.supportConnKeyLost) : null,
+    connected
+      ? h(
+          "dl",
+          { className: "scalio-support-conn-facts" },
+          h("dt", null, L.supportPortal), h("dd", null, st.portal_url),
+          h("dt", null, L.supportInstance), h("dd", null, st.instance_id),
+          st.paired_at ? h(React.Fragment, null, h("dt", null, L.supportSince), h("dd", null, fmtDate(st.paired_at, lang))) : null
+        )
+      : null,
+    outbox.pending || outbox.failed
+      ? h("div", { className: "scalio-support-meta", "data-testid": "support-outbox" },
+          L.supportOutbox.replace("{pending}", outbox.pending || 0).replace("{failed}", outbox.failed || 0))
+      : null,
+    note ? h("div", { className: "scalio-notice is-ok", "data-testid": "support-note" }, note) : null,
+    error ? h("div", { className: "scalio-notice is-error", role: "alert", "data-testid": "support-error" }, error) : null,
+    connected
+      ? h(
+          "div",
+          { className: "scalio-support-conn-actions" },
+          h("button", { type: "button", className: "scalio-btn", disabled: busy, "data-testid": "support-connection-check",
+            onClick: () => run(() => client.check(), L.supportChecked) }, L.supportCheck),
+          h("button", { type: "button", className: "scalio-btn scalio-btn-danger", disabled: busy, "data-testid": "support-connection-remove",
+            onClick: () => (typeof window === "undefined" || window.confirm(L.supportRemoveConfirm)) && run(() => client.disconnect(), L.supportRemoved) },
+            L.supportRemove)
+        )
+      : h(
+          "form",
+          { className: "scalio-support-form", onSubmit: (e) => { e.preventDefault(); run(() => client.connect(portal.trim(), code.trim()), L.supportConnected); } },
+          h("label", { className: "scalio-field-label", htmlFor: "support-portal" }, L.supportPortal),
+          h("input", { id: "support-portal", className: "scalio-input", placeholder: "https://portal.scaliocloud.com", value: portal, required: true,
+            onChange: (e) => setPortal(e.target.value), "data-testid": "support-portal-input" }),
+          h("label", { className: "scalio-field-label", htmlFor: "support-code" }, L.supportCode),
+          h("input", { id: "support-code", className: "scalio-input", placeholder: "spc_…", value: code, required: true,
+            onChange: (e) => setCode(e.target.value), "data-testid": "support-code-input" }),
+          h("button", { type: "submit", className: "scalio-btn-primary", disabled: busy, "data-testid": "support-connect-btn" }, L.supportConnect)
+        )
+  );
+}
+
+module.exports = { supportApi, SupportDesk, SupportConnection, SUPPORT_CATEGORIES: CATEGORIES };