myio-js-library 0.1.556 → 0.1.558

package/dist/index.cjs

@@ -908,7 +908,7 @@ module.exports = __toCommonJS(src_exports);
 // package.json
 var package_default = {
   name: "myio-js-library",
-  version: "0.1.556",
+  version: "0.1.558",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -12855,6 +12855,26 @@ var CSS_STRING = `
   margin-left: 4px;
 }
 
+/* Consumo ainda carregando (spinner no lugar do valor) */
+.myio-ho-card__value.is-loading .num {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--myio-muted, #9ca3af);
+}
+.myio-ho-card__value-spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(124, 58, 237, 0.2);
+  border-top-color: var(--myio-brand-700, #7c3aed);
+  border-radius: 50%;
+  animation: myio-consumption-spin 0.8s linear infinite;
+  flex-shrink: 0;
+}
+@keyframes myio-consumption-spin { to { transform: rotate(360deg); } }
+
 /* Efficiency bar */
 .myio-ho-card__eff {
   display: flex;
@@ -16527,7 +16547,20 @@ function paint(root, state6) {
   const primaryValue = formatValueByDomain(entityObject.val, entityObject.domain);
   const numSpan = root.querySelector(".myio-ho-card__value .num");
   const unitSpan = root.querySelector(".myio-ho-card__value .unit");
-  numSpan.textContent = primaryValue;
+  const valueBox = root.querySelector(".myio-ho-card__value");
+  const dataLoading = !!entityObject.dataLoading && entityObject.domain !== "temperature";
+  if (valueBox) {
+    valueBox.classList.toggle("is-loading", dataLoading);
+    if (dataLoading) valueBox.setAttribute("aria-busy", "true");
+    else valueBox.removeAttribute("aria-busy");
+  }
+  if (dataLoading) {
+    numSpan.innerHTML = '<span class="myio-ho-card__value-spinner" aria-hidden="true"></span>Carregando\u2026';
+    numSpan.title = "Carregando consumo do per\xEDodo";
+  } else {
+    numSpan.textContent = primaryValue;
+    numSpan.removeAttribute("title");
+  }
   const barContainer = root.querySelector(".bar");
   const effContainer = root.querySelector(".myio-ho-card__eff");
   if (state6.enableSelection) {
@@ -53080,6 +53113,444 @@ function escapeHtml4(text2) {
   return div.innerHTML;
 }
 
+// src/services/alarm/AlarmApiClient.ts
+var AlarmApiClient = class {
+  baseUrl = "";
+  apiKey = "";
+  configure(baseUrl, apiKey) {
+    if (baseUrl) this.baseUrl = baseUrl;
+    if (apiKey) this.apiKey = apiKey;
+  }
+  get headers() {
+    return {
+      "Content-Type": "application/json",
+      "X-API-Key": this.apiKey
+    };
+  }
+  async request(url, options) {
+    const response = await fetch(url, {
+      method: "GET",
+      headers: this.headers,
+      ...options
+    });
+    if (!response.ok) {
+      throw new Error(`Alarms API error: ${response.status} ${response.statusText}`);
+    }
+    return response.json();
+  }
+  // Some endpoints return { success: true, data: T[] } — unwrap safely
+  unwrapArray(raw) {
+    if (Array.isArray(raw)) return raw;
+    if (raw !== null && typeof raw === "object" && "data" in raw) {
+      const d = raw.data;
+      return Array.isArray(d) ? d : [];
+    }
+    return [];
+  }
+  // -----------------------------------------------------------------------
+  // Availability (existing endpoint)
+  // -----------------------------------------------------------------------
+  async getAvailability(params) {
+    const query = new URLSearchParams({
+      customerId: params.customerId,
+      startAt: params.startAt,
+      endAt: params.endAt,
+      includeByDevice: String(params.includeByDevice ?? true)
+    });
+    if (params.deviceType) query.set("deviceType", params.deviceType);
+    if (params.deviceIds) query.set("deviceIds", params.deviceIds);
+    const raw = await this.request(
+      `${this.baseUrl}/alarms/stats/availability?${query.toString()}`
+    );
+    return raw?.data ?? raw;
+  }
+  // -----------------------------------------------------------------------
+  // Alarm list (GET /alarms)
+  // -----------------------------------------------------------------------
+  async getAlarms(params = {}) {
+    const query = new URLSearchParams();
+    if (params.state?.length) query.set("state", params.state.join(","));
+    if (params.severity?.length) query.set("severity", params.severity.join(","));
+    if (params.alarmType) query.set("alarmType", params.alarmType);
+    if (params.from) query.set("from", params.from);
+    if (params.to) query.set("to", params.to);
+    if (params.customerId) query.set("customerId", params.customerId);
+    query.set("limit", String(params.limit ?? 100));
+    if (params.page && params.page > 1) query.set("page", String(params.page));
+    const qs = query.toString();
+    return this.request(
+      `${this.baseUrl}/alarms${qs ? `?${qs}` : ""}`
+    );
+  }
+  // -----------------------------------------------------------------------
+  // Stats (GET /api/v1/alarms/stats)
+  // -----------------------------------------------------------------------
+  async getAlarmStats(tenantId, period) {
+    const query = new URLSearchParams({ tenantId, period });
+    const raw = await this.request(
+      `${this.baseUrl}/alarms/stats?${query.toString()}`
+    );
+    return raw?.data ?? raw;
+  }
+  // -----------------------------------------------------------------------
+  // Trend (GET /api/v1/alarms/stats/trend)
+  // -----------------------------------------------------------------------
+  async getAlarmTrend(tenantId, period, groupBy) {
+    const query = new URLSearchParams({ tenantId, period, groupBy });
+    const raw = await this.request(
+      `${this.baseUrl}/alarms/stats/trend?${query.toString()}`
+    );
+    return this.unwrapArray(raw);
+  }
+  // -----------------------------------------------------------------------
+  // Top offenders (GET /api/v1/alarms/stats/top-offenders)
+  // -----------------------------------------------------------------------
+  async getTopOffenders(tenantId, limit = 5) {
+    const query = new URLSearchParams({ tenantId, limit: String(limit) });
+    const raw = await this.request(
+      `${this.baseUrl}/alarms/stats/top-offenders?${query.toString()}`
+    );
+    return this.unwrapArray(raw);
+  }
+  // -----------------------------------------------------------------------
+  // Per-device stats (GET /api/v1/alarms/stats/by-device)
+  // -----------------------------------------------------------------------
+  async getAlarmStatsByDevice(tenantId) {
+    const query = new URLSearchParams({ tenantId });
+    const raw = await this.request(
+      `${this.baseUrl}/alarms/stats/by-device?${query.toString()}`
+    );
+    return this.unwrapArray(raw);
+  }
+  // -----------------------------------------------------------------------
+  // Alarm history (GET /alarms/:id/history)
+  // -----------------------------------------------------------------------
+  async getAlarmHistory(id) {
+    const raw = await this.request(`${this.baseUrl}/alarms/${encodeURIComponent(id)}/history`);
+    return this.unwrapArray(raw);
+  }
+  // -----------------------------------------------------------------------
+  // Alarm actions (POST /alarms/:id/...)
+  // -----------------------------------------------------------------------
+  async acknowledgeAlarm(id, acknowledgedBy, note) {
+    await this.request(`${this.baseUrl}/alarms/${id}/ack`, {
+      method: "POST",
+      body: JSON.stringify({ acknowledgedBy, note })
+    });
+  }
+  async silenceAlarm(id, silencedBy, duration, reason) {
+    await this.request(`${this.baseUrl}/alarms/${id}/silence`, {
+      method: "POST",
+      body: JSON.stringify({ silencedBy, duration, reason })
+    });
+  }
+  async escalateAlarm(id, escalatedBy, reason) {
+    await this.request(`${this.baseUrl}/alarms/${id}/escalate`, {
+      method: "POST",
+      body: JSON.stringify({ escalatedBy, reason })
+    });
+  }
+  async closeAlarm(id, closedBy, resolution) {
+    await this.request(`${this.baseUrl}/alarms/${id}/close`, {
+      method: "POST",
+      body: JSON.stringify({ closedBy, resolution })
+    });
+  }
+  // -----------------------------------------------------------------------
+  // Batch alarm actions (POST /alarms/batch/*)
+  // Up to 100 IDs per call; response contains succeeded/failed arrays.
+  // -----------------------------------------------------------------------
+  async batchAcknowledge(alarmIds, acknowledgedBy) {
+    const res = await this.request(
+      `${this.baseUrl}/alarms/batch/ack`,
+      { method: "POST", body: JSON.stringify({ alarmIds, acknowledgedBy }) }
+    );
+    return res.data;
+  }
+  async batchSilence(alarmIds, silencedBy, duration) {
+    const res = await this.request(
+      `${this.baseUrl}/alarms/batch/silence`,
+      { method: "POST", body: JSON.stringify({ alarmIds, silencedBy, duration }) }
+    );
+    return res.data;
+  }
+  async batchEscalate(alarmIds, escalatedBy) {
+    const res = await this.request(
+      `${this.baseUrl}/alarms/batch/escalate`,
+      { method: "POST", body: JSON.stringify({ alarmIds, escalatedBy }) }
+    );
+    return res.data;
+  }
+  async batchClose(alarmIds, closedBy, resolution) {
+    const res = await this.request(
+      `${this.baseUrl}/alarms/batch/close`,
+      { method: "POST", body: JSON.stringify({ alarmIds, closedBy, resolution }) }
+    );
+    return res.data;
+  }
+};
+
+// src/services/alarm/AlarmService.ts
+function isFresh(entry, ttlMs) {
+  return !!entry && Date.now() - entry.timestamp < ttlMs;
+}
+function mapApiAlarm(api, customerMap) {
+  return {
+    id: api.id,
+    customerId: api.customerId ?? api.tenantId,
+    customerName: customerMap?.get(api.customerId ?? "") ?? "",
+    source: api.deviceName || api.deviceId,
+    severity: api.severity,
+    state: api.state,
+    title: api.title,
+    description: api.description ?? "",
+    tags: {
+      alarmType: api.alarmType,
+      deviceType: api.deviceType
+    },
+    firstOccurrence: api.raisedAt || api.raised_at || api.createdAt || void 0,
+    lastOccurrence: api.lastUpdatedAt || api.updatedAt || api.updated_at || void 0,
+    occurrenceCount: api.occurrenceCount ?? api.dispatchCount ?? 1,
+    acknowledgedAt: api.acknowledgedAt || void 0,
+    acknowledgedBy: api.acknowledgedBy,
+    snoozedUntil: api.silencedUntil || api.snoozedUntil || void 0,
+    closedAt: api.closedAt || void 0,
+    closedBy: api.closedBy,
+    closedReason: api.resolution,
+    triggerValue: api.metadata?.value,
+    centralId: api.centralId || void 0,
+    deviceId: api.deviceId || void 0
+  };
+}
+function mapApiStats(api) {
+  return {
+    total: api.total,
+    bySeverity: {
+      CRITICAL: api.bySeverity?.CRITICAL ?? 0,
+      HIGH: api.bySeverity?.HIGH ?? 0,
+      MEDIUM: api.bySeverity?.MEDIUM ?? 0,
+      LOW: api.bySeverity?.LOW ?? 0,
+      INFO: api.bySeverity?.INFO ?? 0
+    },
+    byState: {
+      OPEN: api.byState?.OPEN ?? 0,
+      ACK: api.byState?.ACK ?? 0,
+      SNOOZED: api.byState?.SNOOZED ?? 0,
+      ESCALATED: api.byState?.ESCALATED ?? 0,
+      CLOSED: api.byState?.CLOSED ?? 0
+    },
+    openCritical: api.openCritical,
+    openHigh: api.openHigh,
+    last24Hours: api.last24Hours
+  };
+}
+function mapApiTrend(apiTrend) {
+  return (apiTrend || []).map((point) => ({
+    label: point.label || point.period,
+    timestamp: point.timestamp || new Date(point.period).getTime() || 0,
+    total: point.total ?? point.count,
+    bySeverity: point.bySeverity ? {
+      CRITICAL: point.bySeverity.CRITICAL ?? 0,
+      HIGH: point.bySeverity.HIGH ?? 0,
+      MEDIUM: point.bySeverity.MEDIUM ?? 0,
+      LOW: point.bySeverity.LOW ?? 0,
+      INFO: point.bySeverity.INFO ?? 0
+    } : void 0
+  }));
+}
+function mapApiTopOffenders(items, deviceNameMap) {
+  return (items || []).map((item) => ({
+    name: deviceNameMap.get(item.deviceId) ?? item.deviceName ?? item.deviceId,
+    location: item.customerName ?? "",
+    downtime: item.downtimeHours ?? (item.totalDowntimeMinutes ?? 0) / 60,
+    percentage: 0
+    // computed by caller if needed
+  }));
+}
+var AlarmServiceClass = class {
+  client = new AlarmApiClient();
+  cacheTtlMs = 3 * 60 * 1e3;
+  // 3 min default; overridable via configure()
+  availabilityCache = /* @__PURE__ */ new Map();
+  alarmsCache = /* @__PURE__ */ new Map();
+  statsCache = /* @__PURE__ */ new Map();
+  trendCache = /* @__PURE__ */ new Map();
+  // -----------------------------------------------------------------------
+  // Availability (MTBF / MTTR per device)
+  // -----------------------------------------------------------------------
+  /**
+   * Fetches MTBF, MTTR, and Availability metrics per device and fleet-wide.
+   * Results are cached for 60 seconds.
+   */
+  async getAvailability(customerId, startAt, endAt) {
+    if (!customerId) {
+      throw new Error("AlarmService.getAvailability: customerId is required");
+    }
+    const cacheKey = `avail:${customerId}:${startAt}:${endAt}`;
+    const cached = this.availabilityCache.get(cacheKey);
+    if (isFresh(cached, this.cacheTtlMs)) return cached.data;
+    const data = await this.client.getAvailability({
+      customerId,
+      startAt,
+      endAt,
+      includeByDevice: true
+    });
+    this.availabilityCache.set(cacheKey, { data, timestamp: Date.now() });
+    return data;
+  }
+  // -----------------------------------------------------------------------
+  // Alarm list
+  // -----------------------------------------------------------------------
+  /**
+   * Fetch alarm list with optional filters, auto-paginating until hasMore is false.
+   * Returns { data: Alarm[], summary: AlarmListSummary } with all pages merged.
+   * The summary comes from page 1 (reflects full dataset totals).
+   */
+  async getAlarms(params = {}, customerMap) {
+    const cacheKey = `alarms:${JSON.stringify(params)}`;
+    const cached = this.alarmsCache.get(cacheKey);
+    if (isFresh(cached, this.cacheTtlMs)) return cached.data;
+    let allData = [];
+    let summary;
+    let totalPages = 1;
+    let page = 1;
+    while (page <= totalPages) {
+      const response = await this.client.getAlarms({ ...params, page });
+      const pageData = (response.data || []).map((a) => mapApiAlarm(a, customerMap));
+      allData = allData.concat(pageData);
+      if (page === 1) {
+        summary = response.summary;
+        totalPages = response.pagination?.totalPages ?? 1;
+      }
+      page++;
+    }
+    const result = { data: allData, summary };
+    this.alarmsCache.set(cacheKey, { data: result, timestamp: Date.now() });
+    return result;
+  }
+  // -----------------------------------------------------------------------
+  // Alarm statistics
+  // -----------------------------------------------------------------------
+  /**
+   * Fetch aggregated alarm statistics for a tenant and time period.
+   * Returns mapped AlarmStats (from src/types/alarm.ts).
+   */
+  async getAlarmStats(tenantId, period) {
+    const cacheKey = `stats:${tenantId}:${period}`;
+    const cached = this.statsCache.get(cacheKey);
+    if (isFresh(cached, this.cacheTtlMs)) return cached.data;
+    const raw = await this.client.getAlarmStats(tenantId, period);
+    const data = mapApiStats(raw);
+    this.statsCache.set(cacheKey, { data, timestamp: Date.now() });
+    return data;
+  }
+  // -----------------------------------------------------------------------
+  // Alarm trend
+  // -----------------------------------------------------------------------
+  /**
+   * Fetch alarm trend data points.
+   * Returns mapped AlarmTrendDataPoint[] (from src/types/alarm.ts).
+   */
+  async getAlarmTrend(tenantId, period, groupBy) {
+    const cacheKey = `trend:${tenantId}:${period}:${groupBy}`;
+    const cached = this.trendCache.get(cacheKey);
+    if (isFresh(cached, this.cacheTtlMs)) return cached.data;
+    const raw = await this.client.getAlarmTrend(tenantId, period, groupBy);
+    const data = mapApiTrend(raw);
+    this.trendCache.set(cacheKey, { data, timestamp: Date.now() });
+    return data;
+  }
+  // -----------------------------------------------------------------------
+  // Top downtime / offenders
+  // -----------------------------------------------------------------------
+  /**
+   * Fetch top devices by alarm count / downtime.
+   * Returns mapped DowntimeEntry[] (from src/types/operational.ts).
+   *
+   * @param deviceNameMap - Optional map of deviceId → friendly name from ThingsBoard cache
+   */
+  async getTopDowntime(tenantId, deviceNameMap = /* @__PURE__ */ new Map(), limit = 5) {
+    const items = await this.client.getTopOffenders(tenantId, limit);
+    return mapApiTopOffenders(items, deviceNameMap);
+  }
+  // -----------------------------------------------------------------------
+  // Per-device alarm counts
+  // -----------------------------------------------------------------------
+  /**
+   * Fetch alarm counts per device.
+   * Returns a Map<deviceId, alarmCount>.
+   */
+  async getDeviceAlarmCounts(tenantId) {
+    const items = await this.client.getAlarmStatsByDevice(tenantId);
+    const map = /* @__PURE__ */ new Map();
+    (items || []).forEach((item) => map.set(item.deviceId, item.alarmCount));
+    return map;
+  }
+  /**
+   * Histórico de transições do alarme (abertura/reabertura/fechamento/ack…).
+   * Falha de rede/API devolve [] — o detalhe do alarme degrada para só a abertura.
+   */
+  async getAlarmHistory(id) {
+    try {
+      return await this.client.getAlarmHistory(id);
+    } catch {
+      return [];
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Alarm actions
+  // -----------------------------------------------------------------------
+  async acknowledgeAlarm(id, userEmail, note) {
+    return this.client.acknowledgeAlarm(id, userEmail, note);
+  }
+  async silenceAlarm(id, userEmail, duration, reason) {
+    return this.client.silenceAlarm(id, userEmail, duration, reason);
+  }
+  async escalateAlarm(id, userEmail, reason) {
+    return this.client.escalateAlarm(id, userEmail, reason);
+  }
+  async closeAlarm(id, userEmail, resolution) {
+    return this.client.closeAlarm(id, userEmail, resolution);
+  }
+  // -----------------------------------------------------------------------
+  // Batch alarm actions (POST /alarms/batch/*)
+  // -----------------------------------------------------------------------
+  async batchAcknowledge(alarmIds, userEmail) {
+    return this.client.batchAcknowledge(alarmIds, userEmail);
+  }
+  async batchSilence(alarmIds, userEmail, duration) {
+    return this.client.batchSilence(alarmIds, userEmail, duration);
+  }
+  async batchEscalate(alarmIds, userEmail) {
+    return this.client.batchEscalate(alarmIds, userEmail);
+  }
+  async batchClose(alarmIds, userEmail, resolution) {
+    return this.client.batchClose(alarmIds, userEmail, resolution);
+  }
+  // -----------------------------------------------------------------------
+  // Configuration
+  // -----------------------------------------------------------------------
+  /**
+   * Set the Alarms API base URL (e.g. from MAIN_VIEW orchestrator settings).
+   * Clears the cache so subsequent calls use the new endpoint.
+   */
+  configure(baseUrl, cacheTtlMs, apiKey) {
+    this.client.configure(baseUrl ?? "", apiKey);
+    if (cacheTtlMs && cacheTtlMs > 0) this.cacheTtlMs = cacheTtlMs;
+    this.clearCache();
+  }
+  // -----------------------------------------------------------------------
+  // Cache management
+  // -----------------------------------------------------------------------
+  clearCache() {
+    this.availabilityCache.clear();
+    this.alarmsCache.clear();
+    this.statsCache.clear();
+    this.trendCache.clear();
+  }
+};
+var AlarmService = new AlarmServiceClass();
+
 // src/components/AlarmsNotificationsPanel/AlarmDetailsModal.ts
 function fmt(isoString) {
   if (!isoString) return "-";
@@ -53109,112 +53580,155 @@ function escHtml2(s) {
   if (s == null) return "";
   return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
-function seededRand(seed) {
-  let s = (seed ^ 3735928559) >>> 0;
-  return () => {
-    s = Math.imul(s ^ s >>> 16, 73244475);
-    s = Math.imul(s ^ s >>> 16, 73244475);
-    s = (s ^ s >>> 16) >>> 0;
-    return s / 4294967295;
+var EVENT_LABEL = {
+  raised: "Abertura",
+  reopened: "Reabertura",
+  closed: "Fechamento",
+  acknowledged: "Reconhecido",
+  silenced: "Adiado",
+  escalated: "Escalado",
+  other: "Atualiza\xE7\xE3o"
+};
+function classifyHistoryEvent(ev) {
+  const action = String(ev.action || "").toUpperCase();
+  const next = String(ev.newState || "").toUpperCase();
+  const prev = String(ev.previousState || "").toUpperCase();
+  if (next === "OPEN") return prev && prev !== "OPEN" ? prev === "CLOSED" ? "reopened" : "other" : "raised";
+  if (next === "CLOSED" || /CLOSE/.test(action)) return "closed";
+  if (next === "ACK" || next === "ACKNOWLEDGED" || /ACK/.test(action)) return "acknowledged";
+  if (next === "SNOOZED" || next === "SILENCED" || /SILENC|SNOOZ/.test(action)) return "silenced";
+  if (next === "ESCALATED" || /ESCALAT/.test(action)) return "escalated";
+  if (/CREAT|RAISE/.test(action)) return "raised";
+  return "other";
+}
+async function loadAlarmEvents(alarm) {
+  const ids = alarm._groupAlarmIds?.length ? alarm._groupAlarmIds : [alarm.id];
+  const aso = window.AlarmServiceOrchestrator?.alarms || [];
+  const byId = new Map(aso.map((a) => [a?.id, a]));
+  const single = ids.length === 1;
+  const events = [];
+  await Promise.all(
+    ids.slice(0, 50).map(async (id) => {
+      const raw = byId.get(id);
+      const device = raw?.deviceName || alarm.source || "";
+      const title = raw?.title || alarm.title;
+      const raisedMs = new Date(raw?.raisedAt || (single ? alarm.firstOccurrence : "") || "").getTime();
+      const hasRaise = Number.isFinite(raisedMs) && raisedMs > 0;
+      if (hasRaise) events.push({ ts: raisedMs, kind: "raised", alarmId: id, device, title, occurrence: true });
+      const hist = await AlarmService.getAlarmHistory(id);
+      for (const ev of hist) {
+        const ts = new Date(ev.timestamp).getTime();
+        if (!Number.isFinite(ts)) continue;
+        const kind = classifyHistoryEvent(ev);
+        if (kind === "raised" && hasRaise && Math.abs(ts - raisedMs) < 6e4) continue;
+        events.push({
+          ts,
+          kind,
+          alarmId: id,
+          device,
+          title,
+          actor: ev.actor,
+          occurrence: kind === "raised" || kind === "reopened"
+        });
+      }
+    })
+  );
+  if (!events.some((e) => e.occurrence)) {
+    const ms = new Date(alarm.firstOccurrence).getTime();
+    if (Number.isFinite(ms) && ms > 0) {
+      events.push({ ts: ms, kind: "raised", alarmId: alarm.id, device: alarm.source, title: alarm.title, occurrence: true });
+    }
+  }
+  return events.sort((a, b) => a.ts - b.ts);
+}
+function bucketEvents(occ, devices, period, fromMs, toMs) {
+  const start = new Date(fromMs);
+  if (period === "hora") start.setMinutes(0, 0, 0);
+  else start.setHours(0, 0, 0, 0);
+  if (period === "semana") start.setDate(start.getDate() - start.getDay());
+  if (period === "mes") start.setDate(1);
+  const keys = [];
+  const cursor = new Date(start);
+  while (cursor.getTime() <= toMs && keys.length < 5e3) {
+    keys.push(cursor.getTime());
+    if (period === "hora") cursor.setHours(cursor.getHours() + 1);
+    else if (period === "dia") cursor.setDate(cursor.getDate() + 1);
+    else if (period === "semana") cursor.setDate(cursor.getDate() + 7);
+    else cursor.setMonth(cursor.getMonth() + 1);
+  }
+  const maxBuckets = period === "hora" ? 72 : period === "dia" ? 92 : period === "semana" ? 104 : 36;
+  const ks = keys.slice(-maxBuckets);
+  const months = ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"];
+  const dm = (d) => `${String(d.getDate()).padStart(2, "0")}/${String(d.getMonth() + 1).padStart(2, "0")}`;
+  const label = (ms) => {
+    const d = new Date(ms);
+    if (period === "hora") return `${dm(d)} ${String(d.getHours()).padStart(2, "0")}h`;
+    if (period === "mes") return `${months[d.getMonth()]}/${String(d.getFullYear()).slice(2)}`;
+    return dm(d);
   };
+  const buckets = ks.map((k) => ({ label: label(k), total: 0, byDevice: {} }));
+  for (const e of occ) {
+    let idx = -1;
+    for (let i = ks.length - 1; i >= 0; i--) {
+      if (ks[i] <= e.ts) {
+        idx = i;
+        break;
+      }
+    }
+    if (idx < 0) continue;
+    buckets[idx].total++;
+    const dev = devices.includes(e.device) ? e.device : devices[0] ?? e.device;
+    buckets[idx].byDevice[dev] = (buckets[idx].byDevice[dev] || 0) + 1;
+  }
+  return buckets;
 }
-function hashStr(s) {
-  let h3 = 0;
-  for (let i = 0; i < s.length; i++) h3 = Math.imul(31, h3) + s.charCodeAt(i) | 0;
-  return Math.abs(h3);
+function dowFromEvents(occ) {
+  const v = new Array(7).fill(0);
+  occ.forEach((e) => v[new Date(e.ts).getDay()]++);
+  return v;
 }
-function generateBuckets(alarm, devices, period = "mes") {
-  const count = alarm.occurrenceCount || 1;
-  let firstMs = new Date(alarm.firstOccurrence).getTime();
-  let lastMs = new Date(alarm.lastOccurrence).getTime();
-  if (isNaN(firstMs) || isNaN(lastMs) || firstMs <= 0 || lastMs <= 0) {
-    lastMs = Date.now();
-    firstMs = lastMs - 7 * 864e5;
-  }
-  const durMs = Math.max(lastMs - firstMs, 36e5);
-  let numBuckets;
-  let bucketMs;
-  let labelFn;
-  const nowMs = Date.now();
-  if (period === "hora") {
-    bucketMs = 36e5;
-    numBuckets = Math.max(2, Math.min(24, Math.ceil(durMs / bucketMs)));
-    labelFn = (ms) => `${String(new Date(ms).getHours()).padStart(2, "0")}h`;
-  } else if (period === "dia") {
-    bucketMs = 864e5;
-    numBuckets = Math.max(1, Math.min(31, Math.ceil(durMs / bucketMs)));
-    labelFn = (ms) => {
-      const d = new Date(ms);
-      return `${String(d.getDate()).padStart(2, "0")}/${String(d.getMonth() + 1).padStart(2, "0")}`;
-    };
-  } else if (period === "semana") {
-    bucketMs = 7 * 864e5;
-    numBuckets = Math.max(1, Math.min(26, Math.ceil(durMs / bucketMs)));
-    labelFn = (ms) => {
-      const d = new Date(ms);
-      return `${String(d.getDate()).padStart(2, "0")}/${String(d.getMonth() + 1).padStart(2, "0")}`;
-    };
-  } else {
-    bucketMs = 30 * 864e5;
-    numBuckets = Math.max(1, Math.min(24, Math.ceil(durMs / bucketMs)));
-    const months = ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"];
-    labelFn = (ms) => months[new Date(ms).getMonth()];
-  }
-  while (numBuckets > 1 && firstMs + (numBuckets - 1) * bucketMs > nowMs) numBuckets--;
-  const seed = hashStr(alarm.id + period);
-  const rand = seededRand(seed);
-  const weights = Array.from({ length: numBuckets }, (_, i) => {
-    const center = (numBuckets - 1) / 2;
-    const bell = 1 - 0.45 * Math.abs(i - center) / (center || 1);
-    return Math.max(0.1, bell * (0.6 + rand() * 0.8));
-  });
-  const wSum = weights.reduce((a, b) => a + b, 0);
-  const totals = new Array(numBuckets).fill(0);
-  let remaining = count;
-  for (let i = 0; i < numBuckets - 1; i++) {
-    const v = Math.round(weights[i] / wSum * count);
-    totals[i] = Math.min(v, remaining);
-    remaining -= totals[i];
-  }
-  totals[numBuckets - 1] = Math.max(0, remaining);
-  return Array.from({ length: numBuckets }, (_, i) => {
-    const ts = firstMs + i * bucketMs;
-    const total = totals[i];
-    const byDevice = {};
-    if (devices.length === 1) {
-      byDevice[devices[0]] = total;
-    } else {
-      let rem = total;
-      for (let d = 0; d < devices.length - 1; d++) {
-        const share = Math.round(rand() * rem * (1 / (devices.length - d)));
-        byDevice[devices[d]] = share;
-        rem -= share;
+function hodFromEvents(occ) {
+  const v = new Array(24).fill(0);
+  occ.forEach((e) => v[new Date(e.ts).getHours()]++);
+  return v;
+}
+function resolveDeviceIdentity(alarm, src) {
+  const orch = window.MyIOOrchestrator;
+  const nameToLabel = orch?.entityNameToLabelMap;
+  const gcdrToLabel = orch?.gcdrDeviceNameMap;
+  let label = null;
+  if (alarm.deviceId && parseDevices(alarm.source).length <= 1) label = gcdrToLabel?.get?.(alarm.deviceId) || null;
+  if (!label && nameToLabel?.has?.(src)) label = nameToLabel.get(src) || null;
+  if (!label) label = src;
+  let name = nameToLabel?.has?.(src) ? src : null;
+  if (!name && nameToLabel) {
+    for (const [n, l] of nameToLabel) {
+      if (l === label) {
+        name = n;
+        break;
       }
-      byDevice[devices[devices.length - 1]] = Math.max(0, rem);
     }
-    return { label: labelFn(ts), total, byDevice };
-  });
+  }
+  return { label, name: name && name !== label ? name : null };
 }
-function generateDowDistribution(alarm) {
-  const count = alarm.occurrenceCount || 1;
-  const rand = seededRand(hashStr(alarm.id + "dow"));
-  const weights = [0.2, 1, 0.95, 0.9, 0.85, 0.8, 0.3];
-  const wSum = weights.reduce((a, b) => a + b, 0);
-  const vals = weights.map((w) => Math.round(w / wSum * count * (0.7 + rand() * 0.6)));
-  return vals;
+function resolveDeviceLabel(alarm, src) {
+  return resolveDeviceIdentity(alarm, src).label;
 }
-function generateHodDistribution(alarm) {
-  const count = alarm.occurrenceCount || 1;
-  const rand = seededRand(hashStr(alarm.id + "hod"));
-  const weights = Array.from({ length: 24 }, (_, h3) => {
-    if (h3 < 6) return 0.05 + rand() * 0.05;
-    if (h3 < 10) return 0.3 + rand() * 0.3;
-    if (h3 <= 19) return 0.7 + rand() * 0.6;
-    if (h3 <= 22) return 0.3 + rand() * 0.3;
-    return 0.05 + rand() * 0.05;
-  });
-  const wSum = weights.reduce((a, b) => a + b, 0);
-  return weights.map((w) => Math.max(0, Math.round(w / wSum * count)));
+function brandColor(fallback = "#7c3aed") {
+  const theme = window.MyIOUtils?.theme;
+  const vars = typeof theme?.cssVars === "function" ? theme.cssVars() : theme;
+  const c = vars?.["--myio-brand-700"];
+  return typeof c === "string" && /^#[0-9a-f]{6}$/i.test(c.trim()) ? c.trim() : fallback;
+}
+var COPY_SVG = '<svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>';
+function deviceIdentityHtml(alarm, src) {
+  const { label, name } = resolveDeviceIdentity(alarm, src);
+  const copyValue = name || src;
+  return `<span class="adm-dev-id">
+      <span class="adm-dev-label">${escHtml2(label)}</span>
+      ${name ? `<span class="adm-dev-name">${escHtml2(name)}</span>` : ""}
+      <button type="button" class="adm-copy-btn" data-copy="${escHtml2(copyValue)}" title="Copiar nome do dispositivo">${COPY_SVG}</button>
+    </span>`;
 }
 var DEV_COLORS = [
   "#7c3aed",
@@ -53304,8 +53818,8 @@ function createDowChart(canvas, vals) {
       datasets: [{
         label: "Ocorr\xEAncias",
         data: vals,
-        backgroundColor: "#8b5cf6bb",
-        borderColor: "#7c3aed",
+        backgroundColor: brandColor("#8b5cf6") + "bb",
+        borderColor: brandColor(),
         borderWidth: 1,
         borderRadius: 3
       }]
@@ -53347,8 +53861,8 @@ function createHodChart(canvas, vals) {
       datasets: [{
         label: "Ocorr\xEAncias",
         data: vals,
-        backgroundColor: "#3b82f6bb",
-        borderColor: "#2563eb",
+        backgroundColor: brandColor("#3b82f6") + "bb",
+        borderColor: brandColor("#2563eb"),
         borderWidth: 1,
         borderRadius: 2
       }]
@@ -53409,12 +53923,12 @@ var HIDE_ANNOTATIONS_TAB = true;
 function openAlarmDetailsModal(alarm, themeMode = "light", groupMode, onAction) {
   const sev = SEVERITY_CONFIG[alarm.severity];
   const st = STATE_CONFIG[alarm.state];
-  const count = alarm.occurrenceCount || 1;
   const firstMs = new Date(alarm.firstOccurrence).getTime();
   const lastMs = new Date(alarm.lastOccurrence).getTime();
-  const durMs = isNaN(firstMs) || isNaN(lastMs) ? 0 : Math.max(0, lastMs - firstMs);
-  const durLabel = durationLabel(durMs);
-  const avgFreq = count > 1 ? durationLabel(durMs / (count - 1)) + " entre ocorr\xEAncias" : "Evento \xFAnico";
+  const isClosedState = alarm.state === "CLOSED";
+  const closedMs = alarm.closedAt ? new Date(alarm.closedAt).getTime() : NaN;
+  const ageMs = isNaN(firstMs) ? NaN : isClosedState ? (Number.isFinite(closedMs) ? closedMs : lastMs) - firstMs : Date.now() - firstMs;
+  const ageKpiLabel = isClosedState ? "Dura\xE7\xE3o" : "Aberto h\xE1";
   const devices = parseDevices(alarm.source);
   const deviceCount = devices.length;
   const row = (label, value) => value ? `<div class="adm-row"><span class="adm-row-label">${label}</span><span class="adm-row-value">${escHtml2(value)}</span></div>` : "";
@@ -53423,48 +53937,30 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode, onAction)
       <div class="adm-device-row">
         <span class="adm-device-row-index">${i + 1}</span>
         <div class="adm-device-icon-sm">
-          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#7c3aed" stroke-width="2">
+          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2">
             <rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>
           </svg>
         </div>
-        <span class="adm-device-row-name">${escHtml2(dev)}</span>
+        <span class="adm-device-row-name">${deviceIdentityHtml(alarm, dev)}</span>
         <span class="adm-device-row-sub">${escHtml2(alarm.customerName || "-")}</span>
       </div>`
   ).join("");
