dev-inspector 1.0.4 → 1.0.5

package/lib/logger/networkLogger.js

@@ -14,12 +14,12 @@ function safeToString(value) {
         return "[unstringifiable]";
     }
 }
-function truncateString(value, maxLen) {
+function truncateStringMeta(value, maxLen) {
     if (maxLen <= 0)
-        return "";
+        return { value: "", truncated: value.length > 0 };
     if (value.length <= maxLen)
-        return value;
-    return value.slice(0, maxLen);
+        return { value, truncated: false };
+    return { value: value.slice(0, maxLen), truncated: true };
 }
 function coerceUrl(input) {
     if (typeof input === "string")
@@ -52,7 +52,8 @@ function formatUrlForMessage(raw) {
 async function readResponseBody(response, maxLen) {
     try {
         const text = await response.text();
-        return truncateString(text, maxLen);
+        const t = truncateStringMeta(text, maxLen);
+        return { body: t.value, truncated: t.truncated };
     }
     catch (_a) {
         return undefined;
@@ -79,30 +80,40 @@ function installNetworkLogger(options) {
     const originalXhrSend = canXhr ? g.XMLHttpRequest.prototype.send : undefined;
     if (canFetch) {
         g.fetch = (async (...args) => {
-            var _a;
+            var _a, _b;
             const id = createId();
             let method;
             let url;
             let requestBody;
+            let requestBodyTruncated = false;
             try {
                 const [input, init] = args;
                 url = coerceUrl(input);
                 const reqMethodFromInit = init === null || init === void 0 ? void 0 : init.method;
                 const reqMethodFromInput = input && typeof input.method === "string" ? input.method : undefined;
                 method = ((_a = reqMethodFromInit !== null && reqMethodFromInit !== void 0 ? reqMethodFromInit : reqMethodFromInput) !== null && _a !== void 0 ? _a : "GET").toUpperCase();
-                if (includeBodies && init && "body" in init)
+                if (includeBodies && init && "body" in init) {
                     requestBody = init.body;
+                    if (typeof requestBody === "string") {
+                        const t = truncateStringMeta(requestBody, maxBodyLength);
+                        requestBody = t.value;
+                        requestBodyTruncated = t.truncated;
+                    }
+                }
             }
-            catch (_b) {
+            catch (_c) {
                 void 0;
             }
             try {
                 const res = await Reflect.apply(originalFetch, globalThis, args);
                 const status = res.status;
                 let responseBody;
+                let responseBodyTruncated = false;
                 if (includeBodies) {
                     const cloned = res.clone();
-                    responseBody = await readResponseBody(cloned, maxBodyLength);
+                    const r = await readResponseBody(cloned, maxBodyLength);
+                    responseBody = r === null || r === void 0 ? void 0 : r.body;
+                    responseBodyTruncated = (_b = r === null || r === void 0 ? void 0 : r.truncated) !== null && _b !== void 0 ? _b : false;
                 }
                 if (active) {
                     const entry = {
@@ -113,7 +124,10 @@ function installNetworkLogger(options) {
                         url,
                         status,
                         requestBody: includeBodies ? requestBody : undefined,
+                        requestBodyTruncated: includeBodies ? requestBodyTruncated : undefined,
                         responseBody: includeBodies ? responseBody : undefined,
+                        responseBodyTruncated: includeBodies ? responseBodyTruncated : undefined,
+                        bodyMaxLength: includeBodies ? maxBodyLength : undefined,
                         message: makeMessage({ method, url, status }),
                     };
                     options.emit(entry);
@@ -130,7 +144,10 @@ function installNetworkLogger(options) {
                         url,
                         status: undefined,
                         requestBody: includeBodies ? requestBody : undefined,
+                        requestBodyTruncated: includeBodies ? requestBodyTruncated : undefined,
                         responseBody: includeBodies ? safeToString(err) : undefined,
+                        responseBodyTruncated: undefined,
+                        bodyMaxLength: includeBodies ? maxBodyLength : undefined,
                         message: makeMessage({ method, url, status: undefined }),
                     };
                     options.emit(entry);
@@ -156,9 +173,15 @@ function installNetworkLogger(options) {
         proto.send = function (...args) {
             var _a;
             const meta = (_a = xhrMeta.get(this)) !== null && _a !== void 0 ? _a : { id: createId() };
+            let requestBodyTruncated = false;
             if (includeBodies) {
                 try {
                     meta.requestBody = args[0];
+                    if (typeof meta.requestBody === "string") {
+                        const t = truncateStringMeta(meta.requestBody, maxBodyLength);
+                        meta.requestBody = t.value;
+                        requestBodyTruncated = t.truncated;
+                    }
                 }
                 catch (_b) {
                     void 0;
@@ -168,10 +191,14 @@ function installNetworkLogger(options) {
             const onLoadEnd = () => {
                 const status = typeof this.status === "number" ? this.status : undefined;
                 let responseBody;
+                let responseBodyTruncated = false;
                 if (includeBodies) {
                     try {
-                        if (typeof this.responseText === "string")
-                            responseBody = truncateString(this.responseText, maxBodyLength);
+                        if (typeof this.responseText === "string") {
+                            const t = truncateStringMeta(this.responseText, maxBodyLength);
+                            responseBody = t.value;
+                            responseBodyTruncated = t.truncated;
+                        }
                         else
                             responseBody = undefined;
                     }
@@ -188,7 +215,10 @@ function installNetworkLogger(options) {
                         url: meta.url,
                         status,
                         requestBody: includeBodies ? meta.requestBody : undefined,
+                        requestBodyTruncated: includeBodies ? requestBodyTruncated : undefined,
                         responseBody: includeBodies ? responseBody : undefined,
+                        responseBodyTruncated: includeBodies ? responseBodyTruncated : undefined,
+                        bodyMaxLength: includeBodies ? maxBodyLength : undefined,
                         message: makeMessage({ method: meta.method, url: meta.url, status }),
                     };
                     options.emit(entry);

package/lib/ui/logList/createLogList.d.ts

@@ -0,0 +1,2 @@
+import type { LogList } from "./types";
+export declare function createLogList(doc: Document): LogList;

package/lib/ui/logList/createLogList.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createLogList = createLogList;
+const jsonViewer_1 = require("../jsonViewer");
+const networkDetails_1 = require("./networkDetails");
+const shared_1 = require("./shared");
+const shared_2 = require("./shared");
+function createLogList(doc) {
+    const el = doc.createElement("ul");
+    el.className = "di-list";
+    const append = (entry) => {
+        const li = doc.createElement("li");
+        const tone = (0, shared_2.toneForEntry)(entry);
+        li.className = `di-item ${(0, shared_2.classForTone)(tone)}`;
+        const meta = doc.createElement("div");
+        meta.className = "di-meta";
+        const time = doc.createElement("span");
+        time.textContent = (0, shared_2.fmtTime)(entry.timestamp);
+        const source = doc.createElement("span");
+        source.textContent = entry.source;
+        const detail = doc.createElement("span");
+        if (entry.source === "console") {
+            detail.textContent = entry.level;
+        }
+        else {
+            detail.className = `di-statusChip ${(0, shared_2.isNetworkFailure)(entry) ? "di-statusChipError" : "di-statusChipSuccess"}`;
+            detail.textContent = typeof entry.status === "number" ? String(entry.status) : "ERR";
+        }
+        meta.append(time, source, detail);
+        li.append(meta);
+        if (entry.message && entry.message.trim().length > 0) {
+            const msg = doc.createElement("div");
+            msg.className = "di-msg";
+            msg.textContent = entry.message;
+            li.append(msg);
+        }
+        if (entry.source === "console") {
+            const inspectable = (0, shared_1.getInspectableArgs)(entry.args);
+            if (inspectable.length > 0) {
+                const details = doc.createElement("details");
+                details.className = "di-details";
+                const summary = doc.createElement("summary");
+                summary.className = "di-detailsSummary";
+                summary.textContent = "Inspect";
+                const viewerWrap = doc.createElement("div");
+                viewerWrap.className = "di-detailsBody";
+                viewerWrap.append((0, jsonViewer_1.createJsonViewer)(doc, inspectable.length === 1 ? inspectable[0] : inspectable, {
+                    maxDepth: 6,
+                    maxKeys: 200,
+                    maxNodes: 2000,
+                }));
+                details.append(summary, viewerWrap);
+                li.append(details);
+            }
+        }
+        if (entry.source === "network") {
+            const details = (0, networkDetails_1.createNetworkDetails)(doc, entry);
+            if (details)
+                li.append(details);
+        }
+        el.append(li);
+    };
+    const clear = () => {
+        el.replaceChildren();
+    };
+    return { el, append, clear };
+}

package/lib/ui/logList/index.d.ts

@@ -0,0 +1,2 @@
+export { createLogList } from "./createLogList";
+export type { LogList } from "./types";

package/lib/ui/logList/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createLogList = void 0;
+var createLogList_1 = require("./createLogList");
+Object.defineProperty(exports, "createLogList", { enumerable: true, get: function () { return createLogList_1.createLogList; } });

package/lib/ui/logList/networkDetails/copy.d.ts

@@ -0,0 +1,2 @@
+export declare function launchMiniConfetti(anchor: HTMLElement): void;
+export declare function copyText(text: string): Promise<boolean>;

package/lib/ui/logList/networkDetails/copy.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.launchMiniConfetti = launchMiniConfetti;
+exports.copyText = copyText;
+function prefersReducedMotion() {
+    var _a, _b;
+    try {
+        const mm = globalThis;
+        return ((_b = (_a = mm.matchMedia) === null || _a === void 0 ? void 0 : _a.call(mm, "(prefers-reduced-motion: reduce)")) === null || _b === void 0 ? void 0 : _b.matches) === true;
+    }
+    catch (_c) {
+        return false;
+    }
+}
+function rand(min, max) {
+    return min + Math.random() * (max - min);
+}
+function launchMiniConfetti(anchor) {
+    if (prefersReducedMotion())
+        return;
+    if (typeof document === "undefined")
+        return;
+    const rect = anchor.getBoundingClientRect();
+    const cx = rect.left + rect.width / 2;
+    const cy = rect.top + rect.height / 2;
+    const root = document.createElement("div");
+    root.style.position = "fixed";
+    root.style.left = "0";
+    root.style.top = "0";
+    root.style.width = "0";
+    root.style.height = "0";
+    root.style.pointerEvents = "none";
+    root.style.zIndex = "2147483647";
+    document.body.append(root);
+    const colors = ["#a7ff00", "#7c5cff", "#00c4ff", "#ff9030", "#ef4444"];
+    const n = 14;
+    const duration = 520;
+    for (let i = 0; i < n; i += 1) {
+        const p = document.createElement("span");
+        const size = Math.round(rand(3, 6));
+        p.style.position = "fixed";
+        p.style.left = `${cx}px`;
+        p.style.top = `${cy}px`;
+        p.style.width = `${size}px`;
+        p.style.height = `${size}px`;
+        p.style.borderRadius = Math.random() < 0.35 ? "999px" : "2px";
+        p.style.background = colors[i % colors.length];
+        p.style.opacity = "1";
+        p.style.willChange = "transform, opacity";
+        root.append(p);
+        const angle = rand(0, Math.PI * 2);
+        const dist = rand(18, 46);
+        const dx = Math.cos(angle) * dist;
+        const dy = Math.sin(angle) * dist + rand(8, 16);
+        const rot = rand(-220, 220);
+        const delay = Math.round(rand(0, 60));
+        try {
+            const anim = p.animate([
+                { transform: `translate(-50%, -50%) translate(0px, 0px) rotate(0deg) scale(1)`, opacity: 1 },
+                { transform: `translate(-50%, -50%) translate(${dx}px, ${dy}px) rotate(${rot}deg) scale(0.9)`, opacity: 0 },
+            ], { duration, delay, easing: "cubic-bezier(0.2, 0.7, 0.2, 1)", fill: "forwards" });
+            anim.addEventListener("finish", () => p.remove());
+        }
+        catch (_a) {
+            globalThis.setTimeout(() => p.remove(), duration + delay + 50);
+        }
+    }
+    globalThis.setTimeout(() => root.remove(), duration + 120);
+}
+async function copyText(text) {
+    var _a, _b;
+    try {
+        const nav = globalThis;
+        const fn = (_b = (_a = nav.navigator) === null || _a === void 0 ? void 0 : _a.clipboard) === null || _b === void 0 ? void 0 : _b.writeText;
+        if (typeof fn === "function") {
+            await fn(text);
+            return true;
+        }
+    }
+    catch (_c) {
+        void 0;
+    }
+    try {
+        if (typeof document === "undefined")
+            return false;
+        const ta = document.createElement("textarea");
+        ta.value = text;
+        ta.setAttribute("readonly", "true");
+        ta.style.position = "fixed";
+        ta.style.left = "-9999px";
+        ta.style.top = "0";
+        document.body.append(ta);
+        ta.select();
+        const ok = document.execCommand("copy");
+        ta.remove();
+        return ok;
+    }
+    catch (_d) {
+        return false;
+    }
+}

package/lib/ui/logList/networkDetails/createNetworkDetails.d.ts

@@ -0,0 +1,2 @@
+import type { NetworkLogEntry } from "../../../utils/types";
+export declare function createNetworkDetails(doc: Document, entry: NetworkLogEntry): HTMLElement | null;

package/lib/ui/logList/networkDetails/createNetworkDetails.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createNetworkDetails = createNetworkDetails;
+const copy_1 = require("./copy");
+const renderValue_1 = require("./renderValue");
+function createBodyDetails(doc, title, value, truncated, maxLen) {
+    const details = doc.createElement("details");
+    details.className = "di-details di-netBodyDetails";
+    const summary = doc.createElement("summary");
+    summary.className = "di-detailsSummary di-netDetailsSummary";
+    const titleEl = doc.createElement("span");
+    titleEl.className = "di-netDetailsTitle";
+    titleEl.textContent = title;
+    const copyBtn = doc.createElement("button");
+    copyBtn.type = "button";
+    copyBtn.className = "di-copyBtn";
+    copyBtn.textContent = "Copy";
+    copyBtn.setAttribute("aria-label", `Copy ${title.toLowerCase()}`);
+    copyBtn.addEventListener("click", (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        const txt = (0, renderValue_1.valueToCopyText)(value);
+        void (0, copy_1.copyText)(txt).then((ok) => {
+            if (!ok)
+                return;
+            (0, copy_1.launchMiniConfetti)(copyBtn);
+            const prev = copyBtn.textContent;
+            copyBtn.textContent = "Copied";
+            globalThis.setTimeout(() => {
+                copyBtn.textContent = prev !== null && prev !== void 0 ? prev : "Copy";
+            }, 900);
+        });
+    });
+    summary.append(titleEl, copyBtn);
+    const body = doc.createElement("div");
+    body.className = "di-detailsBody";
+    if (truncated) {
+        const warn = doc.createElement("div");
+        warn.className = "di-netTrunc";
+        warn.textContent = typeof maxLen === "number" ? `Truncated to first ${maxLen} characters.` : "Truncated.";
+        body.append(warn);
+    }
+    body.append((0, renderValue_1.valueToElement)(doc, value));
+    details.append(summary, body);
+    return details;
+}
+function createNetworkDetails(doc, entry) {
+    const hasReq = typeof entry.requestBody !== "undefined";
+    const hasRes = typeof entry.responseBody !== "undefined";
+    if (!hasReq && !hasRes)
+        return null;
+    const wrap = doc.createElement("div");
+    wrap.className = "di-netDetailsWrap";
+    if (hasReq) {
+        wrap.append(createBodyDetails(doc, "Request", entry.requestBody, entry.requestBodyTruncated === true, entry.bodyMaxLength));
+    }
+    if (hasRes) {
+        wrap.append(createBodyDetails(doc, "Response", entry.responseBody, entry.responseBodyTruncated === true, entry.bodyMaxLength));
+    }
+    return wrap;
+}

package/lib/ui/logList/networkDetails/index.d.ts

@@ -0,0 +1 @@
+export { createNetworkDetails } from "./createNetworkDetails";

package/lib/ui/logList/networkDetails/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createNetworkDetails = void 0;
+var createNetworkDetails_1 = require("./createNetworkDetails");
+Object.defineProperty(exports, "createNetworkDetails", { enumerable: true, get: function () { return createNetworkDetails_1.createNetworkDetails; } });

package/lib/ui/logList/networkDetails/renderValue.d.ts

@@ -0,0 +1,2 @@
+export declare function valueToElement(doc: Document, value: unknown): HTMLElement;
+export declare function valueToCopyText(value: unknown): string;

package/lib/ui/logList/networkDetails/renderValue.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.valueToElement = valueToElement;
+exports.valueToCopyText = valueToCopyText;
+const jsonViewer_1 = require("../../jsonViewer");
+function tryParseJson(text) {
+    const t = text.trim();
+    if (t.length < 2)
+        return undefined;
+    const looksLikeObject = t.startsWith("{") && t.endsWith("}");
+    const looksLikeArray = t.startsWith("[") && t.endsWith("]");
+    if (!looksLikeObject && !looksLikeArray)
+        return undefined;
+    try {
+        return JSON.parse(t);
+    }
+    catch (_a) {
+        return undefined;
+    }
+}
+function safeStringify(value) {
+    const seen = new WeakSet();
+    const replacer = (_key, v) => {
+        if (typeof v === "object" && v !== null) {
+            const o = v;
+            if (seen.has(o))
+                return "[circular]";
+            seen.add(o);
+        }
+        return v;
+    };
+    try {
+        return JSON.stringify(value, replacer, 2);
+    }
+    catch (_a) {
+        try {
+            return String(value);
+        }
+        catch (_b) {
+            return "[unserializable]";
+        }
+    }
+}
+function valueToElement(doc, value) {
+    if (typeof value === "string") {
+        const parsed = tryParseJson(value);
+        if (parsed && typeof parsed === "object") {
+            return (0, jsonViewer_1.createJsonViewer)(doc, parsed, { maxDepth: 6, maxKeys: 200, maxNodes: 2000 });
+        }
+        const el = doc.createElement("div");
+        el.className = "di-netBodyText";
+        el.textContent = value;
+        return el;
+    }
+    if (value instanceof Error) {
+        const el = doc.createElement("div");
+        el.className = "di-netBodyText";
+        el.textContent = `${value.name}: ${value.message}`;
+        return el;
+    }
+    if (value === null || typeof value !== "object") {
+        const el = doc.createElement("div");
+        el.className = "di-netBodyText";
+        el.textContent = String(value);
+        return el;
+    }
+    return (0, jsonViewer_1.createJsonViewer)(doc, value, { maxDepth: 6, maxKeys: 200, maxNodes: 2000 });
+}
+function valueToCopyText(value) {
+    if (typeof value === "string")
+        return value;
+    if (value instanceof Error)
+        return `${value.name}: ${value.message}`;
+    return safeStringify(value);
+}

package/lib/ui/logList/networkDetails.js

@@ -17,6 +17,126 @@ function tryParseJson(text) {
         return undefined;
     }
 }
+function safeStringify(value) {
+    const seen = new WeakSet();
+    const replacer = (_key, v) => {
+        if (typeof v === "object" && v !== null) {
+            const o = v;
+            if (seen.has(o))
+                return "[circular]";
+            seen.add(o);
+        }
+        return v;
+    };
+    try {
+        return JSON.stringify(value, replacer, 2);
+    }
+    catch (_a) {
+        try {
+            return String(value);
+        }
+        catch (_b) {
+            return "[unserializable]";
+        }
+    }
+}
+async function copyText(text) {
+    var _a, _b;
+    try {
+        const nav = globalThis;
+        const fn = (_b = (_a = nav.navigator) === null || _a === void 0 ? void 0 : _a.clipboard) === null || _b === void 0 ? void 0 : _b.writeText;
+        if (typeof fn === "function") {
+            await fn(text);
+            return true;
+        }
+    }
+    catch (_c) {
+        void 0;
+    }
+    try {
+        if (typeof document === "undefined")
+            return false;
+        const ta = document.createElement("textarea");
+        ta.value = text;
+        ta.setAttribute("readonly", "true");
+        ta.style.position = "fixed";
+        ta.style.left = "-9999px";
+        ta.style.top = "0";
+        document.body.append(ta);
+        ta.select();
+        const ok = document.execCommand("copy");
+        ta.remove();
+        return ok;
+    }
+    catch (_d) {
+        return false;
+    }
+}
+function prefersReducedMotion() {
+    var _a, _b;
+    try {
+        const mm = globalThis;
+        return ((_b = (_a = mm.matchMedia) === null || _a === void 0 ? void 0 : _a.call(mm, "(prefers-reduced-motion: reduce)")) === null || _b === void 0 ? void 0 : _b.matches) === true;
+    }
+    catch (_c) {
+        return false;
+    }
+}
+function rand(min, max) {
+    return min + Math.random() * (max - min);
+}
+function launchMiniConfetti(anchor) {
+    if (prefersReducedMotion())
+        return;
+    if (typeof document === "undefined")
+        return;
+    const rect = anchor.getBoundingClientRect();
+    const cx = rect.left + rect.width / 2;
+    const cy = rect.top + rect.height / 2;
+    const root = document.createElement("div");
+    root.style.position = "fixed";
+    root.style.left = "0";
+    root.style.top = "0";
+    root.style.width = "0";
+    root.style.height = "0";
+    root.style.pointerEvents = "none";
+    root.style.zIndex = "2147483647";
+    document.body.append(root);
+    const colors = ["#a7ff00", "#7c5cff", "#00c4ff", "#ff9030", "#ef4444"];
+    const n = 14;
+    const duration = 520;
+    for (let i = 0; i < n; i += 1) {
+        const p = document.createElement("span");
+        const size = Math.round(rand(3, 6));
+        p.style.position = "fixed";
+        p.style.left = `${cx}px`;
+        p.style.top = `${cy}px`;
+        p.style.width = `${size}px`;
+        p.style.height = `${size}px`;
+        p.style.borderRadius = Math.random() < 0.35 ? "999px" : "2px";
+        p.style.background = colors[i % colors.length];
+        p.style.opacity = "1";
+        p.style.willChange = "transform, opacity";
+        root.append(p);
+        const angle = rand(0, Math.PI * 2);
+        const dist = rand(18, 46);
+        const dx = Math.cos(angle) * dist;
+        const dy = Math.sin(angle) * dist + rand(8, 16);
+        const rot = rand(-220, 220);
+        const delay = Math.round(rand(0, 60));
+        try {
+            const anim = p.animate([
+                { transform: `translate(-50%, -50%) translate(0px, 0px) rotate(0deg) scale(1)`, opacity: 1 },
+                { transform: `translate(-50%, -50%) translate(${dx}px, ${dy}px) rotate(${rot}deg) scale(0.9)`, opacity: 0 },
+            ], { duration, delay, easing: "cubic-bezier(0.2, 0.7, 0.2, 1)", fill: "forwards" });
+            anim.addEventListener("finish", () => p.remove());
+        }
+        catch (_a) {
+            globalThis.setTimeout(() => p.remove(), duration + delay + 50);
+        }
+    }
+    globalThis.setTimeout(() => root.remove(), duration + 120);
+}
 function valueToElement(doc, value) {
     if (typeof value === "string") {
         const parsed = tryParseJson(value);
@@ -42,34 +162,66 @@ function valueToElement(doc, value) {
     }
     return (0, jsonViewer_1.createJsonViewer)(doc, value, { maxDepth: 6, maxKeys: 200, maxNodes: 2000 });
 }
-function appendSection(doc, wrap, label, value) {
-    if (typeof value === "undefined")
-        return;
-    const section = doc.createElement("div");
-    section.className = "di-netBodySection";
-    const title = doc.createElement("div");
-    title.className = "di-netBodyLabel";
-    title.textContent = label;
-    section.append(title, valueToElement(doc, value));
-    wrap.append(section);
+function valueToCopyText(value) {
+    if (typeof value === "string")
+        return value;
+    if (value instanceof Error)
+        return `${value.name}: ${value.message}`;
+    return safeStringify(value);
 }
-function createNetworkDetails(doc, entry) {
-    const hasReq = typeof entry.requestBody !== "undefined";
-    const hasRes = typeof entry.responseBody !== "undefined";
-    if (!hasReq && !hasRes)
-        return null;
+function createBodyDetails(doc, title, value, truncated, maxLen) {
     const details = doc.createElement("details");
-    details.className = "di-details";
+    details.className = "di-details di-netBodyDetails";
     const summary = doc.createElement("summary");
-    summary.className = "di-detailsSummary";
-    summary.textContent = "Body";
+    summary.className = "di-detailsSummary di-netDetailsSummary";
+    const titleEl = doc.createElement("span");
+    titleEl.className = "di-netDetailsTitle";
+    titleEl.textContent = title;
+    const copyBtn = doc.createElement("button");
+    copyBtn.type = "button";
+    copyBtn.className = "di-copyBtn";
+    copyBtn.textContent = "Copy";
+    copyBtn.setAttribute("aria-label", `Copy ${title.toLowerCase()}`);
+    copyBtn.addEventListener("click", (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        const txt = valueToCopyText(value);
+        void copyText(txt).then((ok) => {
+            if (!ok)
+                return;
+            launchMiniConfetti(copyBtn);
+            const prev = copyBtn.textContent;
+            copyBtn.textContent = "Copied";
+            globalThis.setTimeout(() => {
+                copyBtn.textContent = prev !== null && prev !== void 0 ? prev : "Copy";
+            }, 900);
+        });
+    });
+    summary.append(titleEl, copyBtn);
     const body = doc.createElement("div");
     body.className = "di-detailsBody";
-    const grid = doc.createElement("div");
-    grid.className = "di-netBodies";
-    appendSection(doc, grid, "Request body", entry.requestBody);
-    appendSection(doc, grid, "Response body", entry.responseBody);
-    body.append(grid);
+    if (truncated) {
+        const warn = doc.createElement("div");
+        warn.className = "di-netTrunc";
+        warn.textContent = typeof maxLen === "number" ? `Truncated to first ${maxLen} characters.` : "Truncated.";
+        body.append(warn);
+    }
+    body.append(valueToElement(doc, value));
     details.append(summary, body);
     return details;
 }
+function createNetworkDetails(doc, entry) {
+    const hasReq = typeof entry.requestBody !== "undefined";
+    const hasRes = typeof entry.responseBody !== "undefined";
+    if (!hasReq && !hasRes)
+        return null;
+    const wrap = doc.createElement("div");
+    wrap.className = "di-netDetailsWrap";
+    if (hasReq) {
+        wrap.append(createBodyDetails(doc, "Request", entry.requestBody, entry.requestBodyTruncated === true, entry.bodyMaxLength));
+    }
+    if (hasRes) {
+        wrap.append(createBodyDetails(doc, "Response", entry.responseBody, entry.responseBodyTruncated === true, entry.bodyMaxLength));
+    }
+    return wrap;
+}

package/lib/ui/logList/shared/consoleInspect.d.ts

@@ -0,0 +1 @@
+export declare function getInspectableArgs(args: unknown[]): unknown[];

package/lib/ui/logList/shared/consoleInspect.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInspectableArgs = getInspectableArgs;
+function isInspectableValue(value) {
+    if (typeof value !== "object" || value === null)
+        return false;
+    if (value instanceof Error)
+        return false;
+    if (value instanceof Date)
+        return false;
+    if (value instanceof RegExp)
+        return false;
+    return true;
+}
+function getInspectableArgs(args) {
+    return args.filter(isInspectableValue);
+}

package/lib/ui/logList/shared/index.d.ts

@@ -0,0 +1,3 @@
+export { fmtTime } from "./time";
+export { toneForEntry, classForTone, isNetworkFailure } from "./tone";
+export { getInspectableArgs } from "./consoleInspect";

package/lib/ui/logList/shared/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInspectableArgs = exports.isNetworkFailure = exports.classForTone = exports.toneForEntry = exports.fmtTime = void 0;
+var time_1 = require("./time");
+Object.defineProperty(exports, "fmtTime", { enumerable: true, get: function () { return time_1.fmtTime; } });
+var tone_1 = require("./tone");
+Object.defineProperty(exports, "toneForEntry", { enumerable: true, get: function () { return tone_1.toneForEntry; } });
+Object.defineProperty(exports, "classForTone", { enumerable: true, get: function () { return tone_1.classForTone; } });
+Object.defineProperty(exports, "isNetworkFailure", { enumerable: true, get: function () { return tone_1.isNetworkFailure; } });
+var consoleInspect_1 = require("./consoleInspect");
+Object.defineProperty(exports, "getInspectableArgs", { enumerable: true, get: function () { return consoleInspect_1.getInspectableArgs; } });

package/lib/ui/logList/shared/time.d.ts

@@ -0,0 +1 @@
+export declare function fmtTime(ts: number): string;

package/lib/ui/logList/shared/time.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fmtTime = fmtTime;
+function fmtTime(ts) {
+    const d = new Date(ts);
+    const hh = String(d.getHours()).padStart(2, "0");
+    const mm = String(d.getMinutes()).padStart(2, "0");
+    const ss = String(d.getSeconds()).padStart(2, "0");
+    return `${hh}:${mm}:${ss}`;
+}

package/lib/ui/logList/shared/tone.d.ts

@@ -0,0 +1,6 @@
+import type { LogEntry } from "../../../utils/types";
+type Tone = "neutral" | "warning" | "error" | "success";
+export declare function toneForEntry(entry: LogEntry): Tone;
+export declare function classForTone(tone: Tone): string;
+export declare function isNetworkFailure(entry: LogEntry): boolean;
+export {};

package/lib/ui/logList/shared/tone.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toneForEntry = toneForEntry;
+exports.classForTone = classForTone;
+exports.isNetworkFailure = isNetworkFailure;
+function toneForEntry(entry) {
+    if (entry.source === "console") {
+        if (entry.level === "error")
+            return "error";
+        if (entry.level === "warn")
+            return "warning";
+        return "neutral";
+    }
+    const s = entry.status;
+    if (typeof s !== "number")
+        return "error";
+    if (s >= 400)
+        return "error";
+    if (s >= 300)
+        return "warning";
+    return "success";
+}
+function classForTone(tone) {
+    if (tone === "error")
+        return "di-itemToneError";
+    if (tone === "warning")
+        return "di-itemToneWarning";
+    if (tone === "success")
+        return "di-itemToneSuccess";
+    return "di-itemToneNeutral";
+}
+function isNetworkFailure(entry) {
+    if (entry.source !== "network")
+        return false;
+    return typeof entry.status !== "number" || entry.status >= 400;
+}

package/lib/ui/logList/types.d.ts

@@ -0,0 +1,6 @@
+import type { LogEntry } from "../../utils/types";
+export type LogList = {
+    el: HTMLUListElement;
+    append: (entry: LogEntry) => void;
+    clear: () => void;
+};

package/lib/ui/logList/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/ui/panelStyles.d.ts

@@ -1 +1 @@
-export declare const PANEL_CSS = "\n.di-root, .di-root * {\n  box-sizing: border-box;\n}\n\n.di-toggle {\n  position: fixed;\n  right: 12px;\n  bottom: 12px;\n  z-index: 2147483647;\n  border: 1px solid rgba(255,255,255,0.18);\n  background: rgba(20,20,20,0.92);\n  color: #fff;\n  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  padding: 8px 10px;\n  border-radius: 10px;\n  cursor: pointer;\n  backdrop-filter: blur(8px);\n  box-shadow: 0 10px 30px rgba(0,0,0,0.35);\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.di-toggleTitle {\n  font-weight: 600;\n}\n\n.di-toggleMeta {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.di-toggleBadge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 8px;\n  border-radius: 999px;\n  border: 1px solid rgba(255,255,255,0.16);\n  background: rgba(0,0,0,0.28);\n  font-size: 11px;\n  line-height: 1;\n}\n\n.di-toggleErr {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin-left: 2px;\n  padding: 2px 6px;\n  border-radius: 999px;\n  background: rgba(239, 68, 68, 0.95);\n  color: #fff;\n  font-size: 11px;\n  line-height: 1;\n}\n\n.di-toggleErrIcon {\n  font-weight: 700;\n  transform: translateY(-0.5px);\n}\n\n.di-toggleIcon {\n  width: 14px;\n  height: 14px;\n  display: inline-block;\n}\n\n.di-panel {\n  position: fixed;\n  right: 12px;\n  bottom: 56px;\n  width: min(520px, calc(100vw - 24px));\n  height: min(380px, calc(100vh - 84px));\n  z-index: 2147483647;\n  border: 1px solid rgba(255,255,255,0.14);\n  background: rgba(16,16,16,0.92);\n  color: #eaeaea;\n  border-radius: 12px;\n  overflow: hidden;\n  display: grid;\n  grid-template-rows: auto 1fr;\n  backdrop-filter: blur(8px);\n  box-shadow: 0 10px 30px rgba(0,0,0,0.45);\n}\n\n.di-resizeHandle {\n  width: 18px;\n  height: 18px;\n  flex: 0 0 18px;\n  border-radius: 8px;\n  cursor: nwse-resize;\n  touch-action: none;\n  opacity: 0.9;\n  border: 1px solid rgba(255,255,255,0.14);\n  background: rgba(255,255,255,0.06);\n  position: relative;\n}\n\n.di-resizeHandle::before {\n  content: \"\";\n  position: absolute;\n  inset: 4px;\n  border-radius: 6px;\n  background:\n    linear-gradient(135deg, rgba(255,255,255,0.65) 0 2px, transparent 0) 0 0 / 6px 6px,\n    linear-gradient(135deg, rgba(255,255,255,0.35) 0 2px, transparent 0) 3px 3px / 6px 6px;\n}\n\n.di-resizeHandle:hover {\n  opacity: 1;\n  border-color: rgba(255,255,255,0.24);\n  background: rgba(255,255,255,0.10);\n}\n\n.di-hidden {\n  display: none;\n}\n\n.di-header {\n  display: grid;\n  gap: 8px;\n  padding: 10px 12px;\n  border-bottom: 1px solid rgba(255,255,255,0.12);\n}\n\n.di-headerRow {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.di-title {\n  font: 600 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  opacity: 0.95;\n}\n\n.di-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.di-btn {\n  border: 1px solid rgba(255,255,255,0.14);\n  background: rgba(255,255,255,0.06);\n  color: #fff;\n  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  padding: 6px 8px;\n  border-radius: 10px;\n  cursor: pointer;\n}\n\n.di-tabs {\n  display: flex;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n\n.di-tab {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  border: 1px solid rgba(255,255,255,0.14);\n  background: rgba(255,255,255,0.06);\n  color: #fff;\n  padding: 6px 10px;\n  border-radius: 999px;\n  cursor: pointer;\n  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  opacity: 0.9;\n}\n\n.di-tab:hover {\n  background: rgba(255,255,255,0.10);\n  border-color: rgba(255,255,255,0.22);\n}\n\n.di-tabActive {\n  opacity: 1;\n  background: rgba(255,255,255,0.14);\n  border-color: rgba(255,255,255,0.28);\n}\n\n.di-tabIcon {\n  width: 14px;\n  height: 14px;\n  display: inline-block;\n}\n\n.di-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 6px;\n  border-radius: 999px;\n  border: 1px solid rgba(255,255,255,0.16);\n  background: rgba(0,0,0,0.28);\n  font-size: 11px;\n  line-height: 1;\n}\n\n.di-body {\n  overflow: auto;\n}\n\n.di-list {\n  margin: 0;\n  padding: 8px 10px;\n  list-style: none;\n  display: grid;\n  gap: 6px;\n}\n\n.di-item {\n  padding: 8px 10px;\n  border: 1px solid rgba(255,255,255,0.10);\n  border-radius: 10px;\n  background: rgba(255,255,255,0.04);\n}\n\n.di-itemToneNeutral {\n  border-color: rgba(255,255,255,0.10);\n  background: rgba(255,255,255,0.04);\n}\n\n.di-itemToneSuccess {\n  border-color: rgba(34, 197, 94, 0.35);\n  background: rgba(34, 197, 94, 0.10);\n}\n\n.di-itemToneWarning {\n  border-color: rgba(245, 158, 11, 0.42);\n  background: rgba(245, 158, 11, 0.12);\n}\n\n.di-itemToneError {\n  border-color: rgba(239, 68, 68, 0.45);\n  background: rgba(239, 68, 68, 0.12);\n}\n\n.di-meta {\n  display: flex;\n  gap: 10px;\n  font: 11px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  opacity: 0.85;\n  margin-bottom: 4px;\n}\n\n.di-statusChip {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px 8px;\n  border-radius: 999px;\n  font-size: 11px;\n  line-height: 1;\n  color: #fff;\n}\n\n.di-statusChipSuccess {\n  background: rgba(34, 197, 94, 0.95);\n}\n\n.di-statusChipError {\n  background: rgba(239, 68, 68, 0.95);\n}\n\n.di-msg {\n  white-space: pre-wrap;\n  word-break: break-word;\n  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n}\n\n.di-details {\n  margin-top: 8px;\n}\n\n.di-detailsSummary {\n  cursor: pointer;\n  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  opacity: 0.9;\n  user-select: none;\n}\n\n.di-detailsBody {\n  margin-top: 6px;\n  padding: 8px 10px;\n  border-radius: 10px;\n  border: 1px solid rgba(255,255,255,0.10);\n  background: rgba(0,0,0,0.22);\n}\n\n.di-netBodies {\n  display: grid;\n  gap: 10px;\n}\n\n.di-netBodySection {\n  display: grid;\n  gap: 6px;\n}\n\n.di-netBodyLabel {\n  font: 11px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  opacity: 0.85;\n}\n\n.di-netBodyText {\n  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  white-space: pre-wrap;\n  word-break: break-word;\n  opacity: 0.95;\n}\n\n.di-jsonRoot {\n  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n.di-jsonNode {\n  margin-left: 0;\n}\n\n.di-jsonSummary {\n  cursor: pointer;\n  user-select: none;\n  opacity: 0.95;\n}\n\n.di-jsonBody {\n  margin-top: 6px;\n  padding-left: 12px;\n  display: grid;\n  gap: 4px;\n}\n\n.di-jsonRow {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 10px;\n  align-items: start;\n}\n\n.di-jsonKey {\n  opacity: 0.85;\n  color: rgba(255,255,255,0.78);\n}\n\n.di-jsonValue {\n  opacity: 0.95;\n  color: rgba(255,255,255,0.92);\n}\n\n.di-jsonMore, .di-jsonTrunc {\n  opacity: 0.75;\n}\n";
+export declare const PANEL_CSS = "\n.di-root, .di-root * {\n  box-sizing: border-box;\n}\n\n.di-toggle {\n  position: fixed;\n  right: 12px;\n  bottom: 12px;\n  z-index: 2147483647;\n  border: 1px solid rgba(255,255,255,0.18);\n  background: rgba(20,20,20,0.92);\n  color: #fff;\n  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  padding: 8px 10px;\n  border-radius: 10px;\n  cursor: pointer;\n  backdrop-filter: blur(8px);\n  box-shadow: 0 10px 30px rgba(0,0,0,0.35);\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.di-toggleTitle {\n  font-weight: 600;\n}\n\n.di-toggleMeta {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.di-toggleBadge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 8px;\n  border-radius: 999px;\n  border: 1px solid rgba(255,255,255,0.16);\n  background: rgba(0,0,0,0.28);\n  font-size: 11px;\n  line-height: 1;\n}\n\n.di-toggleErr {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin-left: 2px;\n  padding: 2px 6px;\n  border-radius: 999px;\n  background: rgba(239, 68, 68, 0.95);\n  color: #fff;\n  font-size: 11px;\n  line-height: 1;\n}\n\n.di-toggleErrIcon {\n  font-weight: 700;\n  transform: translateY(-0.5px);\n}\n\n.di-toggleIcon {\n  width: 14px;\n  height: 14px;\n  display: inline-block;\n}\n\n.di-panel {\n  position: fixed;\n  right: 12px;\n  bottom: 56px;\n  width: min(520px, calc(100vw - 24px));\n  height: min(380px, calc(100vh - 84px));\n  z-index: 2147483647;\n  border: 1px solid rgba(255,255,255,0.14);\n  background: rgba(16,16,16,0.92);\n  color: #eaeaea;\n  border-radius: 12px;\n  overflow: hidden;\n  display: grid;\n  grid-template-rows: auto 1fr;\n  backdrop-filter: blur(8px);\n  box-shadow: 0 10px 30px rgba(0,0,0,0.45);\n}\n\n.di-resizeHandle {\n  width: 18px;\n  height: 18px;\n  flex: 0 0 18px;\n  border-radius: 8px;\n  cursor: nwse-resize;\n  touch-action: none;\n  opacity: 0.9;\n  border: 1px solid rgba(255,255,255,0.14);\n  background: rgba(255,255,255,0.06);\n  position: relative;\n}\n\n.di-resizeHandle::before {\n  content: \"\";\n  position: absolute;\n  inset: 4px;\n  border-radius: 6px;\n  background:\n    linear-gradient(135deg, rgba(255,255,255,0.65) 0 2px, transparent 0) 0 0 / 6px 6px,\n    linear-gradient(135deg, rgba(255,255,255,0.35) 0 2px, transparent 0) 3px 3px / 6px 6px;\n}\n\n.di-resizeHandle:hover {\n  opacity: 1;\n  border-color: rgba(255,255,255,0.24);\n  background: rgba(255,255,255,0.10);\n}\n\n.di-hidden {\n  display: none;\n}\n\n.di-header {\n  display: grid;\n  gap: 8px;\n  padding: 10px 12px;\n  border-bottom: 1px solid rgba(255,255,255,0.12);\n}\n\n.di-headerRow {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.di-title {\n  font: 600 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  opacity: 0.95;\n}\n\n.di-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.di-btn {\n  border: 1px solid rgba(255,255,255,0.14);\n  background: rgba(255,255,255,0.06);\n  color: #fff;\n  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  padding: 6px 8px;\n  border-radius: 10px;\n  cursor: pointer;\n}\n\n.di-tabs {\n  display: flex;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n\n.di-tab {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  border: 1px solid rgba(255,255,255,0.14);\n  background: rgba(255,255,255,0.06);\n  color: #fff;\n  padding: 6px 10px;\n  border-radius: 999px;\n  cursor: pointer;\n  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  opacity: 0.9;\n}\n\n.di-tab:hover {\n  background: rgba(255,255,255,0.10);\n  border-color: rgba(255,255,255,0.22);\n}\n\n.di-tabActive {\n  opacity: 1;\n  background: rgba(255,255,255,0.14);\n  border-color: rgba(255,255,255,0.28);\n}\n\n.di-tabIcon {\n  width: 14px;\n  height: 14px;\n  display: inline-block;\n}\n\n.di-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 6px;\n  border-radius: 999px;\n  border: 1px solid rgba(255,255,255,0.16);\n  background: rgba(0,0,0,0.28);\n  font-size: 11px;\n  line-height: 1;\n}\n\n.di-body {\n  overflow: auto;\n}\n\n.di-list {\n  margin: 0;\n  padding: 8px 10px;\n  list-style: none;\n  display: grid;\n  gap: 6px;\n}\n\n.di-item {\n  padding: 8px 10px;\n  border: 1px solid rgba(255,255,255,0.10);\n  border-radius: 10px;\n  background: rgba(255,255,255,0.04);\n}\n\n.di-itemToneNeutral {\n  border-color: rgba(255,255,255,0.10);\n  background: rgba(255,255,255,0.04);\n}\n\n.di-itemToneSuccess {\n  border-color: rgba(34, 197, 94, 0.35);\n  background: rgba(34, 197, 94, 0.10);\n}\n\n.di-itemToneWarning {\n  border-color: rgba(245, 158, 11, 0.42);\n  background: rgba(245, 158, 11, 0.12);\n}\n\n.di-itemToneError {\n  border-color: rgba(239, 68, 68, 0.45);\n  background: rgba(239, 68, 68, 0.12);\n}\n\n.di-meta {\n  display: flex;\n  gap: 10px;\n  font: 11px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  opacity: 0.85;\n  margin-bottom: 4px;\n}\n\n.di-statusChip {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px 8px;\n  border-radius: 999px;\n  font-size: 11px;\n  line-height: 1;\n  color: #fff;\n}\n\n.di-statusChipSuccess {\n  background: rgba(34, 197, 94, 0.95);\n}\n\n.di-statusChipError {\n  background: rgba(239, 68, 68, 0.95);\n}\n\n.di-msg {\n  white-space: pre-wrap;\n  word-break: break-word;\n  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n}\n\n.di-details {\n  margin-top: 8px;\n}\n\n.di-detailsSummary {\n  cursor: pointer;\n  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  opacity: 0.9;\n  user-select: none;\n}\n\n.di-netBodyDetails {\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  overflow: visible;\n}\n\n\n\n.di-netBodyDetails > summary.di-netDetailsSummary:hover {\n  background: rgba(255,255,255,0.06);\n}\n\n.di-netBodyDetails[open] > summary.di-netDetailsSummary {\n  background: rgba(255,255,255,0.08);\n  border-bottom: 0;\n}\n\n.di-netBodyDetails[open] > .di-detailsBody {\n  margin-top: 1px;\n}\n\n.di-netDetailsWrap {\n  display: grid;\n  gap: 1px;\n}\n\n.di-netDetailsSummary {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.di-netDetailsTitle {\n  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n}\n\n.di-copyBtn {\n  margin-left: auto;\n  border: 1px solid rgba(255,255,255,0.14);\n  background: rgba(255,255,255,0.06);\n  color: #fff;\n  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  padding: 4px 8px;\n  border-radius: 999px;\n  cursor: pointer;\n}\n\n.di-copyBtn:hover {\n  background: rgba(255,255,255,0.10);\n  border-color: rgba(255,255,255,0.22);\n}\n\n.di-copyBtn:active {\n  transform: translateY(1px);\n}\n\n.di-netTrunc {\n  border: 1px solid rgba(245, 158, 11, 0.42);\n  background: rgba(245, 158, 11, 0.10);\n  color: rgba(255,255,255,0.92);\n  border-radius: 10px;\n  padding: 8px 10px;\n  font: 11px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  margin-bottom: 8px;\n}\n\n.di-detailsBody {\n  margin-top: 6px;\n  padding: 8px 10px;\n  border-radius: 10px;\n  border: 1px solid rgba(255,255,255,0.10);\n  background: rgba(0,0,0,0.22);\n}\n\n.di-netBodyText {\n  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  white-space: pre-wrap;\n  word-break: break-word;\n  opacity: 0.95;\n}\n\n.di-jsonRoot {\n  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n.di-jsonNode {\n  margin-left: 0;\n}\n\n.di-jsonSummary {\n  cursor: pointer;\n  user-select: none;\n  opacity: 0.95;\n}\n\n.di-jsonBody {\n  margin-top: 6px;\n  padding-left: 12px;\n  display: grid;\n  gap: 4px;\n}\n\n.di-jsonRow {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 10px;\n  align-items: start;\n}\n\n.di-jsonKey {\n  opacity: 0.85;\n  color: rgba(255,255,255,0.78);\n}\n\n.di-jsonValue {\n  opacity: 0.95;\n  color: rgba(255,255,255,0.92);\n}\n\n.di-jsonMore, .di-jsonTrunc {\n  opacity: 0.75;\n}\n";

package/lib/ui/panelStyles.js

@@ -291,27 +291,79 @@ exports.PANEL_CSS = `
   user-select: none;
 }
 
-.di-detailsBody {
-  margin-top: 6px;
-  padding: 8px 10px;
-  border-radius: 10px;
-  border: 1px solid rgba(255,255,255,0.10);
-  background: rgba(0,0,0,0.22);
+.di-netBodyDetails {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  overflow: visible;
+}
+
+
+
+.di-netBodyDetails > summary.di-netDetailsSummary:hover {
+  background: rgba(255,255,255,0.06);
+}
+
+.di-netBodyDetails[open] > summary.di-netDetailsSummary {
+  background: rgba(255,255,255,0.08);
+  border-bottom: 0;
 }
 
-.di-netBodies {
+.di-netBodyDetails[open] > .di-detailsBody {
+  margin-top: 1px;
+}
+
+.di-netDetailsWrap {
   display: grid;
+  gap: 1px;
+}
+
+.di-netDetailsSummary {
+  display: flex;
+  align-items: center;
   gap: 10px;
 }
 
-.di-netBodySection {
-  display: grid;
-  gap: 6px;
+.di-netDetailsTitle {
+  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
-.di-netBodyLabel {
+.di-copyBtn {
+  margin-left: auto;
+  border: 1px solid rgba(255,255,255,0.14);
+  background: rgba(255,255,255,0.06);
+  color: #fff;
+  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  padding: 4px 8px;
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+.di-copyBtn:hover {
+  background: rgba(255,255,255,0.10);
+  border-color: rgba(255,255,255,0.22);
+}
+
+.di-copyBtn:active {
+  transform: translateY(1px);
+}
+
+.di-netTrunc {
+  border: 1px solid rgba(245, 158, 11, 0.42);
+  background: rgba(245, 158, 11, 0.10);
+  color: rgba(255,255,255,0.92);
+  border-radius: 10px;
+  padding: 8px 10px;
   font: 11px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  opacity: 0.85;
+  margin-bottom: 8px;
+}
+
+.di-detailsBody {
+  margin-top: 6px;
+  padding: 8px 10px;
+  border-radius: 10px;
+  border: 1px solid rgba(255,255,255,0.10);
+  background: rgba(0,0,0,0.22);
 }
 
 .di-netBodyText {

package/lib/utils/types.d.ts

@@ -17,7 +17,10 @@ export type NetworkLogEntry = {
     status?: number;
     durationMs?: number;
     requestBody?: unknown;
+    requestBodyTruncated?: boolean;
     responseBody?: unknown;
+    responseBodyTruncated?: boolean;
+    bodyMaxLength?: number;
     message: string;
 };
 export type LogEntry = ConsoleLogEntry | NetworkLogEntry;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dev-inspector",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "In-page devtools-style logger panel for web apps (console + network).",
   "repository": {
     "type": "git",