@marsaude/devtools-shell 0.1.4 → 0.1.6

package/fesm2022/marsaude-devtools-shell.mjs

@@ -1603,9 +1603,10 @@ class DevtoolsSessionService {
         return full;
     }
     /**
-     * Write a stored session into the host's active-session keys and reload so the
-     * host app re-reads it (it only reads these keys at bootstrap). Covers both a
-     * fresh login and switching between users.
+     * Write a stored session into the host's active-session keys and send the user
+     * to '/' (full navigation) so the host app re-reads it from a clean route — it
+     * only reads these keys at bootstrap. Covers both a fresh login and switching
+     * between users.
      */
     switchTo(id) {
         const session = id === 'admin' ? this.admin() : this._sessions().find((s) => s.id === id) ?? null;
@@ -1617,7 +1618,7 @@ class DevtoolsSessionService {
         this.activeId.set(id);
         this.storage.set(ACTIVE_KEY, id);
         try {
-            window.location.reload();
+            window.location.href = '/';
         }
         catch {
             /* non-browser env — ignore */
@@ -1644,6 +1645,282 @@ 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 {};
+        }
+    }
+    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
+                            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
@@ -3037,6 +3314,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 },
@@ -3046,6 +3625,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
@@ -3109,11 +3690,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', '');