npm - matterbridge-plugin-lightwaverf - Versions diffs - 1.0.0 → 1.0.1 - Mend

matterbridge-plugin-lightwaverf 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (137) hide show

package/.matterbridge/history.html ADDED Viewed

@@ -0,0 +1,741 @@
+<!DOCTYPE html>
+<html lang="en" translate="no">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="google" content="notranslate" />
+    <meta http-equiv="Content-Language" content="en" />
+    <title>Matterbridge Cpu &amp; Memory History</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+    <style>
+      :root {
+        color-scheme: dark light;
+        --bg: #0f172a;
+        --bg-card: rgba(15, 23, 42, 0.72);
+        --fg: #e2e8f0;
+        --accent: #38bdf8;
+        --muted: #94a3b8;
+        --border: rgba(148, 163, 184, 0.2);
+        font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      }
+      body {
+        margin: 0;
+        padding: 20px;
+        background: linear-gradient(145deg, #020617, #0f172a);
+        color: var(--fg);
+        min-width: 320px;
+        min-height: 100vh;
+      }
+      h1 {
+        margin-top: 0;
+        font-size: clamp(1.4rem, 1.8vw, 2.0rem);
+        font-weight: 700;
+        color: var(--accent);
+      }
+      .container {
+        min-width: 320px;
+        max-width: 1240px;
+        margin: 0 auto;
+        padding: 0;
+        display: grid;
+        gap: 20px;
+      }
+      .card {
+        background: var(--bg-card);
+        border: 1px solid var(--border);
+        border-radius: 16px;
+        padding: 20px;
+        box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35);
+        backdrop-filter: blur(12px);
+        margin: 0;
+        width: calc(100% - 40px);
+        max-width: 1200px;
+        position: relative;
+        overflow: hidden;
+      }
+      .summary-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+        gap: 16px;
+      }
+      .summary-item {
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        padding: 16px;
+        background: rgba(30, 41, 59, 0.85);
+      }
+      .summary-item h2 {
+        margin: 0 0 8px;
+        font-size: 0.95rem;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        color: var(--muted);
+      }
+      .summary-item p {
+        margin: 0;
+        font-size: 1.25rem;
+        font-weight: 600;
+      }
+      canvas {
+        width: min(100%, 1200px);
+        height: 320px;
+        display: block;
+        margin: 0 auto;
+      }
+      .chart-legend {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        margin-top: 16px;
+        font-size: 0.85rem;
+        color: var(--muted);
+      }
+      .chart-legend span {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .chart-legend span::before {
+        content: '';
+        width: 12px;
+        height: 12px;
+        border-radius: 999px;
+        background: currentColor;
+        opacity: 0.85;
+        border: 1px solid rgba(255, 255, 255, 0.4);
+      }
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 0.95rem;
+      }
+      th, td {
+        padding: 8px;
+        border-bottom: 1px solid var(--border);
+        text-align: left;
+        white-space: nowrap;
+      }
+      th {
+        text-transform: uppercase;
+        font-size: 0.75rem;
+        letter-spacing: 0.08em;
+        color: var(--muted);
+      }
+      td {
+        font-size: 0.75rem;
+      }
+      tr:hover {
+        background: rgba(148, 163, 184, 0.08);
+      }
+      .table-wrapper {
+        overflow: auto;
+        max-height: 400px;
+        scrollbar-color: rgba(148, 163, 184, 0.35) var(--bg-card);
+        scrollbar-width: thin;
+      }
+      .table-wrapper::-webkit-scrollbar {
+        width: 10px;
+      }
+      .table-wrapper::-webkit-scrollbar-track {
+        background: var(--bg-card);
+      }
+      .table-wrapper::-webkit-scrollbar-thumb {
+        background-color: rgba(148, 163, 184, 0.45);
+        border-radius: 999px;
+        border: 2px solid var(--bg-card);
+      }
+      @media (max-width: 720px) {
+        body {
+          padding: 16px;
+        }
+        .card {
+          padding: 18px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <header>
+        <h1>Matterbridge Cpu &amp; Memory History</h1>
+        <p>Hostname: Stanislaws-MacBook-Pro.local</p>
+        <p>Generated: 11/9/2025, 7:48:39 PM</p>
+      </header>
+      <section class="card">
+        <div class="summary-grid" id="summary"></div>
+      </section>
+      <section class="card">
+        <h2>Host CPU Usage (%)</h2>
+        <canvas id="cpuChart"></canvas>
+      </section>
+      <section class="card">
+        <h2>Process CPU Usage (%)</h2>
+        <canvas id="processCpuChart"></canvas>
+      </section>
+      <section class="card">
+        <h2>Memory Usage (MB)</h2>
+        <canvas id="memoryChart"></canvas>
+      </section>
+      <section class="card">
+        <h2>External and Array Buffers (MB)</h2>
+        <canvas id="extArrayChart"></canvas>
+      </section>
+      <section class="card">
+        <h2>Samples</h2>
+        <div class="table-wrapper">
+          <table>
+            <thead>
+              <tr>
+                <th>Timestamp</th>
+                <th>Host CPU %</th>
+                <th title="Host CPU Peak">Peak %</th>
+                <th>Process CPU %</th>
+                <th title="Process CPU Peak">Peak %</th>
+                <th>RSS (MB)</th>
+                <th title="RSS Peak">Peak MB</th>
+                <th>Heap Used (MB)</th>
+                <th title="Heap Used Peak">Peak MB</th>
+                <th>Heap Total (MB)</th>
+                <th title="Heap Total Peak">Peak MB</th>
+              </tr>
+            </thead>
+            <tbody id="historyTable"></tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+    <script type="module">
+      const HISTORY_DATA = [{"timestamp":1762717516145,"freeMemory":38163939328,"peakFreeMemory":38163939328,"totalMemory":68719476736,"peakTotalMemory":68719476736,"osCpu":40.47,"peakOsCpu":40.47,"processCpu":1.74,"peakProcessCpu":1.74,"rss":212828160,"peakRss":212828160,"heapUsed":99421136,"peakHeapUsed":99421136,"heapTotal":126484480,"peakHeapTotal":126484480,"external":3924208,"peakExternal":3924208,"arrayBuffers":207181,"peakArrayBuffers":207181},{"timestamp":1762717526147,"freeMemory":37908840448,"peakFreeMemory":38163939328,"totalMemory":68719476736,"peakTotalMemory":68719476736,"osCpu":31.75,"peakOsCpu":40.47,"processCpu":0.07,"peakProcessCpu":1.74,"rss":214908928,"peakRss":214908928,"heapUsed":92811880,"peakHeapUsed":99421136,"heapTotal":96337920,"peakHeapTotal":126484480,"external":3822892,"peakExternal":3924208,"arrayBuffers":105865,"peakArrayBuffers":207181},{"timestamp":1762717536149,"freeMemory":37452791808,"peakFreeMemory":38163939328,"totalMemory":68719476736,"peakTotalMemory":68719476736,"osCpu":34.81,"peakOsCpu":40.47,"processCpu":0.37,"peakProcessCpu":1.74,"rss":170131456,"peakRss":214908928,"heapUsed":78840864,"peakHeapUsed":99421136,"heapTotal":83230720,"peakHeapTotal":126484480,"external":3818927,"peakExternal":3924208,"arrayBuffers":87424,"peakArrayBuffers":207181},{"timestamp":1762717546150,"freeMemory":36964368384,"peakFreeMemory":38163939328,"totalMemory":68719476736,"peakTotalMemory":68719476736,"osCpu":32.16,"peakOsCpu":40.47,"processCpu":0.31,"peakProcessCpu":1.74,"rss":185384960,"peakRss":214908928,"heapUsed":83153368,"peakHeapUsed":99421136,"heapTotal":89784320,"peakHeapTotal":126484480,"external":3815167,"peakExternal":3924208,"arrayBuffers":98220,"peakArrayBuffers":207181},{"timestamp":1762717556151,"freeMemory":36863361024,"peakFreeMemory":38163939328,"totalMemory":68719476736,"peakTotalMemory":68719476736,"osCpu":26.66,"peakOsCpu":40.47,"processCpu":0.02,"peakProcessCpu":1.74,"rss":185384960,"peakRss":214908928,"heapUsed":82746936,"peakHeapUsed":99421136,"heapTotal":89784320,"peakHeapTotal":126484480,"external":3812488,"peakExternal":3924208,"arrayBuffers":95541,"peakArrayBuffers":207181},{"timestamp":1762717566152,"freeMemory":36649730048,"peakFreeMemory":38163939328,"totalMemory":68719476736,"peakTotalMemory":68719476736,"osCpu":29.34,"peakOsCpu":40.47,"processCpu":0.05,"peakProcessCpu":1.74,"rss":185384960,"peakRss":214908928,"heapUsed":82737024,"peakHeapUsed":99421136,"heapTotal":89784320,"peakHeapTotal":126484480,"external":3810638,"peakExternal":3924208,"arrayBuffers":93691,"peakArrayBuffers":207181},{"timestamp":1762717576153,"freeMemory":36630003712,"peakFreeMemory":38163939328,"totalMemory":68719476736,"peakTotalMemory":68719476736,"osCpu":28.17,"peakOsCpu":40.47,"processCpu":0.05,"peakProcessCpu":1.74,"rss":185384960,"peakRss":214908928,"heapUsed":83227800,"peakHeapUsed":99421136,"heapTotal":90832896,"peakHeapTotal":126484480,"external":3824490,"peakExternal":3924208,"arrayBuffers":107543,"peakArrayBuffers":207181},{"timestamp":1762717586153,"freeMemory":36500733952,"peakFreeMemory":38163939328,"totalMemory":68719476736,"peakTotalMemory":68719476736,"osCpu":33.84,"peakOsCpu":40.47,"processCpu":0.05,"peakProcessCpu":1.74,"rss":185384960,"peakRss":214908928,"heapUsed":82645248,"peakHeapUsed":99421136,"heapTotal":89784320,"peakHeapTotal":126484480,"external":3829166,"peakExternal":3924208,"arrayBuffers":99221,"peakArrayBuffers":207181},{"timestamp":1762717596154,"freeMemory":36164354048,"peakFreeMemory":38163939328,"totalMemory":68719476736,"peakTotalMemory":68719476736,"osCpu":43.97,"peakOsCpu":43.97,"processCpu":0.01,"peakProcessCpu":1.74,"rss":185417728,"peakRss":214908928,"heapUsed":83387304,"peakHeapUsed":99421136,"heapTotal":89784320,"peakHeapTotal":126484480,"external":3828938,"peakExternal":3924208,"arrayBuffers":111991,"peakArrayBuffers":207181},{"timestamp":1762717606155,"freeMemory":36463820800,"peakFreeMemory":38163939328,"totalMemory":68719476736,"peakTotalMemory":68719476736,"osCpu":36.97,"peakOsCpu":43.97,"processCpu":0.01,"peakProcessCpu":1.74,"rss":185434112,"peakRss":214908928,"heapUsed":83302512,"peakHeapUsed":99421136,"heapTotal":89784320,"peakHeapTotal":126484480,"external":3829306,"peakExternal":3924208,"arrayBuffers":112359,"peakArrayBuffers":207181},{"timestamp":1762717616156,"freeMemory":35951788032,"peakFreeMemory":38163939328,"totalMemory":68719476736,"peakTotalMemory":68719476736,"osCpu":25.3,"peakOsCpu":43.97,"processCpu":0.02,"peakProcessCpu":1.74,"rss":185434112,"peakRss":214908928,"heapUsed":82663024,"peakHeapUsed":99421136,"heapTotal":89784320,"peakHeapTotal":126484480,"external":3833282,"peakExternal":3924208,"arrayBuffers":99221,"peakArrayBuffers":207181},{"timestamp":1762717626156,"freeMemory":35742203904,"peakFreeMemory":38163939328,"totalMemory":68719476736,"peakTotalMemory":68719476736,"osCpu":26.61,"peakOsCpu":43.97,"processCpu":0.05,"peakProcessCpu":1.74,"rss":185450496,"peakRss":214908928,"heapUsed":82700032,"peakHeapUsed":99421136,"heapTotal":89784320,"peakHeapTotal":126484480,"external":3830114,"peakExternal":3924208,"arrayBuffers":99221,"peakArrayBuffers":207181},{"timestamp":1762717636157,"freeMemory":35591749632,"peakFreeMemory":38163939328,"totalMemory":68719476736,"peakTotalMemory":68719476736,"osCpu":42.5,"peakOsCpu":43.97,"processCpu":0.03,"peakProcessCpu":1.74,"rss":185466880,"peakRss":214908928,"heapUsed":83551824,"peakHeapUsed":99421136,"heapTotal":90832896,"peakHeapTotal":126484480,"external":3829326,"peakExternal":3924208,"arrayBuffers":112379,"peakArrayBuffers":207181},{"timestamp":1762717646157,"freeMemory":34653339648,"peakFreeMemory":38163939328,"totalMemory":68719476736,"peakTotalMemory":68719476736,"osCpu":33.08,"peakOsCpu":43.97,"processCpu":0.33,"peakProcessCpu":1.74,"rss":201867264,"peakRss":214908928,"heapUsed":89353448,"peakHeapUsed":99421136,"heapTotal":113311744,"peakHeapTotal":126484480,"external":5174193,"peakExternal":5174193,"arrayBuffers":1459636,"peakArrayBuffers":1459636},{"timestamp":1762717656159,"freeMemory":34647752704,"peakFreeMemory":38163939328,"totalMemory":68719476736,"peakTotalMemory":68719476736,"osCpu":24.61,"peakOsCpu":43.97,"processCpu":0.31,"peakProcessCpu":1.74,"rss":179879936,"peakRss":214908928,"heapUsed":80826824,"peakHeapUsed":99421136,"heapTotal":85786624,"peakHeapTotal":126484480,"external":3806050,"peakExternal":5174193,"arrayBuffers":94601,"peakArrayBuffers":1459636},{"timestamp":1762717666161,"freeMemory":34669461504,"peakFreeMemory":38163939328,"totalMemory":68719476736,"peakTotalMemory":68719476736,"osCpu":23.01,"peakOsCpu":43.97,"processCpu":0.09,"peakProcessCpu":1.74,"rss":181518336,"peakRss":214908928,"heapUsed":81092248,"peakHeapUsed":99421136,"heapTotal":85786624,"peakHeapTotal":126484480,"external":3809974,"peakExternal":5174193,"arrayBuffers":98525,"peakArrayBuffers":1459636},{"timestamp":1762717676161,"freeMemory":34626207744,"peakFreeMemory":38163939328,"totalMemory":68719476736,"peakTotalMemory":68719476736,"osCpu":26,"peakOsCpu":43.97,"processCpu":0.05,"peakProcessCpu":1.74,"rss":181534720,"peakRss":214908928,"heapUsed":81139696,"peakHeapUsed":99421136,"heapTotal":85786624,"peakHeapTotal":126484480,"external":3809300,"peakExternal":5174193,"arrayBuffers":97851,"peakArrayBuffers":1459636},{"timestamp":1762717686165,"freeMemory":34651619328,"peakFreeMemory":38163939328,"totalMemory":68719476736,"peakTotalMemory":68719476736,"osCpu":24.37,"peakOsCpu":43.97,"processCpu":0.04,"peakProcessCpu":1.74,"rss":181551104,"peakRss":214908928,"heapUsed":80750304,"peakHeapUsed":99421136,"heapTotal":85786624,"peakHeapTotal":126484480,"external":3804178,"peakExternal":5174193,"arrayBuffers":92729,"peakArrayBuffers":1459636},{"timestamp":1762717696167,"freeMemory":34586427392,"peakFreeMemory":38163939328,"totalMemory":68719476736,"peakTotalMemory":68719476736,"osCpu":24.36,"peakOsCpu":43.97,"processCpu":0.15,"peakProcessCpu":1.74,"rss":183697408,"peakRss":214908928,"heapUsed":82019552,"peakHeapUsed":99421136,"heapTotal":87359488,"peakHeapTotal":126484480,"external":3821932,"peakExternal":5174193,"arrayBuffers":110483,"peakArrayBuffers":1459636},{"timestamp":1762717706168,"freeMemory":34500837376,"peakFreeMemory":38163939328,"totalMemory":68719476736,"peakTotalMemory":68719476736,"osCpu":24.21,"peakOsCpu":43.97,"processCpu":0.04,"peakProcessCpu":1.74,"rss":183697408,"peakRss":214908928,"heapUsed":81596224,"peakHeapUsed":99421136,"heapTotal":86310912,"peakHeapTotal":126484480,"external":3818886,"peakExternal":5174193,"arrayBuffers":107437,"peakArrayBuffers":1459636},{"timestamp":1762717716169,"freeMemory":34636136448,"peakFreeMemory":38163939328,"totalMemory":68719476736,"peakTotalMemory":68719476736,"osCpu":22.78,"peakOsCpu":43.97,"processCpu":0.1,"peakProcessCpu":1.74,"rss":184532992,"peakRss":214908928,"heapUsed":82551912,"peakHeapUsed":99421136,"heapTotal":86835200,"peakHeapTotal":126484480,"external":3847348,"peakExternal":5174193,"arrayBuffers":135819,"peakArrayBuffers":1459636}];
+      const SUMMARY_DATA = {"entries":21,"timeRange":"11/9/2025, 7:45:16 PM → 11/9/2025, 7:48:36 PM","peakOsCpu":43.97,"peakProcessCpu":1.74,"peakRss":214908928,"peakHeapUsed":99421136,"peakHeapTotal":126484480,"peakExternal":5174193,"peakArrayBuffers":1459636};
+      let cleanup = () => {};
+      const summaryContainer = document.getElementById('summary');
+      const summaryEntries = [
+        { label: 'Samples', value: SUMMARY_DATA.entries.toLocaleString() },
+        { label: 'Time Range', value: SUMMARY_DATA.timeRange },
+        { label: 'Host CPU Peak', value: SUMMARY_DATA.peakOsCpu.toFixed(2) + ' %' },
+        { label: 'Process CPU Peak', value: SUMMARY_DATA.peakProcessCpu.toFixed(2) + ' %' },
+        { label: 'RSS Peak', value: formatBytes(SUMMARY_DATA.peakRss) },
+        { label: 'Heap Used Peak', value: formatBytes(SUMMARY_DATA.peakHeapUsed) },
+        { label: 'Heap Total Peak', value: formatBytes(SUMMARY_DATA.peakHeapTotal) },
+        { label: 'External Peak', value: formatBytes(SUMMARY_DATA.peakExternal) },
+        { label: 'Array Buffers Peak', value: formatBytes(SUMMARY_DATA.peakArrayBuffers) }
+      ];
+      summaryEntries.forEach(function (itemData) {
+        const item = document.createElement('div');
+        item.className = 'summary-item';
+        item.innerHTML = '<h2>' + itemData.label + '</h2><p>' + itemData.value + '</p>';
+        summaryContainer.appendChild(item);
+      });
+      const tableBody = document.getElementById('historyTable');
+      HISTORY_DATA.forEach(function (entry) {
+        const row = document.createElement('tr');
+        const cells = [
+          new Date(entry.timestamp).toLocaleString(),
+          entry.osCpu.toFixed(2),
+          entry.peakOsCpu.toFixed(2),
+          (Number.isFinite(entry.processCpu) ? entry.processCpu : 0).toFixed(2),
+          (
+            Number.isFinite(entry.peakProcessCpu)
+              ? entry.peakProcessCpu
+              : Number.isFinite(entry.processCpu)
+                ? entry.processCpu
+                : 0
+          ).toFixed(2),
+          bytesToMb(entry.rss).toFixed(2),
+          bytesToMb(entry.peakRss).toFixed(2),
+          bytesToMb(entry.heapUsed).toFixed(2),
+          bytesToMb(entry.peakHeapUsed).toFixed(2),
+          bytesToMb(entry.heapTotal).toFixed(2),
+          bytesToMb(entry.peakHeapTotal).toFixed(2)
+        ];
+        row.innerHTML = '<td>' + cells.join('</td><td>') + '</td>';
+        tableBody.appendChild(row);
+      });
+      const labels = HISTORY_DATA.map(function (entry) {
+        return formatTimestamp(entry.timestamp);
+      });
+      const cpuPeakValue = HISTORY_DATA.reduce(function (acc, entry) {
+        return Math.max(acc, Number.isFinite(entry.peakOsCpu) ? entry.peakOsCpu : 0, Number.isFinite(entry.osCpu) ? entry.osCpu : 0);
+      }, 0);
+      const cpuMaxYAxis = cpuPeakValue > 0 ? cpuPeakValue * 1.05 : undefined;
+      const processCpuPeakValue = HISTORY_DATA.reduce(function (acc, entry) {
+        return Math.max(acc, Number.isFinite(entry.peakProcessCpu) ? entry.peakProcessCpu : 0, Number.isFinite(entry.processCpu) ? entry.processCpu : 0);
+      }, 0);
+      const processCpuMaxYAxis = processCpuPeakValue > 0 ? processCpuPeakValue * 1.05 : undefined;
+      const useProcessCpuDecimals = (processCpuMaxYAxis ?? 0) <= 3;
+      // Compute memory chart dynamic minimum Y as (min observed MB) - 10%
+      const memoryMinMb = HISTORY_DATA.reduce(function (acc, entry) {
+        const values = [entry.rss, entry.heapTotal, entry.heapUsed].map(bytesToMb);
+        const finiteValues = values.filter(function (v) { return Number.isFinite(v); });
+        const minEntry = finiteValues.length ? Math.min.apply(Math, finiteValues) : acc;
+        return Math.min(acc, minEntry);
+      }, Number.POSITIVE_INFINITY);
+      const memoryMinYAxis = Number.isFinite(memoryMinMb) && memoryMinMb > 0 ? Math.max(0, memoryMinMb - memoryMinMb * 0.1) : 0;
+      // Compute memory chart dynamic maximum Y as (max observed MB including peaks) + 5%
+      const memoryMaxMb = HISTORY_DATA.reduce(function (acc, entry) {
+        const values = [
+          entry.rss,
+          entry.heapTotal,
+          entry.heapUsed,
+          entry.peakRss,
+          entry.peakHeapTotal,
+          entry.peakHeapUsed
+        ].map(bytesToMb);
+        const finiteValues = values.filter(function (v) { return Number.isFinite(v); });
+        const maxEntry = finiteValues.length ? Math.max.apply(Math, finiteValues) : acc;
+        return Math.max(acc, maxEntry);
+      }, 0);
+      const memoryMaxYAxis = Number.isFinite(memoryMaxMb) && memoryMaxMb > 0 ? memoryMaxMb * 1.05 : undefined;
+      // Compute External/ArrayBuffers chart dynamic min/max
+      const extArrayMinMb = HISTORY_DATA.reduce(function (acc, entry) {
+        const values = [entry.external, entry.arrayBuffers].map(bytesToMb);
+        const finiteValues = values.filter(function (v) { return Number.isFinite(v); });
+        const minEntry = finiteValues.length ? Math.min.apply(Math, finiteValues) : acc;
+        return Math.min(acc, minEntry);
+      }, Number.POSITIVE_INFINITY);
+      const extArrayMinYAxis = Number.isFinite(extArrayMinMb) && extArrayMinMb > 0
+        ? Math.max(0, extArrayMinMb - extArrayMinMb * 0.1)
+        : 0;
+      const extArrayMaxMb = HISTORY_DATA.reduce(function (acc, entry) {
+        const values = [
+          entry.external,
+          entry.arrayBuffers,
+          entry.peakExternal,
+          entry.peakArrayBuffers,
+        ].map(bytesToMb);
+        const finiteValues = values.filter(function (v) { return Number.isFinite(v); });
+        const maxEntry = finiteValues.length ? Math.max.apply(Math, finiteValues) : acc;
+        return Math.max(acc, maxEntry);
+      }, 0);
+      const extArrayMaxYAxis = Number.isFinite(extArrayMaxMb) && extArrayMaxMb > 0 ? extArrayMaxMb * 1.05 : undefined;
+      renderCharts();
+      function renderCharts() {
+        cleanup();
+        function draw() {
+          renderLineChart('cpuChart', {
+            labels: labels,
+            datasets: [
+              {
+                label: 'Host CPU %',
+                values: HISTORY_DATA.map(function (entry) {
+                  return Number.isFinite(entry.osCpu) ? Number(entry.osCpu.toFixed(2)) : 0;
+                }),
+                color: '#38bdf8',
+                fill: 'rgba(56, 189, 248, 0.18)',
+                markPeaks: true,
+                markerPeakValues: HISTORY_DATA.map(function (entry) {
+                  if (Number.isFinite(entry.peakOsCpu)) return entry.peakOsCpu;
+                  if (Number.isFinite(entry.osCpu)) return entry.osCpu;
+                  return Number.NEGATIVE_INFINITY;
+                }),
+                markerRadius: 2.5
+              },
+              {
+                label: 'Host Peak CPU %',
+                values: HISTORY_DATA.map(function (entry) {
+                  return Number.isFinite(entry.peakOsCpu) ? Number(entry.peakOsCpu.toFixed(2)) : 0;
+                }),
+                color: '#facc15',
+                dashed: [6, 4]
+              }
+            ],
+            minY: 0,
+            maxY: cpuMaxYAxis,
+            yFormatter: function (value) {
+              return value.toFixed(0) + ' %';
+            }
+          });
+          renderLineChart('processCpuChart', {
+            labels: labels,
+            datasets: [
+              {
+                label: 'Process CPU %',
+                values: HISTORY_DATA.map(function (entry) {
+                  return Number.isFinite(entry.processCpu) ? Number(entry.processCpu.toFixed(2)) : 0;
+                }),
+                color: '#a855f7',
+                fill: 'rgba(168, 85, 247, 0.18)',
+                markPeaks: true,
+                markerPeakValues: HISTORY_DATA.map(function (entry) {
+                  if (Number.isFinite(entry.peakProcessCpu)) return entry.peakProcessCpu;
+                  if (Number.isFinite(entry.processCpu)) return entry.processCpu;
+                  return Number.NEGATIVE_INFINITY;
+                }),
+                markerRadius: 2.5
+              },
+              {
+                label: 'Process Peak CPU %',
+                values: HISTORY_DATA.map(function (entry) {
+                  if (Number.isFinite(entry.peakProcessCpu)) {
+                    return Number(entry.peakProcessCpu.toFixed(2));
+                  }
+                  if (Number.isFinite(entry.processCpu)) {
+                    return Number(entry.processCpu.toFixed(2));
+                  }
+                  return 0;
+                }),
+                color: '#f97316',
+                dashed: [6, 4]
+              }
+            ],
+            minY: 0,
+            maxY: processCpuMaxYAxis,
+            yFormatter: function (value) {
+              return value.toFixed(useProcessCpuDecimals ? 1 : 0) + ' %';
+            }
+          });
+          renderLineChart('memoryChart', {
+            labels: labels,
+            datasets: [
+              {
+                label: 'RSS (MB)',
+                values: HISTORY_DATA.map(function (entry) { return bytesToMb(entry.rss); }),
+                color: '#34d399',
+                fill: 'rgba(52, 211, 153, 0.18)',
+                markPeaks: true,
+                markerPeakValues: HISTORY_DATA.map(function (entry) {
+                  if (Number.isFinite(entry.peakRss)) return entry.peakRss;
+                  if (Number.isFinite(entry.rss)) return entry.rss;
+                  return Number.NEGATIVE_INFINITY;
+                }),
+                markerRadius: 2.5
+              },
+              {
+                label: 'Heap Total (MB)',
+                values: HISTORY_DATA.map(function (entry) { return bytesToMb(entry.heapTotal); }),
+                color: '#fb923c',
+                markPeaks: true,
+                markerPeakValues: HISTORY_DATA.map(function (entry) {
+                  if (Number.isFinite(entry.peakHeapTotal)) return entry.peakHeapTotal;
+                  if (Number.isFinite(entry.heapTotal)) return entry.heapTotal;
+                  return Number.NEGATIVE_INFINITY;
+                }),
+                markerRadius: 2.5
+              },
+              {
+                label: 'Heap Used (MB)',
+                values: HISTORY_DATA.map(function (entry) { return bytesToMb(entry.heapUsed); }),
+                color: '#f472b6',
+                markPeaks: true,
+                markerPeakValues: HISTORY_DATA.map(function (entry) {
+                  if (Number.isFinite(entry.peakHeapUsed)) return entry.peakHeapUsed;
+                  if (Number.isFinite(entry.heapUsed)) return entry.heapUsed;
+                  return Number.NEGATIVE_INFINITY;
+                }),
+                markerRadius: 2.5
+              }
+            ],
+            minY: memoryMinYAxis,
+            maxY: memoryMaxYAxis,
+            yFormatter: function (value) {
+              return value.toFixed(0) + ' MB';
+            }
+          });
+          // External and Array Buffers chart
+          renderLineChart('extArrayChart', {
+            labels: labels,
+            datasets: [
+              {
+                label: 'External (MB)',
+                values: HISTORY_DATA.map(function (entry) { return bytesToMb(entry.external); }),
+                color: '#60a5fa',
+                fill: 'rgba(96, 165, 250, 0.18)',
+                markPeaks: true,
+                markerPeakValues: HISTORY_DATA.map(function (entry) {
+                  if (Number.isFinite(entry.peakExternal)) return entry.peakExternal;
+                  if (Number.isFinite(entry.external)) return entry.external;
+                  return Number.NEGATIVE_INFINITY;
+                }),
+                markerRadius: 2.5
+              },
+              {
+                label: 'Array Buffers (MB)',
+                values: HISTORY_DATA.map(function (entry) { return bytesToMb(entry.arrayBuffers); }),
+                color: '#22d3ee',
+                markPeaks: true,
+                markerPeakValues: HISTORY_DATA.map(function (entry) {
+                  if (Number.isFinite(entry.peakArrayBuffers)) return entry.peakArrayBuffers;
+                  if (Number.isFinite(entry.arrayBuffers)) return entry.arrayBuffers;
+                  return Number.NEGATIVE_INFINITY;
+                }),
+                markerRadius: 2.5
+              }
+            ],
+            minY: extArrayMinYAxis,
+            maxY: extArrayMaxYAxis,
+            yFormatter: function (value) {
+              return value.toFixed(0) + ' MB';
+            }
+          });
+        }
+        draw();
+        const debouncedRender = debounce(draw, 150);
+        window.addEventListener('resize', debouncedRender);
+        cleanup = function () {
+          window.removeEventListener('resize', debouncedRender);
+        };
+      }
+      function renderLineChart(canvasId, config) {
+        const canvas = document.getElementById(canvasId);
+        if (!canvas) {
+          return;
+        }
+        const parent = canvas.parentElement;
+        if (parent) {
+          const existingLegend = parent.querySelector('.chart-legend');
+          if (existingLegend) {
+            existingLegend.remove();
+          }
+        }
+        const parentWidth = parent && parent.clientWidth ? parent.clientWidth : canvas.clientWidth || 720;
+        const cssHeight = canvas.dataset.height ? Number(canvas.dataset.height) : 320;
+        const dpr = window.devicePixelRatio || 1;
+        canvas.width = parentWidth * dpr;
+        canvas.height = cssHeight * dpr;
+        canvas.style.width = '100%';
+        canvas.style.height = cssHeight + 'px';
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+          return;
+        }
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.scale(dpr, dpr);
+    const margin = { top: 20, right: 24, bottom: 48, left: 72 };
+    const innerWidth = Math.max(10, parentWidth - margin.left - margin.right);
+    const innerHeight = Math.max(10, cssHeight - margin.top - margin.bottom);
+        ctx.translate(margin.left, margin.top);
+        const allValues = [];
+        config.datasets.forEach(function (dataset) {
+          dataset.values.forEach(function (value) {
+            if (Number.isFinite(value)) {
+              allValues.push(value);
+            }
+          });
+        });
+        let minY = typeof config.minY === 'number' ? config.minY : Math.min.apply(Math, allValues);
+        let maxY = typeof config.maxY === 'number' ? config.maxY : Math.max.apply(Math, allValues);
+        if (!Number.isFinite(minY) || !Number.isFinite(maxY)) {
+          minY = 0;
+          maxY = 1;
+        }
+        if (minY === maxY) {
+          const padding = Math.abs(minY) * 0.05 || 1;
+          minY -= padding;
+          maxY += padding;
+        }
+        const valueRange = maxY - minY;
+        const gridLines = config.yTicks || 4;
+        ctx.lineWidth = 1;
+        ctx.font = '12px Inter, sans-serif';
+        ctx.textAlign = 'right';
+        ctx.textBaseline = 'middle';
+        ctx.fillStyle = '#94a3b8';
+        for (let i = 0; i <= gridLines; i += 1) {
+          const ratio = i / gridLines;
+          const y = innerHeight - ratio * innerHeight;
+          ctx.strokeStyle = 'rgba(148, 163, 184, 0.12)';
+          ctx.beginPath();
+          ctx.moveTo(0, y);
+          ctx.lineTo(innerWidth, y);
+          ctx.stroke();
+          const value = minY + ratio * valueRange;
+          const label = config.yFormatter ? config.yFormatter(value) : value.toFixed(1);
+          ctx.fillText(label, -12, y);
+        }
+        const xCount = config.labels.length;
+        const xTicks = config.xTickCount || Math.min(6, xCount);
+        const xStep = xCount > 1 ? Math.max(1, Math.floor(xCount / xTicks)) : 1;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'top';
+        for (let i = 0; i < xCount; i += xStep) {
+          const x = xCount === 1 ? innerWidth / 2 : (i / (xCount - 1)) * innerWidth;
+          ctx.strokeStyle = 'rgba(148, 163, 184, 0.08)';
+          ctx.beginPath();
+          ctx.moveTo(x, 0);
+          ctx.lineTo(x, innerHeight);
+          ctx.stroke();
+          ctx.save();
+          ctx.translate(x, innerHeight + 14);
+          ctx.rotate(-Math.PI / 8);
+          ctx.fillStyle = '#94a3b8';
+          ctx.fillText(config.labels[i], 0, 0);
+          ctx.restore();
+        }
+        ctx.strokeStyle = 'rgba(148, 163, 184, 0.35)';
+        ctx.lineWidth = 1.2;
+        ctx.beginPath();
+        ctx.moveTo(0, 0);
+        ctx.lineTo(0, innerHeight);
+        ctx.lineTo(innerWidth, innerHeight);
+        ctx.stroke();
+        config.datasets.forEach(function (dataset) {
+          const points = dataset.values.map(function (value, index) {
+            const safeValue = Number.isFinite(value) ? value : minY;
+            const x = xCount === 1 ? innerWidth / 2 : (index / (xCount - 1)) * innerWidth;
+            const ratio = (safeValue - minY) / valueRange;
+            const y = innerHeight - ratio * innerHeight;
+            return { x: x, y: y };
+          });
+          if (dataset.fill && points.length > 1) {
+            ctx.fillStyle = dataset.fill;
+            ctx.beginPath();
+            points.forEach(function (point, pointIndex) {
+              if (pointIndex === 0) {
+                ctx.moveTo(point.x, point.y);
+              } else {
+                ctx.lineTo(point.x, point.y);
+              }
+            });
+            const last = points[points.length - 1];
+            const first = points[0];
+            ctx.lineTo(last.x, innerHeight);
+            ctx.lineTo(first.x, innerHeight);
+            ctx.closePath();
+            ctx.fill();
+          }
+          if (dataset.dashed) {
+            ctx.setLineDash(dataset.dashed);
+          } else {
+            ctx.setLineDash([]);
+          }
+          ctx.strokeStyle = dataset.color;
+          ctx.lineWidth = dataset.width || 2;
+          ctx.beginPath();
+          points.forEach(function (point, pointIndex) {
+            if (pointIndex === 0) {
+              ctx.moveTo(point.x, point.y);
+            } else {
+              ctx.lineTo(point.x, point.y);
+            }
+          });
+          ctx.stroke();
+          ctx.setLineDash([]);
+          // Draw new-peak markers if enabled
+          if (dataset.markPeaks) {
+            let runningMax = -Infinity;
+            const radius = Number.isFinite(dataset.markerRadius) ? dataset.markerRadius : 2.5;
+            ctx.save();
+            ctx.fillStyle = dataset.markerColor || dataset.color;
+            ctx.strokeStyle = 'rgba(255, 255, 255, 0.85)';
+            ctx.lineWidth = 1;
+            const peakSeries = Array.isArray(dataset.markerPeakValues) ? dataset.markerPeakValues : dataset.values;
+            peakSeries.forEach(function (value, idx) {
+              if (!Number.isFinite(value)) return;
+              if (value > runningMax) {
+                runningMax = value;
+                const p = points[idx];
+                ctx.beginPath();
+                ctx.arc(p.x, p.y, radius, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.stroke();
+              }
+            });
+            ctx.restore();
+          }
+        });
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        if (parent) {
+          const legend = document.createElement('div');
+          legend.className = 'chart-legend';
+          config.datasets.forEach(function (dataset) {
+            const legendItem = document.createElement('span');
+            legendItem.style.color = dataset.color;
+            legendItem.textContent = dataset.label;
+            legend.appendChild(legendItem);
+          });
+          parent.appendChild(legend);
+        }
+      }
+      function formatTimestamp(timestamp) {
+        const date = new Date(timestamp);
+        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+      }
+      function debounce(fn, delay) {
+        let timeout;
+        return function () {
+          const context = this;
+          const args = arguments;
+          clearTimeout(timeout);
+          timeout = setTimeout(function () {
+            fn.apply(context, args);
+          }, delay);
+        };
+      }
+      function bytesToMb(bytes) {
+        return bytes / (1024 * 1024);
+      }
+      function formatBytes(bytes) {
+        if (!Number.isFinite(bytes)) return '0 B';
+        const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+        let value = bytes;
+        let unitIndex = 0;
+        while (value >= 1024 && unitIndex < units.length - 1) {
+          value /= 1024;
+          unitIndex += 1;
+        }
+        return value.toFixed(2) + ' ' + units[unitIndex];
+      }
+    </script>
+  </body>
+</html>