-  const initialPeriod = durMs < 864e5 ? "hora" : durMs < 7 * 864e5 ? "dia" : durMs < 30 * 864e5 ? "semana" : "mes";
-  const dowVals = generateDowDistribution(alarm);
-  const hodVals = generateHodDistribution(alarm);
+  const spanMs = Number.isFinite(ageMs) ? ageMs : 0;
+  const initialPeriod = spanMs < 3 * 864e5 ? "hora" : spanMs < 45 * 864e5 ? "dia" : spanMs < 180 * 864e5 ? "semana" : "mes";
   const chartSingleColor = sev.text || "#7c3aed";
+  let events = null;
+  const occEvents = () => (events || []).filter((e) => e.occurrence);
+  const onEventsReady = [];
   const annotCount = getActiveAnnotationCount(alarm.id);
-  const sourceDisplay = deviceCount > 1 ? `${deviceCount} dispositivos` : escHtml2(alarm.source);
+  const sourceDisplay = deviceCount > 1 ? `${deviceCount} dispositivos` : escHtml2(resolveDeviceLabel(alarm, alarm.source) || alarm.source);
   const overlay = document.createElement("div");
   overlay.className = "adm-overlay";
   overlay.setAttribute("data-theme", themeMode);
   overlay.innerHTML = `
     <div class="adm-drawer" role="dialog" aria-modal="true" aria-label="Detalhes do alarme">
 
-      <!-- \u2500\u2500 Header \u2500\u2500 -->
+      <!-- \u2500\u2500 Header (t\xEDtulo/maximizar/fechar v\xEAm da moldura padr\xE3o; aqui s\xF3 os badges) \u2500\u2500 -->
       <div class="adm-header">
-        <div class="adm-header-top">
-          <div class="adm-title" title="${escHtml2(alarm.title)}">${escHtml2(alarm.title)}</div>
-          <div class="adm-header-actions">
-            <button class="adm-header-btn" id="admMaximize" title="Maximizar">
-              <svg class="adm-icon-expand" viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/>
-                <line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/>
-              </svg>
-              <svg class="adm-icon-compress" viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none">
-                <polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/>
-                <line x1="10" y1="14" x2="3" y2="21"/><line x1="21" y1="3" x2="14" y2="10"/>
-              </svg>
-            </button>
-            <button class="adm-header-btn adm-close" id="admClose" title="Fechar (Esc)">
-              <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5">
-                <path d="M18 6L6 18M6 6l12 12"/>
-              </svg>
-            </button>
-          </div>
-        </div>
         <div class="adm-badges">
           <span class="adm-badge-severity" style="background:${sev.bg};color:${sev.text}">${sev.icon} ${sev.label}</span>
           <span class="adm-badge-state" style="color:${st.color}">${st.label}</span>
@@ -53480,7 +53976,7 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode, onAction)
         </button>
         <button class="adm-tab" data-panel="timeline">
           <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="4.22" y1="4.22" x2="7.05" y2="7.05"/><line x1="16.95" y1="16.95" x2="19.78" y2="19.78"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/><line x1="4.22" y1="19.78" x2="7.05" y2="16.95"/><line x1="16.95" y1="7.05" x2="19.78" y2="4.22"/></svg>
-          Timeline <span class="adm-tab-badge">${count}</span>
+          Timeline <span class="adm-tab-badge" id="admTlTabBadge">\u2026</span>
         </button>
         <button class="adm-tab" data-panel="dispositivos">
           <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor"><path d="M20 3H4a1 1 0 00-1 1v12a1 1 0 001 1h8v2H8v2h8v-2h-4v-2h8a1 1 0 001-1V4a1 1 0 00-1-1zm-1 12H5V5h14v10z"/></svg>
@@ -53502,17 +53998,17 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode, onAction)
         <!-- RESUMO -->
         <div class="adm-panel is-active" data-panel="resumo">
           ${groupMode !== "separado" ? `<div class="adm-kpi-grid">
