dev-inspector 1.0.0 → 1.0.2

package/README.md

@@ -28,6 +28,26 @@ initDevInspector({
 });
 ```
 
+## Important: Browser-only (SSR)
+
+Dev Inspector’s UI (`createPanel()` and the default `initDevInspector()` flow) requires a **browser environment** (it needs `document`).
+
+If your app uses **SSR** (Next.js, Remix, Nuxt, SvelteKit, etc.), do not call `initDevInspector()` at module scope on the server. Initialize it **client-side only** (e.g. in an effect, lifecycle hook, or a client-only component).
+
+Example (client-only init with dynamic import):
+
+```ts
+async function initInBrowser() {
+  if (typeof window === "undefined") return;
+  const { initDevInspector } = await import("dev-inspector");
+  initDevInspector({
+    panelOptions: { initiallyOpen: true, title: "Dev Inspector" },
+  });
+}
+
+initInBrowser();
+```
+
 If you want manual control, you can keep the returned handles:
 
 ```ts

package/lib/logger/consoleLogger.js

@@ -34,7 +34,16 @@ function getCircularReplacer() {
     };
 }
 function formatArgs(args) {
-    return args.map(safeStringify).join(" ");
+    const parts = args
+        .map((a) => {
+        if (a instanceof Error)
+            return `${a.name}: ${a.message}`;
+        if (typeof a === "object" && a !== null)
+            return null;
+        return safeStringify(a);
+    })
+        .filter((x) => typeof x === "string" && x.length > 0);
+    return parts.join(" ");
 }
 function installConsoleLogger(options) {
     var _a;

package/lib/logger/networkLogger.js

@@ -6,9 +6,6 @@ function createId() {
     seq += 1;
     return `${Date.now()}-${seq}`;
 }
-function now() {
-    return typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
-}
 function safeToString(value) {
     try {
         return String(value);
@@ -24,6 +21,34 @@ function truncateString(value, maxLen) {
         return value;
     return value.slice(0, maxLen);
 }
+function coerceUrl(input) {
+    if (typeof input === "string")
+        return input;
+    if (!input)
+        return undefined;
+    if (typeof input.href === "string")
+        return input.href;
+    if (typeof input.url === "string")
+        return input.url;
+    return undefined;
+}
+function formatUrlForMessage(raw) {
+    var _a, _b;
+    if (!raw)
+        return "";
+    try {
+        const loc = globalThis;
+        const base = typeof ((_a = loc.location) === null || _a === void 0 ? void 0 : _a.href) === "string" ? loc.location.href : undefined;
+        const u = new URL(raw, base);
+        const origin = typeof ((_b = loc.location) === null || _b === void 0 ? void 0 : _b.origin) === "string" ? loc.location.origin : undefined;
+        if (origin && u.origin === origin)
+            return `${u.pathname}${u.search}${u.hash}`;
+        return u.href;
+    }
+    catch (_c) {
+        return raw;
+    }
+}
 async function readResponseBody(response, maxLen) {
     try {
         const text = await response.text();
@@ -34,12 +59,11 @@ async function readResponseBody(response, maxLen) {
     }
 }
 function makeMessage(entry) {
-    var _a, _b;
+    var _a;
     const m = (_a = entry.method) !== null && _a !== void 0 ? _a : "";
-    const u = (_b = entry.url) !== null && _b !== void 0 ? _b : "";
+    const u = formatUrlForMessage(entry.url);
     const s = typeof entry.status === "number" ? ` ${entry.status}` : "";
-    const d = typeof entry.durationMs === "number" ? ` ${Math.round(entry.durationMs)}ms` : "";
-    return `${m} ${u}${s}${d}`.trim();
+    return `${m} ${u}${s}`.trim();
 }
 const xhrMeta = new WeakMap();
 function installNetworkLogger(options) {
@@ -56,17 +80,13 @@ function installNetworkLogger(options) {
     if (canFetch) {
         g.fetch = (async (...args) => {
             var _a;
-            const start = now();
             const id = createId();
             let method;
             let url;
             let requestBody;
             try {
                 const [input, init] = args;
-                if (typeof input === "string")
-                    url = input;
-                else if (input && typeof input.url === "string")
-                    url = input.url;
+                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();
@@ -77,8 +97,7 @@ function installNetworkLogger(options) {
                 void 0;
             }
             try {
-                const res = await originalFetch(...args);
-                const durationMs = now() - start;
+                const res = await Reflect.apply(originalFetch, globalThis, args);
                 const status = res.status;
                 let responseBody;
                 if (includeBodies) {
@@ -93,17 +112,15 @@ function installNetworkLogger(options) {
                         method,
                         url,
                         status,
-                        durationMs,
                         requestBody: includeBodies ? requestBody : undefined,
                         responseBody: includeBodies ? responseBody : undefined,
-                        message: makeMessage({ method, url, status, durationMs }),
+                        message: makeMessage({ method, url, status }),
                     };
                     options.emit(entry);
                 }
                 return res;
             }
             catch (err) {
-                const durationMs = now() - start;
                 if (active) {
                     const entry = {
                         id,
@@ -112,10 +129,9 @@ function installNetworkLogger(options) {
                         method,
                         url,
                         status: undefined,
-                        durationMs,
                         requestBody: includeBodies ? requestBody : undefined,
                         responseBody: includeBodies ? safeToString(err) : undefined,
-                        message: makeMessage({ method, url, status: undefined, durationMs }),
+                        message: makeMessage({ method, url, status: undefined }),
                     };
                     options.emit(entry);
                 }
@@ -130,16 +146,16 @@ function installNetworkLogger(options) {
         proto.open = function (...args) {
             try {
                 const [method, url] = args;
-                xhrMeta.set(this, { id: createId(), start: now(), method: safeToString(method).toUpperCase(), url: safeToString(url) });
+                xhrMeta.set(this, { id: createId(), method: safeToString(method).toUpperCase(), url: safeToString(url) });
             }
             catch (_a) {
-                xhrMeta.set(this, { id: createId(), start: now() });
+                xhrMeta.set(this, { id: createId() });
             }
             return originalOpen.apply(this, args);
         };
         proto.send = function (...args) {
             var _a;
-            const meta = (_a = xhrMeta.get(this)) !== null && _a !== void 0 ? _a : { id: createId(), start: now() };
+            const meta = (_a = xhrMeta.get(this)) !== null && _a !== void 0 ? _a : { id: createId() };
             if (includeBodies) {
                 try {
                     meta.requestBody = args[0];
@@ -150,7 +166,6 @@ function installNetworkLogger(options) {
             }
             xhrMeta.set(this, meta);
             const onLoadEnd = () => {
-                const durationMs = now() - meta.start;
                 const status = typeof this.status === "number" ? this.status : undefined;
                 let responseBody;
                 if (includeBodies) {
@@ -172,10 +187,9 @@ function installNetworkLogger(options) {
                         method: meta.method,
                         url: meta.url,
                         status,
-                        durationMs,
                         requestBody: includeBodies ? meta.requestBody : undefined,
                         responseBody: includeBodies ? responseBody : undefined,
-                        message: makeMessage({ method: meta.method, url: meta.url, status, durationMs }),
+                        message: makeMessage({ method: meta.method, url: meta.url, status }),
                     };
                     options.emit(entry);
                 }

package/lib/ui/jsonViewer.d.ts

@@ -0,0 +1,16 @@
+export type JsonViewerOptions = {
+    maxDepth?: number;
+    maxKeys?: number;
+    maxNodes?: number;
+};
+type Ctx = {
+    doc: Document;
+    seen: WeakSet<object>;
+    nodes: number;
+    maxDepth: number;
+    maxKeys: number;
+    maxNodes: number;
+};
+export declare function renderAny(ctx: Ctx, value: unknown, depth: number): HTMLElement;
+export declare function createJsonViewer(doc: Document, value: unknown, options?: JsonViewerOptions): HTMLElement;
+export {};

package/lib/ui/jsonViewer.js

@@ -0,0 +1,156 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderAny = renderAny;
+exports.createJsonViewer = createJsonViewer;
+function isObject(value) {
+    return typeof value === "object" && value !== null;
+}
+function typeLabel(value) {
+    if (value === null)
+        return "null";
+    const t = typeof value;
+    if (t !== "object")
+        return t;
+    if (Array.isArray(value))
+        return `Array(${value.length})`;
+    const tag = Object.prototype.toString.call(value);
+    return tag.slice(8, -1) || "Object";
+}
+function shortPreview(value) {
+    if (value === null)
+        return "null";
+    if (typeof value === "string") {
+        const s = value.length > 120 ? `${value.slice(0, 120)}…` : value;
+        return JSON.stringify(s);
+    }
+    if (typeof value === "number" || typeof value === "boolean" || typeof value === "bigint")
+        return String(value);
+    if (typeof value === "undefined")
+        return "undefined";
+    if (typeof value === "function")
+        return "function";
+    if (typeof value === "symbol")
+        return "symbol";
+    if (typeof value === "object") {
+        if (Array.isArray(value))
+            return `Array(${value.length})`;
+        return "Object";
+    }
+    return String(value);
+}
+function canExpand(value) {
+    if (!isObject(value))
+        return false;
+    if (value instanceof Date)
+        return false;
+    if (value instanceof RegExp)
+        return false;
+    return true;
+}
+function row(doc, key, valueEl) {
+    const el = doc.createElement("div");
+    el.className = "di-jsonRow";
+    const k = doc.createElement("span");
+    k.className = "di-jsonKey";
+    k.textContent = key;
+    el.append(k, valueEl);
+    return el;
+}
+function leaf(ctx, value) {
+    const el = ctx.doc.createElement("span");
+    el.className = "di-jsonValue";
+    el.textContent = shortPreview(value);
+    return el;
+}
+function renderObject(ctx, value, depth) {
+    if (!isObject(value))
+        return leaf(ctx, value);
+    if (!canExpand(value))
+        return leaf(ctx, value);
+    if (ctx.nodes >= ctx.maxNodes) {
+        const el = ctx.doc.createElement("span");
+        el.className = "di-jsonValue";
+        el.textContent = "[truncated]";
+        return el;
+    }
+    const obj = value;
+    if (ctx.seen.has(obj)) {
+        const el = ctx.doc.createElement("span");
+        el.className = "di-jsonValue";
+        el.textContent = "[circular]";
+        return el;
+    }
+    ctx.seen.add(obj);
+    ctx.nodes += 1;
+    const details = ctx.doc.createElement("details");
+    details.className = "di-jsonNode";
+    details.open = depth === 0;
+    const summary = ctx.doc.createElement("summary");
+    summary.className = "di-jsonSummary";
+    summary.textContent = `${typeLabel(value)} ${shortPreview(value)}`;
+    details.append(summary);
+    if (depth >= ctx.maxDepth) {
+        const el = ctx.doc.createElement("div");
+        el.className = "di-jsonBody";
+        const msg = ctx.doc.createElement("div");
+        msg.className = "di-jsonTrunc";
+        msg.textContent = "Max depth reached";
+        el.append(msg);
+        details.append(el);
+        return details;
+    }
+    const body = ctx.doc.createElement("div");
+    body.className = "di-jsonBody";
+    if (Array.isArray(value)) {
+        const arr = value;
+        const limit = Math.min(arr.length, ctx.maxKeys);
+        for (let i = 0; i < limit; i += 1) {
+            const v = arr[i];
+            body.append(row(ctx.doc, String(i), renderAny(ctx, v, depth + 1)));
+        }
+        if (arr.length > limit) {
+            const more = ctx.doc.createElement("div");
+            more.className = "di-jsonMore";
+            more.textContent = `… +${arr.length - limit} more`;
+            body.append(more);
+        }
+    }
+    else {
+        const rec = value;
+        const keys = Object.keys(rec);
+        const limit = Math.min(keys.length, ctx.maxKeys);
+        for (let i = 0; i < limit; i += 1) {
+            const k = keys[i];
+            const v = rec[k];
+            body.append(row(ctx.doc, k, renderAny(ctx, v, depth + 1)));
+        }
+        if (keys.length > limit) {
+            const more = ctx.doc.createElement("div");
+            more.className = "di-jsonMore";
+            more.textContent = `… +${keys.length - limit} more`;
+            body.append(more);
+        }
+    }
+    details.append(body);
+    return details;
+}
+function renderAny(ctx, value, depth) {
+    if (!canExpand(value))
+        return leaf(ctx, value);
+    return renderObject(ctx, value, depth);
+}
+function createJsonViewer(doc, value, options = {}) {
+    var _a, _b, _c;
+    const ctx = {
+        doc,
+        seen: new WeakSet(),
+        nodes: 0,
+        maxDepth: Math.max(1, (_a = options.maxDepth) !== null && _a !== void 0 ? _a : 6),
+        maxKeys: Math.max(10, (_b = options.maxKeys) !== null && _b !== void 0 ? _b : 200),
+        maxNodes: Math.max(50, (_c = options.maxNodes) !== null && _c !== void 0 ? _c : 2000),
+    };
+    const root = doc.createElement("div");
+    root.className = "di-jsonRoot";
+    root.append(renderAny(ctx, value, 0));
+    return root;
+}

package/lib/ui/logList.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createLogList = createLogList;
+const jsonViewer_1 = require("./jsonViewer");
 function fmtTime(ts) {
     const d = new Date(ts);
     const hh = String(d.getHours()).padStart(2, "0");
@@ -39,6 +40,20 @@ function isNetworkFailure(entry) {
         return false;
     return typeof entry.status !== "number" || entry.status >= 400;
 }
+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);
+}
 function createLogList(doc) {
     const el = doc.createElement("ul");
     el.className = "di-list";
@@ -61,10 +76,32 @@ function createLogList(doc) {
             detail.textContent = typeof entry.status === "number" ? String(entry.status) : "ERR";
         }
         meta.append(time, source, detail);
-        const msg = doc.createElement("div");
-        msg.className = "di-msg";
-        msg.textContent = entry.message;
-        li.append(meta, msg);
+        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 = 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);
+            }
+        }
         el.append(li);
     };
     const clear = () => {

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";
+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-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

@@ -279,4 +279,67 @@ exports.PANEL_CSS = `
   word-break: break-word;
   font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
+
+.di-details {
+  margin-top: 8px;
+}
+
+.di-detailsSummary {
+  cursor: pointer;
+  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  opacity: 0.9;
+  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-jsonRoot {
+  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.di-jsonNode {
+  margin-left: 0;
+}
+
+.di-jsonSummary {
+  cursor: pointer;
+  user-select: none;
+  opacity: 0.95;
+}
+
+.di-jsonBody {
+  margin-top: 6px;
+  padding-left: 12px;
+  display: grid;
+  gap: 4px;
+}
+
+.di-jsonRow {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 10px;
+  align-items: start;
+}
+
+.di-jsonKey {
+  opacity: 0.85;
+  color: rgba(255,255,255,0.78);
+}
+
+.di-jsonValue {
+  opacity: 0.95;
+  color: rgba(255,255,255,0.92);
+}
+
+.di-jsonMore, .di-jsonTrunc {
+  opacity: 0.75;
+}
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dev-inspector",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "In-page devtools-style logger panel for web apps (console + network).",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -39,7 +39,6 @@
   "files": [
     "lib/**/*"
   ],
-  
   "devDependencies": {
     "@eslint/js": "^9.39.2",
     "eslint": "^9.39.2",