@abstractframework/monitor-gpu 0.1.0

package/README.md

@@ -0,0 +1,85 @@
+# @abstractutils/monitor-gpu
+
+Small, dependency-free GPU utilization widget that renders a mini histogram and polls a secured backend endpoint.
+
+In AbstractFramework deployments, the default backend endpoint is AbstractGateway:
+- `GET /api/gateway/host/metrics/gpu`
+- Auth: `Authorization: Bearer <token>`
+
+## Install
+
+- Workspace: add a dependency on `@abstractutils/monitor-gpu`
+- npm (once published): `npm i @abstractutils/monitor-gpu`
+
+## Usage (Custom Element)
+
+```js
+import { registerMonitorGpuWidget } from "@abstractutils/monitor-gpu";
+
+registerMonitorGpuWidget(); // defines <monitor-gpu>
+
+const el = document.createElement("monitor-gpu");
+el.baseUrl = "http://localhost:8080"; // optional (defaults to same-origin)
+el.token = "your-gateway-token"; // or el.getToken = async () => ...
+el.tickMs = 1500;
+el.historySize = 20;
+el.mode = "full"; // "full" | "icon"
+document.body.appendChild(el);
+```
+
+You can also set the non-secret options via attributes:
+
+```html
+<monitor-gpu base-url="http://localhost:8080" tick-ms="1500" history-size="20" mode="icon"></monitor-gpu>
+```
+
+## Usage (Imperative helper)
+
+```js
+import { createMonitorGpuWidget } from "@abstractutils/monitor-gpu";
+
+const widget = createMonitorGpuWidget(document.querySelector("#gpu"), {
+  baseUrl: "http://localhost:8080",
+  token: "your-gateway-token",
+  tickMs: 1500,
+  historySize: 20,
+});
+
+// later
+widget.destroy();
+```
+
+## Backend contract (AbstractGateway)
+
+The widget treats the GPU metrics payload as “supported” unless `supported === false` and extracts utilization via `extractUtilizationGpuPct(payload)`:
+
+- `payload.utilization_gpu_pct` (number) **or**
+- `payload.gpus[][].utilization_gpu_pct` (numbers; averaged)
+
+Minimal examples:
+
+```json
+{ "supported": true, "utilization_gpu_pct": 23.0 }
+```
+
+```json
+{ "supported": true, "gpus": [{ "utilization_gpu_pct": 10.0 }, { "utilization_gpu_pct": 36.0 }] }
+```
+
+If `supported=false`, the widget shows `N/A`.
+
+## Security notes
+- Do not pass tokens in URLs.
+- For cross-origin usage, ensure `ABSTRACTGATEWAY_ALLOWED_ORIGINS` includes your UI origin (and serve behind HTTPS in production).
+
+## Tests
+
+```bash
+cd monitor-gpu
+npm test
+```
+
+## Related docs
+
+- Getting started: [`docs/getting-started.md`](../docs/getting-started.md)
+- Architecture: [`docs/architecture.md`](../docs/architecture.md)

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@abstractframework/monitor-gpu",
+  "version": "0.1.0",
+  "description": "Lightweight GPU utilization histogram widget for AbstractFramework clients (polls AbstractGateway host metrics with Bearer auth).",
+  "type": "module",
+  "author": "Laurent-Philippe Albou",
+  "license": "MIT",
+  "keywords": [
+    "abstractframework",
+    "gpu",
+    "monitoring",
+    "widget",
+    "histogram"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lpalbou/AbstractUIC.git",
+    "directory": "monitor-gpu"
+  },
+  "homepage": "https://github.com/lpalbou/AbstractUIC#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./src/index.js",
+  "types": "./src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "default": "./src/index.js"
+    }
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "test": "node --test"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "sideEffects": false
+}

package/src/gpu_metrics_api.js