-            <div class="adm-kpi">
-              <div class="adm-kpi-value" style="color:${sev.text}">${count}</div>
+            <div class="adm-kpi" title="Abertura + reaberturas registradas no hist\xF3rico do alarme">
+              <div class="adm-kpi-value" id="admKpiOcc" style="color:${sev.text}">\u2026</div>
               <div class="adm-kpi-label">Ocorr\xEAncias</div>
             </div>
             <div class="adm-kpi">
               <div class="adm-kpi-value">${deviceCount}</div>
               <div class="adm-kpi-label">Dispositivos</div>
             </div>
-            <div class="adm-kpi">
-              <div class="adm-kpi-value">${durLabel}</div>
-              <div class="adm-kpi-label">Dura\xE7\xE3o</div>
+            <div class="adm-kpi" title="${isClosedState ? "Da abertura ao fechamento" : "Desde a abertura do alarme at\xE9 agora"}">
+              <div class="adm-kpi-value">${Number.isFinite(ageMs) ? durationLabel(ageMs) : "-"}</div>
+              <div class="adm-kpi-label">${ageKpiLabel}</div>
             </div>
           </div>` : ""}
 
@@ -53529,15 +54025,16 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode, onAction)
           <div class="adm-section">
             <div class="adm-section-title">Identifica\xE7\xE3o</div>
             ${row("Shopping", alarm.customerName)}
-            ${row("Dispositivo(s)", alarm.source)}
+            ${devices.length ? `<div class="adm-row"><span class="adm-row-label">Dispositivo(s)</span><span class="adm-row-value adm-row-value--devices">${devices.map((d) => deviceIdentityHtml(alarm, d)).join("")}</span></div>` : ""}
             ${alarm.triggerValue != null ? row("Valor do disparo", String(alarm.triggerValue)) : ""}
             ${groupMode === "separado" ? row("ID", alarm.id) : ""}
           </div>
 
           <div class="adm-section">
             <div class="adm-section-title">Datas</div>
-            ${row("Primeira ocorr\xEAncia", fmt(alarm.firstOccurrence))}
-            ${row("\xDAltima ocorr\xEAncia", fmt(alarm.lastOccurrence))}
+            ${row("Aberto em", fmt(alarm.firstOccurrence))}
+            <div id="admReopenRows"></div>
+            ${row("\xDAltima atualiza\xE7\xE3o", fmt(alarm.lastOccurrence))}
             ${alarm.acknowledgedAt ? row("Reconhecido em", fmt(alarm.acknowledgedAt)) : ""}
             ${alarm.acknowledgedBy ? row("Reconhecido por", alarm.acknowledgedBy) : ""}
             ${alarm.snoozedUntil ? row("Adiado at\xE9", fmt(alarm.snoozedUntil)) : ""}
@@ -53562,7 +54059,7 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode, onAction)
             <div class="adm-section-title">IDs de Alarme (${alarm._groupAlarmIds.length})</div>
             <div class="adm-alarm-ids-list" style="display:flex;flex-wrap:wrap;gap:6px;">
               ${alarm._groupAlarmIds.map(
-    (rawId) => `<span class="adm-alarm-id-chip" title="Clique para copiar" data-copy-id="${escHtml2(rawId)}" style="display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border:1px solid rgba(124,58,237,0.25);background:rgba(124,58,237,0.08);border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#4c1d95;cursor:pointer;user-select:all;">${escHtml2(rawId)}</span>`
+    (rawId) => `<span class="adm-alarm-id-chip" title="Clique para copiar" data-copy-id="${escHtml2(rawId)}" style="display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border:1px solid color-mix(in srgb, var(--myio-brand-700, #7c3aed) 25%, transparent);background:color-mix(in srgb, var(--myio-brand-700, #7c3aed) 8%, transparent);border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--myio-brand-700, #4c1d95);cursor:pointer;user-select:all;">${escHtml2(rawId)}</span>`
   ).join("")}
             </div>
           </div>` : ""}
@@ -53584,7 +54081,7 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode, onAction)
         <div class="adm-panel" data-panel="timeline">
           <div class="adm-tl-header" id="admTlHeader">
             <div class="adm-tl-toolbar">
-              <span class="adm-tl-summary" id="admTlSummary">${count} ocorr\xEAncia${count !== 1 ? "s" : ""}</span>
+              <span class="adm-tl-summary" id="admTlSummary">Carregando hist\xF3rico\u2026</span>
               <button class="adm-tl-batch-toggle" id="admTlBatchToggle" title="A\xE7\xF5es em lote">
                 <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="4" height="4" rx="1"/><path d="M10 7h11"/><rect x="3" y="12" width="4" height="4" rx="1"/><path d="M10 14h11"/><rect x="3" y="19" width="4" height="4" rx="1"/><path d="M10 21h11"/></svg>
                 A\xE7\xE3o em lote
@@ -53610,7 +54107,7 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode, onAction)
             <label class="adm-report-label">De</label>
             <input type="date" class="adm-report-date-input" id="admRptStart" value="${fmtDateInput(firstMs)}">
             <label class="adm-report-label">At\xE9</label>
-            <input type="date" class="adm-report-date-input" id="admRptEnd" value="${fmtDateInput(lastMs)}">
+            <input type="date" class="adm-report-date-input" id="admRptEnd" value="${fmtDateInput(Date.now())}">
             <button class="adm-report-emit-btn" id="admRptEmit">
               <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>
               Carregar
@@ -53661,7 +54158,8 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode, onAction)
           </div>
 
           <div class="adm-section">
-            <div class="adm-section-title">Tend\xEAncia de ocorr\xEAncias no per\xEDodo</div>
+            <div class="adm-section-title">Ocorr\xEAncias no per\xEDodo</div>
+            <div class="adm-chart-note" id="admChartNote">Carregando hist\xF3rico\u2026</div>
             <div class="adm-chart-wrapper">
               <canvas id="admMainChart" class="adm-chart-canvas"></canvas>
             </div>
@@ -53719,21 +54217,45 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode, onAction)
     let activeChartType = "bar";
     let activeVizMode = "total";
     let activePeriod = initialPeriod;
