dev-inspector 1.0.0

package/lib/ui/logList.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createLogList = createLogList;
+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}`;
+}
+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;
+}
+function createLogList(doc) {
+    const el = doc.createElement("ul");
+    el.className = "di-list";
+    const append = (entry) => {
+        const li = doc.createElement("li");
+        const tone = toneForEntry(entry);
+        li.className = `di-item ${classForTone(tone)}`;
+        const meta = doc.createElement("div");
+        meta.className = "di-meta";
+        const time = doc.createElement("span");
+        time.textContent = 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 ${isNetworkFailure(entry) ? "di-statusChipError" : "di-statusChipSuccess"}`;
+            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);
+        el.append(li);
+    };
+    const clear = () => {
+        el.replaceChildren();
+    };
+    return { el, append, clear };
+}

package/lib/ui/panel.d.ts

@@ -0,0 +1,15 @@
+import type { LogStorage } from "../storage/logStorage";
+export type PanelOptions = {
+    storage: LogStorage;
+    title?: string;
+    initiallyOpen?: boolean;
+    mount?: HTMLElement;
+};
+export type PanelHandle = {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    destroy: () => void;
+    isOpen: () => boolean;
+};
+export declare function createPanel(options: PanelOptions): PanelHandle;

package/lib/ui/panel.js

