@peers-app/peers-ui 0.7.24 → 0.7.26

package/dist/components/router.d.ts

@@ -3,6 +3,7 @@ import "../screens/console-logs/console-logs-list";
 import "../screens/groups";
 import "../screens/contacts";
 import "../screens/network-viewer";
+import "../screens/data-explorer";
 export declare function Router({ path: providedPath }?: {
     path?: string;
 }): React.JSX.Element;

package/dist/components/router.js

@@ -74,6 +74,7 @@ require("../screens/console-logs/console-logs-list");
 require("../screens/groups");
 require("../screens/contacts");
 require("../screens/network-viewer");
+require("../screens/data-explorer");
 function Router({ path: providedPath } = {}) {
     try {
         // Use provided path or fall back to global mainContentPath

package/dist/screens/data-explorer/data-explorer.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function DataExplorerList(): React.JSX.Element;

package/dist/screens/data-explorer/data-explorer.js

@@ -0,0 +1,288 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataExplorerList = DataExplorerList;
+const react_1 = __importStar(require("react"));
+const loading_indicator_1 = require("../../components/loading-indicator");
+const ui_loader_1 = require("../../ui-router/ui-loader");
+const globals_1 = require("../../globals");
+function DataExplorerList() {
+    const [tables, setTables] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [currentContext, setCurrentContext] = (0, react_1.useState)('');
+    const [compacting, setCompacting] = (0, react_1.useState)(false);
+    const formatBytes = (bytes) => {
+        if (bytes === undefined)
+            return '-';
+        if (bytes === 0)
+            return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Math.round(bytes / Math.pow(k, i)) + ' ' + sizes[i];
+    };
+    const getBytesColorClass = (bytes) => {
+        if (bytes === undefined)
+            return 'text-secondary';
+        const kb = 1024;
+        const mb = kb * 1024;
+        if (bytes < 10 * kb)
+            return 'text-secondary'; // 0 to 10KB: secondary (gray)
+        if (bytes < 10 * mb)
+            return 'text-primary'; // 10KB to 10MB: primary (blue)
+        if (bytes < 100 * mb)
+            return 'text-warning'; // 10MB to 100MB: warning (orange)
+        return 'text-danger'; // >100MB: danger (red)
+    };
+    const loadTables = async () => {
+        try {
+            if (!(0, globals_1.isDesktop)())
+                return;
+            const api = window.electronAPI?.dataExplorer;
+            if (!api) {
+                console.warn('Data Explorer API not available');
+                return;
+            }
+            // Get current context info
+            const contextInfo = await api.getCurrentContext();
+            setCurrentContext(contextInfo.contextName);
+            // Get all tables from IPC
+            const allTablesInfo = await api.getAllTables();
+            // Sort by registered status first, then by table name
+            allTablesInfo.sort((a, b) => {
+                if (a.isRegistered !== b.isRegistered) {
+                    return a.isRegistered ? -1 : 1;
+                }
+                return a.tableName.localeCompare(b.tableName);
+            });
+            setTables(allTablesInfo);
+        }
+        catch (error) {
+            console.error('Error loading tables:', error);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const compactDatabase = async (beforeTimestamp) => {
+        try {
+            setCompacting(true);
+            const api = window.electronAPI?.dataExplorer;
+            if (!api) {
+                alert('Data Explorer API not available');
+                return;
+            }
+            const isExtreme = beforeTimestamp !== undefined;
+            if (isExtreme) {
+                const confirmed = window.confirm('Extreme Compaction will remove ALL change history. This cannot be undone. Continue?');
+                if (!confirmed) {
+                    setCompacting(false);
+                    return;
+                }
+            }
+            await api.compactDatabase(beforeTimestamp);
+            alert(`Database compacted successfully!${isExtreme ? ' (Extreme mode)' : ''}`);
+            // Reload tables to show updated sizes
+            setLoading(true);
+            await loadTables();
+        }
+        catch (error) {
+            console.error('Error compacting database:', error);
+            alert(`Error compacting database: ${error.message || 'Unknown error'}`);
+        }
+        finally {
+            setCompacting(false);
+        }
+    };
+    const resetChangeTracking = async () => {
+        try {
+            setCompacting(true);
+            const api = window.electronAPI?.dataExplorer;
+            if (!api) {
+                alert('Data Explorer API not available');
+                return;
+            }
+            const confirmed = window.confirm('Reset Change Tracking will clear all change history and rebuild it from scratch. This may take a while. Continue?');
+            if (!confirmed) {
+                setCompacting(false);
+                return;
+            }
+            await api.resetChangeTracking();
+            alert('Change tracking reset successfully!');
+            // Reload tables to show updated sizes
+            setLoading(true);
+            await loadTables();
+        }
+        catch (error) {
+            console.error('Error resetting change tracking:', error);
+            alert(`Error resetting change tracking: ${error.message || 'Unknown error'}`);
+        }
+        finally {
+            setCompacting(false);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        loadTables();
+    }, []);
+    if (loading) {
+        return react_1.default.createElement(loading_indicator_1.LoadingIndicator, null);
+    }
+    if (!(0, globals_1.isDesktop)()) {
+        return (react_1.default.createElement("div", { className: "container-fluid p-4" },
+            react_1.default.createElement("div", { className: "alert alert-info" }, "Data Explorer is only available in the desktop application.")));
+    }
+    if (!currentContext && tables.length === 0) {
+        return (react_1.default.createElement("div", { className: "container-fluid p-4" },
+            react_1.default.createElement("div", { className: "alert alert-warning" }, "Unable to load database information.")));
+    }
+    return (react_1.default.createElement("div", { className: "container-fluid p-4" },
+        react_1.default.createElement("ul", { className: "nav nav-tabs mb-4" },
+            react_1.default.createElement("li", { className: "nav-item" },
+                react_1.default.createElement("a", { className: "nav-link active", href: "#/data-explorer" },
+                    react_1.default.createElement("i", { className: "bi bi-table" }),
+                    " Tables")),
+            react_1.default.createElement("li", { className: "nav-item" },
+                react_1.default.createElement("a", { className: "nav-link", href: "#/data-explorer/query" },
+                    react_1.default.createElement("i", { className: "bi bi-terminal" }),
+                    " Query"))),
+        react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-center mb-4" },
+            react_1.default.createElement("h2", null, "Data Explorer"),
+            react_1.default.createElement("div", { className: "d-flex gap-2" },
+                react_1.default.createElement("div", { className: "btn-group", role: "group" },
+                    react_1.default.createElement("button", { type: "button", className: "btn btn-sm btn-warning", onClick: () => compactDatabase(), disabled: compacting || loading, title: "Compact database (cleanup changes older than 2 weeks)" }, compacting ? (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("span", { className: "spinner-border spinner-border-sm me-1", role: "status", "aria-hidden": "true" }),
+                        "Compacting...")) : (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("i", { className: "bi bi-disc" }),
+                        " Compact Database"))),
+                    react_1.default.createElement("button", { type: "button", className: "btn btn-sm btn-warning dropdown-toggle dropdown-toggle-split", "data-bs-toggle": "dropdown", "aria-expanded": "false", disabled: compacting || loading, title: "More compaction options" },
+                        react_1.default.createElement("span", { className: "visually-hidden" }, "Toggle Dropdown")),
+                    react_1.default.createElement("ul", { className: "dropdown-menu" },
+                        react_1.default.createElement("li", null,
+                            react_1.default.createElement("a", { className: "dropdown-item", href: "#", onClick: (e) => {
+                                    e.preventDefault();
+                                    compactDatabase(Date.now());
+                                } },
+                                react_1.default.createElement("i", { className: "bi bi-exclamation-triangle text-danger me-2" }),
+                                "Extreme Compaction",
+                                react_1.default.createElement("div", { className: "small text-muted" }, "Remove ALL change history"))),
+                        react_1.default.createElement("li", null,
+                            react_1.default.createElement("hr", { className: "dropdown-divider" })),
+                        react_1.default.createElement("li", null,
+                            react_1.default.createElement("a", { className: "dropdown-item", href: "#", onClick: (e) => {
+                                    e.preventDefault();
+                                    resetChangeTracking();
+                                } },
+                                react_1.default.createElement("i", { className: "bi bi-arrow-clockwise text-warning me-2" }),
+                                "Reset Change Tracking",
+                                react_1.default.createElement("div", { className: "small text-muted" }, "Clear and rebuild all change history"))))),
+                react_1.default.createElement("button", { className: "btn btn-sm btn-primary", onClick: () => {
+                        setLoading(true);
+                        loadTables();
+                    }, disabled: compacting },
+                    react_1.default.createElement("i", { className: "bi bi-arrow-clockwise" }),
+                    " Refresh"))),
+        react_1.default.createElement("div", { className: "card mb-4" },
+            react_1.default.createElement("div", { className: "card-body" },
+                react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-center" },
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("h5", { className: "card-title mb-2" }, "Current Data Context"),
+                        react_1.default.createElement("p", { className: "mb-0" }, currentContext)),
+                    react_1.default.createElement("div", { className: "text-end" },
+                        react_1.default.createElement("div", { className: "text-muted small" }, "Total DB Size"),
+                        react_1.default.createElement("div", { className: "fs-4 fw-bold" }, formatBytes(tables.reduce((sum, t) => sum + (t.bytes || 0), 0))))))),
+        react_1.default.createElement("div", { className: "card mb-4" },
+            react_1.default.createElement("div", { className: "card-body" },
+                react_1.default.createElement("h5", { className: "card-title" },
+                    "Registered Tables (",
+                    tables.filter(t => t.isRegistered).length,
+                    ")",
+                    react_1.default.createElement("span", { className: "badge bg-success ms-2" }, "Active")),
+                react_1.default.createElement("p", { className: "text-muted small" }, "These tables are registered with the TableContainer and actively used by the application."),
+                tables.filter(t => t.isRegistered).length === 0 ? (react_1.default.createElement("p", { className: "text-muted" }, "No registered tables found")) : (react_1.default.createElement("div", { className: "table-responsive" },
+                    react_1.default.createElement("table", { className: "table table-hover table-sm" },
+                        react_1.default.createElement("thead", null,
+                            react_1.default.createElement("tr", null,
+                                react_1.default.createElement("th", null, "Table Name"),
+                                react_1.default.createElement("th", null, "Table ID"),
+                                react_1.default.createElement("th", { className: "text-end" }, "Row Count"),
+                                react_1.default.createElement("th", { className: "text-end" }, "Bytes"))),
+                        react_1.default.createElement("tbody", null, tables.filter(t => t.isRegistered).map(table => (react_1.default.createElement("tr", { key: table.tableName },
+                            react_1.default.createElement("td", null,
+                                react_1.default.createElement("strong", null, table.tableName)),
+                            react_1.default.createElement("td", null,
+                                react_1.default.createElement("code", { className: "text-muted small" }, table.tableId || 'system')),
+                            react_1.default.createElement("td", { className: "text-end" }, table.rowCount !== undefined ? table.rowCount.toLocaleString() : '-'),
+                            react_1.default.createElement("td", { className: `text-end fw-bold ${getBytesColorClass(table.bytes)}` }, formatBytes(table.bytes))))))))))),
+        tables.some(t => !t.isRegistered) && (react_1.default.createElement("div", { className: "card" },
+            react_1.default.createElement("div", { className: "card-body" },
+                react_1.default.createElement("h5", { className: "card-title" },
+                    "Unregistered Tables (",
+                    tables.filter(t => !t.isRegistered).length,
+                    ")",
+                    react_1.default.createElement("span", { className: "badge bg-warning text-dark ms-2" }, "Raw SQLite")),
+                react_1.default.createElement("p", { className: "text-muted small" }, "These tables exist in the SQLite database but are not registered with the TableContainer. They may be system tables, change tracking tables, or legacy tables."),
+                react_1.default.createElement("div", { className: "table-responsive" },
+                    react_1.default.createElement("table", { className: "table table-hover table-sm" },
+                        react_1.default.createElement("thead", null,
+                            react_1.default.createElement("tr", null,
+                                react_1.default.createElement("th", null, "Table Name"),
+                                react_1.default.createElement("th", null, "Type"),
+                                react_1.default.createElement("th", { className: "text-end" }, "Row Count"),
+                                react_1.default.createElement("th", { className: "text-end" }, "Bytes"),
+                                react_1.default.createElement("th", null, "SQL Definition"))),
+                        react_1.default.createElement("tbody", null, tables.filter(t => !t.isRegistered).map(table => (react_1.default.createElement("tr", { key: table.tableName },
+                            react_1.default.createElement("td", null,
+                                react_1.default.createElement("strong", null, table.tableName)),
+                            react_1.default.createElement("td", null,
+                                react_1.default.createElement("span", { className: "badge bg-secondary" }, table.type || 'table')),
+                            react_1.default.createElement("td", { className: "text-end" }, table.rowCount !== undefined ? table.rowCount.toLocaleString() : '-'),
+                            react_1.default.createElement("td", { className: `text-end fw-bold ${getBytesColorClass(table.bytes)}` }, formatBytes(table.bytes)),
+                            react_1.default.createElement("td", null, table.sql ? (react_1.default.createElement("details", null,
+                                react_1.default.createElement("summary", { className: "cursor-pointer text-primary", style: { cursor: 'pointer' } },
+                                    react_1.default.createElement("small", null, "View SQL")),
+                                react_1.default.createElement("pre", { className: "mt-2 p-2 bg-body-secondary border rounded", style: { fontSize: '0.75rem', maxHeight: '300px', overflow: 'auto' } },
+                                    react_1.default.createElement("code", { className: "text-body" }, table.sql)))) : (react_1.default.createElement("span", { className: "text-muted small" }, "-"))))))))))))));
+}
+(0, ui_loader_1.registerInternalPeersUI)({
+    peersUIId: 'data-explorer-list-ui',
+    component: DataExplorerList,
+    routes: [
+        {
+            isMatch: (_props, context) => context.path === 'data-explorer',
+            uiCategory: 'screen',
+            priority: 2
+        }
+    ]
+});

