dev-inspector 1.0.5 → 1.1.0

package/README.md

@@ -19,6 +19,10 @@ In-page devtools-style logger panel for web apps. Capture **console** and **netw
 - Network interception: `fetch` + `XMLHttpRequest`
 - In-memory storage with events (`EventTarget`)
 - UI panel with tabs (Console / Network), counters, severity/status colors, and resize
+- Search across console messages and network requests (URL, method, status, body)
+- Auto-scroll lock with a "Latest" jump button that surfaces unread entries
+- Light / dark theme with `localStorage` persistence (defaults to light)
+- Configurable panel title (used in the header and the floating toggle)
 - Vite demo playground
 
 ## Installation
@@ -35,10 +39,27 @@ import { initDevInspector } from "dev-inspector";
 initDevInspector({
   maxSize: 500,
   networkOptions: { includeBodies: false },
-  panelOptions: { initiallyOpen: true, title: "Dev Inspector" },
+  panelOptions: {
+    initiallyOpen: true,
+    title: "My App Inspector",
+    theme: "light",
+    persistTheme: true,
+  },
 });
 ```
 
+### Panel options
+
+| Option            | Type                | Default                 | Description                                                                          |
+| ----------------- | ------------------- | ----------------------- | ------------------------------------------------------------------------------------ |
+| `title`           | `string`            | `"Dev Inspector"`       | Label shown in the panel header **and** the floating toggle pill in the bottom-right |
+| `initiallyOpen`   | `boolean`           | `true`                  | Open the panel on mount                                                              |
+| `theme`           | `"light" \| "dark"` | `"light"`               | Initial theme. Overridden by a stored value when `persistTheme` is `true`            |
+| `persistTheme`    | `boolean`           | `true`                  | Persist the user's theme choice in `localStorage`                                    |
+| `themeStorageKey` | `string`            | `"dev-inspector:theme"` | Key used by `localStorage` to remember the theme                                     |
+
+The theme can also be toggled at runtime via the sun/moon button in the panel header. When `persistTheme` is `true`, the choice is stored under `themeStorageKey` and restored on the next load.
+
 ## Important: Browser-only (SSR)
 
 Dev Inspector’s UI (`createPanel()` and the default `initDevInspector()` flow) requires a **browser environment** (it needs `document`).

package/lib/init.d.ts

@@ -1,8 +1,12 @@
-type InitOptions = {
+export type Theme = "light" | "dark";
+export type InitOptions = {
     maxSize?: number;
     panelOptions?: {
         title?: string;
         initiallyOpen?: boolean;
+        theme?: Theme;
+        persistTheme?: boolean;
+        themeStorageKey?: string;
     };
     networkOptions?: {
         includeBodies?: boolean;
@@ -10,4 +14,3 @@ type InitOptions = {
     };
 };
 export declare function initDevInspector(options?: InitOptions): void;
-export {};

package/lib/init.js

@@ -12,7 +12,7 @@ function getGlobalBag() {
     return globalThis;
 }
 function initDevInspector(options = {}) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const key = getGlobalInstanceKey();
     const bag = getGlobalBag();
     const prev = bag[key];
@@ -20,7 +20,7 @@ function initDevInspector(options = {}) {
         try {
             prev.destroy();
         }
-        catch (_k) {
+        catch (_o) {
             void 0;
         }
     }
@@ -35,6 +35,9 @@ function initDevInspector(options = {}) {
         storage,
         initiallyOpen: (_g = (_f = options.panelOptions) === null || _f === void 0 ? void 0 : _f.initiallyOpen) !== null && _g !== void 0 ? _g : true,
         title: (_j = (_h = options.panelOptions) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : "Dev Inspector",
+        theme: (_k = options.panelOptions) === null || _k === void 0 ? void 0 : _k.theme,
+        persistTheme: (_l = options.panelOptions) === null || _l === void 0 ? void 0 : _l.persistTheme,
+        themeStorageKey: (_m = options.panelOptions) === null || _m === void 0 ? void 0 : _m.themeStorageKey,
     });
     const destroy = () => {
         try {

package/lib/integrations/index.d.ts

@@ -0,0 +1,2 @@
+export type { CreateIssueInput, CreateIssueResult, IntegrationContext, IntegrationId, IntegrationsConfig, JiraIntegrationConfig } from "./types";
+export { createJiraIssue, fetchJiraIssueTypes, JiraIntegrationError } from "./jira";

package/lib/integrations/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JiraIntegrationError = exports.fetchJiraIssueTypes = exports.createJiraIssue = void 0;
+var jira_1 = require("./jira");
+Object.defineProperty(exports, "createJiraIssue", { enumerable: true, get: function () { return jira_1.createJiraIssue; } });
+Object.defineProperty(exports, "fetchJiraIssueTypes", { enumerable: true, get: function () { return jira_1.fetchJiraIssueTypes; } });
+Object.defineProperty(exports, "JiraIntegrationError", { enumerable: true, get: function () { return jira_1.JiraIntegrationError; } });

package/lib/integrations/jira/adf.d.ts

@@ -0,0 +1,11 @@
+export declare function textToAdf(text: string): {
+    type: string;
+    version: number;
+    content: {
+        type: string;
+        content: {
+            type: string;
+            text: string;
+        }[];
+    }[];
+};

package/lib/integrations/jira/adf.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textToAdf = textToAdf;
+function paragraph(text) {
+    return {
+        type: "paragraph",
+        content: text.length > 0 ? [{ type: "text", text }] : [],
+    };
+}
+function textToAdf(text) {
+    const lines = text.split(/\r?\n/);
+    return {
+        type: "doc",
+        version: 1,
+        content: lines.map((l) => paragraph(l)),
+    };
+}

package/lib/integrations/jira/client.d.ts

@@ -0,0 +1,4 @@
+import type { CreateIssueInput, CreateIssueResult, JiraIntegrationConfig } from "../types";
+import type { JiraIssueTypeOption } from "../types";
+export declare function fetchJiraIssueTypes(config: JiraIntegrationConfig, projectKey?: string): Promise<JiraIssueTypeOption[]>;
+export declare function createJiraIssue(input: CreateIssueInput, config: JiraIntegrationConfig): Promise<CreateIssueResult>;

package/lib/integrations/jira/client.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fetchJiraIssueTypes = fetchJiraIssueTypes;
+exports.createJiraIssue = createJiraIssue;
+const adf_1 = require("./adf");
+const errors_1 = require("./errors");
+async function readJsonSafe(res) {
+    try {
+        return (await res.json());
+    }
+    catch (_a) {
+        return undefined;
+    }
+}
+function mapStatus(status) {
+    if (status === 400)
+        return { code: "bad_request", message: "Bad request. Check required fields and Jira configuration." };
+    if (status === 401)
+        return { code: "unauthorized", message: "Unauthorized. Check Jira credentials." };
+    if (status === 403)
+        return { code: "forbidden", message: "Forbidden. Check Jira permissions." };
+    if (status === 429)
+        return { code: "rate_limited", message: "Rate limited by Jira. Try again later." };
+    if (status >= 500)
+        return { code: "server_error", message: "Jira server error. Try again later." };
+    return { code: "unknown", message: "Unexpected Jira error." };
+}
+function isRecord(value) {
+    return typeof value === "object" && value !== null;
+}
+function toQuery(params) {
+    const sp = new URLSearchParams();
+    for (const [k, v] of Object.entries(params)) {
+        if (typeof v === "string" && v.length > 0)
+            sp.set(k, v);
+    }
+    const s = sp.toString();
+    return s.length > 0 ? `?${s}` : "";
+}
+async function fetchJiraIssueTypes(config, projectKey) {
+    var _a;
+    const proxyUrl = config.proxyUrl;
+    if (!proxyUrl)
+        throw new errors_1.JiraIntegrationError("Missing Jira proxyUrl.", "not_configured");
+    const url = `${proxyUrl}${toQuery({ op: "issueTypes", projectKey: (_a = projectKey !== null && projectKey !== void 0 ? projectKey : config.projectKey) !== null && _a !== void 0 ? _a : "" })}`;
+    let res;
+    try {
+        res = await fetch(url, { method: "GET", headers: { accept: "application/json" } });
+    }
+    catch (e) {
+        throw new errors_1.JiraIntegrationError("Network error while loading Jira issue types.", "network_error", { details: String(e) });
+    }
+    const data = await readJsonSafe(res);
+    if (!res.ok) {
+        const mapped = mapStatus(res.status);
+        throw new errors_1.JiraIntegrationError(mapped.message, mapped.code, { status: res.status, details: data });
+    }
+    if (!Array.isArray(data))
+        return [];
+    const out = [];
+    for (const it of data) {
+        if (!isRecord(it))
+            continue;
+        const id = typeof it.id === "string" ? it.id : undefined;
+        const name = typeof it.name === "string" ? it.name : undefined;
+        if (id && name)
+            out.push({ id, name });
+    }
+    return out;
+}
+async function createJiraIssue(input, config) {
+    var _a, _b, _c, _d, _e, _f;
+    const title = input.title.trim();
+    if (title.length === 0)
+        throw new errors_1.JiraIntegrationError("Title is required.", "bad_request");
+    const projectKey = (_b = (_a = input.jira) === null || _a === void 0 ? void 0 : _a.projectKey) !== null && _b !== void 0 ? _b : config.projectKey;
+    if (!projectKey)
+        throw new errors_1.JiraIntegrationError("Missing Jira project key.", "not_configured");
+    const issueType = (_e = (_d = (_c = input.jira) === null || _c === void 0 ? void 0 : _c.issueType) !== null && _d !== void 0 ? _d : config.issueType) !== null && _e !== void 0 ? _e : {};
+    if (!issueType.name && !issueType.id)
+        throw new errors_1.JiraIntegrationError("Missing Jira issue type (name or id).", "not_configured");
+    const descriptionText = (_f = input.description) !== null && _f !== void 0 ? _f : "";
+    const adf = (0, adf_1.textToAdf)(descriptionText);
+    const proxyUrl = config.proxyUrl;
+    if (!proxyUrl)
+        throw new errors_1.JiraIntegrationError("Missing Jira proxyUrl.", "not_configured");
+    const res = await fetch(proxyUrl, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+            provider: "jira",
+            input: {
+                title,
+                descriptionAdf: adf,
+                context: input.context,
+                screenshot: input.screenshot,
+                projectKey,
+                issueType,
+            },
+        }),
+    });
+    const data = await readJsonSafe(res);
+    if (!res.ok) {
+        const mapped = mapStatus(res.status);
+        throw new errors_1.JiraIntegrationError(mapped.message, mapped.code, { status: res.status, details: data });
+    }
+    const rec = isRecord(data) ? data : {};
+    return {
+        id: typeof rec.id === "string" ? rec.id : undefined,
+        key: typeof rec.key === "string" ? rec.key : undefined,
+        url: typeof rec.url === "string" ? rec.url : undefined,
+    };
+}

package/lib/integrations/jira/errors.d.ts

@@ -0,0 +1,10 @@
+export type JiraErrorCode = "not_configured" | "bad_request" | "unauthorized" | "forbidden" | "rate_limited" | "server_error" | "network_error" | "unknown";
+export declare class JiraIntegrationError extends Error {
+    code: JiraErrorCode;
+    status?: number;
+    details?: unknown;
+    constructor(message: string, code: JiraErrorCode, options?: {
+        status?: number;
+        details?: unknown;
+    });
+}

package/lib/integrations/jira/errors.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JiraIntegrationError = void 0;
+class JiraIntegrationError extends Error {
+    constructor(message, code, options) {
+        super(message);
+        this.name = "JiraIntegrationError";
+        this.code = code;
+        this.status = options === null || options === void 0 ? void 0 : options.status;
+        this.details = options === null || options === void 0 ? void 0 : options.details;
+    }
+}
+exports.JiraIntegrationError = JiraIntegrationError;

package/lib/integrations/jira/index.d.ts

@@ -0,0 +1,2 @@
+export { createJiraIssue, fetchJiraIssueTypes } from "./client";
+export { JiraIntegrationError } from "./errors";

package/lib/integrations/jira/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JiraIntegrationError = exports.fetchJiraIssueTypes = exports.createJiraIssue = void 0;
+var client_1 = require("./client");
+Object.defineProperty(exports, "createJiraIssue", { enumerable: true, get: function () { return client_1.createJiraIssue; } });
+Object.defineProperty(exports, "fetchJiraIssueTypes", { enumerable: true, get: function () { return client_1.fetchJiraIssueTypes; } });
+var errors_1 = require("./errors");
+Object.defineProperty(exports, "JiraIntegrationError", { enumerable: true, get: function () { return errors_1.JiraIntegrationError; } });

package/lib/integrations/types.d.ts

@@ -0,0 +1,54 @@
+export type IntegrationId = "jira";
+export type JiraIssueType = {
+    name?: string;
+    id?: string;
+};
+export type JiraIssueTypeOption = {
+    id: string;
+    name: string;
+};
+export type JiraIntegrationConfig = {
+    proxyUrl?: string;
+    projectKey?: string;
+    issueType?: JiraIssueType;
+    screenshot?: {
+        enabled?: boolean;
+        mode?: "displayMedia" | "none";
+    };
+    user?: {
+        id?: string;
+        email?: string;
+        name?: string;
+    };
+};
+export type IntegrationsConfig = {
+    jira?: JiraIntegrationConfig;
+};
+export type IntegrationContext = {
+    url?: string;
+    userAgent?: string;
+    timestamp?: string;
+    user?: {
+        id?: string;
+        email?: string;
+        name?: string;
+    };
+};
+export type CreateIssueInput = {
+    title: string;
+    description?: string;
+    context?: IntegrationContext;
+    screenshot?: {
+        dataUrl: string;
+        filename: string;
+    };
+    jira?: {
+        projectKey?: string;
+        issueType?: JiraIssueType;
+    };
+};
+export type CreateIssueResult = {
+    id?: string;
+    key?: string;
+    url?: string;
+};

package/lib/integrations/types.js

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

package/lib/storage/localStorage.d.ts

@@ -0,0 +1,30 @@
+export type LocalStorageItem = {
+    key: string;
+    value: string;
+    preview: string;
+    valueLength: number;
+    approxBytes: number;
+};
+export type LocalStorageSnapshot = {
+    items: LocalStorageItem[];
+    totalApproxBytes: number;
+};
+export type LocalStorageAccess = {
+    ok: true;
+    storage: Storage;
+} | {
+    ok: false;
+    message: string;
+};
+export declare function getLocalStorageAccess(): LocalStorageAccess;
+export declare function readLocalStorageSnapshot(storage: Storage, opts: {
+    maxPreviewLength: number;
+}): LocalStorageSnapshot;
+export declare function createLocalStorageWatcher(args: {
+    storage: Storage;
+    pollIntervalMs: number;
+    onChange: () => void;
+}): {
+    destroy: () => void;
+    trigger: () => void;
+};

package/lib/storage/localStorage.js

@@ -0,0 +1,166 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLocalStorageAccess = getLocalStorageAccess;
+exports.readLocalStorageSnapshot = readLocalStorageSnapshot;
+exports.createLocalStorageWatcher = createLocalStorageWatcher;
+function safeTruncate(value, maxLen) {
+    if (maxLen <= 0)
+        return "";
+    if (value.length <= maxLen)
+        return value;
+    return `${value.slice(0, maxLen)}…`;
+}
+function getLocalStorageAccess() {
+    try {
+        const w = globalThis;
+        const storage = w.localStorage;
+        if (!storage)
+            return { ok: false, message: "localStorage is not available in this environment." };
+        // Some environments expose the object but throw on access (privacy modes / blocked cookies).
+        void storage.length;
+        return { ok: true, storage };
+    }
+    catch (_a) {
+        return { ok: false, message: "localStorage access is blocked in this environment (privacy settings / permissions)." };
+    }
+}
+function readLocalStorageSnapshot(storage, opts) {
+    var _a;
+    const items = [];
+    let totalApproxBytes = 0;
+    const len = storage.length;
+    for (let i = 0; i < len; i += 1) {
+        const key = storage.key(i);
+        if (!key)
+            continue;
+        const value = (_a = storage.getItem(key)) !== null && _a !== void 0 ? _a : "";
+        const approxBytes = (key.length + value.length) * 2; // UTF-16-ish approximation
+        totalApproxBytes += approxBytes;
+        items.push({
+            key,
+            value,
+            preview: safeTruncate(value, opts.maxPreviewLength),
+            valueLength: value.length,
+            approxBytes,
+        });
+    }
+    items.sort((a, b) => a.key.localeCompare(b.key));
+    return { items, totalApproxBytes };
+}
+function buildSignature(storage) {
+    var _a;
+    try {
+        const parts = [String(storage.length)];
+        const len = storage.length;
+        for (let i = 0; i < len; i += 1) {
+            const k = storage.key(i);
+            if (!k)
+                continue;
+            const v = (_a = storage.getItem(k)) !== null && _a !== void 0 ? _a : "";
+            parts.push(`${k}:${v.length}`);
+        }
+        return parts.join("|");
+    }
+    catch (_b) {
+        return "err";
+    }
+}
+function createLocalStorageWatcher(args) {
+    var _a, _b, _c, _d;
+    const { storage, onChange } = args;
+    const pollIntervalMs = Math.max(250, args.pollIntervalMs);
+    let destroyed = false;
+    let lastSig = buildSignature(storage);
+    const trigger = () => {
+        if (destroyed)
+            return;
+        onChange();
+    };
+    const win = globalThis;
+    const onStorageEvent = () => {
+        const sig = buildSignature(storage);
+        if (sig !== lastSig) {
+            lastSig = sig;
+            trigger();
+        }
+    };
+    try {
+        (_a = win.addEventListener) === null || _a === void 0 ? void 0 : _a.call(win, "storage", onStorageEvent);
+    }
+    catch (_e) {
+        void 0;
+    }
+    // Same-tab changes don't fire "storage" events. We try to patch methods; if that fails, polling still keeps UI fresh.
+    const orig = {
+        setItem: (_b = storage.setItem) === null || _b === void 0 ? void 0 : _b.bind(storage),
+        removeItem: (_c = storage.removeItem) === null || _c === void 0 ? void 0 : _c.bind(storage),
+        clear: (_d = storage.clear) === null || _d === void 0 ? void 0 : _d.bind(storage),
+    };
+    const patch = () => {
+        try {
+            storage.setItem = ((key, value) => {
+                var _a;
+                (_a = orig.setItem) === null || _a === void 0 ? void 0 : _a.call(orig, key, value);
+                const sig = buildSignature(storage);
+                if (sig !== lastSig) {
+                    lastSig = sig;
+                    trigger();
+                }
+            });
+            storage.removeItem = ((key) => {
+                var _a;
+                (_a = orig.removeItem) === null || _a === void 0 ? void 0 : _a.call(orig, key);
+                const sig = buildSignature(storage);
+                if (sig !== lastSig) {
+                    lastSig = sig;
+                    trigger();
+                }
+            });
+            storage.clear = (() => {
+                var _a;
+                (_a = orig.clear) === null || _a === void 0 ? void 0 : _a.call(orig);
+                const sig = buildSignature(storage);
+                if (sig !== lastSig) {
+                    lastSig = sig;
+                    trigger();
+                }
+            });
+            return true;
+        }
+        catch (_a) {
+            return false;
+        }
+    };
+    const patched = patch();
+    const timer = globalThis.setInterval(() => {
+        const sig = buildSignature(storage);
+        if (sig !== lastSig) {
+            lastSig = sig;
+            trigger();
+        }
+    }, patched ? Math.max(800, pollIntervalMs) : pollIntervalMs);
+    const destroy = () => {
+        var _a;
+        destroyed = true;
+        globalThis.clearInterval(timer);
+        try {
+            (_a = win.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(win, "storage", onStorageEvent);
+        }
+        catch (_b) {
+            void 0;
+        }
+        // best-effort restore
+        try {
+            if (orig.setItem)
+                storage.setItem = orig.setItem;
+            if (orig.removeItem)
+                storage.removeItem = orig.removeItem;
+            if (orig.clear)
+                storage.clear = orig.clear;
+        }
+        catch (_c) {
+            void 0;
+        }
+    };
+    return { destroy, trigger };
+}

package/lib/ui/panel/behavior/setupPanelBehavior.d.ts

@@ -2,4 +2,7 @@ import type { LogStorage } from "../../../storage/logStorage";
 import type { PanelHandle } from "..";
 import type { PanelDOM } from "../dom/types";
 import type { PanelState } from "../state/types";
-export declare function setupPanelBehavior(dom: PanelDOM, state: PanelState, storage: LogStorage): PanelHandle;
+export declare function setupPanelBehavior(dom: PanelDOM, state: PanelState, storage: LogStorage, themeConfig: {
+    storageKey: string;
+    persist: boolean;
+}): PanelHandle;

package/lib/ui/panel/behavior/setupPanelBehavior.js

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupPanelBehavior = setupPanelBehavior;
 const bindings_1 = require("../bindings");
 const resize_1 = require("../resize");
-function setupPanelBehavior(dom, state, storage) {
+const theme_1 = require("../theme");
+function setupPanelBehavior(dom, state, storage, themeConfig) {
     const applyVisibility = () => {
         if (state.open)
             dom.panel.classList.remove("di-hidden");
@@ -20,17 +21,36 @@ function setupPanelBehavior(dom, state, storage) {
             dom.consoleTab.classList.remove("di-tabActive");
         }
     };
+    const updateThemeButton = () => {
+        dom.themeBtn.setAttribute("aria-pressed", state.theme === "dark" ? "true" : "false");
+        dom.themeBtn.setAttribute("title", state.theme === "dark" ? "Switch to light theme" : "Switch to dark theme");
+    };
+    const setTheme = (next) => {
+        state.theme = next;
+        (0, theme_1.applyTheme)(dom.root, next);
+        updateThemeButton();
+        if (themeConfig.persist)
+            (0, theme_1.saveTheme)(themeConfig.storageKey, next);
+    };
+    (0, theme_1.applyTheme)(dom.root, state.theme);
+    updateThemeButton();
     const bindings = (0, bindings_1.bindStorageToPanelView)({
         storage,
         state,
         list: dom.list,
         body: dom.body,
+        jumpBtn: dom.jumpBtn,
+        jumpBtnLabel: dom.jumpBtnLabel,
         counters: dom.counters,
         updateTabStyles,
     });
     applyVisibility();
     updateTabStyles();
     const resizeControls = (0, resize_1.attachResizeHandling)(dom.panel, dom.resizeHandle);
+    const updateSearchClearVisibility = () => {
+        dom.searchClearBtn.classList.toggle("di-searchClear--visible", state.query.length > 0);
+    };
+    updateSearchClearVisibility();
     const open = () => {
         state.open = true;
         applyVisibility();
@@ -56,17 +76,44 @@ function setupPanelBehavior(dom, state, storage) {
         updateTabStyles();
         bindings.renderActiveTab();
     };
+    const onThemeClick = () => setTheme(state.theme === "dark" ? "light" : "dark");
+    const onSearchInput = () => {
+        state.query = dom.searchInput.value;
+        updateSearchClearVisibility();
+        bindings.renderActiveTab();
+    };
+    const onSearchClear = () => {
+        if (state.query.length === 0)
+            return;
+        state.query = "";
+        dom.searchInput.value = "";
+        updateSearchClearVisibility();
+        bindings.renderActiveTab();
+        dom.searchInput.focus();
+    };
+    const onBodyScroll = () => bindings.refreshScrollAffordances();
+    const onJumpClick = () => bindings.scrollToBottom();
     dom.toggleBtn.addEventListener("click", onToggleClick);
     dom.closeBtn.addEventListener("click", onCloseClick);
     dom.clearBtn.addEventListener("click", onClearClick);
+    dom.themeBtn.addEventListener("click", onThemeClick);
     dom.consoleTab.addEventListener("click", onConsoleTab);
     dom.networkTab.addEventListener("click", onNetworkTab);
+    dom.searchInput.addEventListener("input", onSearchInput);
+    dom.searchClearBtn.addEventListener("click", onSearchClear);
+    dom.body.addEventListener("scroll", onBodyScroll, { passive: true });
+    dom.jumpBtn.addEventListener("click", onJumpClick);
     const destroy = () => {
         dom.toggleBtn.removeEventListener("click", onToggleClick);
         dom.closeBtn.removeEventListener("click", onCloseClick);
         dom.clearBtn.removeEventListener("click", onClearClick);
+        dom.themeBtn.removeEventListener("click", onThemeClick);
         dom.consoleTab.removeEventListener("click", onConsoleTab);
         dom.networkTab.removeEventListener("click", onNetworkTab);
+        dom.searchInput.removeEventListener("input", onSearchInput);
+        dom.searchClearBtn.removeEventListener("click", onSearchClear);
+        dom.body.removeEventListener("scroll", onBodyScroll);
+        dom.jumpBtn.removeEventListener("click", onJumpClick);
         resizeControls.destroy();
         bindings.destroy();
         dom.root.remove();

package/lib/ui/panel/bindings/bindStorageToPanelView.d.ts

@@ -11,6 +11,8 @@ export declare function bindStorageToPanelView(args: {
         append: (entry: LogEntry) => void;
     };
     body: HTMLElement;
+    jumpBtn: HTMLElement;
+    jumpBtnLabel: HTMLElement;
     counters: PanelCountersDOM;
     updateTabStyles: () => void;
 }): DataBindings;