@peers-app/peers-ui 0.14.0 → 0.15.0

package/dist/screens/console-logs/console-logs-list.js

@@ -37,34 +37,37 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConsoleLogsList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 const lodash_1 = require("lodash");
 const react_1 = __importStar(require("react"));
 const react_infinite_scroll_component_1 = __importDefault(require("react-infinite-scroll-component"));
 const loading_indicator_1 = require("../../components/loading-indicator");
+const globals_1 = require("../../globals");
 const hooks_1 = require("../../hooks");
 const ui_loader_1 = require("../../ui-router/ui-loader");
 const color_mode_dropdown_1 = require("../settings/color-mode-dropdown");
 const log_display_1 = require("./log-display");
 const log_filters_1 = require("./log-filters");
-const resizable_table_header_1 = require("./resizable-table-header");
-const globals_1 = require("../../globals");
 const mobile_log_card_1 = require("./mobile-log-card");
+const resizable_table_header_1 = require("./resizable-table-header");
 const windowHeight = () => window.innerHeight;
 const DEFAULT_COLUMNS = [
-    { key: 'timestamp', label: 'Timestamp', width: 150 },
-    { key: 'level', label: 'Level', width: 80 },
-    { key: 'process', label: 'Process', width: 100 },
-    { key: 'source', label: 'Source', width: 120 },
-    { key: 'message', label: 'Message', width: 600 },
+    { key: "timestamp", label: "Timestamp", width: 150 },
+    { key: "level", label: "Level", width: 80 },
+    { key: "process", label: "Process", width: 100 },
+    { key: "source", label: "Source", width: 120 },
+    { key: "message", label: "Message", width: 600 },
 ];
 const ConsoleLogsList = () => {
     const logs = (0, hooks_1.useObservableState)([]);
     const [allLogsLoaded, setAllLogsLoaded] = (0, react_1.useState)(false);
     const loadMoreId = (0, hooks_1.useObservableState)((0, peers_sdk_1.newid)(), true);
-    const [levelFilter, setLevelFilter] = (0, react_1.useState)('all');
-    const [processFilter, setProcessFilter] = (0, react_1.useState)('all');
-    const searchText = (0, hooks_1.useObservableState)('');
+    const [levelFilter, setLevelFilter] = (0, react_1.useState)("all");
+    const [processFilter, setProcessFilter] = (0, react_1.useState)("all");
+    const searchText = (0, hooks_1.useObservableState)("");
+    /** Observable ref is stable — depend on this string in hooks so search changes refetch. */
+    const searchQuery = searchText();
     const [columns, setColumns] = (0, react_1.useState)(DEFAULT_COLUMNS);
     const [totalLogCount, setTotalLogCount] = (0, react_1.useState)(0);
     const [_colorMode] = (0, hooks_1.useObservable)(color_mode_dropdown_1.colorMode);
@@ -74,138 +77,151 @@ const ConsoleLogsList = () => {
     const isMobile = !(0, globals_1.isDesktop)();
     const batchSize = 50;
     // Track fixed column widths to trigger message column recalculation
-    const fixedColumnsWidthKey = (0, react_1.useMemo)(() => {
+    const _fixedColumnsWidthKey = (0, react_1.useMemo)(() => {
         return columns
-            .filter(col => col.key !== 'message')
-            .map(col => `${col.key}:${col.width}`)
-            .join(',');
+            .filter((col) => col.key !== "message")
+            .map((col) => `${col.key}:${col.width}`)
+            .join(",");
     }, [columns]);
-    // Calculate message column width based on available space
+    // Calculate message column width based on available space.
+    // Do not depend on `columns` — updating the message column width changes `columns` and would re-enter this effect forever.
+    // Re-run when fixed (non-message) column widths change (`_fixedColumnsWidthKey`) or on window resize.
     (0, react_1.useEffect)(() => {
         const updateMessageColumnWidth = () => {
             if (!containerRef.current)
                 return;
             const containerWidth = containerRef.current.offsetWidth;
-            const fixedColumnsWidth = columns
-                .filter(col => col.key !== 'message')
-                .reduce((sum, col) => sum + col.width, 0);
-            const messageWidth = Math.max(200, containerWidth - fixedColumnsWidth - 20); // 20px for scrollbar
-            setColumns(prev => prev.map(col => col.key === 'message' ? { ...col, width: messageWidth } : col));
+            setColumns((prev) => {
+                const fixedColumnsWidth = prev
+                    .filter((col) => col.key !== "message")
+                    .reduce((sum, col) => sum + col.width, 0);
+                const messageWidth = Math.max(200, containerWidth - fixedColumnsWidth - 20); // 20px for scrollbar
+                return prev.map((col) => (col.key === "message" ? { ...col, width: messageWidth } : col));
+            });
         };
         updateMessageColumnWidth();
-        window.addEventListener('resize', updateMessageColumnWidth);
+        window.addEventListener("resize", updateMessageColumnWidth);
         return () => {
-            window.removeEventListener('resize', updateMessageColumnWidth);
+            window.removeEventListener("resize", updateMessageColumnWidth);
         };
-    }, [fixedColumnsWidthKey]);
+    }, [_fixedColumnsWidthKey]);
     // Build filter from UI state
-    const buildFilter = () => {
+    const buildFilter = (0, react_1.useCallback)(() => {
         const filter = {};
-        if (levelFilter !== 'all') {
+        if (levelFilter !== "all") {
             filter.level = levelFilter;
         }
-        if (processFilter !== 'all') {
+        if (processFilter !== "all") {
             filter.process = processFilter;
         }
-        if (searchText()) {
-            filter.message = { $matchWords: searchText() };
+        if (searchQuery.trim()) {
+            filter.message = { $matchWords: searchQuery };
         }
         return filter;
-    };
+    }, [levelFilter, processFilter, searchQuery]);
     // Update total log count
-    async function updateLogCount() {
+    const updateLogCount = (0, react_1.useCallback)(async () => {
         const table = await (0, peers_sdk_1.ConsoleLogs)();
         const filter = buildFilter();
-        let count = await table.count(filter);
+        const count = await table.count(filter);
         setTotalLogCount(count);
-    }
+    }, [buildFilter]);
     // Fetch logs using cursor-based pagination
-    async function fetchLogs(lastLog) {
+    const fetchLogs = (0, react_1.useCallback)(async (lastLog) => {
         const table = await (0, peers_sdk_1.ConsoleLogs)();
-        const filter = buildFilter();
-        if (lastLog) {
-            filter.logId = { $lt: lastLog.logId };
-        }
-        const results = await table.list(filter, { pageSize: batchSize, sortBy: ['-timestamp', '-logId'] });
-        return results;
-    }
+        const base = buildFilter();
+        const filter = lastLog
+            ? { ...base, logId: { $lt: lastLog.logId } }
+            : base;
+        return table.list(filter, {
+            pageSize: batchSize,
+            sortBy: ["-timestamp", "-logId"],
+        });
+    }, [buildFilter]);
+    const loadMoreLogsRef = (0, react_1.useRef)(async () => { });
     // Load older logs (prepend to list)
-    async function loadMoreLogs(startLoadId) {
+    const loadMoreLogs = (0, react_1.useCallback)(async (startLoadId) => {
         if (startLoadId && startLoadId !== loadMoreId()) {
             return;
         }
-        startLoadId ??= loadMoreId();
+        const sid = startLoadId ?? loadMoreId();
         const oldestLog = logs()[0];
         const fetchedLogs = await fetchLogs(oldestLog);
-        if (loadMoreId() !== startLoadId) {
-            loadMoreLogs(loadMoreId());
+        if (loadMoreId() !== sid) {
+            await loadMoreLogsRef.current(loadMoreId());
             return;
         }
         if (fetchedLogs.length === 0) {
             setAllLogsLoaded(true);
         }
-        let _logs = (0, lodash_1.sortBy)([...logs(), ...fetchedLogs], 'timestamp');
-        _logs = (0, lodash_1.uniqBy)(_logs, l => l.logId);
+        let _logs = (0, lodash_1.sortBy)([...logs(), ...fetchedLogs], "timestamp");
+        _logs = (0, lodash_1.uniqBy)(_logs, (l) => l.logId);
         logs(_logs);
-    }
+    }, [fetchLogs, loadMoreId, logs]);
+    loadMoreLogsRef.current = loadMoreLogs;
+    const scrollToBottom = (0, react_1.useCallback)((behavior, delay = 100) => {
+        setTimeout(() => {
+            logsEndRef.current?.scrollIntoView({ behavior });
+        }, delay);
+    }, []);
+    const logCount = logs().length;
     // Initial load and ensure screen is filled
     const minHeightOfLog = 30;
     (0, react_1.useEffect)(() => {
-        if (!allLogsLoaded && (!logs.length || logs.length * minHeightOfLog < windowHeight())) {
-            loadMoreLogs();
+        if (!allLogsLoaded && (!logCount || logCount * minHeightOfLog < windowHeight())) {
+            void loadMoreLogs();
         }
-    }, [logs, levelFilter, processFilter, searchText()]);
-    // Reset when filters change
+    }, [allLogsLoaded, loadMoreLogs, logCount]);
+    // Reset when filters change (`logs` is a stable observable setter; effect is driven by filter fields and callbacks).
     (0, react_1.useEffect)(() => {
         loadMoreId((0, peers_sdk_1.newid)());
         logs([]);
-        updateLogCount();
-        if (allLogsLoaded) {
-            setAllLogsLoaded(false);
-            loadMoreLogs();
-        }
-    }, [levelFilter, processFilter, searchText()]);
-    // Subscribe to new logs
+        void updateLogCount();
+        setAllLogsLoaded(false);
+        void loadMoreLogs();
+    }, [levelFilter, processFilter, searchQuery, loadMoreId, loadMoreLogs, updateLogCount]);
+    // Subscribe to new logs (`searchText` ref is stable; handler calls searchText() per event for current query).
     (0, react_1.useEffect)(() => {
-        let sub = undefined;
-        (0, peers_sdk_1.ConsoleLogs)().then(table => {
-            sub = table.dataChanged.subscribe(evt => {
+        let sub;
+        (0, peers_sdk_1.ConsoleLogs)().then((table) => {
+            sub = table.dataChanged.subscribe((evt) => {
                 // Update count whenever data changes
-                updateLogCount();
+                void updateLogCount();
                 const log = evt.dataObject;
                 // Check if log matches current filters
-                if (levelFilter !== 'all' && log.level !== levelFilter)
+                if (levelFilter !== "all" && log.level !== levelFilter)
                     return;
-                if (processFilter !== 'all' && log.process !== processFilter)
+                if (processFilter !== "all" && log.process !== processFilter)
                     return;
                 if (searchText()) {
                     const logMessage = log.message.toLowerCase();
-                    const filterOut = searchText().toLowerCase().split(' ').some(word => !logMessage.includes(word));
+                    const filterOut = searchText()
+                        .toLowerCase()
+                        .split(" ")
+                        .some((word) => !logMessage.includes(word));
                     if (filterOut)
                         return;
                 }
                 // Don't add we're only showing a limited batch and this is older
-                if (logs().length > batchSize && (0, lodash_1.min)(logs().map(l => l.timestamp)) > log.timestamp)
+                const timestamps = logs().map((l) => l.timestamp);
+                const oldestTs = (0, lodash_1.min)(timestamps);
+                if (logs().length > batchSize && oldestTs !== undefined && oldestTs > log.timestamp) {
                     return;
-                if (evt.op === 'insert') {
-                    let _logs = (0, lodash_1.sortBy)([...logs(), log], 'timestamp');
-                    _logs = (0, lodash_1.uniqBy)(_logs, l => l.logId);
+                }
+                if (evt.op === "insert") {
+                    let _logs = (0, lodash_1.sortBy)([...logs(), log], "timestamp");
+                    _logs = (0, lodash_1.uniqBy)(_logs, (l) => l.logId);
                     logs(_logs);
-                    scrollToBottom('smooth');
+                    scrollToBottom("smooth");
                 }
             });
         });
         return () => {
             sub?.unsubscribe();
         };
-    }, [levelFilter, processFilter]);
-    function scrollToBottom(behavior, delay = 100) {
-        setTimeout(() => {
-            logsEndRef.current?.scrollIntoView({ behavior });
-        }, delay);
-    }
+    }, [levelFilter, processFilter, logs, scrollToBottom, searchText, updateLogCount]);
     async function handleClearLogs() {
-        if (confirm('Are you sure you want to clear all console logs?')) {
+        if (confirm("Are you sure you want to clear all console logs?")) {
             try {
                 const table = await (0, peers_sdk_1.ConsoleLogs)();
                 await table.deleteOldLogs(Date.now());
@@ -213,70 +229,50 @@ const ConsoleLogsList = () => {
                 setTotalLogCount(0);
             }
             catch (err) {
-                console.error('Failed to clear logs:', err);
+                console.error("Failed to clear logs:", err);
             }
         }
     }
-    const _logs = (0, lodash_1.uniqBy)(logs(), l => l.logId);
-    return (react_1.default.createElement("div", { className: "container-fluid", style: { height: 'calc(100vh - 100px)', display: 'flex', flexDirection: 'column' } },
-        react_1.default.createElement(log_filters_1.LogFilters, { levelFilter: levelFilter, setLevelFilter: setLevelFilter, processFilter: processFilter, setProcessFilter: setProcessFilter, searchText: searchText(), setSearchText: searchText }),
-        react_1.default.createElement("div", { ref: containerRef, style: {
-                flex: 1,
-                display: 'flex',
-                flexDirection: 'column',
-                backgroundColor: _colorMode === 'dark' ? '#1a1a1a' : '#f8f9fa',
-                borderRadius: '0.25rem',
-                marginBottom: '50px',
-                overflow: 'hidden',
-            } },
-            !isMobile && (react_1.default.createElement(resizable_table_header_1.ResizableTableHeader, { columns: columns, onColumnsChange: setColumns, colorMode: _colorMode })),
-            react_1.default.createElement("div", { id: "scrollableLogsDiv", style: {
+    const _logs = (0, lodash_1.uniqBy)(logs(), (l) => l.logId);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid", style: { height: "calc(100vh - 100px)", display: "flex", flexDirection: "column" }, children: [(0, jsx_runtime_1.jsx)(log_filters_1.LogFilters, { levelFilter: levelFilter, setLevelFilter: setLevelFilter, processFilter: processFilter, setProcessFilter: setProcessFilter, searchText: searchText(), setSearchText: searchText }), (0, jsx_runtime_1.jsxs)("div", { ref: containerRef, style: {
                     flex: 1,
-                    overflow: 'auto',
-                    display: 'flex',
-                    flexDirection: 'column-reverse',
-                } },
-                react_1.default.createElement(react_infinite_scroll_component_1.default, { dataLength: _logs.length, next: loadMoreLogs, style: { display: 'flex', flexDirection: 'column-reverse', overflow: 'hidden' }, inverse: true, hasMore: !allLogsLoaded, loader: react_1.default.createElement(loading_indicator_1.LoadingIndicator, null), scrollableTarget: "scrollableLogsDiv", endMessage: react_1.default.createElement(react_1.Fragment, null,
-                        react_1.default.createElement("div", { className: "d-flex justify-content-center p-3" },
-                            react_1.default.createElement("div", { className: "text-muted" },
-                                react_1.default.createElement("i", null, "beginning of logs")))) },
-                    react_1.default.createElement("div", { ref: logsEndRef }),
-                    _logs.length === 0 && allLogsLoaded ? (react_1.default.createElement("div", { className: "text-center p-5 text-muted" },
-                        react_1.default.createElement("i", { className: "bi bi-inbox display-1" }),
-                        react_1.default.createElement("p", { className: "mt-2" }, "No logs found"))) : isMobile ? (
-                    /* Mobile: Card-based layout */
-                    react_1.default.createElement("div", null, _logs.map((log) => (react_1.default.createElement(mobile_log_card_1.MobileLogCard, { key: log.logId, log: log, colorMode: _colorMode }))))) : (
-                    /* Desktop: Table layout */
-                    react_1.default.createElement("table", { className: "table table-sm table-hover mb-0", style: { fontSize: '0.85rem', tableLayout: 'fixed', width: '100%' } },
-                        react_1.default.createElement("tbody", null, _logs.map((log) => (react_1.default.createElement(log_display_1.LogDisplay, { key: log.logId, log: log, columns: columns }))))))))),
-        react_1.default.createElement("div", { style: {
-                position: 'fixed',
-                bottom: 0,
-                left: 0,
-                right: 0,
-                padding: '0.5rem 1rem',
-                backgroundColor: _colorMode === 'dark' ? '#2a2a2a' : '#ffffff',
-                borderTop: '1px solid #dee2e6',
-                zIndex: 1000,
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            } },
-            react_1.default.createElement("div", { className: "text-muted small" }, totalLogCount > 0 ? (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("i", { className: "bi bi-list-ul me-1" }),
-                totalLogCount,
-                " log",
-                totalLogCount !== 1 ? 's' : '')) : (react_1.default.createElement("span", null, "\u00A0"))),
-            react_1.default.createElement("button", { className: "btn btn-sm btn-outline-danger", onClick: handleClearLogs },
-                react_1.default.createElement("i", { className: "bi bi-trash me-1" }),
-                "Clear All"))));
+                    display: "flex",
+                    flexDirection: "column",
+                    backgroundColor: _colorMode === "dark" ? "#1a1a1a" : "#f8f9fa",
+                    borderRadius: "0.25rem",
+                    marginBottom: "50px",
+                    overflow: "hidden",
+                }, children: [!isMobile && ((0, jsx_runtime_1.jsx)(resizable_table_header_1.ResizableTableHeader, { columns: columns, onColumnsChange: setColumns, colorMode: _colorMode })), (0, jsx_runtime_1.jsx)("div", { id: "scrollableLogsDiv", style: {
+                            flex: 1,
+                            overflow: "auto",
+                            display: "flex",
+                            flexDirection: "column-reverse",
+                        }, children: (0, jsx_runtime_1.jsxs)(react_infinite_scroll_component_1.default, { dataLength: _logs.length, next: loadMoreLogs, style: { display: "flex", flexDirection: "column-reverse", overflow: "hidden" }, inverse: true, hasMore: !allLogsLoaded, loader: (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {}), scrollableTarget: "scrollableLogsDiv", endMessage: (0, jsx_runtime_1.jsx)("div", { className: "d-flex justify-content-center p-3", children: (0, jsx_runtime_1.jsx)("div", { className: "text-muted", children: (0, jsx_runtime_1.jsx)("i", { children: "beginning of logs" }) }) }), children: [(0, jsx_runtime_1.jsx)("div", { ref: logsEndRef }), _logs.length === 0 && allLogsLoaded ? ((0, jsx_runtime_1.jsxs)("div", { className: "text-center p-5 text-muted", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-inbox display-1" }), (0, jsx_runtime_1.jsx)("p", { className: "mt-2", children: "No logs found" })] })) : isMobile ? (
+                                /* Mobile: Card-based layout */
+                                (0, jsx_runtime_1.jsx)("div", { children: _logs.map((log) => ((0, jsx_runtime_1.jsx)(mobile_log_card_1.MobileLogCard, { log: log, colorMode: _colorMode }, log.logId))) })) : (
+                                /* Desktop: Table layout */
+                                (0, jsx_runtime_1.jsx)("table", { className: "table table-sm table-hover mb-0", style: { fontSize: "0.85rem", tableLayout: "fixed", width: "100%" }, children: (0, jsx_runtime_1.jsx)("tbody", { children: _logs.map((log) => ((0, jsx_runtime_1.jsx)(log_display_1.LogDisplay, { log: log, columns: columns }, log.logId))) }) }))] }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    position: "fixed",
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    padding: "0.5rem 1rem",
+                    backgroundColor: _colorMode === "dark" ? "#2a2a2a" : "#ffffff",
+                    borderTop: "1px solid #dee2e6",
+                    zIndex: 1000,
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                }, children: [(0, jsx_runtime_1.jsx)("div", { className: "text-muted small", children: totalLogCount > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-list-ul me-1" }), totalLogCount, " log", totalLogCount !== 1 ? "s" : ""] })) : ((0, jsx_runtime_1.jsx)("span", { children: "\u00A0" })) }), (0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-outline-danger", onClick: handleClearLogs, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-trash me-1" }), "Clear All"] })] })] }));
 };
 exports.ConsoleLogsList = ConsoleLogsList;
 (0, ui_loader_1.registerInternalPeersUI)({
     component: exports.ConsoleLogsList,
-    routes: [{
-            isMatch: (_props, context) => context.path === 'console-logs',
-            uiCategory: 'screen',
+    routes: [
+        {
+            isMatch: (_props, context) => context.path === "console-logs",
+            uiCategory: "screen",
             priority: 0,
-        }]
+        },
+    ],
 });

package/dist/screens/console-logs/log-display.d.ts

@@ -1,5 +1,4 @@
-import { IConsoleLog } from "@peers-app/peers-sdk";
-import React from 'react';
+import { type IConsoleLog } from "@peers-app/peers-sdk";
 interface Column {
     key: string;
     label: string;
@@ -9,5 +8,5 @@ interface LogDisplayProps {
     log: IConsoleLog;
     columns: Column[];
 }
-export declare const LogDisplay: ({ log, columns }: LogDisplayProps) => React.JSX.Element;
+export declare const LogDisplay: ({ log, columns }: LogDisplayProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/screens/console-logs/log-display.js

@@ -4,68 +4,66 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LogDisplay = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 const moment_1 = __importDefault(require("moment"));
-const react_1 = __importDefault(require("react"));
 const getLevelColor = (level) => {
     switch (level) {
-        case 'error': return '#dc3545'; // Red - matches console error
-        case 'warn': return '#ffc107'; // Yellow - matches console warn
-        case 'info': return '#0dcaf0'; // Cyan - matches console info
-        case 'log': return '#6c757d'; // Gray - default log color
-        case 'debug': return '#6c757d'; // Gray - debug color
-        default: return '#6c757d';
+        case "error":
+            return "#dc3545"; // Red - matches console error
+        case "warn":
+            return "#ffc107"; // Yellow - matches console warn
+        case "info":
+            return "#0dcaf0"; // Cyan - matches console info
+        case "log":
+            return "#6c757d"; // Gray - default log color
+        case "debug":
+            return "#6c757d"; // Gray - debug color
+        default:
+            return "#6c757d";
     }
 };
 const getProcessColor = (process) => {
     switch (process) {
-        case 'ui':
-        case 'renderer': return '#0dcaf0'; // Cyan - matches console logger
-        case 'electron':
-        case 'main': return '#d946ef'; // Magenta - matches console logger
-        default: return '#6c757d'; // Gray for unknown
+        case "ui":
+        case "renderer":
+            return "#0dcaf0"; // Cyan - matches console logger
+        case "electron":
+        case "main":
+            return "#d946ef"; // Magenta - matches console logger
+        default:
+            return "#6c757d"; // Gray for unknown
     }
 };
 const getLevelIcon = (level) => {
     switch (level) {
-        case 'error': return 'bi-x-circle-fill';
-        case 'warn': return 'bi-exclamation-triangle-fill';
-        case 'info': return 'bi-info-circle-fill';
-        case 'debug': return 'bi-bug-fill';
-        default: return 'bi-chat-square-text';
+        case "error":
+            return "bi-x-circle-fill";
+        case "warn":
+            return "bi-exclamation-triangle-fill";
+        case "info":
+            return "bi-info-circle-fill";
+        case "debug":
+            return "bi-bug-fill";
+        default:
+            return "bi-chat-square-text";
     }
 };
 const LogDisplay = ({ log, columns }) => {
     const getColumnWidth = (key) => {
-        const column = columns.find(c => c.key === key);
-        return column ? `${column.width}px` : 'auto';
+        const column = columns.find((c) => c.key === key);
+        return column ? `${column.width}px` : "auto";
     };
-    if (typeof log.context === 'string') {
+    if (typeof log.context === "string") {
         try {
             log.context = (0, peers_sdk_1.fromJSONString)(log.context);
         }
-        catch (err) { }
+        catch (_err) { }
     }
-    return (react_1.default.createElement("tr", null,
-        react_1.default.createElement("td", { className: "text-nowrap", style: { fontSize: '0.75rem', width: getColumnWidth('timestamp'), padding: '0.5rem' } }, (0, moment_1.default)(log.timestamp).format('MM/DD HH:mm:ss.SSS')),
-        react_1.default.createElement("td", { style: { width: getColumnWidth('level'), padding: '0.5rem' } },
-            react_1.default.createElement("span", { className: "badge text-white", style: { backgroundColor: getLevelColor(log.level) } },
-                react_1.default.createElement("i", { className: `${getLevelIcon(log.level)} me-1` }),
-                log.level)),
-        react_1.default.createElement("td", { style: { width: getColumnWidth('process'), padding: '0.5rem' } },
-            react_1.default.createElement("span", { className: "badge text-white", style: { backgroundColor: getProcessColor(log.process) } }, log.process)),
-        react_1.default.createElement("td", { className: "text-truncate", style: { width: getColumnWidth('source'), padding: '0.5rem', maxWidth: getColumnWidth('source') }, title: log.source || '' }, log.source || '-'),
-        react_1.default.createElement("td", { style: { width: getColumnWidth('message'), wordBreak: 'break-word', padding: '0.5rem' } },
-            log.message,
-            log.context && (react_1.default.createElement("details", { className: "mt-1" },
-                react_1.default.createElement("summary", { className: "text-muted small", style: { cursor: 'pointer' } },
-                    react_1.default.createElement("i", { className: "bi bi-code-square me-1" }),
-                    "Context"),
-                react_1.default.createElement("pre", { className: "small mt-1 p-2 bg-secondary bg-opacity-10 rounded", style: { fontSize: '0.7rem' } }, JSON.stringify((0, peers_sdk_1.toJSON)(log.context), null, 2)))),
-            log.stackTrace && (react_1.default.createElement("details", { className: "mt-1" },
-                react_1.default.createElement("summary", { className: "text-danger small", style: { cursor: 'pointer' } },
-                    react_1.default.createElement("i", { className: "bi bi-bug me-1" }),
-                    "Stack Trace"),
-                react_1.default.createElement("pre", { className: "small mt-1 p-2 bg-danger bg-opacity-10 rounded text-danger", style: { fontSize: '0.7rem' } }, log.stackTrace))))));
+    return ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { className: "text-nowrap", style: { fontSize: "0.75rem", width: getColumnWidth("timestamp"), padding: "0.5rem" }, children: (0, moment_1.default)(log.timestamp).format("MM/DD HH:mm:ss.SSS") }), (0, jsx_runtime_1.jsx)("td", { style: { width: getColumnWidth("level"), padding: "0.5rem" }, children: (0, jsx_runtime_1.jsxs)("span", { className: "badge text-white", style: { backgroundColor: getLevelColor(log.level) }, children: [(0, jsx_runtime_1.jsx)("i", { className: `${getLevelIcon(log.level)} me-1` }), log.level] }) }), (0, jsx_runtime_1.jsx)("td", { style: { width: getColumnWidth("process"), padding: "0.5rem" }, children: (0, jsx_runtime_1.jsx)("span", { className: "badge text-white", style: { backgroundColor: getProcessColor(log.process) }, children: log.process }) }), (0, jsx_runtime_1.jsx)("td", { className: "text-truncate", style: {
+                    width: getColumnWidth("source"),
+                    padding: "0.5rem",
+                    maxWidth: getColumnWidth("source"),
+                }, title: log.source || "", children: log.source || "-" }), (0, jsx_runtime_1.jsxs)("td", { style: { width: getColumnWidth("message"), wordBreak: "break-word", padding: "0.5rem" }, children: [log.message, log.context && ((0, jsx_runtime_1.jsxs)("details", { className: "mt-1", children: [(0, jsx_runtime_1.jsxs)("summary", { className: "text-muted small", style: { cursor: "pointer" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-code-square me-1" }), "Context"] }), (0, jsx_runtime_1.jsx)("pre", { className: "small mt-1 p-2 bg-secondary bg-opacity-10 rounded", style: { fontSize: "0.7rem" }, children: JSON.stringify((0, peers_sdk_1.toJSON)(log.context), null, 2) })] })), log.stackTrace && ((0, jsx_runtime_1.jsxs)("details", { className: "mt-1", children: [(0, jsx_runtime_1.jsxs)("summary", { className: "text-danger small", style: { cursor: "pointer" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-bug me-1" }), "Stack Trace"] }), (0, jsx_runtime_1.jsx)("pre", { className: "small mt-1 p-2 bg-danger bg-opacity-10 rounded text-danger", style: { fontSize: "0.7rem" }, children: log.stackTrace })] }))] })] }));
 };
 exports.LogDisplay = LogDisplay;

package/dist/screens/console-logs/log-filters.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 interface LogFiltersProps {
     levelFilter: string;
     setLevelFilter: (value: string) => void;
@@ -7,5 +6,5 @@ interface LogFiltersProps {
     searchText: string;
     setSearchText: (value: string) => void;
 }
-export declare const LogFilters: ({ levelFilter, setLevelFilter, processFilter, setProcessFilter, searchText, setSearchText, }: LogFiltersProps) => React.JSX.Element;
+export declare const LogFilters: ({ levelFilter, setLevelFilter, processFilter, setProcessFilter, searchText, setSearchText, }: LogFiltersProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/screens/console-logs/log-filters.js

@@ -1,30 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LogFilters = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const LogFilters = ({ levelFilter, setLevelFilter, processFilter, setProcessFilter, searchText, setSearchText, }) => {
-    return (react_1.default.createElement("div", { className: "mb-3", style: { position: 'sticky', top: 0, zIndex: 10, backgroundColor: 'inherit' } },
-        react_1.default.createElement("div", { className: "row g-2" },
-            react_1.default.createElement("div", { className: "col-md-3" },
-                react_1.default.createElement("label", { className: "form-label small" }, "Level"),
-                react_1.default.createElement("select", { className: "form-select form-select-sm", value: levelFilter, onChange: (e) => setLevelFilter(e.target.value) },
-                    react_1.default.createElement("option", { value: "all" }, "All Levels"),
-                    react_1.default.createElement("option", { value: "error" }, "Error"),
-                    react_1.default.createElement("option", { value: "warn" }, "Warning"),
-                    react_1.default.createElement("option", { value: "info" }, "Info"),
-                    react_1.default.createElement("option", { value: "log" }, "Log"),
-                    react_1.default.createElement("option", { value: "debug" }, "Debug"))),
-            react_1.default.createElement("div", { className: "col-md-3" },
-                react_1.default.createElement("label", { className: "form-label small" }, "Process"),
-                react_1.default.createElement("select", { className: "form-select form-select-sm", value: processFilter, onChange: (e) => setProcessFilter(e.target.value) },
-                    react_1.default.createElement("option", { value: "all" }, "All Processes"),
-                    react_1.default.createElement("option", { value: "electron" }, "Electron"),
-                    react_1.default.createElement("option", { value: "ui" }, "UI"))),
-            react_1.default.createElement("div", { className: "col-md-6" },
-                react_1.default.createElement("label", { className: "form-label small" }, "Search"),
-                react_1.default.createElement("input", { type: "text", className: "form-control form-control-sm", placeholder: "Search log messages...", value: searchText, onChange: (e) => setSearchText(e.target.value) })))));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "mb-3", style: { position: "sticky", top: 0, zIndex: 10, backgroundColor: "inherit" }, children: (0, jsx_runtime_1.jsxs)("div", { className: "row g-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "col-md-3", children: [(0, jsx_runtime_1.jsx)("label", { className: "form-label small", children: "Level" }), (0, jsx_runtime_1.jsxs)("select", { className: "form-select form-select-sm", value: levelFilter, onChange: (e) => setLevelFilter(e.target.value), children: [(0, jsx_runtime_1.jsx)("option", { value: "all", children: "All Levels" }), (0, jsx_runtime_1.jsx)("option", { value: "error", children: "Error" }), (0, jsx_runtime_1.jsx)("option", { value: "warn", children: "Warning" }), (0, jsx_runtime_1.jsx)("option", { value: "info", children: "Info" }), (0, jsx_runtime_1.jsx)("option", { value: "log", children: "Log" }), (0, jsx_runtime_1.jsx)("option", { value: "debug", children: "Debug" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-3", children: [(0, jsx_runtime_1.jsx)("label", { className: "form-label small", children: "Process" }), (0, jsx_runtime_1.jsxs)("select", { className: "form-select form-select-sm", value: processFilter, onChange: (e) => setProcessFilter(e.target.value), children: [(0, jsx_runtime_1.jsx)("option", { value: "all", children: "All Processes" }), (0, jsx_runtime_1.jsx)("option", { value: "electron", children: "Electron" }), (0, jsx_runtime_1.jsx)("option", { value: "ui", children: "UI" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6", children: [(0, jsx_runtime_1.jsx)("label", { className: "form-label small", children: "Search" }), (0, jsx_runtime_1.jsx)("input", { type: "text", className: "form-control form-control-sm", placeholder: "Search log messages...", value: searchText, onChange: (e) => setSearchText(e.target.value) })] })] }) }));
 };
 exports.LogFilters = LogFilters;

package/dist/screens/console-logs/mobile-log-card.d.ts

@@ -1,8 +1,7 @@
-import { IConsoleLog } from "@peers-app/peers-sdk";
-import React from 'react';
+import { type IConsoleLog } from "@peers-app/peers-sdk";
 interface MobileLogCardProps {
     log: IConsoleLog;
     colorMode: string;
 }
-export declare const MobileLogCard: ({ log, colorMode }: MobileLogCardProps) => React.JSX.Element;
+export declare const MobileLogCard: ({ log, colorMode }: MobileLogCardProps) => import("react/jsx-runtime").JSX.Element;
 export {};