package/dist/screens/data-explorer/index.d.ts

@@ -0,0 +1,4 @@
+import './data-explorer';
+import './query-executor';
+export * from "./data-explorer";
+export * from "./query-executor";

package/dist/screens/data-explorer/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// Import all data explorer screen components to ensure they register their routes
+require("./data-explorer");
+require("./query-executor");
+__exportStar(require("./data-explorer"), exports);
+__exportStar(require("./query-executor"), exports);

package/dist/screens/data-explorer/query-executor.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function QueryExecutor(): React.JSX.Element;

package/dist/screens/data-explorer/query-executor.js

@@ -0,0 +1,281 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QueryExecutor = QueryExecutor;
+const react_1 = __importStar(require("react"));
+const loading_indicator_1 = require("../../components/loading-indicator");
+const ui_loader_1 = require("../../ui-router/ui-loader");
+const globals_1 = require("../../globals");
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const defaultQuery = 'SELECT * FROM sqlite_master WHERE type=\'table\' LIMIT 10';
+// Persistent vars at module level
+const queryTabs = (0, peers_sdk_1.groupDeviceVar)('dataExplorerQueryTabs', {
+    defaultValue: [{
+            id: (0, peers_sdk_1.newid)(),
+            name: 'Query 1',
+            query: defaultQuery
+        }]
+});
+const activeQueryTabId = (0, peers_sdk_1.groupDeviceVar)('dataExplorerActiveQueryTab', {
+    defaultValue: ''
+});
+function QueryExecutor() {
+    const [, forceUpdate] = (0, react_1.useState)({});
+    const [results, setResults] = (0, react_1.useState)({});
+    const [errors, setErrors] = (0, react_1.useState)({});
+    const [loading, setLoading] = (0, react_1.useState)({});
+    // Subscribe to tab changes
+    (0, react_1.useEffect)(() => {
+        const subscription1 = queryTabs.subscribe(() => forceUpdate({}));
+        const subscription2 = activeQueryTabId.subscribe(() => forceUpdate({}));
+        // Initialize activeTabId if not set
+        if (!activeQueryTabId() && queryTabs().length > 0) {
+            activeQueryTabId(queryTabs()[0].id);
+        }
+        return () => {
+            subscription1.dispose();
+            subscription2.dispose();
+        };
+    }, []);
+    const tabs = queryTabs();
+    const activeTabId = activeQueryTabId();
+    const activeTab = tabs.find(t => t.id === activeTabId);
+    const query = activeTab?.query || '';
+    const result = activeTab ? results[activeTab.id] : null;
+    const error = activeTab ? errors[activeTab.id] : null;
+    const isLoading = activeTab ? loading[activeTab.id] : false;
+    const setQuery = (newQuery) => {
+        if (!activeTab)
+            return;
+        const currentTabs = queryTabs();
+        queryTabs(currentTabs.map(t => t.id === activeTab.id ? { ...t, query: newQuery } : t));
+    };
+    const setResult = (result) => {
+        if (!activeTab)
+            return;
+        setResults(prev => {
+            const newResults = { ...prev };
+            if (result === null) {
+                delete newResults[activeTab.id];
+            }
+            else {
+                newResults[activeTab.id] = result;
+            }
+            return newResults;
+        });
+    };
+    const setError = (error) => {
+        if (!activeTab)
+            return;
+        setErrors(prev => {
+            const newErrors = { ...prev };
+            if (error === null) {
+                delete newErrors[activeTab.id];
+            }
+            else {
+                newErrors[activeTab.id] = error;
+            }
+            return newErrors;
+        });
+    };
+    const setLoadingState = (isLoading) => {
+        if (!activeTab)
+            return;
+        setLoading(prev => ({ ...prev, [activeTab.id]: isLoading }));
+    };
+    const executeQuery = async () => {
+        if (!query.trim()) {
+            setError('Please enter a query');
+            return;
+        }
+        try {
+            setLoadingState(true);
+            setError(null);
+            setResult(null);
+            const api = window.electronAPI?.dataExplorer;
+            if (!api) {
+                setError('Data Explorer API not available');
+                return;
+            }
+            const queryResult = await api.executeQuery(query);
+            setResult(queryResult);
+        }
+        catch (err) {
+            setError(err.message || 'Query execution failed');
+        }
+        finally {
+            setLoadingState(false);
+        }
+    };
+    const addNewTab = () => {
+        const currentTabs = queryTabs();
+        const newTab = {
+            id: (0, peers_sdk_1.newid)(),
+            name: `Query ${currentTabs.length + 1}`,
+            query: defaultQuery
+        };
+        queryTabs([...currentTabs, newTab]);
+        activeQueryTabId(newTab.id);
+    };
+    const closeTab = (tabId) => {
+        const currentTabs = queryTabs();
+        if (currentTabs.length === 1)
+            return; // Don't close the last tab
+        const tabIndex = currentTabs.findIndex(t => t.id === tabId);
+        const newTabs = currentTabs.filter(t => t.id !== tabId);
+        queryTabs(newTabs);
+        // If we're closing the active tab, switch to another one
+        if (tabId === activeQueryTabId()) {
+            const newIndex = Math.min(tabIndex, newTabs.length - 1);
+            activeQueryTabId(newTabs[newIndex].id);
+        }
+        // Clean up results and errors for closed tab
+        setResults(prev => {
+            const newResults = { ...prev };
+            delete newResults[tabId];
+            return newResults;
+        });
+        setErrors(prev => {
+            const newErrors = { ...prev };
+            delete newErrors[tabId];
+            return newErrors;
+        });
+    };
+    const renameTab = (tabId, newName) => {
+        const currentTabs = queryTabs();
+        queryTabs(currentTabs.map(t => t.id === tabId ? { ...t, name: newName } : t));
+    };
+    const handleKeyDown = (e) => {
+        // Execute on Cmd/Ctrl + Enter
+        if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+            e.preventDefault();
+            executeQuery();
+        }
+    };
+    if (!(0, globals_1.isDesktop)()) {
+        return (react_1.default.createElement("div", { className: "container-fluid p-4" },
+            react_1.default.createElement("div", { className: "alert alert-info" }, "Query Executor is only available in the desktop application.")));
+    }
+    return (react_1.default.createElement("div", { className: "container-fluid p-4" },
+        react_1.default.createElement("ul", { className: "nav nav-tabs mb-4" },
+            react_1.default.createElement("li", { className: "nav-item" },
+                react_1.default.createElement("a", { className: "nav-link", href: "#/data-explorer" },
+                    react_1.default.createElement("i", { className: "bi bi-table" }),
+                    " Tables")),
+            react_1.default.createElement("li", { className: "nav-item" },
+                react_1.default.createElement("a", { className: "nav-link active", href: "#/data-explorer/query" },
+                    react_1.default.createElement("i", { className: "bi bi-terminal" }),
+                    " Query"))),
+        react_1.default.createElement("h2", { className: "mb-3" }, "SQL Query Executor"),
+        react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("ul", { className: "nav nav-tabs" },
+                tabs.map((tab) => (react_1.default.createElement("li", { key: tab.id, className: "nav-item" },
+                    react_1.default.createElement("div", { className: `nav-link ${tab.id === activeTabId ? 'active' : ''}`, style: { cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px' } },
+                        react_1.default.createElement("span", { onClick: () => activeQueryTabId(tab.id), style: { flex: 1 } }, tab.name),
+                        tabs.length > 1 && (react_1.default.createElement("button", { className: "btn btn-sm p-0", onClick: (e) => {
+                                e.stopPropagation();
+                                closeTab(tab.id);
+                            }, style: {
+                                border: 'none',
+                                background: 'none',
+                                fontSize: '1.2em',
+                                lineHeight: 1,
+                                opacity: 0.6
+                            }, title: "Close tab" }, "\u00D7")))))),
+                react_1.default.createElement("li", { className: "nav-item" },
+                    react_1.default.createElement("button", { className: "nav-link", onClick: addNewTab, style: { border: 'none', background: 'none' }, title: "New query tab" },
+                        react_1.default.createElement("i", { className: "bi bi-plus-lg" }))))),
+        react_1.default.createElement("div", { className: "card mb-4" },
+            react_1.default.createElement("div", { className: "card-body" },
+                react_1.default.createElement("label", { htmlFor: "query-input", className: "form-label" },
+                    react_1.default.createElement("strong", null, "SQL Query"),
+                    react_1.default.createElement("span", { className: "text-muted small ms-2" }, "(Read-only: SELECT and PRAGMA only)")),
+                react_1.default.createElement("textarea", { id: "query-input", className: "form-control font-monospace", rows: 6, value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: handleKeyDown, placeholder: "Enter your SQL query here..." }),
+                react_1.default.createElement("div", { className: "mt-3 d-flex justify-content-between align-items-center" },
+                    react_1.default.createElement("button", { className: "btn btn-primary", onClick: executeQuery, disabled: isLoading || !query.trim() }, isLoading ? (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("span", { className: "spinner-border spinner-border-sm me-2", role: "status", "aria-hidden": "true" }),
+                        "Executing...")) : (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("i", { className: "bi bi-play-fill" }),
+                        " Execute Query"))),
+                    react_1.default.createElement("small", { className: "text-muted" },
+                        react_1.default.createElement("i", { className: "bi bi-info-circle" }),
+                        " Press Cmd/Ctrl + Enter to execute")))),
+        error && (react_1.default.createElement("div", { className: "alert alert-danger", role: "alert" },
+            react_1.default.createElement("i", { className: "bi bi-exclamation-triangle-fill me-2" }),
+            react_1.default.createElement("strong", null, "Error:"),
+            " ",
+            error)),
+        isLoading && (react_1.default.createElement("div", { className: "text-center py-5" },
+            react_1.default.createElement(loading_indicator_1.LoadingIndicator, null))),
+        result && !isLoading && (react_1.default.createElement("div", { className: "card" },
+            react_1.default.createElement("div", { className: "card-body" },
+                react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-center mb-3" },
+                    react_1.default.createElement("h5", { className: "card-title mb-0" },
+                        "Query Results",
+                        react_1.default.createElement("span", { className: "badge bg-primary ms-2" },
+                            result.rowCount,
+                            " rows")),
+                    react_1.default.createElement("button", { className: "btn btn-sm btn-outline-secondary", onClick: () => setResult(null) },
+                        react_1.default.createElement("i", { className: "bi bi-x" }),
+                        " Clear")),
+                result.rowCount === 0 ? (react_1.default.createElement("div", { className: "alert alert-info mb-0" }, "Query executed successfully but returned no rows.")) : (react_1.default.createElement("div", { className: "table-responsive" },
+                    react_1.default.createElement("table", { className: "table table-sm table-hover table-bordered" },
+                        react_1.default.createElement("thead", { className: "table-light" },
+                            react_1.default.createElement("tr", null, result.columns.map((col, idx) => (react_1.default.createElement("th", { key: idx, className: "font-monospace small" }, col))))),
+                        react_1.default.createElement("tbody", null, result.rows.map((row, rowIdx) => (react_1.default.createElement("tr", { key: rowIdx }, row.map((cell, cellIdx) => (react_1.default.createElement("td", { key: cellIdx, className: "font-monospace small" }, cell === null ? (react_1.default.createElement("span", { className: "text-muted fst-italic" }, "null")) : typeof cell === 'object' ? (react_1.default.createElement("pre", { className: "mb-0", style: { fontSize: '0.7rem' } }, JSON.stringify(cell, null, 2))) : (String(cell))))))))))))))),
+        !result && !isLoading && !error && (react_1.default.createElement("div", { className: "card" },
+            react_1.default.createElement("div", { className: "card-body" },
+                react_1.default.createElement("h5", { className: "card-title" }, "Example Queries"),
+                react_1.default.createElement("ul", { className: "list-unstyled mb-0" },
+                    react_1.default.createElement("li", { className: "mb-2" },
+                        react_1.default.createElement("button", { className: "btn btn-sm btn-outline-secondary font-monospace", onClick: () => setQuery('SELECT * FROM sqlite_master WHERE type=\'table\'') }, "List all tables")),
+                    react_1.default.createElement("li", { className: "mb-2" },
+                        react_1.default.createElement("button", { className: "btn btn-sm btn-outline-secondary font-monospace", onClick: () => setQuery('PRAGMA table_info(Users)') }, "Show Users table schema")),
+                    react_1.default.createElement("li", { className: "mb-2" },
+                        react_1.default.createElement("button", { className: "btn btn-sm btn-outline-secondary font-monospace", onClick: () => setQuery('SELECT name, sql FROM sqlite_master WHERE type=\'index\'') }, "List all indexes")),
+                    react_1.default.createElement("li", { className: "mb-2" },
+                        react_1.default.createElement("button", { className: "btn btn-sm btn-outline-secondary font-monospace", onClick: () => setQuery('PRAGMA database_list') }, "Show attached databases"))))))));
+}
+(0, ui_loader_1.registerInternalPeersUI)({
+    peersUIId: 'data-explorer-query-ui',
+    component: QueryExecutor,
+    routes: [
+        {
+            isMatch: (_props, context) => context.path === 'data-explorer/query',
+            uiCategory: 'screen',
+            priority: 2
+        }
+    ]
+});