@marsaude/devtools-shell 0.1.5 → 0.1.7

package/fesm2022/marsaude-devtools-shell.mjs

@@ -220,7 +220,8 @@ class DevtoolsShellComponent {
                 cursor: this.dragging() ? 'grabbing' : 'grab',
             };
         }, ...(ngDevMode ? [{ debugName: "fabStyle" }] : []));
-        /** Radial speed-dial geometry — ported verbatim (R=268, 5°→87°). */
+        /** Radial speed-dial geometry — items fan along a 5°→87° arc; the radius
+         *  scales with the item count (clamped to the viewport) so they never pile up. */
         this.dialItems = computed(() => {
             const S = FAB_SIZE;
             const W = this.winW();
@@ -233,12 +234,26 @@ class DevtoolsShellComponent {
             const vy = cy < H * 0.42 ? 1 : -1;
             const acts = this.actions();
             const N = acts.length;
-            const R = 268;
             const a0 = (5 * Math.PI) / 180;
             const a1 = (87 * Math.PI) / 180;
+            const span = a1 - a0;
+            // Tile box + the center-to-center spacing we want between adjacent items.
+            // Smaller SPACING pulls the whole fan in closer to the FAB (since every
+            // item sits at the same radius R), while staying just above the tile size
+            // so they don't overlap.
+            const TILE_W = 50;
+            const TILE_H = 44;
+            const SPACING = 52;
+            // Radius that yields that spacing across N items, clamped so the farthest
+            // tile still fits the viewport in the fan direction. Scaling R with N is
+            // what keeps the items from piling on top of each other as more are added.
+            const desiredR = N > 1 ? (SPACING * (N - 1)) / span : 200;
+            const availH = (hx > 0 ? W - cx : cx) - TILE_W / 2 - 12;
+            const availV = (vy > 0 ? H - cy : cy) - TILE_H / 2 - 12;
+            const R = Math.max(160, Math.min(desiredR, availH, availV));
             return acts.map((action, i) => {
                 const t = N === 1 ? 0.5 : i / (N - 1);
-                const ang = a0 + (a1 - a0) * t;
+                const ang = a0 + span * t;
                 const dx = hx * Math.cos(ang) * R;
                 const dy = vy * Math.sin(ang) * R;
                 return {
@@ -246,10 +261,10 @@ class DevtoolsShellComponent {
                     style: {
                         position: 'fixed',
                         zIndex: '41',
-                        width: '58px',
-                        height: '50px',
-                        left: cx - 29 + 'px',
-                        top: cy - 25 + 'px',
+                        width: TILE_W + 'px',
+                        height: TILE_H + 'px',
+                        left: cx - TILE_W / 2 + 'px',
+                        top: cy - TILE_H / 2 + 'px',
                         display: 'flex',
                         flexDirection: 'column',
                         alignItems: 'center',
@@ -1645,6 +1660,302 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             type: Injectable
         }] });
 
+/** Ring-buffer cap so a long QA session never grows unbounded. */
+const MAX_ENTRIES$1 = 300;
+/**
+ * In-memory telemetry of every HTTP call to the API host (the one in
+ * `apiBaseUrl`). Patches `fetch` and `XMLHttpRequest` once so it captures BOTH
+ * the host app's requests and the package's own — independent of which
+ * HttpClient/interceptor issued them. Nothing is persisted: a page reload
+ * clears the log.
+ */
+class DevtoolsTelemetryService {
+    constructor() {
+        this.config = inject(DEVTOOLS_CONFIG);
+        this._entries = signal([], ...(ngDevMode ? [{ debugName: "_entries" }] : []));
+        this.entries = this._entries.asReadonly();
+        this.installed = false;
+        this.seq = 0;
+        this.origin = this.deriveOrigin();
+    }
+    clear() {
+        this._entries.set([]);
+    }
+    /** Monkeypatch fetch + XHR once. Safe to call multiple times. */
+    install() {
+        if (this.installed || typeof window === 'undefined')
+            return;
+        this.installed = true;
+        this.patchFetch();
+        this.patchXhr();
+    }
+    // ---- capture helpers --------------------------------------------------
+    deriveOrigin() {
+        try {
+            return new URL(this.config.apiBaseUrl).origin;
+        }
+        catch {
+            return this.config.apiBaseUrl;
+        }
+    }
+    matches(url) {
+        try {
+            return new URL(url, window.location.href).origin === this.origin;
+        }
+        catch {
+            return url.includes(this.origin);
+        }
+    }
+    parseParams(url) {
+        try {
+            const out = {};
+            new URL(url, window.location.href).searchParams.forEach((v, k) => (out[k] = v));
+            return out;
+        }
+        catch {
+            return {};
+        }
+    }
+    /** Decode an arraybuffer response to text/JSON; fall back to a size label if binary. */
+    decodeArrayBuffer(buf) {
+        if (!buf)
+            return null;
+        try {
+            const text = new TextDecoder().decode(buf);
+            const parsed = this.tryParse(text);
+            if (typeof parsed !== 'string')
+                return parsed; // parsed JSON object/array/number
+            // Raw string: keep only if it looks like text, otherwise it's binary.
+            return /[\u0000-\u0008\u000e-\u001f]/.test(parsed) ? `[arraybuffer ${buf.byteLength}b]` : parsed;
+        }
+        catch {
+            return `[arraybuffer ${buf.byteLength ?? '?'}b]`;
+        }
+    }
+    tryParse(text) {
+        if (text == null || text === '')
+            return null;
+        try {
+            return JSON.parse(text);
+        }
+        catch {
+            return text;
+        }
+    }
+    normalizeBody(body) {
+        if (body == null)
+            return null;
+        if (typeof body === 'string')
+            return this.tryParse(body);
+        if (typeof FormData !== 'undefined' && body instanceof FormData) {
+            const out = {};
+            body.forEach((v, k) => (out[k] = v instanceof File ? `[File ${v.name}]` : v));
+            return out;
+        }
+        if (typeof Blob !== 'undefined' && body instanceof Blob)
+            return `[Blob ${body.size}b]`;
+        return body;
+    }
+    begin(method, url, body, source) {
+        const entry = {
+            id: ++this.seq,
+            startedAt: Date.now(),
+            method,
+            url,
+            params: this.parseParams(url),
+            requestBody: this.normalizeBody(body),
+            status: null,
+            ok: null,
+            responseBody: null,
+            error: null,
+            durationMs: null,
+            pending: true,
+            source,
+        };
+        this._entries.update((list) => [entry, ...list].slice(0, MAX_ENTRIES$1));
+        return entry;
+    }
+    finish(id, patch) {
+        this._entries.update((list) => list.map((e) => (e.id === id ? { ...e, ...patch, pending: false } : e)));
+    }
+    // ---- patches ----------------------------------------------------------
+    patchFetch() {
+        if (typeof window.fetch !== 'function')
+            return;
+        const orig = window.fetch.bind(window);
+        const self = this;
+        window.fetch = function (input, init) {
+            const url = typeof input === 'string' ? input : input instanceof URL ? input.href : input.url;
+            if (!self.matches(url))
+                return orig(input, init);
+            const method = (init?.method || (input instanceof Request ? input.method : 'GET')).toUpperCase();
+            const entry = self.begin(method, url, init?.body, 'fetch');
+            const t0 = performance.now();
+            return orig(input, init).then((res) => {
+                const durationMs = Math.round(performance.now() - t0);
+                res
+                    .clone()
+                    .text()
+                    .then((text) => self.finish(entry.id, {
+                    status: res.status,
+                    ok: res.ok,
+                    responseBody: self.tryParse(text),
+                    error: res.ok ? null : `HTTP ${res.status}`,
+                    durationMs,
+                }))
+                    .catch(() => self.finish(entry.id, { status: res.status, ok: res.ok, durationMs }));
+                return res;
+            }, (err) => {
+                self.finish(entry.id, { error: String(err?.message ?? err), ok: false, durationMs: Math.round(performance.now() - t0) });
+                throw err;
+            });
+        };
+    }
+    patchXhr() {
+        if (typeof XMLHttpRequest === 'undefined')
+            return;
+        const proto = XMLHttpRequest.prototype;
+        const origOpen = proto.open;
+        const origSend = proto.send;
+        const self = this;
+        proto.open = function (method, url, ...rest) {
+            this.__dtMeta = { method: String(method).toUpperCase(), url: String(url) };
+            return origOpen.call(this, method, url, ...rest);
+        };
+        proto.send = function (body) {
+            const meta = this.__dtMeta;
+            if (meta && self.matches(meta.url)) {
+                const entry = self.begin(meta.method, meta.url, body, 'xhr');
+                const t0 = performance.now();
+                this.addEventListener('loadend', () => {
+                    const durationMs = Math.round(performance.now() - t0);
+                    const status = this.status;
+                    if (status === 0) {
+                        self.finish(entry.id, { error: 'Network error / aborted', ok: false, durationMs });
+                        return;
+                    }
+                    const ok = status >= 200 && status < 300;
+                    let responseBody = null;
+                    try {
+                        const type = this.responseType;
+                        if (type === '' || type === 'text')
+                            responseBody = self.tryParse(this.responseText);
+                        else if (type === 'json')
+                            responseBody = this.response;
+                        else if (type === 'arraybuffer')
+                            responseBody = self.decodeArrayBuffer(this.response);
+                        else if (type === 'blob')
+                            responseBody = `[blob ${this.response?.size ?? '?'}b]`;
+                        else
+                            responseBody = `[${type}]`;
+                    }
+                    catch {
+                        /* ignore */
+                    }
+                    self.finish(entry.id, { status, ok, responseBody, error: ok ? null : `HTTP ${status}`, durationMs });
+                });
+            }
+            return origSend.call(this, body);
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DevtoolsTelemetryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DevtoolsTelemetryService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DevtoolsTelemetryService, decorators: [{
+            type: Injectable
+        }] });
+
+/** Ring-buffer cap so a noisy session never grows unbounded. */
+const MAX_ENTRIES = 300;
+/**
+ * In-memory log of runtime JS/TS errors: uncaught exceptions (`window.error`),
+ * unhandled promise rejections, and anything sent to `console.error` (which is
+ * where Angular's default ErrorHandler reports zone-caught errors). Captures
+ * the host app's errors and the package's alike. Nothing is persisted — a page
+ * reload clears it.
+ */
+class DevtoolsErrorsService {
+    constructor() {
+        this._entries = signal([], ...(ngDevMode ? [{ debugName: "_entries" }] : []));
+        this.entries = this._entries.asReadonly();
+        this.installed = false;
+        this.seq = 0;
+    }
+    clear() {
+        this._entries.set([]);
+    }
+    /** Attach the listeners + patch console.error once. Safe to call repeatedly. */
+    install() {
+        if (this.installed || typeof window === 'undefined')
+            return;
+        this.installed = true;
+        window.addEventListener('error', (e) => {
+            // Skip resource-load errors (img/script/link) — those carry no error/message.
+            if (!e.error && !e.message)
+                return;
+            this.push('error', e.message || String(e.error), e.error?.stack ?? null, this.loc(e.filename, e.lineno, e.colno));
+        });
+        window.addEventListener('unhandledrejection', (e) => {
+            const reason = e.reason;
+            const message = reason instanceof Error ? reason.message : this.stringify(reason);
+            this.push('rejection', message, reason?.stack ?? null, null);
+        });
+        const orig = console.error.bind(console);
+        const self = this;
+        console.error = function (...args) {
+            orig(...args);
+            try {
+                self.captureConsole(args);
+            }
+            catch {
+                /* never let telemetry break logging */
+            }
+        };
+    }
+    // ---- helpers ----------------------------------------------------------
+    captureConsole(args) {
+        const errArg = args.find((a) => a instanceof Error);
+        const message = args
+            .map((a) => (a instanceof Error ? a.message : typeof a === 'string' ? a : this.stringify(a)))
+            .join(' ')
+            .trim();
+        if (!message)
+            return;
+        this.push('console', message, errArg?.stack ?? null, null);
+    }
+    loc(file, line, col) {
+        if (!file)
+            return null;
+        return `${file}${line != null ? ':' + line : ''}${col != null ? ':' + col : ''}`;
+    }
+    stringify(v) {
+        if (v == null)
+            return String(v);
+        if (typeof v === 'string')
+            return v;
+        try {
+            return JSON.stringify(v);
+        }
+        catch {
+            return String(v);
+        }
+    }
+    push(kind, message, stack, source) {
+        // Collapse an immediate duplicate (e.g. Angular ErrorHandler -> console.error
+        // right after a window 'error' for the same throw).
+        const last = this._entries()[0];
+        if (last && last.message === message && last.stack === stack)
+            return;
+        const entry = { id: ++this.seq, at: Date.now(), kind, message, stack, source };
+        this._entries.update((list) => [entry, ...list].slice(0, MAX_ENTRIES));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DevtoolsErrorsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DevtoolsErrorsService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DevtoolsErrorsService, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * Shared inline-style objects for the DevTools domain panels. Bound via
  * `[style]="UI.x"` so there are no view-encapsulation surprises when the panels
@@ -3038,6 +3349,308 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }] });
 
+/**
+ * Live, in-memory log of every API call (host app + package). Click a row to
+ * inspect params/body/response/error. Cleared by a page reload or the button.
+ */
+class TelemetryPanelComponent {
+    constructor() {
+        this.UI = UI;
+        this.telemetry = inject(DevtoolsTelemetryService);
+        this.entries = this.telemetry.entries;
+        this.count = computed(() => this.entries().length, ...(ngDevMode ? [{ debugName: "count" }] : []));
+        this.expanded = signal(null, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+        this.badge = {
+            fontFamily: "'JetBrains Mono',monospace",
+            fontSize: '9.5px',
+            fontWeight: '700',
+            letterSpacing: '.03em',
+            padding: '2px 6px',
+            borderRadius: '6px',
+            background: '#23252f',
+            color: '#c4c7d0',
+            flex: 'none',
+        };
+    }
+    toggle(id) {
+        this.expanded.update((cur) => (cur === id ? null : id));
+    }
+    clear() {
+        this.telemetry.clear();
+        this.expanded.set(null);
+    }
+    path(url) {
+        try {
+            const u = new URL(url, window.location.href);
+            return u.pathname + u.search;
+        }
+        catch {
+            return url;
+        }
+    }
+    hasParams(e) {
+        return Object.keys(e.params).length > 0;
+    }
+    json(v) {
+        try {
+            return typeof v === 'string' ? v : JSON.stringify(v, null, 2);
+        }
+        catch {
+            return String(v);
+        }
+    }
+    statusColor(e) {
+        if (e.pending)
+            return '#ffc454';
+        if (e.error || (e.status ?? 0) >= 400)
+            return '#ff6b6b';
+        return '#1fbe7e';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TelemetryPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TelemetryPanelComponent, isStandalone: true, selector: "devtools-telemetry-panel", ngImport: i0, template: `
+    <p [style]="UI.intro" style="margin-bottom:10px">
+      Todas as chamadas à API ({{ count() }}). Em memória — o reload limpa.
+    </p>
+    <button type="button" [style]="UI.ghost" style="margin-top:0;margin-bottom:14px" (click)="clear()">
+      <span class="dts-sym" style="font-family:'Material Symbols Outlined';font-size:17px;vertical-align:-3px">delete_sweep</span>
+      Limpar log
+    </button>
+
+    @if (!count()) {
+      <p [style]="UI.mono">Nenhuma requisição capturada ainda.</p>
+    }
+
+    @for (e of entries(); track e.id) {
+      <div [style]="UI.card" style="margin-bottom:8px;cursor:pointer;padding:11px 13px" (click)="toggle(e.id)">
+        <div style="display:flex;align-items:center;gap:8px">
+          <span [style]="badge">{{ e.method }}</span>
+          <span style="font-size:11px;font-weight:700;min-width:32px" [style.color]="statusColor(e)">
+            {{ e.pending ? '···' : (e.status ?? 'ERR') }}
+          </span>
+          <span [style]="UI.mono" style="flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
+            {{ path(e.url) }}
+          </span>
+          @if (e.durationMs != null) {
+            <span [style]="UI.mono" style="white-space:nowrap;color:#6a6e7b">{{ e.durationMs }}ms</span>
+          }
+        </div>
+
+        @if (expanded() === e.id) {
+          <div style="margin-top:11px;display:flex;flex-direction:column;gap:7px" (click)="$event.stopPropagation()">
+            <div [style]="UI.label">URL</div>
+            <pre [style]="UI.pre">{{ e.url }}</pre>
+
+            @if (hasParams(e)) {
+              <div [style]="UI.label">Query params</div>
+              <pre [style]="UI.pre">{{ json(e.params) }}</pre>
+            }
+            @if (e.requestBody !== null) {
+              <div [style]="UI.label">Request body</div>
+              <pre [style]="UI.pre">{{ json(e.requestBody) }}</pre>
+            }
+            @if (e.error) {
+              <div [style]="UI.label" style="color:#ff7676">Erro</div>
+              <pre [style]="UI.pre" style="color:#ff9b9b;border-color:#5a2a2a">{{ e.error }}</pre>
+            }
+            @if (e.responseBody !== null) {
+              <div [style]="UI.label">Response</div>
+              <pre [style]="UI.pre">{{ json(e.responseBody) }}</pre>
+            }
+          </div>
+        }
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TelemetryPanelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'devtools-telemetry-panel',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <p [style]="UI.intro" style="margin-bottom:10px">
+      Todas as chamadas à API ({{ count() }}). Em memória — o reload limpa.
+    </p>
+    <button type="button" [style]="UI.ghost" style="margin-top:0;margin-bottom:14px" (click)="clear()">
+      <span class="dts-sym" style="font-family:'Material Symbols Outlined';font-size:17px;vertical-align:-3px">delete_sweep</span>
+      Limpar log
+    </button>
+
+    @if (!count()) {
+      <p [style]="UI.mono">Nenhuma requisição capturada ainda.</p>
+    }
+
+    @for (e of entries(); track e.id) {
+      <div [style]="UI.card" style="margin-bottom:8px;cursor:pointer;padding:11px 13px" (click)="toggle(e.id)">
+        <div style="display:flex;align-items:center;gap:8px">
+          <span [style]="badge">{{ e.method }}</span>
+          <span style="font-size:11px;font-weight:700;min-width:32px" [style.color]="statusColor(e)">
+            {{ e.pending ? '···' : (e.status ?? 'ERR') }}
+          </span>
+          <span [style]="UI.mono" style="flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
+            {{ path(e.url) }}
+          </span>
+          @if (e.durationMs != null) {
+            <span [style]="UI.mono" style="white-space:nowrap;color:#6a6e7b">{{ e.durationMs }}ms</span>
+          }
+        </div>
+
+        @if (expanded() === e.id) {
+          <div style="margin-top:11px;display:flex;flex-direction:column;gap:7px" (click)="$event.stopPropagation()">
+            <div [style]="UI.label">URL</div>
+            <pre [style]="UI.pre">{{ e.url }}</pre>
+
+            @if (hasParams(e)) {
+              <div [style]="UI.label">Query params</div>
+              <pre [style]="UI.pre">{{ json(e.params) }}</pre>
+            }
+            @if (e.requestBody !== null) {
+              <div [style]="UI.label">Request body</div>
+              <pre [style]="UI.pre">{{ json(e.requestBody) }}</pre>
+            }
+            @if (e.error) {
+              <div [style]="UI.label" style="color:#ff7676">Erro</div>
+              <pre [style]="UI.pre" style="color:#ff9b9b;border-color:#5a2a2a">{{ e.error }}</pre>
+            }
+            @if (e.responseBody !== null) {
+              <div [style]="UI.label">Response</div>
+              <pre [style]="UI.pre">{{ json(e.responseBody) }}</pre>
+            }
+          </div>
+        }
+      </div>
+    }
+  `,
+                }]
+        }] });
+
+/**
+ * Live, in-memory log of runtime JS/TS errors (uncaught, unhandled rejections,
+ * console.error). Click a row to see the full stack. Cleared by a reload.
+ */
+class ErrorsPanelComponent {
+    constructor() {
+        this.UI = UI;
+        this.errors = inject(DevtoolsErrorsService);
+        this.entries = this.errors.entries;
+        this.count = computed(() => this.entries().length, ...(ngDevMode ? [{ debugName: "count" }] : []));
+        this.expanded = signal(null, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+        this.badge = {
+            fontFamily: "'JetBrains Mono',monospace",
+            fontSize: '9.5px',
+            fontWeight: '700',
+            letterSpacing: '.03em',
+            padding: '2px 6px',
+            borderRadius: '6px',
+            background: '#2a2024',
+            flex: 'none',
+        };
+    }
+    toggle(id) {
+        this.expanded.update((cur) => (cur === id ? null : id));
+    }
+    clear() {
+        this.errors.clear();
+        this.expanded.set(null);
+    }
+    kindLabel(kind) {
+        return kind === 'rejection' ? 'PROMISE' : kind === 'console' ? 'CONSOLE' : 'ERROR';
+    }
+    kindColor(kind) {
+        return kind === 'console' ? '#ffb454' : '#ff6b6b';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ErrorsPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ErrorsPanelComponent, isStandalone: true, selector: "devtools-errors-panel", ngImport: i0, template: `
+    <p [style]="UI.intro" style="margin-bottom:10px">
+      Erros de runtime JS/TS ({{ count() }}). Em memória — o reload limpa.
+    </p>
+    <button type="button" [style]="UI.ghost" style="margin-top:0;margin-bottom:14px" (click)="clear()">
+      <span class="dts-sym" style="font-family:'Material Symbols Outlined';font-size:17px;vertical-align:-3px">delete_sweep</span>
+      Limpar log
+    </button>
+
+    @if (!count()) {
+      <p [style]="UI.mono">Nenhum erro capturado. 🎉</p>
+    }
+
+    @for (e of entries(); track e.id) {
+      <div [style]="UI.card" style="margin-bottom:8px;cursor:pointer;padding:11px 13px;border-color:#3a2a2a" (click)="toggle(e.id)">
+        <div style="display:flex;align-items:center;gap:8px">
+          <span [style]="badge" [style.color]="kindColor(e.kind)">{{ kindLabel(e.kind) }}</span>
+          <span style="flex:1;min-width:0;font-size:12.5px;color:#f0d6d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
+            {{ e.message }}
+          </span>
+        </div>
+
+        @if (expanded() === e.id) {
+          <div style="margin-top:11px;display:flex;flex-direction:column;gap:7px" (click)="$event.stopPropagation()">
+            <div [style]="UI.label">Mensagem</div>
+            <pre [style]="UI.pre" style="color:#ff9b9b;border-color:#5a2a2a">{{ e.message }}</pre>
+
+            @if (e.source) {
+              <div [style]="UI.label">Origem</div>
+              <pre [style]="UI.pre">{{ e.source }}</pre>
+            }
+            @if (e.stack) {
+              <div [style]="UI.label">Stack</div>
+              <pre [style]="UI.pre">{{ e.stack }}</pre>
+            }
+          </div>
+        }
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ErrorsPanelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'devtools-errors-panel',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <p [style]="UI.intro" style="margin-bottom:10px">
+      Erros de runtime JS/TS ({{ count() }}). Em memória — o reload limpa.
+    </p>
+    <button type="button" [style]="UI.ghost" style="margin-top:0;margin-bottom:14px" (click)="clear()">
+      <span class="dts-sym" style="font-family:'Material Symbols Outlined';font-size:17px;vertical-align:-3px">delete_sweep</span>
+      Limpar log
+    </button>
+
+    @if (!count()) {
+      <p [style]="UI.mono">Nenhum erro capturado. 🎉</p>
+    }
+
+    @for (e of entries(); track e.id) {
+      <div [style]="UI.card" style="margin-bottom:8px;cursor:pointer;padding:11px 13px;border-color:#3a2a2a" (click)="toggle(e.id)">
+        <div style="display:flex;align-items:center;gap:8px">
+          <span [style]="badge" [style.color]="kindColor(e.kind)">{{ kindLabel(e.kind) }}</span>
+          <span style="flex:1;min-width:0;font-size:12.5px;color:#f0d6d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
+            {{ e.message }}
+          </span>
+        </div>
+
+        @if (expanded() === e.id) {
+          <div style="margin-top:11px;display:flex;flex-direction:column;gap:7px" (click)="$event.stopPropagation()">
+            <div [style]="UI.label">Mensagem</div>
+            <pre [style]="UI.pre" style="color:#ff9b9b;border-color:#5a2a2a">{{ e.message }}</pre>
+
+            @if (e.source) {
+              <div [style]="UI.label">Origem</div>
+              <pre [style]="UI.pre">{{ e.source }}</pre>
+            }
+            @if (e.stack) {
+              <div [style]="UI.label">Stack</div>
+              <pre [style]="UI.pre">{{ e.stack }}</pre>
+            }
+          </div>
+        }
+      </div>
+    }
+  `,
+                }]
+        }] });
+
 const BUILTIN_ACTIONS = [
     { id: 'admin', label: 'Admin', icon: 'shield_person', content: AdminLoginPanelComponent, order: 0 },
     { id: 'app-login', label: 'Login App', icon: 'login', content: LoginPanelComponent, order: 1 },
@@ -3047,6 +3660,8 @@ const BUILTIN_ACTIONS = [
     { id: 'exams', label: 'Exames', icon: 'biotech', content: ExamsPanelComponent, order: 5 },
     { id: 'data', label: 'Dados', icon: 'badge', content: DataPanelComponent, order: 6 },
     { id: 'copy', label: 'Copiar', icon: 'content_copy', content: CopyPanelComponent, order: 7 },
+    { id: 'telemetry', label: 'Telemetria', icon: 'monitoring', content: TelemetryPanelComponent, order: 8 },
+    { id: 'errors', label: 'Erros', icon: 'bug_report', content: ErrorsPanelComponent, order: 9 },
 ];
 /**
  * Mount the self-contained DevTools. Add to `bootstrapApplication` providers or
@@ -3110,11 +3725,18 @@ function mountIsolated(parent, config, actions, shell) {
         DevtoolsApiService,
         DevtoolsAuthService,
         DevtoolsSessionService,
+        DevtoolsTelemetryService,
+        DevtoolsErrorsService,
         DevtoolsPositionService,
         DevtoolsToastService,
     ], parent);
-    // Consume our own Google OAuth return (guarded) to finish admin login.
-    runInInjectionContext(injector, () => inject(DevtoolsAuthService).handleGoogleReturn());
+    runInInjectionContext(injector, () => {
+        // Start capturing API traffic + runtime errors ASAP, then consume our own
+        // Google OAuth return (guarded) to finish admin login.
+        inject(DevtoolsTelemetryService).install();
+        inject(DevtoolsErrorsService).install();
+        inject(DevtoolsAuthService).handleGoogleReturn();
+    });
     const appRef = parent.get(ApplicationRef);
     const host = document.createElement('div');
     host.setAttribute('data-devtools-shell-host', '');