+    const noteEl = graficoPanel.querySelector("#admChartNote");
+    const updateNote = () => {
+      if (!noteEl) return;
+      if (!events) {
+        noteEl.textContent = "Carregando hist\xF3rico\u2026";
+        return;
+      }
+      const n = occEvents().length;
+      noteEl.textContent = `${n} ocorr\xEAncia${n !== 1 ? "s" : ""} registrada${n !== 1 ? "s" : ""} (abertura + reaberturas do hist\xF3rico do alarme).` + (n < 3 ? " Poucos eventos para indicar tend\xEAncia." : "");
+    };
     const buildMain = () => {
-      const nb = generateBuckets(alarm, devices, activePeriod);
+      updateNote();
+      if (!events) return;
       const canvas = graficoPanel.querySelector("#admMainChart");
       if (!canvas) return;
+      const occ = occEvents();
+      const fromMs = occ.length ? occ[0].ts : Number.isFinite(firstMs) ? firstMs : Date.now();
+      const nb = bucketEvents(occ, devices, activePeriod, fromMs, Date.now());
       if (chartInstances[0]) {
         chartInstances[0].destroy();
         chartInstances[0] = null;
       }
       chartInstances[0] = createMainChart(canvas, nb, devices, activeChartType, activeVizMode, chartSingleColor);
     };
-    const initSecondary = () => {
+    const buildSecondary = () => {
+      if (!events) return;
+      const occ = occEvents();
       const dowCanvas = graficoPanel.querySelector("#admDowChart");
-      if (dowCanvas && !chartInstances[1]) chartInstances[1] = createDowChart(dowCanvas, dowVals);
+      if (chartInstances[1]) {
+        chartInstances[1].destroy();
+        chartInstances[1] = null;
+      }
+      if (dowCanvas) chartInstances[1] = createDowChart(dowCanvas, dowFromEvents(occ));
       const hodCanvas = graficoPanel.querySelector("#admHodChart");
-      if (hodCanvas && !chartInstances[2]) chartInstances[2] = createHodChart(hodCanvas, hodVals);
+      if (chartInstances[2]) {
+        chartInstances[2].destroy();
+        chartInstances[2] = null;
+      }
+      if (hodCanvas) chartInstances[2] = createHodChart(hodCanvas, hodFromEvents(occ));
     };
     graficoPanel.querySelectorAll("button[data-chart-type]").forEach((btn) => {
       btn.addEventListener("click", () => {
@@ -53759,11 +54281,16 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode, onAction)
         buildMain();
       });
     });
+    const renderCharts = () => {
+      buildMain();
+      buildSecondary();
+    };
     overlay.querySelectorAll('.adm-tab[data-panel="grafico"]').forEach((tabBtn) => {
-      tabBtn.addEventListener("click", () => setTimeout(() => {
-        buildMain();
-        initSecondary();
-      }, 30));
+      tabBtn.addEventListener("click", () => setTimeout(renderCharts, 30));
+    });
+    onEventsReady.push(() => {
+      if (graficoPanel.classList.contains("is-active")) renderCharts();
+      else updateNote();
     });
   }
   const rptPanel = overlay.querySelector('.adm-panel[data-panel="timeline"]');
@@ -53779,159 +54306,126 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode, onAction)
     const _svgAck = `<svg viewBox="0 0 24 24" width="11" height="11" fill="currentColor" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>`;
     const _svgSnooze = `<svg viewBox="0 0 24 24" width="11" height="11" fill="currentColor" aria-hidden="true"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"/></svg>`;
     const _svgEscalate = `<svg viewBox="0 0 24 24" width="11" height="11" fill="currentColor" aria-hidden="true"><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>`;