@@ -0,0 +1,107 @@
+function _isAbsoluteUrl(s) {
+  try {
+    new URL(String(s));
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function makeGpuMetricsUrl({ baseUrl, endpoint }) {
+  const ep = String(endpoint || "/api/gateway/host/metrics/gpu");
+  if (_isAbsoluteUrl(ep)) {
+    return ep;
+  }
+  if (baseUrl && String(baseUrl).trim()) {
+    return new URL(ep, String(baseUrl)).toString();
+  }
+  return ep;
+}
+
+export async function resolveBearerToken({ token, getToken }) {
+  if (typeof getToken === "function") {
+    const t = await getToken();
+    return t == null ? "" : String(t);
+  }
+  return token == null ? "" : String(token);
+}
+
+export function buildAuthHeaders({ token }) {
+  const t = String(token || "").trim();
+  return t ? { Authorization: `Bearer ${t}` } : {};
+}
+
+export function extractUtilizationGpuPct(payload) {
+  if (!payload || typeof payload !== "object") return null;
+
+  const direct = Number(payload.utilization_gpu_pct);
+  if (Number.isFinite(direct)) return direct;
+
+  const gpus = payload.gpus;
+  if (Array.isArray(gpus) && gpus.length) {
+    const vals = gpus
+      .map((g) => Number(g && g.utilization_gpu_pct))
+      .filter((n) => Number.isFinite(n));
+    if (!vals.length) return null;
+    const avg = vals.reduce((a, b) => a + b, 0) / vals.length;
+    return avg;
+  }
+
+  return null;
+}
+
+export async function fetchHostGpuMetrics({
+  baseUrl,
+  endpoint,
+  token,
+  getToken,
+  signal,
+  fetchImpl,
+} = {}) {
+  const url = makeGpuMetricsUrl({ baseUrl, endpoint });
+  const resolvedToken = await resolveBearerToken({ token, getToken });
+
+  const f = fetchImpl || globalThis.fetch;
+  if (typeof f !== "function") {
+    return {
+      ok: false,
+      status: 0,
+      error: "fetch_unavailable",
+      payload: null,
+    };
+  }
+
+  let res;
+  try {
+    res = await f(url, {
+      method: "GET",
+      headers: {
+        Accept: "application/json",
+        ...buildAuthHeaders({ token: resolvedToken }),
+      },
+      signal,
+    });
+  } catch (e) {
+    return {
+      ok: false,
+      status: 0,
+      error: "network_error",
+      detail: e instanceof Error ? e.message : String(e),
+      payload: null,
+    };
+  }
+
+  let payload = null;
+  try {
+    payload = await res.json();
+  } catch {
+    payload = null;
+  }
+
+  return {
+    ok: res.ok,
+    status: res.status,
+    error: res.ok ? null : "http_error",
+    payload,
+  };
+}

package/src/history_buffer.js

@@ -0,0 +1,52 @@
+export class HistoryBuffer {
+  constructor(maxSize) {
+    this._maxSize = HistoryBuffer._normalizeMaxSize(maxSize);
+    this._values = [];
+  }
+
+  get maxSize() {
+    return this._maxSize;
+  }
+
+  get size() {
+    return this._values.length;
+  }
+
+  static _normalizeMaxSize(maxSize) {
+    const n = Number(maxSize);
+    if (!Number.isFinite(n) || n <= 0) {
+      return 1;
+    }
+    return Math.min(1000, Math.floor(n));
+  }
+
+  setMaxSize(maxSize) {
+    const next = HistoryBuffer._normalizeMaxSize(maxSize);
+    this._maxSize = next;
+    if (this._values.length > next) {
+      this._values = this._values.slice(this._values.length - next);
+    }
+  }
+
+  clear() {
+    this._values = [];
+  }
+
+  push(value) {
+    const n = Number(value);
+    const v = Number.isFinite(n) ? n : null;
+    this._values.push(v);
+    if (this._values.length > this._maxSize) {
+      this._values.splice(0, this._values.length - this._maxSize);
+    }
+  }
+
+  values() {
+    return this._values.slice();
+  }
+
+  last() {
+    return this._values.length ? this._values[this._values.length - 1] : null;
+  }
+}
+

package/src/index.d.ts

@@ -0,0 +1,51 @@
+export type MonitorGpuMode = "full" | "icon";
+
+export type MonitorGpuWidgetOptions = {
+  tickMs?: number | string;
+  historySize?: number | string;
+  endpoint?: string;
+  baseUrl?: string;
+  mode?: MonitorGpuMode | string;
+  token?: string;
+  getToken?: () => string | Promise<string>;
+};
+
+export class MonitorGpuWidgetController {
+  constructor(target: HTMLElement, options?: MonitorGpuWidgetOptions);
+
+  get options(): { tickMs: number; historySize: number; endpoint: string; baseUrl: string; mode: MonitorGpuMode };
+  setOptions(next: Partial<MonitorGpuWidgetOptions>): void;
+
+  start(): void;
+  stop(): void;
+  destroy(): void;
+
+  push(value: number | null): void;
+
+  get token(): string | undefined;
+  set token(token: string | undefined);
+
+  get getToken(): (() => string | Promise<string>) | undefined;
+  set getToken(getToken: (() => string | Promise<string>) | undefined);
+}
+
+export function createMonitorGpuWidget(target: HTMLElement, options?: MonitorGpuWidgetOptions): MonitorGpuWidgetController;
+
+export function registerMonitorGpuWidget(tagName?: string): void;
+
+export interface MonitorGpuElement extends HTMLElement {
+  tickMs: number;
+  historySize: number;
+  endpoint: string;
+  baseUrl: string;
+  mode: MonitorGpuMode;
+
+  token: string | undefined;
+  getToken: (() => string | Promise<string>) | undefined;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "monitor-gpu": MonitorGpuElement;
+  }
+}

package/src/index.js

@@ -0,0 +1,10 @@
+export { HistoryBuffer } from "./history_buffer.js";
+export {
+  buildAuthHeaders,
+  extractUtilizationGpuPct,
+  fetchHostGpuMetrics,
+  makeGpuMetricsUrl,
+  resolveBearerToken,
+} from "./gpu_metrics_api.js";
+export { MonitorGpuWidgetController, createMonitorGpuWidget, registerMonitorGpuWidget } from "./monitor_gpu_widget.js";
+

package/src/monitor_gpu_widget.js

@@ -0,0 +1,481 @@
+import { HistoryBuffer } from "./history_buffer.js";
+import { extractUtilizationGpuPct, fetchHostGpuMetrics } from "./gpu_metrics_api.js";
+
+const DEFAULTS = Object.freeze({
+  tickMs: 1500,
+  historySize: 20,
+  endpoint: "/api/gateway/host/metrics/gpu",
+  baseUrl: "",
+  mode: "full", // "full" | "icon"
+});
+
+function _clamp01(n) {
+  if (!Number.isFinite(n)) return 0;
+  return Math.min(1, Math.max(0, n));
+}
+
+function _clamp(n, lo, hi) {
+  if (!Number.isFinite(n)) return lo;
+  return Math.min(hi, Math.max(lo, n));
+}
+
+function _toInt(n, fallback) {
+  const v = Number(n);
+  if (!Number.isFinite(v)) return fallback;
+  return Math.floor(v);
+}
+
+function _colorForPct(pct, alpha = 1) {
+  const t = _clamp(Number(pct) / 100, 0, 1);
+  // Hue ramp: green (140) -> red (0)
+  const hue = Math.round(140 - 140 * t);
+  const a = _clamp(Number(alpha), 0, 1);
+  if (a >= 1) return `hsl(${hue} 85% 55%)`;
+  return `hsl(${hue} 85% 55% / ${a})`;
+}
+
+function _normalizeOptions(opts) {
+  const o = { ...DEFAULTS, ...(opts || {}) };
+  o.tickMs = Math.max(250, _toInt(o.tickMs, DEFAULTS.tickMs));
+  o.historySize = Math.max(1, Math.min(200, _toInt(o.historySize, DEFAULTS.historySize)));
+  o.endpoint = String(o.endpoint || DEFAULTS.endpoint);
+  o.baseUrl = String(o.baseUrl || "");
+  o.mode = String(o.mode || DEFAULTS.mode).trim().toLowerCase();
+  if (o.mode !== "icon") o.mode = "full";
+  return o;
+}
+
+function _cssText() {
+  return `
+:host{display:inline-block;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";line-height:1}
+.wrap{box-sizing:border-box;display:flex;flex-direction:column;gap:6px;padding:var(--monitor-gpu-padding,8px 10px);border:1px solid var(--monitor-gpu-border,#2a2f3a);border-radius:var(--monitor-gpu-radius,10px);background:var(--monitor-gpu-bg,#0b1020);color:var(--monitor-gpu-fg,#e7eaf0);width:var(--monitor-gpu-width,180px)}
+.wrap.icon{gap:var(--monitor-gpu-gap,4px);padding:var(--monitor-gpu-padding,4px);border-radius:var(--monitor-gpu-radius,999px);width:var(--monitor-gpu-width,30px);background:linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02)),var(--monitor-gpu-bg,#0b1020);box-shadow:0 0 14px var(--monitor-gpu-accent-glow, rgba(76,195,255,0.18))}
+.wrap.icon .top{display:none}
+.wrap.icon .bars{height:var(--monitor-gpu-bars-height,18px)}
+.top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
+.label{font-size:var(--monitor-gpu-font-size,var(--font-size-sm,12px));opacity:.9}
+.value{font-variant-numeric:tabular-nums;font-size:var(--monitor-gpu-font-size,var(--font-size-sm,12px));opacity:.95}
+.bars{display:flex;align-items:flex-end;gap:2px;height:var(--monitor-gpu-bars-height,34px);overflow:hidden}
+.bar{flex:1;min-width:0;border-radius:2px;background:var(--monitor-gpu-bar,#4cc3ff);height:2px;opacity:.9;transition:height .25s ease, background .25s ease, opacity .25s ease}
+.bar.missing{background:var(--monitor-gpu-bar-missing,#62708a);opacity:.35}
+.bar.error{background:var(--monitor-gpu-bar-error,#ff6b6b);opacity:.7}
+.muted{opacity:.6}
+`;
+}
+
+export class MonitorGpuWidgetController {
+  constructor(target, options = {}) {
+    if (!target || typeof target !== "object") {
+      throw new TypeError("target element is required");
+    }
+    this._target = target;
+    this._opts = _normalizeOptions(options);
+    this._buffer = new HistoryBuffer(this._opts.historySize);
+
+    this._timer = null;
+    this._timer_gen = 0;
+    this._running = false;
+    this._abort = null;
+    this._resumeTimer = null;
+
+    this._mounted = false;
+    this._els = null;
+
+    this._token = options.token;
+    this._getToken = options.getToken;
+
+    this._stoppedForAuth = false;
+  }
+
+  get options() {
+    return { ...this._opts };
+  }
+
+  set token(t) {
+    this._token = t;
+    const tok = String(this._token || "").trim();
+    if (tok && this._stoppedForAuth) {
+      this._stoppedForAuth = false;
+      this.start();
+    }
+  }
+
+  get token() {
+    return this._token;
+  }
+
+  set getToken(fn) {
+    this._getToken = fn;
+  }
+
+  get getToken() {
+    return this._getToken;
+  }
+
+  mount() {
+    if (this._mounted) return;
+    if (typeof document === "undefined") {
+      throw new Error("MonitorGpuWidget requires a browser DOM");
+    }
+
+    const root = this._target;
+    root.textContent = "";
+
+    const style = document.createElement("style");
+    style.textContent = _cssText();
+
+    const wrap = document.createElement("div");
+    wrap.className = this._opts.mode === "icon" ? "wrap icon" : "wrap";
+
+    const top = document.createElement("div");
+    top.className = "top";
+
+    const label = document.createElement("div");
+    label.className = "label";
+    label.textContent = "GPU";
+
+    const value = document.createElement("div");
+    value.className = "value muted";
+    value.textContent = "—";
+
+    top.appendChild(label);
+    top.appendChild(value);
+
+    const bars = document.createElement("div");
+    bars.className = "bars";
+
+    wrap.appendChild(top);
+    wrap.appendChild(bars);
+
+    root.appendChild(style);
+    root.appendChild(wrap);
+
+    this._els = { wrap, value, bars };
+    this._mounted = true;
+
+    this._rebuildBars();
+    this._render();
+  }
+
+  start() {
+    this.mount();
+    if (this._running) return;
+    this._running = true;
+    this._timer_gen += 1;
+    void this._poll_loop(this._timer_gen);
+  }
+
+  stop() {
+    this._running = false;
+    this._timer_gen += 1;
+    if (this._timer) {
+      clearTimeout(this._timer);
+      this._timer = null;
+    }
+    if (this._resumeTimer) {
+      clearTimeout(this._resumeTimer);
+      this._resumeTimer = null;
+    }
+    if (this._abort) {
+      this._abort.abort();
+      this._abort = null;
+    }
+  }
+
+  destroy() {
+    this.stop();
+    if (this._target && this._mounted) {
+      this._target.textContent = "";
+    }
+    this._mounted = false;
+    this._els = null;
+  }
+
+  setOptions(next) {
+    const merged = _normalizeOptions({ ...this._opts, ...(next || {}) });
+    const historyChanged = merged.historySize !== this._opts.historySize;
+    const tickChanged = merged.tickMs !== this._opts.tickMs;
+    const modeChanged = merged.mode !== this._opts.mode;
+
+    this._opts = merged;
+    if (modeChanged && this._mounted && this._els && this._els.wrap) {
+      this._els.wrap.className = merged.mode === "icon" ? "wrap icon" : "wrap";
+    }
+    if (historyChanged) {
+      this._buffer.setMaxSize(merged.historySize);
+      if (this._mounted) this._rebuildBars();
+    }
+    if (tickChanged && this._running) {
+      this.stop();
+      this.start();
+    } else if (this._mounted) {
+      this._render();
+    }
+  }
+
+  push(value) {
+    this._buffer.push(value);
+    this._render();
+  }
+
+  _rebuildBars() {
+    if (!this._els) return;
+    const { bars } = this._els;
+    bars.textContent = "";
+    for (let i = 0; i < this._opts.historySize; i += 1) {
+      const bar = document.createElement("div");
+      bar.className = "bar missing";
+      bar.style.height = "2px";
+      bars.appendChild(bar);
+    }
+  }
+
+  _render({ error = false } = {}) {
+    if (!this._els) return;
+    const { wrap, value, bars } = this._els;
+
+    const vals = this._buffer.values();
+    const last = this._buffer.last();
+    const pct = Number.isFinite(last) ? Math.max(0, Math.min(100, last)) : null;
+
+    if (pct == null) {
+      value.textContent = error ? "N/A" : "—";
+      value.classList.add("muted");
+    } else {
+      value.textContent = `${pct.toFixed(0)}%`;
+      value.classList.remove("muted");
+    }
+    if (wrap) {
+      wrap.title = pct == null ? "GPU —" : `GPU ${pct.toFixed(0)}%`;
+      if (pct == null) {
+        wrap.style.removeProperty("--monitor-gpu-accent");
+        wrap.style.removeProperty("--monitor-gpu-accent-glow");
+      } else {
+        wrap.style.setProperty("--monitor-gpu-accent", _colorForPct(pct, 0.95));
+        wrap.style.setProperty("--monitor-gpu-accent-glow", _colorForPct(pct, 0.35));
+      }
+    }
+
+    const barEls = Array.from(bars.children);
+    const missingPrefix = Math.max(0, barEls.length - vals.length);
+    const barsMaxPx = Math.max(2, bars && typeof bars.clientHeight === "number" && bars.clientHeight > 0 ? bars.clientHeight : 34);
+    for (let i = 0; i < barEls.length; i += 1) {
+      const el = barEls[i];
+      const idx = i - missingPrefix;
+      const v = idx >= 0 ? vals[idx] : null;
+      const valNum = Number.isFinite(v) ? v : null;
+      const h = valNum == null ? 0 : _clamp01(valNum / 100);
+
+      const px = Math.max(2, Math.min(barsMaxPx, Math.round(h * barsMaxPx)));
+      el.style.height = `${px}px`;
+      el.style.background = valNum == null ? "" : _colorForPct(valNum);
+      el.className = "bar";
+      if (valNum == null) el.classList.add("missing");
+      if (error) el.classList.add("error");
+    }
+  }
+
+  async _tick() {
+    const tokenAtStart = String(this._token || "").trim();
+    const getTokenAtStart = this._getToken;
+    const requestHadAuth = Boolean(tokenAtStart) || typeof getTokenAtStart === "function";
+
+    if (this._abort) this._abort.abort();
+    this._abort = new AbortController();
+
+    const res = await fetchHostGpuMetrics({
+      baseUrl: this._opts.baseUrl,
+      endpoint: this._opts.endpoint,
+      token: tokenAtStart,
+      getToken: getTokenAtStart,
+      signal: this._abort.signal,
+    });
+
+    const payload = res && res.payload;
+    const supported = payload && typeof payload === "object" ? payload.supported !== false : true;
+    const pct = extractUtilizationGpuPct(payload);
+
+    if (!res.ok) {
+      this._buffer.push(null);
+      this._render({ error: true });
+      if (res.status === 401 || res.status === 403) {
+        // If the request was unauthenticated (no token and no getToken) but auth became available
+        // before the 401 came back (common race when the host sets `el.token` after mount),
+        // do not permanently stop the widget. Let the poll loop continue and succeed on the next tick.
+        const tokenNow = String(this._token || "").trim();
+        const hasGetTokenNow = typeof this._getToken === "function";
+        const authNowAvailable = Boolean(tokenNow) || hasGetTokenNow;
+        if (!requestHadAuth && authNowAvailable) {
+          return;
+        }
+        this._stoppedForAuth = true;
+        this.stop();
+      } else if (res.status === 429) {
+        this.stop();
+        this._resumeTimer = setTimeout(() => {
+          this._resumeTimer = null;
+          if (!this._mounted) return;
+          this.start();
+        }, 30_000);
+      }
+      return;
+    }
+
+    if (!supported || pct == null) {
+      this._buffer.push(null);
+      this._render();
+      return;
+    }
+
+    this._buffer.push(pct);
+    this._render();
+  }
+
+  async _poll_loop(gen) {
+    if (!this._running || gen !== this._timer_gen) return;
+
+    await this._tick();
+
+    if (!this._running || gen !== this._timer_gen) return;
+    this._timer = setTimeout(() => {
+      this._timer = null;
+      void this._poll_loop(gen);
+    }, this._opts.tickMs);
+  }
+}
+
+export function createMonitorGpuWidget(target, options = {}) {
+  const c = new MonitorGpuWidgetController(target, options);
+  c.start();
+  return c;
+}
+
+export function registerMonitorGpuWidget(tagName = "monitor-gpu") {
+  if (typeof globalThis === "undefined") return;
+  if (typeof globalThis.customElements === "undefined") return;
+  if (globalThis.customElements.get(tagName)) return;
+
+  const HTMLElementBase = globalThis.HTMLElement || class {};
+
+  class MonitorGpuElement extends HTMLElementBase {
+    static get observedAttributes() {
+      return ["tick-ms", "history-size", "endpoint", "base-url", "mode"];
+    }
+
+    constructor() {
+      super();
+      this._shadow = this.attachShadow ? this.attachShadow({ mode: "open" }) : null;
+      const root = this._shadow || this;
+      this._controller = new MonitorGpuWidgetController(root, {});
+
+      // If a property was set on the element instance before it was upgraded/defined
+      // (e.g. React rendered `<monitor-gpu>` before `customElements.define()`),
+      // it becomes an "own property" and would bypass our setters. Upgrade it.
+      this._upgradeProperty("token");
+      this._upgradeProperty("getToken");
+      this._upgradeProperty("mode");
+    }
+
+    _upgradeProperty(prop) {
+      if (!Object.prototype.hasOwnProperty.call(this, prop)) return;
+      const value = this[prop];
+      try {
+        delete this[prop];
+      } catch {
+        // ignore
+      }
+      this[prop] = value;
+    }
+
+    connectedCallback() {
+      this._controller.setOptions(this._readAttrs());
+      const start = () => {
+        if (!this.isConnected) return;
+        this._controller.start();
+      };
+      if (typeof queueMicrotask === "function") queueMicrotask(start);
+      else Promise.resolve().then(start);
+    }
+
+    disconnectedCallback() {
+      this._controller.destroy();
+    }
+
+    attributeChangedCallback() {
+      this._controller.setOptions(this._readAttrs());
+    }
+
+    _readAttrs() {
+      const tickMs = this.getAttribute("tick-ms");
+      const historySize = this.getAttribute("history-size");
+      const endpoint = this.getAttribute("endpoint");
+      const baseUrl = this.getAttribute("base-url");
+      const mode = this.getAttribute("mode");
+      return {
+        ...(tickMs != null ? { tickMs } : {}),
+        ...(historySize != null ? { historySize } : {}),
+        ...(endpoint != null ? { endpoint } : {}),
+        ...(baseUrl != null ? { baseUrl } : {}),
+        ...(mode != null ? { mode } : {}),
+      };
+    }
+
+    set token(t) {
+      this._controller.token = t;
+    }
+
+    get token() {
+      return this._controller.token;
+    }
+
+    set getToken(fn) {
+      this._controller.getToken = fn;
+    }
+
+    get getToken() {
+      return this._controller.getToken;
+    }
+
+    set tickMs(v) {
+      this._controller.setOptions({ tickMs: v });
+    }
+
+    get tickMs() {
+      return this._controller.options.tickMs;
+    }
+
+    set historySize(v) {
+      this._controller.setOptions({ historySize: v });
+    }
+
+    get historySize() {
+      return this._controller.options.historySize;
+    }
+
+    set endpoint(v) {
+      this._controller.setOptions({ endpoint: v });
+    }
+
+    get endpoint() {
+      return this._controller.options.endpoint;
+    }
+
+    set baseUrl(v) {
+      this._controller.setOptions({ baseUrl: v });
+    }
+
+    get baseUrl() {
+      return this._controller.options.baseUrl;
+    }
+
+    set mode(v) {
+      this._controller.setOptions({ mode: v });
+    }
+
+    get mode() {
+      return this._controller.options.mode;
+    }
+  }
+
+  globalThis.customElements.define(tagName, MonitorGpuElement);
+}