@@ -0,0 +1,342 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createPanel = createPanel;
+const logList_1 = require("./logList");
+const panelStyles_1 = require("./panelStyles");
+function clamp(n, min, max) {
+    return Math.max(min, Math.min(max, n));
+}
+function ensureDocument() {
+    if (typeof document === "undefined") {
+        throw new Error("Panel UI requires a browser-like environment with document.");
+    }
+    return document;
+}
+function ensureStyle(doc) {
+    const id = "dev-inspector-panel-style";
+    const existing = doc.getElementById(id);
+    if (existing)
+        return;
+    const style = doc.createElement("style");
+    style.id = id;
+    style.textContent = panelStyles_1.PANEL_CSS;
+    doc.head.append(style);
+}
+function createPanel(options) {
+    var _a, _b, _c, _d;
+    const doc = ensureDocument();
+    ensureStyle(doc);
+    const mount = (_a = options.mount) !== null && _a !== void 0 ? _a : doc.body;
+    const title = (_b = options.title) !== null && _b !== void 0 ? _b : "Dev Inspector";
+    let open = (_c = options.initiallyOpen) !== null && _c !== void 0 ? _c : false;
+    let tab = "console";
+    const root = doc.createElement("div");
+    root.className = "di-root";
+    const toggleBtn = doc.createElement("button");
+    toggleBtn.type = "button";
+    toggleBtn.className = "di-toggle";
+    toggleBtn.setAttribute("aria-label", "Dev Inspector");
+    toggleBtn.innerHTML =
+        `<span class="di-toggleTitle">Dev Inspector</span>` +
+            `<span class="di-toggleMeta">` +
+            `<span class="di-toggleBadge" data-di-toggle-count="console">` +
+            `<svg class="di-toggleIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 5.5C4 4.67 4.67 4 5.5 4H18.5C19.33 4 20 4.67 20 5.5V15.5C20 16.33 19.33 17 18.5 17H13.5L12 18.5L10.5 17H5.5C4.67 17 4 16.33 4 15.5V5.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M7 8H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M7 11H14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>` +
+            `<span data-di-toggle-count-value="console">0</span>` +
+            `<span class="di-toggleErr" data-di-toggle-error="console" aria-label="Console errors">` +
+            `<span class="di-toggleErrIcon">!</span>` +
+            `<span data-di-toggle-error-value="console">0</span>` +
+            `</span>` +
+            `</span>` +
+            `<span class="di-toggleBadge" data-di-toggle-count="network">` +
+            `<svg class="di-toggleIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M6 12C6 8.69 8.69 6 12 6C15.31 6 18 8.69 18 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M8.5 12C8.5 10.07 10.07 8.5 12 8.5C13.93 8.5 15.5 10.07 15.5 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M12 12L12 20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="20" r="1.5" fill="currentColor"/></svg>` +
+            `<span data-di-toggle-count-value="network">0</span>` +
+            `<span class="di-toggleErr" data-di-toggle-error="network" aria-label="Network errors">` +
+            `<span class="di-toggleErrIcon">!</span>` +
+            `<span data-di-toggle-error-value="network">0</span>` +
+            `</span>` +
+            `</span>` +
+            `</span>`;
+    const panel = doc.createElement("div");
+    panel.className = `di-panel${open ? "" : " di-hidden"}`;
+    const resizeHandle = doc.createElement("div");
+    resizeHandle.className = "di-resizeHandle";
+    resizeHandle.setAttribute("role", "separator");
+    resizeHandle.setAttribute("aria-label", "Resize panel");
+    const header = doc.createElement("div");
+    header.className = "di-header";
+    const headerRow = doc.createElement("div");
+    headerRow.className = "di-headerRow";
+    const titleEl = doc.createElement("div");
+    titleEl.className = "di-title";
+    titleEl.textContent = title;
+    const actions = doc.createElement("div");
+    actions.className = "di-actions";
+    const clearBtn = doc.createElement("button");
+    clearBtn.type = "button";
+    clearBtn.className = "di-btn";
+    clearBtn.textContent = "Clear";
+    const closeBtn = doc.createElement("button");
+    closeBtn.type = "button";
+    closeBtn.className = "di-btn";
+    closeBtn.textContent = "Close";
+    actions.append(clearBtn, closeBtn);
+    headerRow.append(resizeHandle, titleEl, actions);
+    const tabs = doc.createElement("div");
+    tabs.className = "di-tabs";
+    const consoleTab = doc.createElement("button");
+    consoleTab.type = "button";
+    consoleTab.className = "di-tab";
+    consoleTab.innerHTML =
+        `<svg class="di-tabIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 5.5C4 4.67 4.67 4 5.5 4H18.5C19.33 4 20 4.67 20 5.5V15.5C20 16.33 19.33 17 18.5 17H13.5L12 18.5L10.5 17H5.5C4.67 17 4 16.33 4 15.5V5.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M7 8H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M7 11H14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>` +
+            `<span>Console</span>` +
+            `<span class="di-badge" data-di-count="console">0</span>`;
+    const networkTab = doc.createElement("button");
+    networkTab.type = "button";
+    networkTab.className = "di-tab";
+    networkTab.innerHTML =
+        `<svg class="di-tabIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M6 12C6 8.69 8.69 6 12 6C15.31 6 18 8.69 18 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M8.5 12C8.5 10.07 10.07 8.5 12 8.5C13.93 8.5 15.5 10.07 15.5 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M12 12L12 20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="20" r="1.5" fill="currentColor"/></svg>` +
+            `<span>Network</span>` +
+            `<span class="di-badge" data-di-count="network">0</span>`;
+    tabs.append(consoleTab, networkTab);
+    header.append(headerRow, tabs);
+    const body = doc.createElement("div");
+    body.className = "di-body";
+    const list = (0, logList_1.createLogList)(doc);
+    body.append(list.el);
+    panel.append(header, body);
+    root.append(toggleBtn, panel);
+    mount.append(root);
+    const MAX_WIDTH_CAP = 920;
+    const MAX_HEIGHT_CAP = 720;
+    const MARGIN_X = 24;
+    const MARGIN_Y = 68;
+    const minSize = (() => {
+        const r = panel.getBoundingClientRect();
+        return { w: Math.round(r.width), h: Math.round(r.height) };
+    })();
+    const getMaxSize = () => {
+        const win = globalThis;
+        const vw = typeof win.innerWidth === "number" ? win.innerWidth : 0;
+        const vh = typeof win.innerHeight === "number" ? win.innerHeight : 0;
+        return {
+            w: Math.max(200, Math.min(MAX_WIDTH_CAP, vw - MARGIN_X)),
+            h: Math.max(180, Math.min(MAX_HEIGHT_CAP, vh - MARGIN_Y)),
+        };
+    };
+    const getCurrentSize = () => {
+        const r = panel.getBoundingClientRect();
+        return { w: Math.round(r.width), h: Math.round(r.height) };
+    };
+    const applySize = (next) => {
+        const max = getMaxSize();
+        const effMinW = Math.min(minSize.w, max.w);
+        const effMinH = Math.min(minSize.h, max.h);
+        const w = clamp(next.w, effMinW, max.w);
+        const h = clamp(next.h, effMinH, max.h);
+        panel.style.width = `${w}px`;
+        panel.style.height = `${h}px`;
+    };
+    const ensureWithinViewport = () => {
+        if (!panel.style.width && !panel.style.height)
+            return;
+        applySize(getCurrentSize());
+    };
+    const entries = { console: [], network: [] };
+    const errorCounts = { console: 0, network: 0 };
+    const isConsoleError = (e) => e.source === "console" && e.level === "error";
+    const isNetworkError = (e) => e.source === "network" && (typeof e.status !== "number" || e.status >= 400);
+    const updateTabStyles = () => {
+        if (tab === "console") {
+            consoleTab.classList.add("di-tabActive");
+            networkTab.classList.remove("di-tabActive");
+        }
+        else {
+            networkTab.classList.add("di-tabActive");
+            consoleTab.classList.remove("di-tabActive");
+        }
+    };
+    const updateCounts = () => {
+        const c = header.querySelector('[data-di-count="console"]');
+        const n = header.querySelector('[data-di-count="network"]');
+        if (c)
+            c.textContent = String(entries.console.length);
+        if (n)
+            n.textContent = String(entries.network.length);
+        const tc = toggleBtn.querySelector('[data-di-toggle-count-value="console"]');
+        const tn = toggleBtn.querySelector('[data-di-toggle-count-value="network"]');
+        if (tc)
+            tc.textContent = String(entries.console.length);
+        if (tn)
+            tn.textContent = String(entries.network.length);
+        const tec = toggleBtn.querySelector('[data-di-toggle-error-value="console"]');
+        const ten = toggleBtn.querySelector('[data-di-toggle-error-value="network"]');
+        if (tec)
+            tec.textContent = String(errorCounts.console);
+        if (ten)
+            ten.textContent = String(errorCounts.network);
+        const ecWrap = toggleBtn.querySelector('[data-di-toggle-error="console"]');
+        const enWrap = toggleBtn.querySelector('[data-di-toggle-error="network"]');
+        if (ecWrap)
+            ecWrap.style.display = errorCounts.console > 0 ? "inline-flex" : "none";
+        if (enWrap)
+            enWrap.style.display = errorCounts.network > 0 ? "inline-flex" : "none";
+    };
+    const renderTab = () => {
+        list.clear();
+        entries[tab].forEach((e) => list.append(e));
+        body.scrollTop = body.scrollHeight;
+    };
+    const hydrateFromStorage = () => {
+        entries.console = [];
+        entries.network = [];
+        errorCounts.console = 0;
+        errorCounts.network = 0;
+        options.storage.getAll().forEach((e) => {
+            if (e.source === "network") {
+                entries.network.push(e);
+                if (isNetworkError(e))
+                    errorCounts.network += 1;
+            }
+            else {
+                entries.console.push(e);
+                if (isConsoleError(e))
+                    errorCounts.console += 1;
+            }
+        });
+        updateCounts();
+        updateTabStyles();
+        renderTab();
+    };
+    hydrateFromStorage();
+    const onNewLog = (entry) => {
+        if (entry.source === "network") {
+            entries.network.push(entry);
+            if (isNetworkError(entry))
+                errorCounts.network += 1;
+        }
+        else {
+            entries.console.push(entry);
+            if (isConsoleError(entry))
+                errorCounts.console += 1;
+        }
+        updateCounts();
+        if (entry.source === tab) {
+            list.append(entry);
+            body.scrollTop = body.scrollHeight;
+        }
+    };
+    const unsub = options.storage.onNewLog(onNewLog);
+    const onCleared = () => {
+        entries.console = [];
+        entries.network = [];
+        errorCounts.console = 0;
+        errorCounts.network = 0;
+        updateCounts();
+        renderTab();
+    };
+    options.storage.addEventListener("cleared", onCleared);
+    const applyVisibility = () => {
+        if (open)
+            panel.classList.remove("di-hidden");
+        else
+            panel.classList.add("di-hidden");
+    };
+    const openPanel = () => {
+        open = true;
+        applyVisibility();
+    };
+    const closePanel = () => {
+        open = false;
+        applyVisibility();
+    };
+    const toggle = () => {
+        open = !open;
+        applyVisibility();
+    };
+    const onToggleClick = () => toggle();
+    const onCloseClick = () => closePanel();
+    const onClearClick = () => {
+        options.storage.clear();
+    };
+    const onConsoleTab = () => {
+        tab = "console";
+        updateTabStyles();
+        renderTab();
+    };
+    const onNetworkTab = () => {
+        tab = "network";
+        updateTabStyles();
+        renderTab();
+    };
+    toggleBtn.addEventListener("click", onToggleClick);
+    closeBtn.addEventListener("click", onCloseClick);
+    clearBtn.addEventListener("click", onClearClick);
+    consoleTab.addEventListener("click", onConsoleTab);
+    networkTab.addEventListener("click", onNetworkTab);
+    let resizing = false;
+    let startX = 0;
+    let startY = 0;
+    let startW = 0;
+    let startH = 0;
+    const onResizeMove = (ev) => {
+        if (!resizing)
+            return;
+        const dx = startX - ev.clientX;
+        const dy = startY - ev.clientY;
+        applySize({ w: startW + dx, h: startH + dy });
+    };
+    const stopResize = () => {
+        var _a, _b, _c;
+        if (!resizing)
+            return;
+        resizing = false;
+        const win = globalThis;
+        (_a = win.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(win, "pointermove", onResizeMove);
+        (_b = win.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(win, "pointerup", stopResize);
+        (_c = win.removeEventListener) === null || _c === void 0 ? void 0 : _c.call(win, "pointercancel", stopResize);
+    };
+    const onResizeStart = (ev) => {
+        var _a, _b, _c;
+        resizing = true;
+        startX = ev.clientX;
+        startY = ev.clientY;
+        const cur = getCurrentSize();
+        startW = cur.w;
+        startH = cur.h;
+        try {
+            resizeHandle.setPointerCapture(ev.pointerId);
+        }
+        catch (_d) {
+            void 0;
+        }
+        const win = globalThis;
+        (_a = win.addEventListener) === null || _a === void 0 ? void 0 : _a.call(win, "pointermove", onResizeMove);
+        (_b = win.addEventListener) === null || _b === void 0 ? void 0 : _b.call(win, "pointerup", stopResize);
+        (_c = win.addEventListener) === null || _c === void 0 ? void 0 : _c.call(win, "pointercancel", stopResize);
+    };
+    resizeHandle.addEventListener("pointerdown", onResizeStart);
+    const win = globalThis;
+    const onWindowResize = () => ensureWithinViewport();
+    (_d = win.addEventListener) === null || _d === void 0 ? void 0 : _d.call(win, "resize", onWindowResize);
+    const destroy = () => {
+        var _a;
+        toggleBtn.removeEventListener("click", onToggleClick);
+        closeBtn.removeEventListener("click", onCloseClick);
+        clearBtn.removeEventListener("click", onClearClick);
+        consoleTab.removeEventListener("click", onConsoleTab);
+        networkTab.removeEventListener("click", onNetworkTab);
+        options.storage.removeEventListener("cleared", onCleared);
+        resizeHandle.removeEventListener("pointerdown", onResizeStart);
+        stopResize();
+        (_a = win.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(win, "resize", onWindowResize);
+        unsub();
+        root.remove();
+    };
+    return {
+        open: openPanel,
+        close: closePanel,
+        toggle,
+        destroy,
+        isOpen: () => open,
+    };
+}

package/lib/ui/panelStyles.d.ts

@@ -0,0 +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";