@easemate/web-kit 0.1.0

package/build/elements/monitor/index.js

@@ -0,0 +1,666 @@
+import { html } from 'lit-html';
+import { Component } from '~/decorators/Component';
+import { Listen } from '~/decorators/Listen';
+import { Watch } from '~/decorators/Watch';
+import { styleObject } from '~/utils/template-helpers';
+import "./fps.js";
+const METRIC_THRESHOLDS = {
+    LCP: { good: 2500, poor: 4000 },
+    INP: { good: 200, poor: 500 },
+    CLS: { good: 0.1, poor: 0.25 },
+    FCP: { good: 1800, poor: 3000 },
+    ttfb: { good: 800, poor: 1800 },
+    loadTime: { good: 3000, poor: 6000 },
+    domInteractive: { good: 1500, poor: 3500 },
+    fps: { good: 55, poor: 30 },
+    TBT: { good: 200, poor: 600 }
+};
+const GLOBAL_BENCHMARKS = {
+    LCP: 2400,
+    INP: 250,
+    CLS: 0.05,
+    FCP: 1600,
+    TBT: 300
+};
+const rateMetric = (metric, value) => {
+    if (value === null) {
+        return 'unknown';
+    }
+    const thresholds = METRIC_THRESHOLDS[metric];
+    if (!thresholds) {
+        return 'unknown';
+    }
+    if (metric === 'fps') {
+        if (value >= thresholds.good) {
+            return 'good';
+        }
+        if (value >= thresholds.poor) {
+            return 'needs-improvement';
+        }
+        return 'poor';
+    }
+    if (value <= thresholds.good) {
+        return 'good';
+    }
+    if (value < thresholds.poor) {
+        return 'needs-improvement';
+    }
+    return 'poor';
+};
+const formatMetric = (metric, value) => {
+    if (value === null) {
+        return 'N/A';
+    }
+    if (metric === 'CLS') {
+        return value.toFixed(3);
+    }
+    if (metric === 'fps') {
+        return `${Math.round(value)}`;
+    }
+    if (value < 1000) {
+        return `${Math.round(value)}ms`;
+    }
+    return `${(value / 1000).toFixed(2)}s`;
+};
+const formatBytes = (bytes, decimals = 1) => {
+    if (bytes == null || !Number.isFinite(bytes) || bytes <= 0) {
+        return '0 B';
+    }
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
+};
+const estimateCarbonFootprint = (totalBytes) => {
+    if (totalBytes <= 0) {
+        return '0g CO2 eq.';
+    }
+    const emissions = (totalBytes / 1000000000) * 0.81;
+    return `${emissions.toFixed(3)}g CO2 eq.`;
+};
+@Component({
+    tag: 'ease-monitor',
+    styles: `
+    :host {
+      position: relative;
+      z-index: 100000;
+      user-select: none;
+      -webkit-user-select: none;
+      
+    }
+
+    [part="container"] {
+      width: 320px;
+      overflow: hidden; 
+    }
+
+    [part="header"] {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    [part="title"] {
+        display: flex;
+        align-items: center;
+        gap: 0.5em;
+    }
+
+    [part="content"] {
+      display: grid;
+      gap: 1em;
+      max-height: 80vh;
+      overflow-y: auto;
+    }
+
+    .metrics-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
+        gap: 0.5em;
+    }
+
+    .metric-box {
+        text-align: center;
+        cursor: help;
+    }
+
+    .metric-value {
+        font-variant-numeric: tabular-nums; 
+    }
+
+    .rating-good {
+      color: #22c55e;
+    }
+    .rating-needs-improvement {
+      color: #eab308;
+    }
+    .rating-poor {
+      color: #ef4444;
+    }
+    .rating-unknown {
+      color: #6b7280;
+    }
+
+    .status-indicator.rating-good {
+      background-color: #22c55e;
+    }
+    .status-indicator.rating-needs-improvement {
+      background-color: #eab308;
+    }
+    .status-indicator.rating-poor {
+      background-color: #ef4444;
+    }
+    .status-indicator.rating-unknown {
+      background-color: #6b7280;
+    }
+
+    .memory-used.rating-good {
+      background-color: #22c55e;
+    }
+    .memory-used.rating-needs-improvement {
+      background-color: #eab308;
+    }
+    .memory-used.rating-poor {
+      background-color: #ef4444;
+    }
+
+    .resource-list, .memory-usage, .network-info {
+        display: grid;
+        gap: 0.25em;
+    }
+
+    .resource-item, .network-item, .longtask-item {
+        display: flex;
+        justify-content: space-between;
+        font-variant-numeric: tabular-nums;
+    }
+
+    .memory-bar {
+        height: 10px;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .memory-used {
+        height: 100%;
+        transition: width 0.5s ease-in-out;
+    }
+
+    .status-indicator {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+    }
+    
+    .carbon-estimate {
+        text-align: right;
+    }
+
+    .trend-indicator {
+        display: inline-block;
+        width: 1em;
+        text-align: center;
+    }
+  `
+})
+export class Monitor extends HTMLElement {
+    @Watch({})
+    accessor metrics = {
+        navigation: { loadTime: null, domInteractive: null, ttfb: null },
+        coreWebVitals: { LCP: null, INP: null, CLS: 0, FCP: null, TBT: 0 },
+        resources: {
+            js: { count: 0, size: 0 },
+            css: { count: 0, size: 0 },
+            img: { count: 0, size: 0 },
+            other: { count: 0, size: 0 },
+            totalSize: 0
+        },
+        memory: null,
+        fps: null,
+        longTasks: { count: 0, totalDuration: 0 }
+    };
+    @Watch({})
+    accessor network = {
+        effectiveType: 'N/A',
+        rtt: 0
+    };
+    observers = [];
+    memoryInterval = null;
+    clsEntries = [];
+    inpEntries = [];
+    maxINP = 0;
+    longTaskEntries = [];
+    trendHistory = {};
+    maxTrendLength = 5;
+    connectedCallback() {
+        this.initObservers();
+        this.collectInitialMetrics();
+        this.startMemoryMonitoring();
+        this.initNetworkMonitoring();
+        if (document.readyState !== 'complete') {
+            window.addEventListener('load', this.handlePageLoad);
+        }
+        else {
+            this.handlePageLoad();
+        }
+    }
+    disconnectedCallback() {
+        this.observers.forEach((observer) => {
+            observer.disconnect();
+        });
+        this.observers = [];
+        this.stopMemoryMonitoring();
+        this.stopNetworkMonitoring();
+        window.removeEventListener('load', this.handlePageLoad);
+    }
+    @Listen('monitor-fps')
+    handleFpsUpdate(event) {
+        const fps = event.detail?.fps ?? null;
+        this.metrics.fps = fps;
+        this.updateTrend('fps', fps);
+        this.requestRender();
+    }
+    handlePageLoad = () => {
+        setTimeout(() => {
+            this.collectNavigationTiming();
+            this.requestRender();
+        }, 500);
+    };
+    initObservers() {
+        if (!('PerformanceObserver' in window)) {
+            console.warn('PerformanceObserver API not supported.');
+            return;
+        }
+        try {
+            const observer = new PerformanceObserver((list) => {
+                for (const entry of list.getEntries()) {
+                    this.processPerformanceEntry(entry);
+                }
+            });
+            observer.observe({ type: 'largest-contentful-paint', buffered: true });
+            observer.observe({ type: 'event', buffered: true });
+            observer.observe({ type: 'layout-shift', buffered: true });
+            observer.observe({ type: 'paint', buffered: true });
+            observer.observe({ type: 'resource', buffered: true });
+            observer.observe({ type: 'longtask', buffered: true });
+            this.observers.push(observer);
+        }
+        catch (e) {
+            console.error('Error initializing PerformanceObserver:', e);
+        }
+    }
+    collectInitialMetrics() {
+        this.collectNavigationTiming();
+        const resourceEntries = performance.getEntriesByType('resource');
+        this.processResourceEntries(resourceEntries);
+    }
+    collectNavigationTiming() {
+        const navigationEntries = performance.getEntriesByType('navigation');
+        if (navigationEntries.length > 0) {
+            const navTiming = navigationEntries[0];
+            let ttfb = null;
+            if (navTiming.responseStart > 0 && navTiming.fetchStart > 0) {
+                ttfb = navTiming.responseStart - navTiming.fetchStart;
+            }
+            let loadTime = null;
+            if (navTiming.loadEventEnd > 0) {
+                loadTime = navTiming.loadEventEnd - navTiming.startTime;
+            }
+            let domInteractive = null;
+            if (navTiming.domInteractive > 0) {
+                domInteractive = navTiming.domInteractive - navTiming.startTime;
+            }
+            this.metrics.navigation = { ttfb, loadTime, domInteractive };
+            this.updateTrend('loadTime', loadTime);
+            this.updateTrend('ttfb', ttfb);
+        }
+    }
+    processPerformanceEntry(entry) {
+        switch (entry.entryType) {
+            case 'largest-contentful-paint':
+                this.metrics.coreWebVitals.LCP = entry.startTime;
+                this.updateTrend('LCP', entry.startTime);
+                break;
+            case 'event': {
+                const eventEntry = entry;
+                if (eventEntry.interactionId && eventEntry.duration > this.maxINP) {
+                    this.maxINP = eventEntry.duration;
+                    this.metrics.coreWebVitals.INP = this.maxINP;
+                    this.updateTrend('INP', this.maxINP);
+                }
+                this.inpEntries.push(eventEntry);
+                break;
+            }
+            case 'layout-shift': {
+                const lsEntry = entry;
+                if (!lsEntry.hadRecentInput) {
+                    this.clsEntries.push(lsEntry);
+                    this.calculateSessionWindowCLS();
+                }
+                break;
+            }
+            case 'paint':
+                if (entry.name === 'first-contentful-paint') {
+                    this.metrics.coreWebVitals.FCP = entry.startTime;
+                    this.updateTrend('FCP', entry.startTime);
+                }
+                break;
+            case 'resource':
+                this.processResourceEntries([entry]);
+                return;
+            case 'longtask': {
+                const ltEntry = entry;
+                this.longTaskEntries.push(ltEntry);
+                this.calculateLongTasksAndTBT();
+                break;
+            }
+        }
+        this.requestRender();
+    }
+    calculateSessionWindowCLS() {
+        let maxCls = 0;
+        let currentSessionCls = 0;
+        let sessionStartTime = Infinity;
+        let lastTime = -Infinity;
+        this.clsEntries.sort((a, b) => a.startTime - b.startTime);
+        for (const entry of this.clsEntries) {
+            const timeDiff = entry.startTime - lastTime;
+            if (timeDiff > 1000 || entry.startTime - sessionStartTime > 5000) {
+                if (currentSessionCls > 0) {
+                    maxCls = Math.max(maxCls, currentSessionCls);
+                }
+                currentSessionCls = 0;
+                sessionStartTime = entry.startTime;
+            }
+            currentSessionCls += entry.value;
+            lastTime = entry.startTime;
+        }
+        maxCls = Math.max(maxCls, currentSessionCls);
+        this.metrics.coreWebVitals.CLS = maxCls;
+        this.updateTrend('CLS', maxCls);
+    }
+    processResourceEntries(entries) {
+        const summary = this.metrics.resources;
+        entries.forEach((entry) => {
+            const size = entry.transferSize || 0;
+            const initiator = entry.initiatorType;
+            const name = entry.name.toLowerCase();
+            if (initiator === 'script' || name.endsWith('.js')) {
+                summary.js.count++;
+                summary.js.size += size;
+            }
+            else if (initiator === 'css' || name.endsWith('.css') || initiator === 'link') {
+                summary.css.count++;
+                summary.css.size += size;
+            }
+            else if (initiator === 'img' || initiator === 'image' || /\.(jpg|jpeg|png|gif|svg|webp|avif)$/.test(name)) {
+                summary.img.count++;
+                summary.img.size += size;
+            }
+            else {
+                summary.other.count++;
+                summary.other.size += size;
+            }
+            summary.totalSize += size;
+        });
+    }
+    calculateLongTasksAndTBT() {
+        let tbt = 0;
+        let count = 0;
+        const referenceTime = this.metrics.coreWebVitals.FCP ?? 0;
+        this.longTaskEntries.forEach((task) => {
+            if (task.startTime >= referenceTime) {
+                count++;
+                if (task.duration > 50) {
+                    tbt += task.duration - 50;
+                }
+            }
+        });
+        this.metrics.longTasks = { count, totalDuration: tbt };
+        this.metrics.coreWebVitals.TBT = tbt;
+        this.updateTrend('TBT', tbt);
+    }
+    startMemoryMonitoring() {
+        if (!performance.memory) {
+            return;
+        }
+        const updateMemory = () => {
+            if (performance.memory) {
+                const mem = performance.memory;
+                this.metrics.memory = {
+                    jsHeapSizeLimit: Number(mem.jsHeapSizeLimit) || 0,
+                    totalJSHeapSize: Number(mem.totalJSHeapSize) || 0,
+                    usedJSHeapSize: Number(mem.usedJSHeapSize) || 0
+                };
+                this.requestRender();
+            }
+        };
+        updateMemory();
+        this.memoryInterval = window.setInterval(updateMemory, 3000);
+    }
+    stopMemoryMonitoring() {
+        if (this.memoryInterval) {
+            clearInterval(this.memoryInterval);
+            this.memoryInterval = null;
+        }
+    }
+    initNetworkMonitoring() {
+        if (navigator.connection) {
+            this.updateNetworkInfo();
+            navigator.connection.addEventListener('change', this.updateNetworkInfo);
+        }
+    }
+    stopNetworkMonitoring() {
+        if (navigator.connection) {
+            navigator.connection.removeEventListener('change', this.updateNetworkInfo);
+        }
+    }
+    updateNetworkInfo = () => {
+        if (navigator.connection) {
+            this.network = {
+                effectiveType: navigator.connection.effectiveType ?? 'N/A',
+                rtt: navigator.connection.rtt ?? 0
+            };
+        }
+    };
+    updateTrend(key, value) {
+        if (value === null) {
+            return;
+        }
+        const history = this.trendHistory[key] || [];
+        history.push(value);
+        if (history.length > this.maxTrendLength) {
+            history.shift();
+        }
+        this.trendHistory[key] = history;
+    }
+    getTrendDirection(key) {
+        const history = this.trendHistory[key];
+        if (!history || history.length < 2) {
+            return '';
+        }
+        const currentValue = history[history.length - 1];
+        const previousAvg = history.slice(0, history.length - 1).reduce((a, b) => a + b, 0) / (history.length - 1);
+        const threshold = Math.abs(previousAvg * 0.05);
+        const delta = currentValue ?? 0 - previousAvg;
+        if (Math.abs(delta) < threshold) {
+            return '→';
+        }
+        if (key === 'fps') {
+            return delta > 0 ? '↑' : '↓';
+        }
+        else {
+            return delta < 0 ? '↓' : '↑';
+        }
+    }
+    getOverallStatus() {
+        const ratings = [
+            rateMetric('LCP', this.metrics.coreWebVitals.LCP),
+            rateMetric('CLS', this.metrics.coreWebVitals.CLS),
+            rateMetric('INP', this.metrics.coreWebVitals.INP),
+            rateMetric('fps', this.metrics.fps)
+        ];
+        if (ratings.includes('poor')) {
+            return 'poor';
+        }
+        if (ratings.includes('needs-improvement')) {
+            return 'needs-improvement';
+        }
+        if (ratings.every((r) => r === 'unknown')) {
+            return 'unknown';
+        }
+        if (ratings.some((r) => r === 'good')) {
+            return 'good';
+        }
+        return 'unknown';
+    }
+    render() {
+        return html `
+      <div part="container">
+        ${this.renderExpanded()}
+      </div>
+    `;
+    }
+    renderExpanded() {
+        return html `
+      <div part="header">
+        <div part="title">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
+            Performance Monitor
+        </div>
+      </div>
+      <div part="content">
+        ${this.renderVitalsAndTiming()}
+        ${this.renderRealtime()}
+        ${this.renderNetworkInfo()}
+        ${this.renderResources()}
+      </div>
+    `;
+    }
+    renderMetricBox(label, key, value, description) {
+        const rating = rateMetric(key, value);
+        const formattedValue = formatMetric(key, value);
+        const trend = this.getTrendDirection(key);
+        const benchmark = GLOBAL_BENCHMARKS[key];
+        const vsBenchmark = benchmark ? ` (vs avg ${formatMetric(key, benchmark)})` : '';
+        return html `
+        <div class="metric-box" title="${description}${vsBenchmark}">
+            <div part="metric-label" class="metric-label">${label}</div>
+            <div part="metric-value" class="metric-value rating-${rating}" data-rating=${rating}>
+                ${formattedValue}
+                <span class="trend-indicator">${trend}</span>
+            </div>
+        </div>
+    `;
+    }
+    renderVitalsAndTiming() {
+        const { LCP, INP, CLS, FCP, TBT } = this.metrics.coreWebVitals;
+        const { ttfb, loadTime } = this.metrics.navigation;
+        return html `
+        <section>
+            <div part="section-title" class="section-title">Vitals & Timing</div>
+            <div class="metrics-grid">
+                ${this.renderMetricBox('LCP', 'LCP', LCP, 'Largest Contentful Paint: Measures loading performance.')}
+                ${this.renderMetricBox('INP', 'INP', INP, 'Interaction to Next Paint: Measures responsiveness.')}
+                ${this.renderMetricBox('CLS', 'CLS', CLS, 'Cumulative Layout Shift: Measures visual stability.')}
+                ${this.renderMetricBox('FCP', 'FCP', FCP, 'First Contentful Paint: When the browser renders the first bit of content.')}
+                ${this.renderMetricBox('TBT', 'TBT', TBT, 'Total Blocking Time: Sum of blocking portions of long tasks.')}
+                ${this.renderMetricBox('TTFB', 'ttfb', ttfb, 'Time to First Byte: Measures server responsiveness.')}
+                ${this.renderMetricBox('Load', 'loadTime', loadTime, 'Total Page Load Time.')}
+            </div>
+        </section>
+    `;
+    }
+    renderRealtime() {
+        const { memory, longTasks } = this.metrics;
+        return html `
+        <section>
+            <div part="section-title" class="section-title">Realtime Monitoring</div>
+            <ease-monitor-fps></ease-monitor-fps>
+            <div class="longtask-item">
+                <span>Long Tasks (Count / Blocked ms)</span>
+                <span>${longTasks.count} / ${longTasks.totalDuration.toFixed(0)}ms</span>
+            </div>
+            ${this.renderMemory(memory)}
+        </section>
+    `;
+    }
+    renderMemory(memory) {
+        if (!memory) {
+            return html `
+            <div class="memory-usage">
+                (performance.memory API not supported)
+            </div>
+        `;
+        }
+        const usedPercent = memory.totalJSHeapSize > 0 ? (memory.usedJSHeapSize / memory.totalJSHeapSize) * 100 : 0;
+        let rating = 'good';
+        if (usedPercent > 85) {
+            rating = 'poor';
+        }
+        else if (usedPercent > 60) {
+            rating = 'needs-improvement';
+        }
+        return html `
+        <div class="memory-usage">
+            <div class="resource-item">
+                <span>Used / Total Heap</span>
+                <span>${formatBytes(memory.usedJSHeapSize)} / ${formatBytes(memory.totalJSHeapSize)}</span>
+            </div>
+            <div class="memory-bar" title="${usedPercent.toFixed(1)}% Used">
+                <div class="memory-used rating-${rating}" style=${styleObject({ width: `${Math.min(100, usedPercent)}%` })} data-rating=${rating}></div>
+            </div>
+            <div class="resource-item">
+                <span>Heap Limit</span>
+                <span>${formatBytes(memory.jsHeapSizeLimit)}</span>
+            </div>
+        </div>
+    `;
+    }
+    renderNetworkInfo() {
+        const { effectiveType, rtt } = this.network;
+        return html `
+        <section>
+            <div part="section-title" class="section-title">Network Connection</div>
+            <div class="network-info">
+                <div class="network-item">
+                    <span>Effective Type</span>
+                    <span>${effectiveType.toUpperCase()}</span>
+                </div>
+                 <div class="network-item">
+                    <span>Round Trip Time (RTT)</span>
+                    <span>${rtt > 0 ? `${rtt}ms` : 'N/A'}</span>
+                </div>
+            </div>
+        </section>
+    `;
+    }
+    renderResources() {
+        const { js, css, img, other, totalSize } = this.metrics.resources;
+        const totalCount = js.count + css.count + img.count + other.count;
+        const renderItem = (label, data) => html `
+        <div class="resource-item">
+            <span>${label} (${data.count})</span>
+            <span>${formatBytes(data.size)}</span>
+        </div>
+    `;
+        return html `
+        <section>
+            <div part="section-title" class="section-title">Resources (Total: ${formatBytes(totalSize)} / ${totalCount} reqs)</div>
+            <div class="resource-list">
+                ${renderItem('JS', js)}
+                ${renderItem('CSS/Links', css)}
+                ${renderItem('Images', img)}
+                ${renderItem('Other', other)}
+            </div>
+            <div part="carbon-estimate" class="carbon-estimate">
+                Est. Carbon: ${estimateCarbonFootprint(totalSize)}
+            </div>
+            <div>
+              Overall Status: ${this.getOverallStatus()}
+            </div>
+        </section>
+    `;
+    }
+}