-    const buildOccurrenceSection = (occFirst, occLast) => {
-      const intervalMs = count > 1 ? (occLast - occFirst) / (count - 1) : 0;
-      const trigStr = alarm.triggerValue != null ? String(alarm.triggerValue) : null;
-      const hasTrigger = trigStr != null;
+    const buildOccurrenceSection = (startMs, endMs) => {
+      if (!events) {
+        return { html: '<div class="adm-report-empty-hint">Carregando hist\xF3rico do alarme\u2026</div>', csvRows: [] };
+      }
       const showDevice = !isSeparado && devices.length > 0;
+      const showAlarm = groupMode === "porDispositivo" && (alarm._groupAlarmIds?.length || 0) > 1;
       const isActive = alarm.state === "OPEN" || alarm.state === "ESCALATED";
       const isClosed = alarm.state === "CLOSED";
-      const idxStyle = (isSingle, isLatest, isFirst) => {
-        if (isSingle) return "color:#7c3aed;font-weight:700";
-        if (isLatest) return "color:#3b82f6;font-weight:700";
-        if (isFirst) return "color:#ef4444;font-weight:700";
-        return "";
-      };
-      const csvHeader = ["#", "Data/Hora"];
-      if (showDevice) csvHeader.push("Dispositivo");
-      if (hasTrigger) csvHeader.push("Trigger");
+      const occIndex = /* @__PURE__ */ new Map();
+      occEvents().forEach((e, i) => occIndex.set(e, i + 1));
+      const inRange = events.filter((e) => e.ts >= startMs && e.ts <= endMs).sort((a, b) => b.ts - a.ts || (occIndex.get(b) || 0) - (occIndex.get(a) || 0));
+      const csvHeader = ["#", "Data/Hora", "Evento"];
+      if (showAlarm) csvHeader.push("Alarme");
+      if (showDevice) csvHeader.push("Dispositivo", "Name (TB)");
+      csvHeader.push("Por");
       const rows = [csvHeader];
-      const tableRows = [];
-      if (groupMode === "porDispositivo" && alarm._alarmTypeGroups?.length) {
-        const groups = alarm._alarmTypeGroups;
-        const groupHtml = groups.map((grp, gi) => {
-          const gCount = grp.occurrenceCount || 1;
-          const gFirstMs = new Date(grp.firstOccurrence).getTime();
-          const gLastMs = new Date(grp.lastOccurrence).getTime();
-          const gInterval = gCount > 1 ? (gLastMs - gFirstMs) / (gCount - 1) : 0;
-          const gTrig = grp.triggerValue != null ? String(grp.triggerValue) : trigStr;
-          const gHasTrig = gTrig != null;
-          const gThead = `<thead><tr>
-            <th class="adm-rpt-th adm-rpt-th--idx">#</th>
-            <th class="adm-rpt-th">Data/Hora</th>
-            ${gHasTrig ? `<th class="adm-rpt-th adm-rpt-th--num">Trigger</th>` : ""}
-          </tr></thead>`;
-          const gRows = [];
-          const MAX = 10;
-          for (let i = gCount; i >= 1; i--) {
-            const tsMs = gFirstMs + gInterval * (i - 1);
-            const isSingle = gCount === 1;
-            const isLatest = !isSingle && i === gCount;
-            const isFirst = !isSingle && i === 1;
-            const isEst = !isSingle && !isLatest && !isFirst;
-            const timeStr = (isEst ? "~" : "") + fmt(tsMs);
-            const style = idxStyle(isSingle, isLatest, isFirst);
-            gRows.push(`<tr>
-              <td class="adm-rpt-cell adm-rpt-cell--idx"${style ? ` style="${style}"` : ""}>#${i}</td>
-              <td class="adm-rpt-cell">${timeStr}</td>
-              ${gHasTrig ? `<td class="adm-rpt-cell adm-rpt-cell--num">${escHtml2(gTrig)}</td>` : ""}
-            </tr>`);
-            const csvRow = [`#${i}`, fmt(tsMs)];
-            if (gHasTrig) csvRow.push(gTrig);
-            rows.push(csvRow);
-            if (gRows.length >= MAX) break;
-          }
-          const sepStyle = gi > 0 ? ' style="margin-top:12px;padding-top:12px;border-top:1px dashed #e5e7eb"' : "";
-          return `<div${sepStyle}>
-            <div class="adm-timeline-group-header">
-              <label class="adm-tl-cb-wrap" data-cb-wrap><input type="checkbox" class="adm-tl-row-cb" data-item-id="${alarm.id}__grp${gi}"></label>
-              <span class="adm-tl-group-title">${escHtml2(grp.title)}</span>
-              <span class="adm-timeline-group-count">${gCount}</span>
-              <div class="adm-tl-row-btns adm-tl-row-btns--group" data-row-btns>
-                ${isActive ? `<button class="adm-tl-row-btn adm-tl-row-btn--ack" data-action="acknowledge" data-item-id="${alarm.id}" title="Reconhecer">${_svgAck}</button>` : ""}
-                ${!isClosed ? `<button class="adm-tl-row-btn adm-tl-row-btn--snooze" data-action="snooze" data-item-id="${alarm.id}" title="Adiar">${_svgSnooze}</button>` : ""}
-                ${!isClosed ? `<button class="adm-tl-row-btn adm-tl-row-btn--escalate" data-action="escalate" data-item-id="${alarm.id}" title="Escalar">${_svgEscalate}</button>` : ""}
-              </div>
-            </div>
-            <div class="adm-rpt-table-wrap" style="margin-bottom:0">
-              <table class="adm-rpt-table">${gThead}<tbody>${gRows.join("")}</tbody></table>
-            </div>
-          </div>`;
-        }).join("");
-        return { html: groupHtml, csvRows: rows };
-      }
-      const deviceTokens = alarm.source ? alarm.source.split(/[,;]+/).map((s) => s.trim()).filter(Boolean) : [];
+      const kindStyle = {
+        raised: "color:#ef4444;font-weight:700",
+        reopened: "color:#d97706;font-weight:700",
+        closed: "color:#16a34a;font-weight:700",
+        acknowledged: "color:var(--myio-brand-700, #7c3aed);font-weight:600",
+        silenced: "color:#6b7280;font-weight:600",
+        escalated: "color:#dc2626;font-weight:600",
+        other: "color:#6b7280"
+      };
       const thead = `<thead><tr>
         <th class="adm-rpt-th adm-rpt-th--idx">#</th>
         <th class="adm-rpt-th">Data/Hora</th>
+        <th class="adm-rpt-th">Evento</th>
+        ${showAlarm ? `<th class="adm-rpt-th">Alarme</th>` : ""}
         ${showDevice ? `<th class="adm-rpt-th">Dispositivo</th>` : ""}
-        ${hasTrigger ? `<th class="adm-rpt-th adm-rpt-th--num">Trigger</th>` : ""}
+        <th class="adm-rpt-th">Por</th>
         <th class="adm-rpt-th adm-tl-actions-th">A\xE7\xF5es</th>
       </tr></thead>`;
-      const MAX_SHOWN = 30;
-      for (let i = count; i >= 1; i--) {
-        const tsMs = occFirst + intervalMs * (i - 1);
-        const isSingle = count === 1;
-        const isLatest = !isSingle && i === count;
-        const isFirst = !isSingle && i === 1;
-        const isEst = !isSingle && !isLatest && !isFirst;
-        const timeStr = (isEst ? "~" : "") + fmt(tsMs);
-        const device = showDevice ? deviceTokens[(i - 1) % deviceTokens.length] : "";
-        const style = idxStyle(isSingle, isLatest, isFirst);
-        tableRows.push(`<tr>
-          <td class="adm-rpt-cell adm-rpt-cell--idx"${style ? ` style="${style}"` : ""}>#${i}</td>
-          <td class="adm-rpt-cell">${timeStr}</td>
-          ${showDevice ? `<td class="adm-rpt-cell adm-rpt-cell--dev">${escHtml2(device)}</td>` : ""}
-          ${hasTrigger ? `<td class="adm-rpt-cell adm-rpt-cell--num">${escHtml2(trigStr)}</td>` : ""}
+      const MAX_SHOWN = 200;
+      const tableRows = inRange.slice(0, MAX_SHOWN).map((e, ri) => {
+        const n = occIndex.get(e);
+        const ident = showDevice ? resolveDeviceIdentity(alarm, e.device) : null;
+        const actor = e.kind === "raised" ? "regra" : e.actor === "system" ? "sistema" : e.actor || "-";
+        const csvRow = [n ? `#${n}` : "", fmt(e.ts), EVENT_LABEL[e.kind]];
+        if (showAlarm) csvRow.push(e.title);
+        if (showDevice) csvRow.push(ident.label, ident.name || e.device);
+        csvRow.push(actor);
+        rows.push(csvRow);
+        const itemId = `${e.alarmId}__ev${ri}`;
+        return `<tr>
+          <td class="adm-rpt-cell adm-rpt-cell--idx">${n ? `#${n}` : ""}</td>
+          <td class="adm-rpt-cell">${fmt(e.ts)}</td>
+          <td class="adm-rpt-cell" style="${kindStyle[e.kind]}">${EVENT_LABEL[e.kind]}</td>
+          ${showAlarm ? `<td class="adm-rpt-cell">${escHtml2(e.title)}</td>` : ""}
+          ${showDevice ? `<td class="adm-rpt-cell adm-rpt-cell--dev" title="${escHtml2(ident.name || e.device)}">${escHtml2(ident.label)}</td>` : ""}
+          <td class="adm-rpt-cell">${escHtml2(actor)}</td>
           <td class="adm-rpt-cell adm-tl-action-cell">
-            <label class="adm-tl-cb-wrap" data-cb-wrap><input type="checkbox" class="adm-tl-row-cb" data-item-id="${alarm.id}__row${i}"></label>
+            ${e.occurrence ? `<label class="adm-tl-cb-wrap" data-cb-wrap><input type="checkbox" class="adm-tl-row-cb" data-item-id="${escHtml2(itemId)}"></label>
             <div class="adm-tl-row-btns" data-row-btns>
-              ${isActive ? `<button class="adm-tl-row-btn adm-tl-row-btn--ack" data-action="acknowledge" data-item-id="${alarm.id}" title="Reconhecer">${_svgAck}</button>` : ""}
-              ${!isClosed ? `<button class="adm-tl-row-btn adm-tl-row-btn--snooze" data-action="snooze" data-item-id="${alarm.id}" title="Adiar">${_svgSnooze}</button>` : ""}
-              ${!isClosed ? `<button class="adm-tl-row-btn adm-tl-row-btn--escalate" data-action="escalate" data-item-id="${alarm.id}" title="Escalar">${_svgEscalate}</button>` : ""}
-            </div>
+              ${isActive ? `<button class="adm-tl-row-btn adm-tl-row-btn--ack" data-action="acknowledge" data-item-id="${escHtml2(itemId)}" title="Reconhecer">${_svgAck}</button>` : ""}
+              ${!isClosed ? `<button class="adm-tl-row-btn adm-tl-row-btn--snooze" data-action="snooze" data-item-id="${escHtml2(itemId)}" title="Adiar">${_svgSnooze}</button>` : ""}
+              ${!isClosed ? `<button class="adm-tl-row-btn adm-tl-row-btn--escalate" data-action="escalate" data-item-id="${escHtml2(itemId)}" title="Escalar">${_svgEscalate}</button>` : ""}
+            </div>` : ""}
           </td>
-        </tr>`);
-        const csvRow = [`#${i}`, fmt(tsMs)];
-        if (showDevice) csvRow.push(device);
-        if (hasTrigger) csvRow.push(trigStr);
-        rows.push(csvRow);
-        if (tableRows.length >= MAX_SHOWN) break;
-      }
-      const html = `<div class="adm-rpt-table-wrap" id="admRptTableWrap" style="max-height:340px;overflow-y:auto">
+        </tr>`;
+      });
+      const occInRange = inRange.filter((e) => e.occurrence).length;
+      const colspan = 4 + (showAlarm ? 1 : 0) + (showDevice ? 1 : 0);
+      const html = inRange.length ? `<div class="adm-rpt-table-wrap" id="admRptTableWrap" style="max-height:340px;overflow-y:auto">
         <table class="adm-rpt-table">
           ${thead}
           <tbody>${tableRows.join("")}</tbody>
           <tfoot><tr>
-            <td class="adm-rpt-cell adm-rpt-cell--total" colspan="${showDevice ? hasTrigger ? 3 : 2 : hasTrigger ? 2 : 1}">Total</td>
-            <td class="adm-rpt-cell adm-rpt-cell--num adm-rpt-cell--total">${count} ocorr\xEAncia${count !== 1 ? "s" : ""}</td>
+            <td class="adm-rpt-cell adm-rpt-cell--total" colspan="${colspan}">Total: ${occInRange} ocorr\xEAncia${occInRange !== 1 ? "s" : ""} \xB7 ${inRange.length} evento${inRange.length !== 1 ? "s" : ""}</td>
             <td class="adm-rpt-cell adm-rpt-cell--total"></td>
           </tr></tfoot>
         </table>
-      </div>`;
+      </div>` : '<div class="adm-report-empty-hint">Nenhum evento no per\xEDodo selecionado.</div>';
       return { html, csvRows: rows };
     };
     const buildReportTable = () => {
       const startInput = rptPanel.querySelector("#admRptStart");
       const endInput = rptPanel.querySelector("#admRptEnd");
-      const startMs = startInput?.value ? new Date(startInput.value).getTime() : firstMs;
-      const endMs = endInput?.value ? new Date(endInput.value).getTime() + 864e5 - 1 : lastMs;
-      const occFirst = Math.max(firstMs, startMs);
-      const occLast = Math.min(lastMs, endMs);
+      const toLocalDay = (v) => {
+        const [y, m, d] = v.split("-").map(Number);
+        return new Date(y, (m || 1) - 1, d || 1).getTime();
+      };
+      const startMs = startInput?.value ? toLocalDay(startInput.value) : 0;
+      const endMs = endInput?.value ? toLocalDay(endInput.value) + 864e5 - 1 : Date.now();
       const headerHtml = isSeparado ? `<div class="adm-rpt-device-header">
-            <span class="adm-rpt-device-name">${escHtml2(alarm.source)}</span>
+            <span class="adm-rpt-device-name" title="${escHtml2(alarm.source)}">${escHtml2(resolveDeviceLabel(alarm, alarm.source) || alarm.source)}</span>
             <span class="adm-rpt-device-sep">\xB7</span>
             <span class="adm-rpt-alarm-type">${escHtml2(alarm.title)}</span>
           </div>` : "";
-      const sectionTitle = groupMode === "porDispositivo" && alarm._alarmTypeGroups?.length ? `${alarm._alarmTypeGroups.length} tipo${alarm._alarmTypeGroups.length !== 1 ? "s" : ""} \xB7 ${count} ocorr\xEAncia${count !== 1 ? "s" : ""} \xB7 ${durLabel} de janela` : `${count} ocorr\xEAncia${count !== 1 ? "s" : ""} \xB7 ${durLabel} de janela`;
-      const { html: occHtml, csvRows } = buildOccurrenceSection(occFirst, occLast);
+      const { html: occHtml, csvRows } = buildOccurrenceSection(startMs, endMs);
       lastCsvRows = csvRows;
-      const statsHtml = count > 1 || alarm.triggerValue != null ? `<div class="adm-section">
+      const occ = occEvents();
+      const occN = occ.length;
+      const sectionTitle = events ? `${occN} ocorr\xEAncia${occN !== 1 ? "s" : ""} \xB7 ${events.length} evento${events.length !== 1 ? "s" : ""} no hist\xF3rico` : "Hist\xF3rico do alarme";
+      const reopenN = occ.filter((e) => e.kind === "reopened").length;
+      const statsHtml = events && (occN > 1 || alarm.triggerValue != null) ? `<div class="adm-section">
             <div class="adm-section-title">Estat\xEDsticas de recorr\xEAncia</div>
-            ${alarm.triggerValue != null ? row("Valor do disparo", String(alarm.triggerValue)) : ""}
-            ${count > 1 ? row("Frequ\xEAncia m\xE9dia", avgFreq) : ""}
-            ${count > 1 ? row("Janela total", durLabel) : ""}
-            ${count > 1 ? row("Primeira ocorr\xEAncia", fmt(alarm.firstOccurrence)) : ""}
-            ${count > 1 ? row("\xDAltima ocorr\xEAncia", fmt(alarm.lastOccurrence)) : ""}
+            ${alarm.triggerValue != null ? row("Valor do \xFAltimo disparo", String(alarm.triggerValue)) : ""}
+            ${occN > 1 ? row("Reaberturas", String(reopenN)) : ""}
+            ${occN > 1 ? row("Intervalo m\xE9dio entre ocorr\xEAncias", durationLabel((occ[occN - 1].ts - occ[0].ts) / (occN - 1))) : ""}
+            ${occN > 1 ? row("Primeira ocorr\xEAncia", fmt(occ[0].ts)) : ""}
+            ${occN > 1 ? row("\xDAltima ocorr\xEAncia", fmt(occ[occN - 1].ts)) : ""}
           </div>` : "";
       let summaryHtml = "";
-      if (!isSeparado && devices.length > 0) {
-        const devRows = devices.map((dev) => `<tr>
-          <td class="adm-rpt-cell">${escHtml2(dev)}</td>
-          <td class="adm-rpt-cell adm-rpt-cell--num">${count}</td>
-          <td class="adm-rpt-cell">${fmt(occFirst)}</td>
-          <td class="adm-rpt-cell">${fmt(occLast)}</td>
-        </tr>`).join("");
+      if (events && !isSeparado && devices.length > 0) {
+        const byDev = /* @__PURE__ */ new Map();
+        occ.forEach((e) => {
+          const k = devices.includes(e.device) ? e.device : devices[0];
+          byDev.set(k, [...byDev.get(k) || [], e]);
+        });
+        const devRows = devices.map((dev) => {
+          const list = byDev.get(dev) || [];
+          return `<tr>
+          <td class="adm-rpt-cell" title="${escHtml2(dev)}">${escHtml2(resolveDeviceLabel(alarm, dev) || dev)}</td>
+          <td class="adm-rpt-cell adm-rpt-cell--num">${list.length}</td>
+          <td class="adm-rpt-cell">${list.length ? fmt(list[0].ts) : "-"}</td>
+          <td class="adm-rpt-cell">${list.length ? fmt(list[list.length - 1].ts) : "-"}</td>
+        </tr>`;
+        }).join("");
         summaryHtml = `
           <div class="adm-rpt-section-title">Sum\xE1rio por dispositivo</div>
           <div class="adm-rpt-table-wrap adm-rpt-table-wrap--summary">
@@ -53955,8 +54449,10 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode, onAction)
         </div>
         ${statsHtml}
         ${summaryHtml}`;
-      csvBtn?.removeAttribute("disabled");
-      pdfBtn?.removeAttribute("disabled");
+      if (events) {
+        csvBtn?.removeAttribute("disabled");
+        pdfBtn?.removeAttribute("disabled");
+      }
     };
     csvBtn?.addEventListener("click", () => {
       if (!lastCsvRows.length) return;
@@ -53987,14 +54483,14 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode, onAction)
           tfoot td{font-weight:700;background:#ede9fe;}
         </style></head><body>
         <h2>${escHtml2(alarm.title)}</h2>
-        <p>${escHtml2(alarm.id)} \xB7 ${escHtml2(alarm.customerName || "")} \xB7 ${count} ocorr\xEAncia${count !== 1 ? "s" : ""} \xB7 Emitido em ${(/* @__PURE__ */ new Date()).toLocaleDateString("pt-BR")}</p>
-        <h3>Ocorr\xEAncias</h3>${tbl}
+        <p>${escHtml2(alarm.id)} \xB7 ${escHtml2(alarm.customerName || "")} \xB7 ${occEvents().length} ocorr\xEAncia${occEvents().length !== 1 ? "s" : ""} \xB7 Emitido em ${(/* @__PURE__ */ new Date()).toLocaleDateString("pt-BR")}</p>
+        <h3>Hist\xF3rico</h3>${tbl}
         ${sumTbl ? `<h3>Sum\xE1rio por dispositivo</h3>${sumTbl}` : ""}
         <script>window.onload=function(){window.print();window.close();}</script>
         </body></html>`);
       win2.document.close();
     });
-    emitBtn?.addEventListener("click", () => {
+    const refreshReport = () => {
       buildReportTable();
       if (batchActive && grid) {
         grid.querySelectorAll("[data-cb-wrap]").forEach((el2) => {
@@ -54004,8 +54500,10 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode, onAction)
           el2.style.display = "none";
         });
       }
-    });
+    };
+    emitBtn?.addEventListener("click", refreshReport);
     buildReportTable();
+    onEventsReady.push(refreshReport);
     const batchToggleBtn = rptPanel.querySelector("#admTlBatchToggle");
     const batchBar = rptPanel.querySelector("#admTlBatchBar");
     const selAllCb = rptPanel.querySelector("#admTlSelAll");
@@ -54110,17 +54608,48 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode, onAction)
       }
     }, tbCfg);
   }
+  const applyEvents = () => {
+    const occ = occEvents();
+    const occText = events ? String(occ.length || "-") : "\u2026";
+    const kpi = overlay.querySelector("#admKpiOcc");
+    if (kpi) kpi.textContent = occText;
+    const badge = overlay.querySelector("#admTlTabBadge");
+    if (badge) badge.textContent = occText;
+    const summary = overlay.querySelector("#admTlSummary");
+    if (summary && events) summary.textContent = `${occ.length} ocorr\xEAncia${occ.length !== 1 ? "s" : ""}`;
+    const reopenEl = overlay.querySelector("#admReopenRows");
+    const reopens = occ.filter((e) => e.kind === "reopened");
+    if (reopenEl) {
+      reopenEl.innerHTML = reopens.length ? row("\xDAltima reabertura", fmt(reopens[reopens.length - 1].ts)) + (reopens.length > 1 ? row("Reaberturas", String(reopens.length)) : "") : "";
+    }
+    onEventsReady.forEach((fn) => {
+      try {
+        fn();
+      } catch (_) {
+      }
+    });
+  };
+  loadAlarmEvents(alarm).then((ev) => {
+    events = ev;
+  }).catch(() => {
+    events = [];
+  }).then(() => {
+    if (overlay.isConnected) applyEvents();
+  });
   const drawer = overlay.querySelector(".adm-drawer");
-  const maximizeBtn = overlay.querySelector("#admMaximize");
-  const iconExpand = maximizeBtn?.querySelector(".adm-icon-expand");
-  const iconCompress = maximizeBtn?.querySelector(".adm-icon-compress");
-  maximizeBtn?.addEventListener("click", () => {
-    const isMax = drawer?.classList.toggle("adm-drawer--maximized");
-    if (iconExpand) iconExpand.style.display = isMax ? "none" : "";
-    if (iconCompress) iconCompress.style.display = isMax ? "" : "none";
-    maximizeBtn.title = isMax ? "Restaurar (Esc)" : "Maximizar";
+  const chrome = createPremiumModalChrome({
+    modalId: "adm-modal",
+    icon: "\u{1F514}",
+    title: escHtml2(alarm.title),
+    modalEl: drawer,
+    theme: themeMode,
+    maximizedClass: "adm-drawer--maximized",
+    headerRadius: "18px 18px 0 0",
+    onClose: () => closeModal2(),
+    footer: alarm.customerName ? { customerName: alarm.customerName } : {}
   });
   const closeModal2 = () => {
+    chrome.destroy();
     overlay.classList.remove("adm-overlay--visible");
     setTimeout(() => {
       overlay.remove();
@@ -54137,7 +54666,34 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode, onAction)
     if (e.key === "Escape") closeModal2();
   };
   document.addEventListener("keydown", onKey);
-  overlay.querySelector("#admClose")?.addEventListener("click", closeModal2);
+  overlay.addEventListener("click", (e) => {
+    const btn = e.target.closest(".adm-copy-btn");
+    if (!btn) return;
+    e.stopPropagation();
+    const text2 = btn.getAttribute("data-copy") || "";
+    const done = () => {
+      btn.classList.add("is-copied");
+      btn.title = "Copiado!";
+      setTimeout(() => {
+        btn.classList.remove("is-copied");
+        btn.title = "Copiar nome do dispositivo";
+      }, 1200);
+    };
+    if (navigator.clipboard?.writeText) navigator.clipboard.writeText(text2).then(done).catch(() => {
+    });
+    else {
+      const ta = document.createElement("textarea");
+      ta.value = text2;
+      document.body.appendChild(ta);
+      ta.select();
+      try {
+        document.execCommand("copy");
+        done();
+      } catch (_) {
+      }
+      ta.remove();
+    }
+  });
   overlay.addEventListener("click", (e) => {
     if (e.target === overlay) closeModal2();
   });
@@ -54159,7 +54715,7 @@ function buildOccurrenceMatrix(alarm, devices) {
   }
   const deviceChip = (dev) => `<span class="adm-device-chip">
        <svg viewBox="0 0 24 24" width="8" height="8" fill="currentColor"><circle cx="12" cy="12" r="10"/></svg>
-       ${escHtml2(dev)}
+       ${escHtml2(resolveDeviceLabel(alarm, dev) || dev)}
      </span>`;
   return show.map((item) => {
     const devIndex = (item.n - 1) % devices.length;
@@ -56357,6 +56913,46 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   transform: translateY(0) scale(1);
 }
 
+/* ---- Nota do gr\xE1fico (base real de ocorr\xEAncias) ---- */
+.adm-chart-note { font-size: 11px; color: #6b7280; margin: -2px 0 8px; }
+.adm-overlay[data-theme="dark"] .adm-chart-note { color: #94a3b8; }
+
+/* ---- Device identity (label + name discreto + copiar) ---- */
+.adm-dev-id {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+  flex-wrap: wrap;
+}
+.adm-dev-label { font-weight: 600; color: inherit; font-family: 'Nunito', system-ui, sans-serif; font-size: 13px; }
+.adm-dev-name {
+  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
+  font-size: 11px;
+  color: #9ca3af;
+}
+.adm-copy-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  background: transparent;
+  color: #9ca3af;
+  cursor: pointer;
+  align-self: center;
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+.adm-copy-btn:hover { color: var(--myio-brand-700, #7c3aed); border-color: var(--myio-brand-700, #7c3aed); }
+.adm-copy-btn.is-copied { color: #16a34a; border-color: #16a34a; background: #f0fdf4; }
+.adm-row-value--devices { display: flex; flex-direction: column; gap: 4px; }
+.adm-device-icon-sm svg { color: var(--myio-brand-700, #7c3aed); }
+.adm-overlay[data-theme="dark"] .adm-dev-name { color: #64748b; }
+.adm-overlay[data-theme="dark"] .adm-copy-btn { border-color: #2a2b3d; color: #64748b; }
+
 /* ---- Maximized state ---- */
 .adm-drawer--maximized {
   width: 100% !important;
@@ -56368,7 +56964,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
 
 /* ---- Header ---- */
 .adm-header {
-  padding: 18px 22px 14px;
+  padding: 12px 22px;
   border-bottom: 1px solid #e5e7eb;
   flex-shrink: 0;
 }
@@ -56514,8 +57110,8 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
 .adm-tab:hover { color: #111827; }
 
 .adm-tab.is-active {
-  color: #7c3aed;
-  border-bottom-color: #7c3aed;
+  color: var(--myio-brand-700, #7c3aed);
+  border-bottom-color: var(--myio-brand-700, #7c3aed);
   font-weight: 700;
 }
 
@@ -56527,8 +57123,8 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   height: 18px;
   padding: 0 4px;
   border-radius: 9px;
-  background: #ede9fe;
-  color: #7c3aed;
+  background: color-mix(in srgb, var(--myio-brand-700, #7c3aed) 12%, #ffffff);
+  color: var(--myio-brand-700, #7c3aed);
   font-size: 10px;
   font-weight: 700;
 }
@@ -56629,9 +57225,9 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   padding: 3px 8px;
   font-size: 10px;
   font-weight: 500;
-  background: rgba(139, 92, 246, 0.12);
-  color: #7c3aed;
-  border: 1px solid rgba(139, 92, 246, 0.3);
+  background: color-mix(in srgb, var(--myio-brand-700, #7c3aed) 12%, transparent);
+  color: var(--myio-brand-700, #7c3aed);
+  border: 1px solid color-mix(in srgb, var(--myio-brand-700, #7c3aed) 30%, transparent);
   border-radius: 4px;
 }
 
@@ -56676,7 +57272,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
 }
 
 .adm-tag-key {
-  color: #7c3aed;
+  color: var(--myio-brand-700, #7c3aed);
   font-weight: 700;
 }
 
@@ -56724,15 +57320,15 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   width: 12px;
   height: 12px;
   border-radius: 50%;
-  background: #8b5cf6;
+  background: var(--myio-brand-700, #8b5cf6);
   border: 2px solid #fff;
-  box-shadow: 0 0 0 2px #8b5cf6;
+  box-shadow: 0 0 0 2px var(--myio-brand-700, #8b5cf6);
   flex-shrink: 0;
 }
 
 .adm-timeline-item.is-last  .adm-timeline-dot { background: #3b82f6; box-shadow: 0 0 0 2px #3b82f6; }
 .adm-timeline-item.is-first .adm-timeline-dot { background: #ef4444; box-shadow: 0 0 0 2px #ef4444; }
-.adm-timeline-item.is-single .adm-timeline-dot { background: #7c3aed; box-shadow: 0 0 0 2px #7c3aed; }
+.adm-timeline-item.is-single .adm-timeline-dot { background: var(--myio-brand-700, #7c3aed); box-shadow: 0 0 0 2px var(--myio-brand-700, #7c3aed); }
 
 .adm-timeline-num {
   font-size: 11px;
@@ -56818,7 +57414,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   gap: 6px;
   font-size: 10px;
   font-weight: 700;
-  color: #7c3aed;
+  color: var(--myio-brand-700, #7c3aed);
   margin-bottom: 6px;
   padding: 3px 6px;
   background: rgba(139, 92, 246, 0.08);
@@ -56829,7 +57425,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   font-size: 9px;
   font-weight: 500;
   background: rgba(139, 92, 246, 0.2);
-  color: #7c3aed;
+  color: var(--myio-brand-700, #7c3aed);
   padding: 1px 5px;
   border-radius: 8px;
 }
@@ -56867,14 +57463,14 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   transition: border-color 0.15s, color 0.15s, background 0.15s;
 }
 .adm-tl-batch-toggle:hover {
-  border-color: #7c3aed;
-  color: #7c3aed;
+  border-color: var(--myio-brand-700, #7c3aed);
+  color: var(--myio-brand-700, #7c3aed);
   background: rgba(124, 58, 237, 0.04);
 }
 .adm-tl-batch-toggle.is-active {
-  border-color: #7c3aed;
+  border-color: var(--myio-brand-700, #7c3aed);
   background: rgba(124, 58, 237, 0.08);
-  color: #7c3aed;
+  color: var(--myio-brand-700, #7c3aed);
 }
 .adm-tl-batch-bar {
   display: none;
@@ -56894,7 +57490,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
 }
 .adm-tl-sel-count {
   font-size: 11px;
-  color: #7c3aed;
+  color: var(--myio-brand-700, #7c3aed);
   font-weight: 600;
   min-width: 86px;
 }
@@ -56909,7 +57505,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
 }
 .adm-tl-exec-btn {
   padding: 4px 12px;
-  background: #7c3aed;
+  background: var(--myio-brand-700, #7c3aed);
   color: #fff;
   border: none;
   border-radius: 6px;
@@ -56919,7 +57515,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   transition: background 0.15s;
 }
 .adm-tl-exec-btn:disabled { background: #d1d5db; cursor: not-allowed; }
-.adm-tl-exec-btn:not(:disabled):hover { background: #6d28d9; }
+.adm-tl-exec-btn:not(:disabled):hover { background: var(--myio-brand-600, #6d28d9); }
 .adm-tl-cancel-btn {
   padding: 4px 10px;
   background: transparent;
@@ -57005,7 +57601,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   justify-content: center;
   width: 22px;
   height: 22px;
-  background: #ede9fe;
+  background: color-mix(in srgb, var(--myio-brand-700, #7c3aed) 12%, #ffffff);
   border-radius: 5px;
   flex-shrink: 0;
 }
@@ -57078,7 +57674,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
 
 .adm-matrix-n {
   font-weight: 700;
-  color: #7c3aed;
+  color: var(--myio-brand-700, #7c3aed);
 }
 
 .adm-matrix-ts {
@@ -57106,8 +57702,8 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   align-items: center;
   gap: 4px;
   padding: 2px 6px;
-  background: #ede9fe;
-  color: #6d28d9;
+  background: color-mix(in srgb, var(--myio-brand-700, #7c3aed) 12%, #ffffff);
+  color: var(--myio-brand-600, #6d28d9);
   border-radius: 4px;
   font-size: 10px;
   font-family: 'SF Mono', Monaco, monospace;
@@ -57159,8 +57755,8 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
 }
 
 .adm-report-date-input:focus {
-  border-color: #7c3aed;
-  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
+  border-color: var(--myio-brand-700, #7c3aed);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--myio-brand-700, #7c3aed) 12%, transparent);
 }
 
 .adm-report-emit-btn {
@@ -57168,7 +57764,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   align-items: center;
   gap: 6px;
   padding: 8px 16px;
-  background: #7c3aed;
+  background: var(--myio-brand-700, #7c3aed);
   color: #fff;
   border: none;
   border-radius: 8px;
@@ -57179,8 +57775,8 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   align-self: flex-start;
 }
 
-.adm-report-emit-btn:hover { background: #6d28d9; }
-.adm-report-emit-btn:active { background: #5b21b6; }
+.adm-report-emit-btn:hover { background: var(--myio-brand-600, #6d28d9); }
+.adm-report-emit-btn:active { background: var(--myio-brand-600, #6d28d9); }
 
 .adm-report-empty-hint {
   font-size: 13px;
@@ -57190,7 +57786,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   font-style: italic;
 }
 
-.adm-report-empty-hint strong { color: #7c3aed; font-style: normal; }
+.adm-report-empty-hint strong { color: var(--myio-brand-700, #7c3aed); font-style: normal; }
 
 .adm-rpt-table-wrap {
   overflow-x: auto;
@@ -57229,7 +57825,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   font-size: 11px;
 }
 
-.adm-rpt-cell--num { text-align: right; font-weight: 700; color: #7c3aed; }
+.adm-rpt-cell--num { text-align: right; font-weight: 700; color: var(--myio-brand-700, #7c3aed); }
 
 .adm-rpt-cell--dev {
   font-family: inherit;
@@ -57244,7 +57840,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
 .adm-rpt-cell--total {
   font-weight: 700;
   color: #111827;
-  background: #ede9fe;
+  background: color-mix(in srgb, var(--myio-brand-700, #7c3aed) 12%, #ffffff);
 }
 
 .adm-rpt-table tbody tr:nth-child(even) td { background: #fafafa; }
@@ -57256,7 +57852,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  color: #7c3aed;
+  color: var(--myio-brand-700, #7c3aed);
   margin: 12px 0 6px;
 }
 .adm-rpt-section-title:first-child { margin-top: 0; }
@@ -57289,7 +57885,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
 .adm-rpt-device-sep { color: #9ca3af; font-size: 11px; }
 .adm-rpt-alarm-type {
   font-size: 11px;
-  color: #7c3aed;
+  color: var(--myio-brand-700, #7c3aed);
   font-weight: 600;
 }
 
@@ -57370,7 +57966,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
 }
 
 .adm-chart-btn.is-active {
-  background: #7c3aed;
+  background: var(--myio-brand-700, #7c3aed);
   color: #fff;
 }
 
@@ -57470,7 +58066,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
 
 .adm-dow-bar {
   height: 100%;
-  background: #7c3aed;
+  background: var(--myio-brand-700, #7c3aed);
   border-radius: 3px;
 }
 
@@ -57502,7 +58098,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
 
 .adm-hod-bar {
   width: 100%;
-  background: #7c3aed;
+  background: var(--myio-brand-700, #7c3aed);
   border-radius: 2px 2px 0 0;
   min-height: 4px;
 }
@@ -57533,7 +58129,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   align-items: center;
   gap: 5px;
   padding: 7px 14px;
-  background: #7c3aed;
+  background: var(--myio-brand-700, #7c3aed);
   color: #fff;
   border: none;
   border-radius: 8px;
@@ -57542,8 +58138,8 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   cursor: pointer;
   transition: background 0.15s;
 }
-.adm-annot-create-btn:hover { background: #6d28d9; }
-.adm-annot-create-btn:active { background: #5b21b6; }
+.adm-annot-create-btn:hover { background: var(--myio-brand-600, #6d28d9); }
+.adm-annot-create-btn:active { background: var(--myio-brand-600, #6d28d9); }
 
 .adm-annot-form-wrap { margin-bottom: 14px; }
 
@@ -57576,8 +58172,8 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   transition: border-color 0.15s;
 }
 .adm-annot-textarea:focus {
-  border-color: #7c3aed;
-  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
+  border-color: var(--myio-brand-700, #7c3aed);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--myio-brand-700, #7c3aed) 12%, transparent);
 }
 
 .adm-annot-char-count {
@@ -57664,7 +58260,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   cursor: pointer;
   transition: border-color 0.15s;
 }
-.adm-annot-date-input:focus { border-color: #7c3aed; }
+.adm-annot-date-input:focus { border-color: var(--myio-brand-700, #7c3aed); }
 
 /* Form action buttons */
 .adm-annot-form-actions {
@@ -57685,8 +58281,8 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
 }
 .adm-annot-form-btn--cancel { background: #e5e7eb; color: #374151; }
 .adm-annot-form-btn--cancel:hover { background: #d1d5db; }
-.adm-annot-form-btn--save { background: #7c3aed; color: #fff; }
-.adm-annot-form-btn--save:hover { background: #6d28d9; }
+.adm-annot-form-btn--save { background: var(--myio-brand-700, #7c3aed); color: #fff; }
+.adm-annot-form-btn--save:hover { background: var(--myio-brand-600, #6d28d9); }
 .adm-annot-form-btn--save:disabled { opacity: 0.4; cursor: not-allowed; }
 
 /* Empty state */
@@ -57786,8 +58382,8 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   width: 20px;
   height: 20px;
   border-radius: 50%;
-  background: #ede9fe;
-  color: #7c3aed;
+  background: color-mix(in srgb, var(--myio-brand-700, #7c3aed) 12%, #ffffff);
+  color: var(--myio-brand-700, #7c3aed);
   font-size: 8px;
   font-weight: 700;
   flex-shrink: 0;
@@ -57890,13 +58486,13 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
 }
 
 .adm-overlay[data-theme="dark"] .adm-tab.is-active {
-  color: #a78bfa;
-  border-bottom-color: #a78bfa;
+  color: color-mix(in srgb, var(--myio-brand-700, #7c3aed) 50%, #ffffff);
+  border-bottom-color: color-mix(in srgb, var(--myio-brand-700, #7c3aed) 50%, #ffffff);
 }
 
 .adm-overlay[data-theme="dark"] .adm-tab-badge {
-  background: #2d1b69;
-  color: #a78bfa;
+  background: color-mix(in srgb, var(--myio-brand-700, #7c3aed) 35%, #1e1f2e);
+  color: color-mix(in srgb, var(--myio-brand-700, #7c3aed) 50%, #ffffff);
 }
 
 .adm-overlay[data-theme="dark"] .adm-body {
@@ -57968,13 +58564,13 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
 }
 
 .adm-overlay[data-theme="dark"] .adm-timeline-group-header {
-  color: #a78bfa;
-  background: rgba(139, 92, 246, 0.12);
+  color: color-mix(in srgb, var(--myio-brand-700, #7c3aed) 50%, #ffffff);
+  background: color-mix(in srgb, var(--myio-brand-700, #7c3aed) 12%, transparent);
 }
 
 .adm-overlay[data-theme="dark"] .adm-timeline-group-count {
-  background: rgba(139, 92, 246, 0.25);
-  color: #a78bfa;
+  background: color-mix(in srgb, var(--myio-brand-700, #7c3aed) 25%, transparent);
+  color: color-mix(in srgb, var(--myio-brand-700, #7c3aed) 50%, #ffffff);
 }
 
 .adm-overlay[data-theme="dark"] .adm-tl-header { border-color: #334155; }
@@ -57982,10 +58578,10 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
 .adm-overlay[data-theme="dark"] .adm-tl-summary { color: #94a3b8; }
 .adm-overlay[data-theme="dark"] .adm-tl-batch-toggle { border-color: #475569; background: #1e293b; color: #e2e8f0; }
 .adm-overlay[data-theme="dark"] .adm-tl-batch-toggle:hover,
-.adm-overlay[data-theme="dark"] .adm-tl-batch-toggle.is-active { border-color: #a78bfa; color: #a78bfa; }
+.adm-overlay[data-theme="dark"] .adm-tl-batch-toggle.is-active { border-color: color-mix(in srgb, var(--myio-brand-700, #7c3aed) 50%, #ffffff); color: color-mix(in srgb, var(--myio-brand-700, #7c3aed) 50%, #ffffff); }
 .adm-overlay[data-theme="dark"] .adm-tl-batch-bar { border-color: #334155; }
 .adm-overlay[data-theme="dark"] .adm-tl-sel-all-label { color: #e2e8f0; }
-.adm-overlay[data-theme="dark"] .adm-tl-sel-count { color: #a78bfa; }
+.adm-overlay[data-theme="dark"] .adm-tl-sel-count { color: color-mix(in srgb, var(--myio-brand-700, #7c3aed) 50%, #ffffff); }
 .adm-overlay[data-theme="dark"] .adm-tl-action-sel { background: #1e293b; border-color: #475569; color: #e2e8f0; }
 .adm-overlay[data-theme="dark"] .adm-tl-cancel-btn { border-color: #475569; color: #94a3b8; }
 .adm-overlay[data-theme="dark"] .adm-tl-cancel-btn:hover { color: #e2e8f0; }
@@ -58016,9 +58612,9 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
 }
 
 .adm-overlay[data-theme="dark"] .adm-chart-btn.is-active {
-  background: #2d1b69;
-  border-color: #6d28d9;
-  color: #a78bfa;
+  background: color-mix(in srgb, var(--myio-brand-700, #7c3aed) 35%, #1e1f2e);
+  border-color: var(--myio-brand-600, #6d28d9);
+  color: color-mix(in srgb, var(--myio-brand-700, #7c3aed) 50%, #ffffff);
 }
 
 .adm-overlay[data-theme="dark"] .adm-chart-btn:hover:not(.is-active) {
@@ -58082,13 +58678,13 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   background: #252636;
 }
 
-.adm-overlay[data-theme="dark"] .adm-rpt-section-title { color: #a78bfa; }
+.adm-overlay[data-theme="dark"] .adm-rpt-section-title { color: color-mix(in srgb, var(--myio-brand-700, #7c3aed) 50%, #ffffff); }
 .adm-overlay[data-theme="dark"] .adm-rpt-device-header {
   background: rgba(139, 92, 246, 0.1);
-  border-color: rgba(139, 92, 246, 0.25);
+  border-color: color-mix(in srgb, var(--myio-brand-700, #7c3aed) 25%, transparent);
 }
 .adm-overlay[data-theme="dark"] .adm-rpt-device-name { color: #e2e8f0; }
-.adm-overlay[data-theme="dark"] .adm-rpt-alarm-type { color: #a78bfa; }
+.adm-overlay[data-theme="dark"] .adm-rpt-alarm-type { color: color-mix(in srgb, var(--myio-brand-700, #7c3aed) 50%, #ffffff); }
 .adm-overlay[data-theme="dark"] .adm-rpt-cell--total { background: rgba(139, 92, 246, 0.15); color: #e2e8f0; }
 
 .adm-overlay[data-theme="dark"] .adm-annot-card {
@@ -71146,6 +71742,25 @@ var HeaderView = class {
   transition: color 0.2s ease;
 }
 
+/* Consumo ainda carregando */
+.${HEADER_CSS_PREFIX}-kpi-loading {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 1rem;
+  font-weight: 600;
+  opacity: 0.85;
+}
+.${HEADER_CSS_PREFIX}-kpi-spinner {
+  width: 18px;
+  height: 18px;
+  border: 2.5px solid rgba(255, 255, 255, 0.3);
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: myio-consumption-spin 0.8s linear infinite;
+}
+@keyframes myio-consumption-spin { to { transform: rotate(360deg); } }
+
 .${HEADER_CSS_PREFIX}-card__subrow {
   display: flex;
   align-items: center;
@@ -71584,7 +72199,28 @@ var HeaderView = class {
   /**
    * Update energy card
    */
+  /** Spinner nos KPIs de consumo (energia e água) enquanto o período carrega */
+  setConsumptionLoading(loading) {
+    if (!loading) {
+      [this.energyKpiEl, this.waterKpiEl].forEach((el2) => {
+        if (el2?.querySelector(`.${HEADER_CSS_PREFIX}-kpi-loading`)) el2.textContent = "-";
+      });
+      return;
+    }
+    const html = `<span class="${HEADER_CSS_PREFIX}-kpi-loading" aria-busy="true"><span class="${HEADER_CSS_PREFIX}-kpi-spinner" aria-hidden="true"></span>Carregando\u2026</span>`;
+    if (this.energyKpiEl) this.energyKpiEl.innerHTML = html;
+    if (this.waterKpiEl) this.waterKpiEl.innerHTML = html;
+    if (this.energyTrendEl) this.energyTrendEl.textContent = "";
+    if (this.waterTrendEl) this.waterTrendEl.textContent = "";
+  }
   updateEnergyCard(data) {
+    if (data.loading) {
+      if (this.energyKpiEl) {
+        this.energyKpiEl.innerHTML = `<span class="${HEADER_CSS_PREFIX}-kpi-loading" aria-busy="true"><span class="${HEADER_CSS_PREFIX}-kpi-spinner" aria-hidden="true"></span>Carregando\u2026</span>`;
+      }
+      if (this.energyTrendEl) this.energyTrendEl.textContent = "";
+      return;
+    }
     if (this.energyKpiEl) {
       if (data.isFiltered && data.unfilteredTotal > 0) {
         const filteredFormatted = this.formatEnergy(data.customerTotal);
@@ -71633,6 +72269,13 @@ var HeaderView = class {
    * Update water card
    */
   updateWaterCard(data) {
+    if (data.loading) {
+      if (this.waterKpiEl) {
+        this.waterKpiEl.innerHTML = `<span class="${HEADER_CSS_PREFIX}-kpi-loading" aria-busy="true"><span class="${HEADER_CSS_PREFIX}-kpi-spinner" aria-hidden="true"></span>Carregando\u2026</span>`;
+      }
+      if (this.waterTrendEl) this.waterTrendEl.textContent = "";
+      return;
+    }
     if (this.waterKpiEl) {
       if (data.isFiltered && data.unfilteredTotal > 0) {
         const filteredFormatted = this.formatWater(data.filteredTotal);
@@ -72618,6 +73261,9 @@ function createHeaderComponent(params) {
     tooltipData.temperature = data;
     view.updateTemperatureCard(data);
   }
+  function setConsumptionLoading(loading) {
+    view.setConsumptionLoading(loading);
+  }
   function updateWaterKPI(data) {
     tooltipData.water = data;
     view.updateWaterCard(data);
@@ -72673,6 +73319,7 @@ function createHeaderComponent(params) {
     updateEnergyKPI,
     updateTemperatureKPI,
     updateWaterKPI,
+    setConsumptionLoading,
     updateTooltipData,
     // Shopping/Filter
     updateShoppings,
@@ -123159,6 +123806,20 @@ var HEADER_DEVICES_GRID_STYLES = `
   body.light-mode .telemetry-grid-wrap.maximized .telemetry-grid-header {
     background: #f8fafc;
   }
+
+/* Consumo ainda carregando */
+.hdg-value-spinner {
+  display: inline-block;
+  width: 13px;
+  height: 13px;
+  margin-right: 6px;
+  vertical-align: -2px;
+  border: 2px solid rgba(124, 58, 237, 0.2);
+  border-top-color: var(--myio-brand-700, #7c3aed);
+  border-radius: 50%;
+  animation: myio-consumption-spin 0.8s linear infinite;
+}
+@keyframes myio-consumption-spin { to { transform: rotate(360deg); } }
 `;
 function injectHeaderDevicesGridStyles() {
   const styleId = "hdg-styles";
@@ -123176,14 +123837,15 @@ var DOMAIN_CONFIG7 = {
     consumptionLabel: "Consumo Total",
     zeroLabel: "Sem Consumo",
     unit: "kWh",
-    formatValue: (value) => formatEnergy(value, void 0, 2)
+    // 3 casas: mesmo padrão do dashboard de shopping (RFC-0108, measurementSettings default)
+    formatValue: (value) => formatEnergy(value, void 0, 3)
   },
   water: {
     totalLabel: "Total Hidr\xF4metros",
     consumptionLabel: "Consumo Total",
     zeroLabel: "Sem Consumo",
     unit: "m\xB3",
-    formatValue: (value) => formatWater(value)
+    formatValue: (value) => `${(Number(value) || 0).toLocaleString("pt-BR", { minimumFractionDigits: 3, maximumFractionDigits: 3 })} m\xB3`
   },
   temperature: {
     totalLabel: "Total Sensores",
@@ -123351,6 +124013,16 @@ var HeaderDevicesGridView = class {
     const percentage = total > 0 ? (online / total * 100).toFixed(1) : "0.0";
     connectivityEl.textContent = `${online}/${total} (${percentage}%)`;
     totalEl.textContent = total.toString();
+    if (stats.loading) {
+      const spin = '<span class="hdg-value-spinner" aria-hidden="true"></span>';
+      consumptionEl.innerHTML = `${spin}Carregando\u2026`;
+      zeroEl.innerHTML = spin;
+      consumptionEl.setAttribute("aria-busy", "true");
+      zeroEl.setAttribute("aria-busy", "true");
+      return;
+    }
+    consumptionEl.removeAttribute("aria-busy");
+    zeroEl.removeAttribute("aria-busy");
     consumptionEl.textContent = this.domainConfig.formatValue(consumption);
     zeroEl.textContent = zeroCount.toString();
   }
@@ -123457,7 +124129,8 @@ var HeaderDevicesGridController = class {
       online,
       total: devices.length,
       consumption: displayValue,
-      zeroCount
+      zeroCount,
+      loading: this.domain !== "temperature" && devices.some((d) => d.dataLoading)
     });
   }
   setThemeMode(mode) {
@@ -142202,425 +142875,6 @@ function createDeviceOperationalCardGridComponent(params) {
   };
 }
 
-// src/services/alarm/AlarmApiClient.ts
-var AlarmApiClient = class {
-  baseUrl = "";
-  apiKey = "";
-  configure(baseUrl, apiKey) {
-    if (baseUrl) this.baseUrl = baseUrl;
-    if (apiKey) this.apiKey = apiKey;
-  }
-  get headers() {
-    return {
-      "Content-Type": "application/json",
-      "X-API-Key": this.apiKey
-    };
-  }
-  async request(url, options) {
-    const response = await fetch(url, {
-      method: "GET",
-      headers: this.headers,
-      ...options
-    });
-    if (!response.ok) {
-      throw new Error(`Alarms API error: ${response.status} ${response.statusText}`);
-    }
-    return response.json();
-  }
-  // Some endpoints return { success: true, data: T[] } — unwrap safely
-  unwrapArray(raw) {
-    if (Array.isArray(raw)) return raw;
-    if (raw !== null && typeof raw === "object" && "data" in raw) {
-      const d = raw.data;
-      return Array.isArray(d) ? d : [];
-    }
-    return [];
-  }
-  // -----------------------------------------------------------------------
-  // Availability (existing endpoint)
-  // -----------------------------------------------------------------------
-  async getAvailability(params) {
-    const query = new URLSearchParams({
-      customerId: params.customerId,
-      startAt: params.startAt,
-      endAt: params.endAt,
-      includeByDevice: String(params.includeByDevice ?? true)
-    });
-    if (params.deviceType) query.set("deviceType", params.deviceType);
-    if (params.deviceIds) query.set("deviceIds", params.deviceIds);
-    const raw = await this.request(
-      `${this.baseUrl}/alarms/stats/availability?${query.toString()}`
-    );
-    return raw?.data ?? raw;
-  }
-  // -----------------------------------------------------------------------
-  // Alarm list (GET /alarms)
-  // -----------------------------------------------------------------------
-  async getAlarms(params = {}) {
-    const query = new URLSearchParams();
-    if (params.state?.length) query.set("state", params.state.join(","));
-    if (params.severity?.length) query.set("severity", params.severity.join(","));
-    if (params.alarmType) query.set("alarmType", params.alarmType);
-    if (params.from) query.set("from", params.from);
-    if (params.to) query.set("to", params.to);
-    if (params.customerId) query.set("customerId", params.customerId);
-    query.set("limit", String(params.limit ?? 100));
-    if (params.page && params.page > 1) query.set("page", String(params.page));
-    const qs = query.toString();
-    return this.request(
-      `${this.baseUrl}/alarms${qs ? `?${qs}` : ""}`
-    );
-  }
-  // -----------------------------------------------------------------------
-  // Stats (GET /api/v1/alarms/stats)
-  // -----------------------------------------------------------------------
-  async getAlarmStats(tenantId, period) {
-    const query = new URLSearchParams({ tenantId, period });
-    const raw = await this.request(
-      `${this.baseUrl}/alarms/stats?${query.toString()}`
-    );
-    return raw?.data ?? raw;
-  }
-  // -----------------------------------------------------------------------
-  // Trend (GET /api/v1/alarms/stats/trend)
-  // -----------------------------------------------------------------------
-  async getAlarmTrend(tenantId, period, groupBy) {
-    const query = new URLSearchParams({ tenantId, period, groupBy });
-    const raw = await this.request(
-      `${this.baseUrl}/alarms/stats/trend?${query.toString()}`
-    );
-    return this.unwrapArray(raw);
-  }
-  // -----------------------------------------------------------------------
-  // Top offenders (GET /api/v1/alarms/stats/top-offenders)
-  // -----------------------------------------------------------------------
-  async getTopOffenders(tenantId, limit = 5) {
-    const query = new URLSearchParams({ tenantId, limit: String(limit) });
-    const raw = await this.request(
-      `${this.baseUrl}/alarms/stats/top-offenders?${query.toString()}`
-    );
-    return this.unwrapArray(raw);
-  }
-  // -----------------------------------------------------------------------
-  // Per-device stats (GET /api/v1/alarms/stats/by-device)
-  // -----------------------------------------------------------------------
-  async getAlarmStatsByDevice(tenantId) {
-    const query = new URLSearchParams({ tenantId });
-    const raw = await this.request(
-      `${this.baseUrl}/alarms/stats/by-device?${query.toString()}`
-    );
-    return this.unwrapArray(raw);
-  }
-  // -----------------------------------------------------------------------
-  // Alarm actions (POST /alarms/:id/...)
-  // -----------------------------------------------------------------------
-  async acknowledgeAlarm(id, acknowledgedBy, note) {
-    await this.request(`${this.baseUrl}/alarms/${id}/ack`, {
-      method: "POST",
-      body: JSON.stringify({ acknowledgedBy, note })
-    });
-  }
-  async silenceAlarm(id, silencedBy, duration, reason) {
-    await this.request(`${this.baseUrl}/alarms/${id}/silence`, {
-      method: "POST",
-      body: JSON.stringify({ silencedBy, duration, reason })
-    });
-  }
-  async escalateAlarm(id, escalatedBy, reason) {
-    await this.request(`${this.baseUrl}/alarms/${id}/escalate`, {
-      method: "POST",
-      body: JSON.stringify({ escalatedBy, reason })
-    });
-  }
-  async closeAlarm(id, closedBy, resolution) {
-    await this.request(`${this.baseUrl}/alarms/${id}/close`, {
-      method: "POST",
-      body: JSON.stringify({ closedBy, resolution })
-    });
-  }
-  // -----------------------------------------------------------------------
-  // Batch alarm actions (POST /alarms/batch/*)
-  // Up to 100 IDs per call; response contains succeeded/failed arrays.
-  // -----------------------------------------------------------------------
-  async batchAcknowledge(alarmIds, acknowledgedBy) {
-    const res = await this.request(
-      `${this.baseUrl}/alarms/batch/ack`,
-      { method: "POST", body: JSON.stringify({ alarmIds, acknowledgedBy }) }
-    );
-    return res.data;
-  }
-  async batchSilence(alarmIds, silencedBy, duration) {
-    const res = await this.request(
-      `${this.baseUrl}/alarms/batch/silence`,
-      { method: "POST", body: JSON.stringify({ alarmIds, silencedBy, duration }) }
-    );
-    return res.data;
-  }
-  async batchEscalate(alarmIds, escalatedBy) {
-    const res = await this.request(
-      `${this.baseUrl}/alarms/batch/escalate`,
-      { method: "POST", body: JSON.stringify({ alarmIds, escalatedBy }) }
-    );
-    return res.data;
-  }
-  async batchClose(alarmIds, closedBy, resolution) {
-    const res = await this.request(
-      `${this.baseUrl}/alarms/batch/close`,
-      { method: "POST", body: JSON.stringify({ alarmIds, closedBy, resolution }) }
-    );
-    return res.data;
-  }
-};
-
-// src/services/alarm/AlarmService.ts
-function isFresh(entry, ttlMs) {
-  return !!entry && Date.now() - entry.timestamp < ttlMs;
-}
-function mapApiAlarm(api, customerMap) {
-  return {
-    id: api.id,
-    customerId: api.customerId ?? api.tenantId,
-    customerName: customerMap?.get(api.customerId ?? "") ?? "",
-    source: api.deviceName || api.deviceId,
-    severity: api.severity,
-    state: api.state,
-    title: api.title,
-    description: api.description ?? "",
-    tags: {
-      alarmType: api.alarmType,
-      deviceType: api.deviceType
-    },
-    firstOccurrence: api.raisedAt || api.raised_at || api.createdAt || void 0,
-    lastOccurrence: api.lastUpdatedAt || api.updatedAt || api.updated_at || void 0,
-    occurrenceCount: api.occurrenceCount ?? api.dispatchCount ?? 1,
-    acknowledgedAt: api.acknowledgedAt || void 0,
-    acknowledgedBy: api.acknowledgedBy,
-    snoozedUntil: api.silencedUntil || api.snoozedUntil || void 0,
-    closedAt: api.closedAt || void 0,
-    closedBy: api.closedBy,
-    closedReason: api.resolution,
-    triggerValue: api.metadata?.value,
-    centralId: api.centralId || void 0
-  };
-}
-function mapApiStats(api) {
-  return {
-    total: api.total,
-    bySeverity: {
-      CRITICAL: api.bySeverity?.CRITICAL ?? 0,
-      HIGH: api.bySeverity?.HIGH ?? 0,
-      MEDIUM: api.bySeverity?.MEDIUM ?? 0,
-      LOW: api.bySeverity?.LOW ?? 0,
-      INFO: api.bySeverity?.INFO ?? 0
-    },
-    byState: {
-      OPEN: api.byState?.OPEN ?? 0,
-      ACK: api.byState?.ACK ?? 0,
-      SNOOZED: api.byState?.SNOOZED ?? 0,
-      ESCALATED: api.byState?.ESCALATED ?? 0,
-      CLOSED: api.byState?.CLOSED ?? 0
-    },
-    openCritical: api.openCritical,
-    openHigh: api.openHigh,
-    last24Hours: api.last24Hours
-  };
-}
-function mapApiTrend(apiTrend) {
-  return (apiTrend || []).map((point) => ({
-    label: point.label || point.period,
-    timestamp: point.timestamp || new Date(point.period).getTime() || 0,
-    total: point.total ?? point.count,
-    bySeverity: point.bySeverity ? {
-      CRITICAL: point.bySeverity.CRITICAL ?? 0,
-      HIGH: point.bySeverity.HIGH ?? 0,
-      MEDIUM: point.bySeverity.MEDIUM ?? 0,
-      LOW: point.bySeverity.LOW ?? 0,
-      INFO: point.bySeverity.INFO ?? 0
-    } : void 0
-  }));
-}
-function mapApiTopOffenders(items, deviceNameMap) {
-  return (items || []).map((item) => ({
-    name: deviceNameMap.get(item.deviceId) ?? item.deviceName ?? item.deviceId,
-    location: item.customerName ?? "",
-    downtime: item.downtimeHours ?? (item.totalDowntimeMinutes ?? 0) / 60,
-    percentage: 0
-    // computed by caller if needed
-  }));
-}
-var AlarmServiceClass = class {
-  client = new AlarmApiClient();
-  cacheTtlMs = 3 * 60 * 1e3;
-  // 3 min default; overridable via configure()
-  availabilityCache = /* @__PURE__ */ new Map();
-  alarmsCache = /* @__PURE__ */ new Map();
-  statsCache = /* @__PURE__ */ new Map();
-  trendCache = /* @__PURE__ */ new Map();
-  // -----------------------------------------------------------------------
-  // Availability (MTBF / MTTR per device)
-  // -----------------------------------------------------------------------
-  /**
-   * Fetches MTBF, MTTR, and Availability metrics per device and fleet-wide.
-   * Results are cached for 60 seconds.
-   */
-  async getAvailability(customerId, startAt, endAt) {
-    if (!customerId) {
-      throw new Error("AlarmService.getAvailability: customerId is required");
-    }
-    const cacheKey = `avail:${customerId}:${startAt}:${endAt}`;
-    const cached = this.availabilityCache.get(cacheKey);
-    if (isFresh(cached, this.cacheTtlMs)) return cached.data;
-    const data = await this.client.getAvailability({
-      customerId,
-      startAt,
-      endAt,
-      includeByDevice: true
-    });
-    this.availabilityCache.set(cacheKey, { data, timestamp: Date.now() });
-    return data;
-  }
-  // -----------------------------------------------------------------------
-  // Alarm list
-  // -----------------------------------------------------------------------
-  /**
-   * Fetch alarm list with optional filters, auto-paginating until hasMore is false.
-   * Returns { data: Alarm[], summary: AlarmListSummary } with all pages merged.
-   * The summary comes from page 1 (reflects full dataset totals).
-   */
-  async getAlarms(params = {}, customerMap) {
-    const cacheKey = `alarms:${JSON.stringify(params)}`;
-    const cached = this.alarmsCache.get(cacheKey);
-    if (isFresh(cached, this.cacheTtlMs)) return cached.data;
-    let allData = [];
-    let summary;
-    let totalPages = 1;
-    let page = 1;
-    while (page <= totalPages) {
-      const response = await this.client.getAlarms({ ...params, page });
-      const pageData = (response.data || []).map((a) => mapApiAlarm(a, customerMap));
-      allData = allData.concat(pageData);
-      if (page === 1) {
-        summary = response.summary;
-        totalPages = response.pagination?.totalPages ?? 1;
-      }
-      page++;
-    }
-    const result = { data: allData, summary };
-    this.alarmsCache.set(cacheKey, { data: result, timestamp: Date.now() });
-    return result;
-  }
-  // -----------------------------------------------------------------------
-  // Alarm statistics
-  // -----------------------------------------------------------------------
-  /**
-   * Fetch aggregated alarm statistics for a tenant and time period.
-   * Returns mapped AlarmStats (from src/types/alarm.ts).
-   */
-  async getAlarmStats(tenantId, period) {
-    const cacheKey = `stats:${tenantId}:${period}`;
-    const cached = this.statsCache.get(cacheKey);
-    if (isFresh(cached, this.cacheTtlMs)) return cached.data;
-    const raw = await this.client.getAlarmStats(tenantId, period);
-    const data = mapApiStats(raw);
-    this.statsCache.set(cacheKey, { data, timestamp: Date.now() });
-    return data;
-  }
-  // -----------------------------------------------------------------------
-  // Alarm trend
-  // -----------------------------------------------------------------------
-  /**
-   * Fetch alarm trend data points.
-   * Returns mapped AlarmTrendDataPoint[] (from src/types/alarm.ts).
-   */
-  async getAlarmTrend(tenantId, period, groupBy) {
-    const cacheKey = `trend:${tenantId}:${period}:${groupBy}`;
-    const cached = this.trendCache.get(cacheKey);
-    if (isFresh(cached, this.cacheTtlMs)) return cached.data;
-    const raw = await this.client.getAlarmTrend(tenantId, period, groupBy);
-    const data = mapApiTrend(raw);
-    this.trendCache.set(cacheKey, { data, timestamp: Date.now() });
-    return data;
-  }
-  // -----------------------------------------------------------------------
-  // Top downtime / offenders
-  // -----------------------------------------------------------------------
-  /**
-   * Fetch top devices by alarm count / downtime.
-   * Returns mapped DowntimeEntry[] (from src/types/operational.ts).
-   *
-   * @param deviceNameMap - Optional map of deviceId → friendly name from ThingsBoard cache
-   */
-  async getTopDowntime(tenantId, deviceNameMap = /* @__PURE__ */ new Map(), limit = 5) {
-    const items = await this.client.getTopOffenders(tenantId, limit);
-    return mapApiTopOffenders(items, deviceNameMap);
-  }
-  // -----------------------------------------------------------------------
-  // Per-device alarm counts
-  // -----------------------------------------------------------------------
-  /**
-   * Fetch alarm counts per device.
-   * Returns a Map<deviceId, alarmCount>.
-   */
-  async getDeviceAlarmCounts(tenantId) {
-    const items = await this.client.getAlarmStatsByDevice(tenantId);
-    const map = /* @__PURE__ */ new Map();
-    (items || []).forEach((item) => map.set(item.deviceId, item.alarmCount));
-    return map;
-  }
-  // -----------------------------------------------------------------------
-  // Alarm actions
-  // -----------------------------------------------------------------------
-  async acknowledgeAlarm(id, userEmail, note) {
-    return this.client.acknowledgeAlarm(id, userEmail, note);
-  }
-  async silenceAlarm(id, userEmail, duration, reason) {
-    return this.client.silenceAlarm(id, userEmail, duration, reason);
-  }
-  async escalateAlarm(id, userEmail, reason) {
-    return this.client.escalateAlarm(id, userEmail, reason);
-  }
-  async closeAlarm(id, userEmail, resolution) {
-    return this.client.closeAlarm(id, userEmail, resolution);
-  }
-  // -----------------------------------------------------------------------
-  // Batch alarm actions (POST /alarms/batch/*)
-  // -----------------------------------------------------------------------
-  async batchAcknowledge(alarmIds, userEmail) {
-    return this.client.batchAcknowledge(alarmIds, userEmail);
-  }
-  async batchSilence(alarmIds, userEmail, duration) {
-    return this.client.batchSilence(alarmIds, userEmail, duration);
-  }
-  async batchEscalate(alarmIds, userEmail) {
-    return this.client.batchEscalate(alarmIds, userEmail);
-  }
-  async batchClose(alarmIds, userEmail, resolution) {
-    return this.client.batchClose(alarmIds, userEmail, resolution);
-  }
-  // -----------------------------------------------------------------------
-  // Configuration
-  // -----------------------------------------------------------------------
-  /**
-   * Set the Alarms API base URL (e.g. from MAIN_VIEW orchestrator settings).
-   * Clears the cache so subsequent calls use the new endpoint.
-   */
-  configure(baseUrl, cacheTtlMs, apiKey) {
-    this.client.configure(baseUrl ?? "", apiKey);
-    if (cacheTtlMs && cacheTtlMs > 0) this.cacheTtlMs = cacheTtlMs;
-    this.clearCache();
-  }
-  // -----------------------------------------------------------------------
-  // Cache management
-  // -----------------------------------------------------------------------
-  clearCache() {
-    this.availabilityCache.clear();
-    this.alarmsCache.clear();
-    this.statsCache.clear();
-    this.trendCache.clear();
-  }
-};
-var AlarmService = new AlarmServiceClass();
-
 // src/components/AlarmsNotificationsPanel/AlarmsNotificationsPanelController.ts
 var AlarmsNotificationsPanelController = class {
   state;
@@ -143821,16 +144075,36 @@ var AlarmsNotificationsPanelView = class {
    * Render dashboard tab content.
    * Trend data is fetched asynchronously on first open and injected when ready.
    */
+  /** KPIs do Dashboard calculados sobre uma lista de alarmes (a mesma exibida na Lista). */
+  statsFromAlarms(alarms) {
+    const bySeverity = { CRITICAL: 0, HIGH: 0, MEDIUM: 0, LOW: 0, INFO: 0 };
+    const byState = { OPEN: 0, ACK: 0, SNOOZED: 0, ESCALATED: 0, CLOSED: 0 };
+    let openCritical = 0;
+    let openHigh = 0;
+    let last24Hours = 0;
+    const since = Date.now() - 24 * 60 * 60 * 1e3;
+    for (const a of alarms) {
+      if (a.severity in bySeverity) bySeverity[a.severity]++;
+      if (a.state in byState) byState[a.state]++;
+      const open = a.state !== "CLOSED";
+      if (open && a.severity === "CRITICAL") openCritical++;
+      if (open && a.severity === "HIGH") openHigh++;
+      const first = new Date(a.firstOccurrence || a.lastOccurrence || 0).getTime();
+      if (first >= since) last24Hours++;
+    }
+    return { total: alarms.length, bySeverity, byState, openCritical, openHigh, last24Hours };
+  }
   renderDashboardContent(state6) {
     if (!this.root) return;
     const container = this.root.querySelector("#dashboardContent");
     if (!container) return;
+    const stats = state6.allAlarms.length > 0 ? this.statsFromAlarms(state6.filteredAlarms) : state6.stats;
     if (container.children.length > 0) {
-      updateDashboard(container, state6.stats, this.trendData);
+      updateDashboard(container, stats, this.trendData);
     } else {
-      container.innerHTML = renderDashboard(state6.stats, this.trendData);
+      container.innerHTML = renderDashboard(stats, this.trendData);
     }
-    this.emit("stats-updated", state6.stats);
+    this.emit("stats-updated", stats);
     if (!this.trendFetched && this.params.tenantId) {
       this.trendFetched = true;
       AlarmService.getAlarmTrend(this.params.tenantId, "week", "day").then((data) => {
@@ -163286,6 +163560,11 @@ var STYLES3 = `
     flex-direction: column;
     overflow: hidden;
   }
+  #${MODAL_ID5} .abm-card.is-maximized {
+    width: 100vw !important; max-width: 100vw !important;
+    height: 100vh !important; max-height: 100vh !important; border-radius: 0;
+  }
+  #${MODAL_ID5} .myio-premium-chrome-header .abm-view-toggle { margin-left: 0; margin-right: 6px; }
   #${MODAL_ID5} .abm-header {
     background: ${TEAL2};
     color: #fff;
@@ -164284,7 +164563,11 @@ async function openAlarmBundleMapModal(params) {
   card.className = "abm-card";
   overlay.appendChild(card);
   document.body.appendChild(overlay);
+  let chrome = null;
+  let maximized = false;
   const closeModal2 = () => {
+    chrome?.destroy();
+    chrome = null;
     overlay.remove();
     params.onClose?.();
   };
@@ -164310,12 +164593,29 @@ async function openAlarmBundleMapModal(params) {
         <button class="abm-close-btn" id="abm-close-btn" title="Fechar">\u2715</button>
       </div>
       <div class="abm-body">${bodyHtml}</div>
-      <div class="abm-footer">
-        <button class="abm-btn abm-btn-secondary" id="abm-close-btn-footer">Fechar</button>
-      </div>
     `;
     card.querySelector("#abm-close-btn")?.addEventListener("click", closeModal2);
-    card.querySelector("#abm-close-btn-footer")?.addEventListener("click", closeModal2);
+    const toggleEl = card.querySelector(".abm-view-toggle");
+    chrome?.destroy();
+    chrome = createPremiumModalChrome({
+      modalId: "abm-modal",
+      icon: "\u{1F517}",
+      title: `Mapa de Alarmes GCDR${subtitle ? ` \u2014 ${escHtml5(subtitle)}` : ""}`,
+      modalEl: card,
+      headerSlot: card.querySelector(".abm-header"),
+      maximized,
+      headerRadius: "16px 16px 0 0",
+      onMaximizeChange: (m) => {
+        maximized = m;
+        placeToggle();
+      },
+      onClose: closeModal2
+    });
+    const placeToggle = () => {
+      const actions = chrome?.header.lastElementChild;
+      if (toggleEl && actions) actions.insertBefore(toggleEl, actions.firstChild);
+    };
+    placeToggle();
   }
   render3(`<div class="abm-loading">\u23F3 Carregando mapa de alarmes...</div>`);
   try {