bee-ladybug 0.5.3 → 0.6.0

package/src/adapters/CanvasAdapter.js

@@ -4,6 +4,7 @@
  * Reads generic AABB entities, measures host FPS, computes collisions,
  * and pushes packets into the core. Hitboxes are drawn on a stacked
  * overlay canvas so the game pixels stay untouched.
+ * `snapshot()` hands the report hitboxes, collisions, and FPS min/avg/max.
  *
  * The core must never import this file.
  *
@@ -59,6 +60,7 @@ export class CanvasAdapter {
         this.timeScale = 1;
 
         this.#attached = false;
+        this.#reporting = true;
         this.#overlay = null;
         this.#unsubscribe = null;
         this.#rafId = 0;
@@ -66,6 +68,7 @@ export class CanvasAdapter {
         this.#manualPumpWarned = false;
         this.#lastPump = 0;
         this.#fps = 0;
+        this.#fpsSamples = [];
         this.#wasColliding = new Set();
         this.#onResize = () => this.#syncOverlay();
         this.#onTick = () => {
@@ -80,6 +83,7 @@ export class CanvasAdapter {
     }
 
     #attached;
+    #reporting;
     #overlay;
     #unsubscribe;
     #rafId;
@@ -87,6 +91,7 @@ export class CanvasAdapter {
     #manualPumpWarned;
     #lastPump;
     #fps;
+    #fpsSamples;
     #wasColliding;
     #onResize;
     #onTick;
@@ -108,6 +113,15 @@ export class CanvasAdapter {
         }
         if (this.autoPump) this.startAutoPump();
 
+        this.#reporting = true;
+        this.core?.registerAdapter('canvas', {
+            label: 'CANVAS',
+            enabled: true,
+            enable: () => this.#enable(),
+            disable: () => this.#disable(),
+            snapshot: () => this.snapshot()
+        });
+
         this.core?.sendData('log', {
             source: this.source,
             message: `CanvasAdapter attached (${this.entities.length} entities).`
@@ -126,6 +140,7 @@ export class CanvasAdapter {
         this.#stopAutoPumpLoop();
         if (this.#unsubscribe) this.#unsubscribe();
         this.#unsubscribe = null;
+        this.core?.unregisterAdapter('canvas');
         this.#unmountOverlay();
         if (typeof window !== 'undefined') {
             window.removeEventListener('resize', this.#onResize);
@@ -161,6 +176,28 @@ export class CanvasAdapter {
         return this;
     }
 
+    /**
+     * Hitboxes currently on the entity list, plus FPS min/avg/max.
+     * Returns null when the adapter is not attached. The core stores this
+     * function and does not read the rows.
+     * @returns {{ name: string, items: Array<{ severity: string, selector: string, rule: string, value: string, source: string }> } | null}
+     */
+    snapshot() {
+        if (!this.#attached) return null;
+        const boxes = this.#collectBoxes();
+        this.#markCollisions(boxes);
+        const items = boxes.map((box) => ({
+            severity: box.hit ? 'warn' : 'ok',
+            selector: box.name,
+            rule: 'hitbox',
+            value: `${box.x},${box.y} ${box.w}x${box.h}${box.hit ? ' colliding' : ''}`,
+            source: this.source
+        }));
+        const fps = this.#fpsItem();
+        if (fps) items.push(fps);
+        return { name: 'canvas', items };
+    }
+
     /**
      * Call once per host frame, after entity positions are updated.
      * Pass a 2D context only if overlay is disabled and you want hitboxes
@@ -174,6 +211,7 @@ export class CanvasAdapter {
             this.#warnManualPump();
             return this;
         }
+        if (!this.#reporting) return this;
 
         const now = typeof performance !== 'undefined' ? performance.now() : Date.now();
         if (this.#lastPump) {
@@ -257,6 +295,8 @@ export class CanvasAdapter {
         if (!tracked && boxes[0]) tracked = boxes[0];
 
         if (this.#fps > 0) {
+            this.#fpsSamples.push(this.#fps);
+            if (this.#fpsSamples.length > 120) this.#fpsSamples.shift();
             this.core.sendData('fps', { value: this.#fps, source: this.source });
         }
         this.core.sendData('metric', {
@@ -374,7 +414,49 @@ export class CanvasAdapter {
         overlay.style.top = `${rect.top}px`;
         overlay.style.width = `${rect.width}px`;
         overlay.style.height = `${rect.height}px`;
-        overlay.style.display = this.core && this.core.visible === false ? 'none' : 'block';
+        const hidden = !this.#reporting || (this.core && this.core.visible === false);
+        overlay.style.display = hidden ? 'none' : 'block';
+    }
+
+    #enable() {
+        this.#reporting = true;
+        this.#syncOverlay();
+    }
+
+    #disable() {
+        this.#reporting = false;
+        this.#syncOverlay();
+    }
+
+    #fpsItem() {
+        const stats = this.#fpsStats();
+        if (!stats) return null;
+        return {
+            severity: 'ok',
+            selector: 'host',
+            rule: 'fps',
+            value: `min ${round1(stats.min)} avg ${round1(stats.avg)} max ${round1(stats.max)}`,
+            source: this.source
+        };
+    }
+
+    #fpsStats() {
+        const history = typeof this.core?.getHistory === 'function' ? this.core.getHistory('fps') : null;
+        if (history && Array.isArray(history.values) && history.values.length) {
+            return { min: history.min, avg: history.avg, max: history.max };
+        }
+        const samples = this.#fpsSamples;
+        if (!samples.length) return null;
+        let min = samples[0];
+        let max = samples[0];
+        let sum = 0;
+        for (let i = 0; i < samples.length; i++) {
+            const value = samples[i];
+            if (value < min) min = value;
+            if (value > max) max = value;
+            sum += value;
+        }
+        return { min, avg: sum / samples.length, max };
     }
 }
 
@@ -409,3 +491,7 @@ function idFromKey(id) {
     const parts = String(id).split(':');
     return parts[parts.length - 1] || id;
 }
+
+function round1(value) {
+    return Math.round(Number(value) * 10) / 10;
+}

package/src/adapters/SpiderAdapter.js

@@ -1,13 +1,16 @@
 /**
  * SpiderAdapter — long-task and slow-resource tracker.
  *
- * Native PerformanceObserver only. The core must never import this file.
+ * Native PerformanceObserver only. `snapshot()` keeps the long tasks and
+ * slow resources already seen. The core must never import this file.
  *
  * @example
  * const spider = new SpiderAdapter(core, { resourceThreshold: 500 });
  * spider.attach();
  */
 
+const MAX_SPIDER = 40;
+
 export const SPIDER_ADAPTER_DEFAULTS = Object.freeze({
     longTaskThreshold: 50,
     resourceThreshold: 500,
@@ -30,6 +33,8 @@ export class SpiderAdapter {
         this.#longObserver = null;
         this.#resourceObserver = null;
         this.#longTaskMissingLogged = false;
+        this.#longTasks = [];
+        this.#resources = [];
         this.#onLongTask = (list) => this.#ingestLongTasks(list);
         this.#onResource = (list) => this.#ingestResources(list);
     }
@@ -38,6 +43,8 @@ export class SpiderAdapter {
     #longObserver;
     #resourceObserver;
     #longTaskMissingLogged;
+    #longTasks;
+    #resources;
     #onLongTask;
     #onResource;
 
@@ -48,7 +55,8 @@ export class SpiderAdapter {
         this.core?.registerAdapter('spider', {
             enable: () => this.#enable(),
             disable: () => this.#disable(),
-            label: 'SPIDER'
+            label: 'SPIDER',
+            snapshot: () => this.snapshot()
         });
         this.core?.sendData('log', {
             source: this.source,
@@ -65,6 +73,36 @@ export class SpiderAdapter {
         return this;
     }
 
+    /**
+     * Long tasks and slow resources kept since attach. Returns null when detached.
+     * @returns {{ name: string, items: Array<{ severity: string, selector: string, rule: string, value: string, source: string }> } | null}
+     */
+    snapshot() {
+        if (!this.#attached) return null;
+        const items = [];
+        for (let i = 0; i < this.#longTasks.length; i++) {
+            const entry = this.#longTasks[i];
+            items.push({
+                severity: 'warn',
+                selector: entry.attribution,
+                rule: 'longtask',
+                value: `${entry.duration}ms`,
+                source: this.source
+            });
+        }
+        for (let i = 0; i < this.#resources.length; i++) {
+            const entry = this.#resources[i];
+            items.push({
+                severity: 'warn',
+                selector: entry.name,
+                rule: 'resource',
+                value: `${entry.duration}ms`,
+                source: this.source
+            });
+        }
+        return { name: 'spider', items };
+    }
+
     #enable() {
         if (!this.#attached) return;
         if (typeof PerformanceObserver !== 'function') {
@@ -111,6 +149,10 @@ export class SpiderAdapter {
         for (let i = 0; i < entries.length; i++) {
             const entry = entries[i];
             if (!entry || entry.duration <= this.longTaskThreshold) continue;
+            remember(this.#longTasks, {
+                attribution: entry.attribution?.[0]?.containerType ?? 'unknown',
+                duration: Math.round(entry.duration)
+            });
             this.core.sendData('telemetry', {
                 source: this.source,
                 kind: 'longtask',
@@ -126,6 +168,10 @@ export class SpiderAdapter {
         for (let i = 0; i < entries.length; i++) {
             const entry = entries[i];
             if (!entry || entry.duration <= this.resourceThreshold) continue;
+            remember(this.#resources, {
+                name: String(entry.name || 'resource'),
+                duration: Math.round(entry.duration)
+            });
             this.core.sendData('warn', {
                 source: this.source,
                 message: `Risorsa lenta: ${entry.name} (${Math.round(entry.duration)}ms)`
@@ -143,6 +189,11 @@ export class SpiderAdapter {
     }
 }
 
+function remember(list, entry) {
+    list.unshift(entry);
+    if (list.length > MAX_SPIDER) list.pop();
+}
+
 function positive(value, fallback) {
     const n = Number(value);
     return Number.isFinite(n) && n > 0 ? n : fallback;

package/src/adapters/WebDOMAdapter.js

@@ -4,6 +4,8 @@
  * Reads box models, the node under the pointer, and mutation noise,
  * then pushes packets into the core. Highlights are drawn on a stacked
  * overlay canvas so the page stays untouched.
+ * `snapshot()` hands the report the box model, problem nodes, and
+ * the latest mutation counts.
  *
  * The core must never import this file.
  *
@@ -12,6 +14,10 @@
  * adapter.attach();
  */
 
+import { isReportNoise } from '../core/ReportExporter.js';
+
+const MAX_PROBLEM_ROWS = 40;
+
 export const WEB_DOM_ADAPTER_DEFAULTS = Object.freeze({
     overlay: true,
     autoTick: true,
@@ -52,6 +58,7 @@ export class WebDOMAdapter {
         this.hover = null;
 
         this.#attached = false;
+        this.#reporting = true;
         this.#overlay = null;
         this.#unsubscribe = null;
         this.#observer = null;
@@ -62,6 +69,9 @@ export class WebDOMAdapter {
         this.#mutAdded = 0;
         this.#mutRemoved = 0;
         this.#mutAttr = 0;
+        this.#seenAdded = 0;
+        this.#seenRemoved = 0;
+        this.#seenAttr = 0;
         this.#mutTimer = 0;
         this.#lastHoverKey = '';
         this.#onMove = (event) => {
@@ -78,6 +88,7 @@ export class WebDOMAdapter {
     }
 
     #attached;
+    #reporting;
     #overlay;
     #unsubscribe;
     #observer;
@@ -88,6 +99,9 @@ export class WebDOMAdapter {
     #mutAdded;
     #mutRemoved;
     #mutAttr;
+    #seenAdded;
+    #seenRemoved;
+    #seenAttr;
     #mutTimer;
     #lastHoverKey;
     #onMove;
@@ -123,6 +137,15 @@ export class WebDOMAdapter {
             this.#rafId = requestAnimationFrame(this.#onTick);
         }
 
+        this.#reporting = true;
+        this.core?.registerAdapter('dom', {
+            label: 'DOM',
+            enabled: true,
+            enable: () => this.#enable(),
+            disable: () => this.#disable(),
+            snapshot: () => this.snapshot()
+        });
+
         this.core?.sendData('log', {
             source: this.source,
             message: 'WebDOMAdapter attached. Hover a node to inspect the box model.'
@@ -148,6 +171,7 @@ export class WebDOMAdapter {
         this.#rafId = 0;
         if (this.#mutTimer && typeof clearTimeout === 'function') clearTimeout(this.#mutTimer);
         this.#mutTimer = 0;
+        this.core?.unregisterAdapter('dom');
         if (typeof window !== 'undefined') {
             window.removeEventListener('mousemove', this.#onMove, true);
             window.removeEventListener('resize', this.#onResize);
@@ -172,8 +196,36 @@ export class WebDOMAdapter {
         return this;
     }
 
+    /**
+     * Box model of the hover and watched nodes, layout problems under root,
+     * and the latest mutation counts. Returns null when detached.
+     * Hidden boxes, the WordPress admin bar, and BeeLadybug chrome are skipped.
+     * The core stores this function and does not read the rows.
+     * @returns {{ name: string, items: Array<{ severity: string, selector: string, rule: string, value: string, source: string }> } | null}
+     */
+    snapshot() {
+        if (!this.#attached) return null;
+        const items = [];
+        const seen = new Set();
+        const targets = [];
+        if (this.hover) targets.push(this.hover);
+        const watched = this.#watchedNodes();
+        for (let i = 0; i < watched.length; i++) targets.push(watched[i]);
+        for (let i = 0; i < targets.length; i++) {
+            const node = targets[i];
+            if (!node || seen.has(node) || !reportable(node)) continue;
+            seen.add(node);
+            items.push(boxItem(node, this.source));
+        }
+        const problems = problemItems(this.root, this.source);
+        for (let i = 0; i < problems.length; i++) items.push(problems[i]);
+        items.push(mutationItem(this.#mutationCounts(), this.root, this.source));
+        return { name: 'dom', items };
+    }
+
     pump() {
         if (!this.#attached || !this.core) return this;
+        if (!this.#reporting) return this;
 
         const now = typeof performance !== 'undefined' ? performance.now() : Date.now();
         if (this.#lastPump) {
@@ -311,6 +363,11 @@ export class WebDOMAdapter {
         const added = this.#mutAdded;
         const removed = this.#mutRemoved;
         const attr = this.#mutAttr;
+        if (added || removed || attr) {
+            this.#seenAdded = added;
+            this.#seenRemoved = removed;
+            this.#seenAttr = attr;
+        }
         this.#mutAdded = 0;
         this.#mutRemoved = 0;
         this.#mutAttr = 0;
@@ -394,7 +451,26 @@ export class WebDOMAdapter {
         canvas.style.height = `${h}px`;
         canvas.width = Math.round(w * dpr);
         canvas.height = Math.round(h * dpr);
-        canvas.style.display = this.core && this.core.visible === false ? 'none' : 'block';
+        const hidden = !this.#reporting || (this.core && this.core.visible === false);
+        canvas.style.display = hidden ? 'none' : 'block';
+    }
+
+    #enable() {
+        this.#reporting = true;
+        this.#syncOverlay();
+    }
+
+    #disable() {
+        this.#reporting = false;
+        this.#syncOverlay();
+    }
+
+    #mutationCounts() {
+        const pending = this.#mutAdded + this.#mutRemoved + this.#mutAttr;
+        if (pending) {
+            return { added: this.#mutAdded, removed: this.#mutRemoved, attr: this.#mutAttr };
+        }
+        return { added: this.#seenAdded, removed: this.#seenRemoved, attr: this.#seenAttr };
     }
 }
 
@@ -504,6 +580,138 @@ function drawLabel(ctx, el, viewW, viewH, color) {
     ctx.fillText(text, x + 6, y + height / 2);
 }
 
+function reportable(node) {
+    if (!node || node.nodeType !== 1) return false;
+    if (typeof node.getBoundingClientRect !== 'function') return false;
+    if (isBeeChrome(node) || isReportNoise(node)) return false;
+    return true;
+}
+
+function boxItem(node, source) {
+    const model = boxModel(node);
+    return {
+        severity: 'ok',
+        selector: cssPath(node),
+        rule: 'box',
+        value: boxValue(model, styleOf(node)),
+        source
+    };
+}
+
+function boxValue(model, style) {
+    const border = model.border;
+    const content = model.content;
+    return `border ${Math.round(border.w)}x${Math.round(border.h)} margin ${sideText(style, 'margin')} padding ${sideText(style, 'padding')} content ${Math.round(content.w)}x${Math.round(content.h)} ${model.display}`;
+}
+
+function sideText(style, kind) {
+    const prefix = kind === 'margin' ? 'margin' : 'padding';
+    const top = style ? parsePx(style[`${prefix}Top`]) : 0;
+    const right = style ? parsePx(style[`${prefix}Right`]) : 0;
+    const bottom = style ? parsePx(style[`${prefix}Bottom`]) : 0;
+    const left = style ? parsePx(style[`${prefix}Left`]) : 0;
+    return `${top},${right},${bottom},${left}`;
+}
+
+function problemItems(root, source) {
+    const nodes = collectElements(root);
+    const items = [];
+    const seen = new Set();
+    for (let i = 0; i < nodes.length && items.length < MAX_PROBLEM_ROWS; i++) {
+        const node = nodes[i];
+        if (!node || seen.has(node) || !reportable(node)) continue;
+        seen.add(node);
+        const style = styleOf(node);
+        const margin = sideText(style, 'margin');
+        if (hasNegative(margin)) {
+            items.push(problemItem(node, 'negative margin', margin, source));
+            if (items.length >= MAX_PROBLEM_ROWS) break;
+        }
+        const clip = clipValue(node);
+        if (clip) {
+            items.push(problemItem(node, 'clipped', clip, source));
+            if (items.length >= MAX_PROBLEM_ROWS) break;
+        }
+        const model = boxModel(node);
+        if (model.border.w > 0 && model.border.h > 0 && (model.content.w === 0 || model.content.h === 0)) {
+            items.push(problemItem(
+                node,
+                'collapsed content',
+                `content ${Math.round(model.content.w)}x${Math.round(model.content.h)}`,
+                source
+            ));
+        }
+    }
+    return items;
+}
+
+function problemItem(node, rule, value, source) {
+    return {
+        severity: 'warn',
+        selector: cssPath(node),
+        rule,
+        value,
+        source
+    };
+}
+
+function hasNegative(sides) {
+    return sides.split(',').some((part) => Number(part) < 0);
+}
+
+function clipValue(node) {
+    const sw = finite(node.scrollWidth);
+    const cw = finite(node.clientWidth);
+    const sh = finite(node.scrollHeight);
+    const ch = finite(node.clientHeight);
+    const wide = sw != null && cw != null && sw > cw + 2;
+    const tall = sh != null && ch != null && sh > ch + 2;
+    if (!wide && !tall) return '';
+    return `scroll ${sw ?? 0}x${sh ?? 0} client ${cw ?? 0}x${ch ?? 0}`;
+}
+
+function mutationItem(counts, root, source) {
+    const total = counts.added + counts.removed + counts.attr;
+    return {
+        severity: total > 0 ? 'warn' : 'ok',
+        selector: root && root.nodeType === 1 ? cssPath(root) : 'root',
+        rule: 'mutations',
+        value: `+${counts.added} -${counts.removed} attr ${counts.attr}`,
+        source
+    };
+}
+
+function styleOf(node) {
+    if (typeof getComputedStyle !== 'function') return null;
+    try {
+        return getComputedStyle(node);
+    } catch {
+        return null;
+    }
+}
+
+function collectElements(root) {
+    if (!root) return [];
+    const out = [];
+    if (root.nodeType === 1) out.push(root);
+    let list = null;
+    if (typeof root.querySelectorAll === 'function') {
+        try {
+            list = root.querySelectorAll('*');
+        } catch {
+            list = null;
+        }
+    }
+    if (list) {
+        for (let i = 0; i < list.length; i++) out.push(list[i]);
+    }
+    return out;
+}
+
+function finite(value) {
+    return typeof value === 'number' && Number.isFinite(value) ? value : null;
+}
+
 function countElements(root) {
     if (!root) return 0;
     if (root.nodeType === 1) return 1 + (root.getElementsByTagName?.('*').length ?? 0);