sqlite-hub 1.4.0 → 2.0.0

package/frontend/js/app.js

@@ -48,6 +48,7 @@ import {
     initializeApp,
     insertMarkdownIntoLastOpenDocument,
     loadMoreQueryHistory,
+    loadMoreLogs,
     openModal,
     openOverviewInFinder,
     openQueryHistoryInEditor,
@@ -64,6 +65,7 @@ import {
     openRestoreBackupModal,
     openDeleteQueryChartModal,
     openDataExportModal,
+    openGenerateDataModal,
     openDeleteDocumentModal,
     openQueryExportModal,
     openDataRowByIdentity,
@@ -77,6 +79,7 @@ import {
     openDataRowUpdatePreview,
     openEditorRowUpdatePreview,
     refreshCurrentRoute,
+    refreshLogs,
     refreshBackups,
     refreshMediaTaggingPreview,
     removeConnection,
@@ -94,6 +97,9 @@ import {
     selectQueryHistoryItem,
     selectStructureEntry,
     setDocumentsSearchQuery,
+    setLogFilter,
+    setLogSearchInput,
+    applyLogSearch,
     setTableDesignerSearchQuery,
     setTableDesignerSqlPreviewVisibility,
     toggleTableDesignerTablesPanel,
@@ -126,7 +132,9 @@ import {
     submitBackupSafetyChoice,
     submitCreateBackupConfirmation,
     submitEditBackupConfirmation,
+    submitGenerateDataRows,
     submitRowUpdatePreviewConfirmation,
+    previewGenerateDataRows,
     setQueryHistoryPanelVisibility,
     sortDataTableByColumn,
     sortEditorResultsByColumn,
@@ -170,6 +178,8 @@ import {
     updateCurrentTableDesignerColumnField,
     updateCurrentTableDesignerConstraintField,
     updateCurrentTableDesignerField,
+    updateGenerateDataMapping,
+    updateGenerateDataModal,
     updateGenerateTypesModal,
     addCurrentTableDesignerColumn,
     applyCurrentMediaTaggingSelection,
@@ -182,10 +192,12 @@ import { renderDataRowEditorPanel, renderDataView } from './views/data.js';
 import { renderDocumentsView } from './views/documents.js';
 import { renderEditorView } from './views/editor.js';
 import { renderLandingView } from './views/landing.js';
+import { renderLogsView, renderLogTable } from './views/logs.js';
 import { renderMediaTaggingView } from './views/mediaTagging.js';
 import { renderOverviewView } from './views/overview.js';
 import { renderSettingsView } from './views/settings.js';
 import { renderStructureView } from './views/structure.js';
+import { renderTableAdvisorView } from './views/tableAdvisor.js';
 import { renderTableDesignerView } from './views/tableDesigner.js';
 import { replaceChildrenFromRenderedMarkup, replaceElementFromRenderedMarkup } from './utils/dom.js';
 import {
@@ -200,6 +212,7 @@ import {
     detectFilePathValue,
     getPathTypeLabel,
 } from './utils/filePathPreview.js';
+import { clearInputForEscape } from './utils/inputClear.js';
 import { formatSqlQuery } from './utils/sqlFormatter.js';
 import {
     buildDataRowEditorJsonObject,
@@ -263,6 +276,7 @@ const ROUTE_TITLE_SEGMENTS = {
     backups: 'Backups',
     overview: 'Overview',
     data: 'Data',
+    tableAdvisor: 'Table Advisor',
     structure: 'Structure',
     editor: 'SQL Editor',
     editorResults: 'SQL Editor',
@@ -272,6 +286,7 @@ const ROUTE_TITLE_SEGMENTS = {
     mediaTaggingSetup: 'Media Tagging',
     mediaTaggingQueue: 'Tagging Queue',
     settings: 'Settings',
+    logs: 'Logs',
     notFound: 'Not Found',
 };
 
@@ -973,6 +988,92 @@ function patchChartsDetailUi(state, { preserveCharts = false } = {}) {
     return true;
 }
 
+function getLogsActiveDatabaseId(state) {
+    return String(state.connections?.active?.id ?? state.logs?.metadata?.activeDatabase?.id ?? '');
+}
+
+function syncLogsFilterControls(state) {
+    const filters = state.logs?.filters ?? {};
+
+    for (const button of shellRefs.view.querySelectorAll('[data-action="set-log-filter"][data-field][data-value]')) {
+        if (!(button instanceof HTMLElement)) {
+            continue;
+        }
+
+        const field = button.dataset.field;
+        const value = button.dataset.value;
+        const active = String(filters[field] ?? '') === String(value ?? '');
+
+        button.classList.toggle('is-active', active);
+        button.setAttribute('aria-pressed', active ? 'true' : 'false');
+    }
+}
+
+function syncLogsMetaStrip(state) {
+    const logs = state.logs ?? {};
+    const values = {
+        visible: formatNumber((logs.items ?? []).length),
+        matched: formatNumber(logs.total ?? 0),
+        scope: logs.metadata?.activeDatabase?.label ?? 'Active Database',
+    };
+
+    for (const [key, value] of Object.entries(values)) {
+        const node = shellRefs.view.querySelector(`[data-logs-meta="${key}"]`);
+
+        if (node instanceof HTMLElement) {
+            node.textContent = value;
+            node.title = value;
+        }
+    }
+}
+
+function patchLogsTableUi(state) {
+    const logsView = shellRefs.view.querySelector('[data-logs-view]');
+
+    if (!(logsView instanceof HTMLElement)) {
+        return false;
+    }
+
+    const activeDatabaseId = getLogsActiveDatabaseId(state);
+
+    if (String(logsView.dataset.logsActiveDatabaseId ?? '') !== activeDatabaseId) {
+        return false;
+    }
+
+    const currentTable = logsView.querySelector('[data-logs-table]');
+
+    if (!(currentTable instanceof HTMLElement)) {
+        return false;
+    }
+
+    const currentScrollNode = currentTable.querySelector('[data-logs-table-scroll]');
+    const scrollState =
+        currentScrollNode instanceof HTMLElement
+            ? {
+                  left: currentScrollNode.scrollLeft,
+                  top: currentScrollNode.scrollTop,
+              }
+            : null;
+    const patched = replaceElementFromRenderedMarkup(currentTable, renderLogTable(state.logs ?? {}));
+
+    if (!patched) {
+        return false;
+    }
+
+    if (scrollState) {
+        const nextScrollNode = logsView.querySelector('[data-logs-table-scroll]');
+
+        if (nextScrollNode instanceof HTMLElement) {
+            nextScrollNode.scrollLeft = scrollState.left;
+            nextScrollNode.scrollTop = scrollState.top;
+        }
+    }
+
+    syncLogsFilterControls(state);
+    syncLogsMetaStrip(state);
+    return true;
+}
+
 function readFileAsBase64(file) {
     return new Promise((resolve, reject) => {
         const reader = new FileReader();
@@ -1112,12 +1213,16 @@ function resolveView(state) {
             return renderStructureView(state);
         case 'tableDesigner':
             return renderTableDesignerView(state);
+        case 'tableAdvisor':
+            return renderTableAdvisorView(state);
         case 'mediaTaggingSetup':
             return renderMediaTaggingView(state, { subView: 'setup' });
         case 'mediaTaggingQueue':
             return renderMediaTaggingView(state, { subView: 'queue' });
         case 'settings':
             return renderSettingsView(state);
+        case 'logs':
+            return renderLogsView(state);
         default:
             return renderNotFoundView();
     }
@@ -1403,9 +1508,11 @@ function renderApp(state) {
         'editorResults',
         'data',
         'charts',
+        'logs',
         'documents',
         'structure',
         'tableDesigner',
+        'tableAdvisor',
         'mediaTaggingSetup',
         'mediaTaggingQueue',
     ].includes(state.route.name);
@@ -1457,8 +1564,8 @@ function renderApp(state) {
         pendingNewTableDesignerAutofocus = false;
     }
 
-    const canPatchChartsMain =
-        mainChanged && previousRouteName === 'charts' && state.route.name === 'charts';
+    const canPatchChartsMain = mainChanged && previousRouteName === 'charts' && state.route.name === 'charts';
+    const canPatchLogsMain = mainChanged && previousRouteName === 'logs' && state.route.name === 'logs';
     let mainPatched = false;
     let preservedChartsDom = false;
 
@@ -1484,6 +1591,10 @@ function renderApp(state) {
         }
     }
 
+    if (!mainPatched && canPatchLogsMain) {
+        mainPatched = patchLogsTableUi(state);
+    }
+
     if (mainChanged) {
         if (!mainPatched) {
             teardownStructureGraph();
@@ -2428,6 +2539,15 @@ async function handleAction(actionNode) {
         case 'refresh-view':
             await refreshCurrentRoute();
             return;
+        case 'refresh-logs':
+            await refreshLogs();
+            return;
+        case 'set-log-filter':
+            await setLogFilter(actionNode.dataset.field, actionNode.dataset.value);
+            return;
+        case 'load-more-logs':
+            await loadMoreLogs();
+            return;
         case 'set-settings-section':
             setSettingsSection(actionNode.dataset.section);
             return;
@@ -2457,6 +2577,16 @@ async function handleAction(actionNode) {
             }
             return;
         }
+        case 'copy-mcp-config': {
+            const configNode = document.querySelector('[data-mcp-config]');
+            const config = configNode instanceof HTMLTextAreaElement ? configNode.value : '';
+
+            if (config && navigator.clipboard?.writeText) {
+                await navigator.clipboard.writeText(config);
+                showToast('MCP config copied.', 'success');
+            }
+            return;
+        }
         case 'open-row-editor-url':
             openRowEditorUrl(actionNode);
             return;
@@ -2878,6 +3008,12 @@ async function handleAction(actionNode) {
         case 'open-data-export-modal':
             openDataExportModal();
             return;
+        case 'open-generate-data-modal':
+            openGenerateDataModal();
+            return;
+        case 'preview-generate-data':
+            await previewGenerateDataRows();
+            return;
         case 'export-data-format': {
             const format = actionNode.dataset.exportFormat;
             const filename = getExportFilenameFromAction(actionNode);
@@ -2948,6 +3084,30 @@ async function handleAction(actionNode) {
             }
             return;
         }
+        case 'copy-table-advisor-sql': {
+            const issueId = actionNode.dataset.issueId;
+            const advisor = getState().tableAdvisor;
+            const issue = (advisor.result?.issues ?? []).find(item => item.id === issueId);
+            const sql = String(issue?.sql ?? '');
+
+            if (!sql.trim()) {
+                showToast('No advisor SQL to copy.', 'alert');
+                return;
+            }
+
+            if (!navigator.clipboard?.writeText) {
+                showToast('Clipboard API is not available.', 'alert');
+                return;
+            }
+
+            try {
+                await navigator.clipboard.writeText(sql);
+                showToast('Advisor SQL copied.', 'success');
+            } catch (error) {
+                showToast('Advisor SQL could not be copied.', 'alert');
+            }
+            return;
+        }
         case 'toggle-table-designer-sql-preview':
             setTableDesignerSqlPreviewVisibility(
                 actionNode.dataset.nextValue ? actionNode.dataset.nextValue === 'true' : undefined,
@@ -3236,6 +3396,11 @@ document.addEventListener('keydown', event => {
         return;
     }
 
+    if (target instanceof HTMLInputElement && clearInputForEscape(target)) {
+        event.preventDefault();
+        return;
+    }
+
     if (state.modal) {
         event.preventDefault();
         closeModal();
@@ -3327,6 +3492,20 @@ document.addEventListener('input', event => {
         return;
     }
 
+    if (bindNode.dataset.bind === 'generate-data-field') {
+        updateGenerateDataModal(bindNode.dataset.field, bindNode.value, { notify: false });
+        return;
+    }
+
+    if (bindNode.dataset.bind === 'generate-data-mapping') {
+        if (bindNode instanceof HTMLSelectElement) {
+            return;
+        }
+
+        updateGenerateDataMapping(bindNode.dataset.columnName, bindNode.dataset.field, bindNode.value, { notify: false });
+        return;
+    }
+
     if (bindNode.dataset.bind === 'copy-column-format-field') {
         updateCopyColumnModalFormatField(
             bindNode.dataset.field,
@@ -3354,6 +3533,11 @@ document.addEventListener('input', event => {
         return;
     }
 
+    if (bindNode.dataset.bind === 'logs-search') {
+        setLogSearchInput(bindNode.value);
+        return;
+    }
+
     if (bindNode.dataset.bind === 'data-search-query') {
         void setDataSearchQuery(bindNode.value);
         return;
@@ -3505,6 +3689,16 @@ document.addEventListener('change', event => {
         return;
     }
 
+    if (bindNode.dataset.bind === 'generate-data-field') {
+        updateGenerateDataModal(bindNode.dataset.field, bindNode.value);
+        return;
+    }
+
+    if (bindNode.dataset.bind === 'generate-data-mapping') {
+        updateGenerateDataMapping(bindNode.dataset.columnName, bindNode.dataset.field, bindNode.value);
+        return;
+    }
+
     if (bindNode.dataset.bind === 'data-search-column') {
         void setDataSearchColumn(bindNode.value);
         return;
@@ -3649,6 +3843,9 @@ document.addEventListener('submit', async event => {
     const formData = submitter ? new FormData(form, submitter) : new FormData(form);
 
     switch (form.dataset.form) {
+        case 'logs-search':
+            await applyLogSearch(String(formData.get('search') ?? ''));
+            return;
         case 'create-api-token':
             await createSettingsApiToken(String(formData.get('name') ?? ''));
             return;
@@ -3780,6 +3977,9 @@ document.addEventListener('submit', async event => {
         case 'apply-row-update-preview':
             await submitRowUpdatePreviewConfirmation();
             return;
+        case 'generate-data':
+            await submitGenerateDataRows();
+            return;
         case 'create-media-tagging-tag-table':
             await submitCreateMediaTaggingTagTable();
             return;

package/frontend/js/components/connectionCard.js

@@ -56,7 +56,9 @@ export function renderConnectionCard(connection, activeConnectionId) {
     '<div><div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Last Opened</div><div class="text-xs font-bold text-on-surface">',
     escapeHtml(formatDateTime(connection.lastOpenedAt)),
     "</div></div>",
-    '<div><div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Mode</div><div class="text-xs font-bold text-on-surface">',
+    '<div><div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Mode</div><div class="text-xs font-bold ',
+    connection.readOnly ? "text-primary-container" : "text-on-surface",
+    '">',
     connection.readOnly ? "Read only" : "Read / Write",
     "</div></div></div></div>",
     '<div class="border-t border-outline-variant/10 bg-surface-container-low px-4 py-3">',