sqlite-hub 0.9.12 → 0.10.0

package/frontend/js/store.js

@@ -34,9 +34,21 @@ const DATA_PAGE_SIZES = [25, 50, 100];
 const DATA_ROW_SIZE_STORAGE_KEY = 'data_row_size';
 const CHARTS_HISTORY_TAB_STORAGE_KEY = 'charts_history_tab';
 const QUERY_HISTORY_TAB_STORAGE_KEY = 'query_history_tab';
+const UI_PREFERENCE_STORAGE_KEYS = {
+    sqlEditorHistoryVisible: 'sqlite_hub_sql_editor_history_visible',
+    sqlEditorEditorVisible: 'sqlite_hub_sql_editor_editor_visible',
+    sqlEditorActiveTab: 'sqlite_hub_sql_editor_active_tab',
+    sqlEditorQueryDraft: 'sqlite_hub_sql_editor_query_draft',
+    dataTablesVisible: 'sqlite_hub_data_tables_visible',
+    structureTablesVisible: 'sqlite_hub_structure_tables_visible',
+    chartsHistoryVisible: 'sqlite_hub_charts_history_visible',
+    chartsResultsVisible: 'sqlite_hub_charts_results_visible',
+    tableDesignerSqlPreviewVisible: 'sqlite_hub_table_designer_sql_preview_visible',
+};
 const QUERY_HISTORY_PAGE_SIZE = 30;
 const QUERY_HISTORY_RUN_LIMIT = 8;
 const CHART_HEIGHT_PRESETS = new Set(['small', 'medium', 'large']);
+const EDITOR_RESULT_TABS = new Set(['results', 'performance', 'messages']);
 const MISSING_DATABASE_ERROR = {
     code: 'ACTIVE_DATABASE_REQUIRED',
     message: 'No active SQLite database selected.',
@@ -66,6 +78,70 @@ function storeDataPageSize(pageSize) {
     }
 }
 
+function readStoredBoolean(key, fallback) {
+    try {
+        const value = globalThis.localStorage?.getItem(key);
+
+        if (value === 'true') {
+            return true;
+        }
+
+        if (value === 'false') {
+            return false;
+        }
+
+        return fallback;
+    } catch {
+        return fallback;
+    }
+}
+
+function storeBoolean(key, value) {
+    try {
+        globalThis.localStorage?.setItem(key, String(Boolean(value)));
+    } catch {
+        // Ignore unavailable browser storage; the in-memory setting still applies.
+    }
+}
+
+function readStoredString(key, fallback = '') {
+    try {
+        const value = globalThis.localStorage?.getItem(key);
+        return value === null || value === undefined ? fallback : value;
+    } catch {
+        return fallback;
+    }
+}
+
+function storeString(key, value) {
+    try {
+        globalThis.localStorage?.setItem(key, String(value ?? ''));
+    } catch {
+        // Ignore unavailable browser storage; the in-memory value still applies.
+    }
+}
+
+function readStoredEditorActiveTab(fallback = 'messages') {
+    try {
+        const value = globalThis.localStorage?.getItem(UI_PREFERENCE_STORAGE_KEYS.sqlEditorActiveTab);
+        return EDITOR_RESULT_TABS.has(value) ? value : fallback;
+    } catch {
+        return fallback;
+    }
+}
+
+function storeEditorActiveTab(tab) {
+    if (!EDITOR_RESULT_TABS.has(tab)) {
+        return;
+    }
+
+    try {
+        globalThis.localStorage?.setItem(UI_PREFERENCE_STORAGE_KEYS.sqlEditorActiveTab, tab);
+    } catch {
+        // Ignore unavailable browser storage; the in-memory setting still applies.
+    }
+}
+
 function readStoredChartsHistoryTab(fallback = 'recent') {
     try {
         return normalizeChartsHistoryTab(globalThis.localStorage?.getItem(CHARTS_HISTORY_TAB_STORAGE_KEY) ?? fallback);
@@ -124,7 +200,7 @@ const state = {
     dataBrowser: {
         tables: [],
         selectedTable: null,
-        tablesVisible: true,
+        tablesVisible: readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.dataTablesVisible, true),
         table: null,
         loading: false,
         tableLoading: false,
@@ -135,6 +211,7 @@ const state = {
         sortColumn: null,
         sortDirection: null,
         searchQuery: '',
+        tableSearchQuery: '',
         searchColumn: '',
         selectedRowIndex: null,
         selectedRow: null,
@@ -144,10 +221,10 @@ const state = {
         saveError: null,
     },
     editor: {
-        sqlText: '',
-        editorPanelVisible: true,
+        sqlText: readStoredString(UI_PREFERENCE_STORAGE_KEYS.sqlEditorQueryDraft),
+        editorPanelVisible: readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.sqlEditorEditorVisible, true),
         history: [],
-        historyPanelVisible: true,
+        historyPanelVisible: readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.sqlEditorHistoryVisible, true),
         historyLoading: false,
         historyLoadingMore: false,
         historyError: null,
@@ -163,9 +240,10 @@ const state = {
         historyRuns: [],
         historyDetailLoading: false,
         historyDetailError: null,
-        activeTab: 'messages',
+        activeTab: readStoredEditorActiveTab(),
         executing: false,
         result: null,
+        lastExecutedSql: '',
         resultSortColumn: null,
         resultSortDirection: null,
         error: null,
@@ -181,10 +259,11 @@ const state = {
         loading: false,
         error: null,
         historyTab: readStoredChartsHistoryTab(),
+        historyPanelVisible: readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.chartsHistoryVisible, true),
         selectedHistoryId: null,
         chartHeightPreset: 'medium',
         sqlExpanded: false,
-        resultsVisible: true,
+        resultsVisible: readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.chartsResultsVisible, true),
         detail: null,
         detailLoading: false,
         detailError: null,
@@ -196,7 +275,7 @@ const state = {
         tables: [],
         selectedTableName: null,
         draft: null,
-        sqlPreviewVisible: true,
+        sqlPreviewVisible: readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.tableDesignerSqlPreviewVisible, true),
         pendingImportedDraft: null,
         loading: false,
         detailLoading: false,
@@ -210,7 +289,8 @@ const state = {
         data: null,
         selectedName: null,
         detail: null,
-        tablesVisible: true,
+        tablesVisible: readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.structureTablesVisible, true),
+        tableSearchQuery: '',
         loading: false,
         detailLoading: false,
         error: null,
@@ -467,6 +547,10 @@ function resetDataBrowserSearch() {
     state.dataBrowser.searchColumn = '';
 }
 
+function resetDataBrowserTableSearch() {
+    state.dataBrowser.tableSearchQuery = '';
+}
+
 function resetDataBrowserSort() {
     state.dataBrowser.sortColumn = null;
     state.dataBrowser.sortDirection = null;
@@ -647,7 +731,11 @@ function clearDataBrowserRowSelectionState() {
 }
 
 function resolveDataBrowserRowSelection(rowIndex, identity = null) {
-    const numericIndex = Number(rowIndex);
+    const hasRowIndex =
+        rowIndex !== null &&
+        rowIndex !== undefined &&
+        (typeof rowIndex !== 'string' || rowIndex.trim() !== '');
+    const numericIndex = hasRowIndex ? Number(rowIndex) : NaN;
 
     if (Number.isInteger(numericIndex) && numericIndex >= 0) {
         const indexedRow = state.dataBrowser.table?.rows?.[numericIndex] ?? null;
@@ -735,10 +823,11 @@ function resetChartsState() {
     state.charts.loading = false;
     state.charts.error = null;
     state.charts.historyTab = readStoredChartsHistoryTab(state.charts.historyTab);
+    state.charts.historyPanelVisible = readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.chartsHistoryVisible, true);
     state.charts.selectedHistoryId = null;
     state.charts.chartHeightPreset = 'medium';
     state.charts.sqlExpanded = false;
-    state.charts.resultsVisible = true;
+    state.charts.resultsVisible = readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.chartsResultsVisible, true);
     state.charts.detail = null;
     state.charts.detailLoading = false;
     state.charts.detailError = null;
@@ -890,6 +979,7 @@ function setMissingDatabaseState() {
     state.dataBrowser.selectedTable = null;
     state.dataBrowser.table = null;
     state.dataBrowser.page = 1;
+    resetDataBrowserTableSearch();
     resetDataBrowserSort();
     resetDataBrowserSearch();
     clearDataBrowserRowSelectionState();
@@ -902,7 +992,8 @@ function setMissingDatabaseState() {
     state.structure.detailLoading = false;
     state.structure.data = null;
     state.structure.detail = null;
-    state.structure.tablesVisible = true;
+    state.structure.tablesVisible = readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.structureTablesVisible, true);
+    state.structure.tableSearchQuery = '';
     state.structure.error = error;
 
     state.tableDesigner.loading = false;
@@ -910,7 +1001,7 @@ function setMissingDatabaseState() {
     state.tableDesigner.tables = [];
     state.tableDesigner.selectedTableName = null;
     state.tableDesigner.draft = null;
-    state.tableDesigner.sqlPreviewVisible = true;
+    state.tableDesigner.sqlPreviewVisible = readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.tableDesignerSqlPreviewVisible, true);
     state.tableDesigner.pendingImportedDraft = null;
     state.tableDesigner.saving = false;
     state.tableDesigner.searchQuery = '';
@@ -964,9 +1055,8 @@ function syncRouteContext() {
 
     if (route.name === 'editorResults') {
         state.editor.activeTab = 'results';
+        storeEditorActiveTab('results');
         clearQueryHistoryDetailState();
-    } else if (route.name === 'editor' && state.editor.activeTab === 'results') {
-        state.editor.activeTab = 'messages';
     }
 
     if (route.name !== 'editorResults') {
@@ -1184,7 +1274,7 @@ async function loadChartsDetail(historyId) {
     if (!Number.isInteger(numericId) || numericId < 1) {
         state.charts.selectedHistoryId = null;
         state.charts.sqlExpanded = false;
-        state.charts.resultsVisible = true;
+        state.charts.resultsVisible = readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.chartsResultsVisible, true);
         state.charts.detail = null;
         state.charts.detailLoading = false;
         state.charts.detailError = null;
@@ -1197,7 +1287,7 @@ async function loadChartsDetail(historyId) {
 
     state.charts.selectedHistoryId = numericId;
     state.charts.sqlExpanded = false;
-    state.charts.resultsVisible = true;
+    state.charts.resultsVisible = readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.chartsResultsVisible, true);
     state.charts.detail = null;
     state.charts.detailLoading = true;
     state.charts.detailError = null;
@@ -1859,6 +1949,7 @@ function invalidateDatabaseCaches() {
     state.dataBrowser.selectedTable = null;
     state.dataBrowser.table = null;
     state.dataBrowser.page = 1;
+    resetDataBrowserTableSearch();
     resetDataBrowserSearch();
     clearDataBrowserRowSelectionState();
     state.dataBrowser.pendingOpenRow = null;
@@ -1868,7 +1959,7 @@ function invalidateDatabaseCaches() {
     state.tableDesigner.tables = [];
     state.tableDesigner.selectedTableName = null;
     state.tableDesigner.draft = null;
-    state.tableDesigner.sqlPreviewVisible = true;
+    state.tableDesigner.sqlPreviewVisible = readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.tableDesignerSqlPreviewVisible, true);
     state.tableDesigner.pendingImportedDraft = null;
     state.tableDesigner.saving = false;
     state.tableDesigner.searchQuery = '';
@@ -1878,7 +1969,8 @@ function invalidateDatabaseCaches() {
     resetChartsState();
     state.structure.data = null;
     state.structure.detail = null;
-    state.structure.tablesVisible = true;
+    state.structure.tablesVisible = readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.structureTablesVisible, true);
+    state.structure.tableSearchQuery = '';
     state.mediaTagging.loading = false;
     state.mediaTagging.previewLoading = false;
     state.mediaTagging.saving = false;
@@ -2296,6 +2388,92 @@ export function closeModal() {
     closeModalInternal();
 }
 
+export async function openDataRowUpdatePreview(rowIndex, values, identity = null) {
+    const tableName = state.dataBrowser.selectedTable;
+    const selected = resolveDataBrowserRowSelection(rowIndex, identity);
+
+    if (!tableName || !selected.identity) {
+        pushToast('The selected row could not be loaded.', 'alert');
+        return null;
+    }
+
+    state.dataBrowser.saving = true;
+    state.dataBrowser.saveError = null;
+    emitChange();
+
+    try {
+        const response = await api.previewDataTableRowUpdate(tableName, {
+            identity: selected.identity,
+            values,
+        });
+
+        state.modal = {
+            kind: 'row-update-preview',
+            target: 'data',
+            tableName,
+            rowIndex: selected.rowIndex,
+            identity: selected.identity,
+            values,
+            preview: response.data,
+            error: null,
+            submitting: false,
+        };
+        emitChange();
+        return response.data;
+    } catch (error) {
+        state.dataBrowser.saveError = normalizeError(error);
+        emitChange();
+        return null;
+    } finally {
+        state.dataBrowser.saving = false;
+        emitChange();
+    }
+}
+
+export async function openEditorRowUpdatePreview(rowIndex, values) {
+    const numericIndex = Number(rowIndex);
+    const result = state.editor.result;
+    const row = result?.rows?.[numericIndex];
+    const tableName = result?.editing?.tableName ?? null;
+
+    if (!tableName || !row || !canEditQueryResult()) {
+        pushToast('The selected query result row could not be loaded.', 'alert');
+        return null;
+    }
+
+    state.editor.saving = true;
+    state.editor.saveError = null;
+    emitChange();
+
+    try {
+        const response = await api.previewDataTableRowUpdate(tableName, {
+            identity: row.__identity,
+            values,
+        });
+
+        state.modal = {
+            kind: 'row-update-preview',
+            target: 'editor',
+            tableName,
+            rowIndex: numericIndex,
+            identity: row.__identity,
+            values,
+            preview: response.data,
+            error: null,
+            submitting: false,
+        };
+        emitChange();
+        return response.data;
+    } catch (error) {
+        state.editor.saveError = normalizeError(error);
+        emitChange();
+        return null;
+    } finally {
+        state.editor.saving = false;
+        emitChange();
+    }
+}
+
 export function toggleChartsSqlPanel() {
     state.charts.sqlExpanded = !state.charts.sqlExpanded;
     emitChange();
@@ -2303,6 +2481,19 @@ export function toggleChartsSqlPanel() {
 
 export function toggleChartsResultsPanel() {
     state.charts.resultsVisible = !state.charts.resultsVisible;
+    storeBoolean(UI_PREFERENCE_STORAGE_KEYS.chartsResultsVisible, state.charts.resultsVisible);
+    emitChange();
+}
+
+export function setChartsHistoryPanelVisibility(visible) {
+    const nextValue = typeof visible === 'boolean' ? visible : !Boolean(state.charts.historyPanelVisible);
+
+    if (state.charts.historyPanelVisible === nextValue) {
+        return;
+    }
+
+    state.charts.historyPanelVisible = nextValue;
+    storeBoolean(UI_PREFERENCE_STORAGE_KEYS.chartsHistoryVisible, nextValue);
     emitChange();
 }
 
@@ -2550,6 +2741,7 @@ export function setCurrentQuery(query) {
     const nextLineCount = Math.max(1, nextQuery.split('\n').length);
 
     state.editor.sqlText = nextQuery;
+    storeString(UI_PREFERENCE_STORAGE_KEYS.sqlEditorQueryDraft, nextQuery);
 
     if (previousLineCount !== nextLineCount) {
         emitChange();
@@ -2558,7 +2750,9 @@ export function setCurrentQuery(query) {
 
 export function clearCurrentQuery() {
     state.editor.sqlText = '';
+    storeString(UI_PREFERENCE_STORAGE_KEYS.sqlEditorQueryDraft, '');
     state.editor.result = null;
+    state.editor.lastExecutedSql = '';
     resetEditorResultSort();
     state.editor.error = null;
     clearQueryHistoryDetailState();
@@ -2566,22 +2760,17 @@ export function clearCurrentQuery() {
     state.editor.saving = false;
     state.editor.deleting = false;
     state.editor.saveError = null;
-    if (state.editor.activeTab === 'results' || state.editor.activeTab === 'performance') {
-        state.editor.activeTab = 'messages';
-    }
     emitChange();
 }
 
 export function clearEditorResults() {
     state.editor.result = null;
+    state.editor.lastExecutedSql = '';
     resetEditorResultSort();
     state.editor.error = null;
     state.editor.selectedRowIndex = null;
     state.editor.saving = false;
     state.editor.saveError = null;
-    if (state.editor.activeTab === 'results') {
-        state.editor.activeTab = 'messages';
-    }
     emitChange();
 }
 
@@ -2593,16 +2782,23 @@ export function setEditorPanelVisibility(visible) {
     }
 
     state.editor.editorPanelVisible = nextValue;
+    storeBoolean(UI_PREFERENCE_STORAGE_KEYS.sqlEditorEditorVisible, nextValue);
     emitChange();
 }
 
 export function setEditorTab(tab) {
+    if (!EDITOR_RESULT_TABS.has(tab)) {
+        return;
+    }
+
     state.editor.activeTab = tab;
+    storeEditorActiveTab(tab);
     emitChange();
 }
 
 export async function executeCurrentQuery() {
     state.editor.executing = true;
+    state.editor.lastExecutedSql = state.editor.sqlText;
     state.editor.error = null;
     state.editor.selectedRowIndex = null;
     state.editor.saving = false;
@@ -2614,7 +2810,6 @@ export async function executeCurrentQuery() {
         state.editor.result = response.data;
         resetEditorResultSort();
         state.editor.error = null;
-        state.editor.activeTab = 'results';
         invalidateDatabaseCaches();
         await refreshQueryHistoryState();
         pushToast(response.message || `Executed ${response.data.statementCount} SQL statement(s).`, 'success');
@@ -2622,6 +2817,7 @@ export async function executeCurrentQuery() {
     } catch (error) {
         state.editor.error = normalizeError(error);
         state.editor.activeTab = 'messages';
+        storeEditorActiveTab('messages');
         await refreshQueryHistoryState();
         return false;
     } finally {
@@ -2676,6 +2872,7 @@ export function setQueryHistoryPanelVisibility(visible) {
     }
 
     state.editor.historyPanelVisible = nextValue;
+    storeBoolean(UI_PREFERENCE_STORAGE_KEYS.sqlEditorHistoryVisible, nextValue);
     emitChange();
 }
 
@@ -2744,6 +2941,7 @@ export function openQueryHistoryInEditor(historyId, options = {}) {
     setActiveQueryHistoryItem(historyId);
     clearQueryHistoryDetailState();
     state.editor.sqlText = options.append ? [state.editor.sqlText.trim(), rawSql].filter(Boolean).join('\n\n') : rawSql;
+    storeString(UI_PREFERENCE_STORAGE_KEYS.sqlEditorQueryDraft, state.editor.sqlText);
     emitChange();
     return true;
 }
@@ -2842,6 +3040,7 @@ export async function selectStructureEntry(name) {
 
 export function toggleStructureTablesPanel() {
     state.structure.tablesVisible = state.structure.tablesVisible === false;
+    storeBoolean(UI_PREFERENCE_STORAGE_KEYS.structureTablesVisible, state.structure.tablesVisible);
     emitChange();
 }
 
@@ -2850,6 +3049,16 @@ export function setTableDesignerSearchQuery(query) {
     emitChange();
 }
 
+export function setDataTableSearchQuery(query) {
+    state.dataBrowser.tableSearchQuery = String(query ?? '');
+    emitChange();
+}
+
+export function setStructureTableSearchQuery(query) {
+    state.structure.tableSearchQuery = String(query ?? '');
+    emitChange();
+}
+
 export function setTableDesignerSqlPreviewVisibility(visible) {
     const nextValue = typeof visible === 'boolean' ? visible : !Boolean(state.tableDesigner.sqlPreviewVisible);
 
@@ -2858,6 +3067,7 @@ export function setTableDesignerSqlPreviewVisibility(visible) {
     }
 
     state.tableDesigner.sqlPreviewVisible = nextValue;
+    storeBoolean(UI_PREFERENCE_STORAGE_KEYS.tableDesignerSqlPreviewVisible, nextValue);
     emitChange();
 }
 
@@ -3433,6 +3643,7 @@ export function setDataSearchColumn(columnName) {
 
 export function toggleDataTablesPanel() {
     state.dataBrowser.tablesVisible = state.dataBrowser.tablesVisible === false;
+    storeBoolean(UI_PREFERENCE_STORAGE_KEYS.dataTablesVisible, state.dataBrowser.tablesVisible);
     emitChange();
 }
 
@@ -3499,9 +3710,10 @@ export async function setDataPageSize(pageSize) {
     }
 }
 
-export async function submitDataRowUpdate(rowIndex, values, identity = null) {
+export async function submitDataRowUpdate(rowIndex, values, identity = null, options = {}) {
     const tableName = state.dataBrowser.selectedTable;
     const selected = resolveDataBrowserRowSelection(rowIndex, identity);
+    const reportErrorToModal = Boolean(options.reportErrorToModal);
 
     if (!tableName || !selected.identity) {
         pushToast('The selected row could not be loaded.', 'alert');
@@ -3523,8 +3735,12 @@ export async function submitDataRowUpdate(rowIndex, values, identity = null) {
         clearDataBrowserRowSelectionState();
         return response.data;
     } catch (error) {
-        state.dataBrowser.saveError = normalizeError(error);
-        emitChange();
+        if (reportErrorToModal) {
+            withModalError(error);
+        } else {
+            state.dataBrowser.saveError = normalizeError(error);
+            emitChange();
+        }
         return null;
     } finally {
         state.dataBrowser.saving = false;
@@ -3576,11 +3792,12 @@ export async function submitDataRowDelete(rowIndex, options = {}) {
     }
 }
 
-export async function submitEditorRowUpdate(rowIndex, values) {
+export async function submitEditorRowUpdate(rowIndex, values, options = {}) {
     const numericIndex = Number(rowIndex);
     const result = state.editor.result;
     const row = result?.rows?.[numericIndex];
     const tableName = result?.editing?.tableName ?? null;
+    const reportErrorToModal = Boolean(options.reportErrorToModal);
 
     if (!tableName || !row || !canEditQueryResult()) {
         pushToast('The selected query result row could not be loaded.', 'alert');
@@ -3610,8 +3827,12 @@ export async function submitEditorRowUpdate(rowIndex, values) {
         emitChange();
         return response.data;
     } catch (error) {
-        state.editor.saveError = normalizeError(error);
-        emitChange();
+        if (reportErrorToModal) {
+            withModalError(error);
+        } else {
+            state.editor.saveError = normalizeError(error);
+            emitChange();
+        }
         return null;
     } finally {
         state.editor.saving = false;
@@ -3689,6 +3910,29 @@ export async function submitDeleteRowConfirmation() {
     return result;
 }
 
+export async function submitRowUpdatePreviewConfirmation() {
+    const modal = state.modal;
+
+    if (modal?.kind !== 'row-update-preview') {
+        return null;
+    }
+
+    startModalSubmission();
+
+    const result =
+        modal.target === 'editor'
+            ? await submitEditorRowUpdate(modal.rowIndex, modal.values, { reportErrorToModal: true })
+            : await submitDataRowUpdate(modal.rowIndex, modal.values, modal.identity, {
+                  reportErrorToModal: true,
+              });
+
+    if (result) {
+        closeModalInternal();
+    }
+
+    return result;
+}
+
 export async function saveCurrentQueryChartDraft() {
     if (state.modal?.kind !== 'chart-editor' || !state.modal.draft) {
         return null;
@@ -3896,6 +4140,18 @@ export function getCurrentConnection(snapshot = state) {
 }
 
 export function getQueryMessages(snapshot = state) {
+    const queryText = snapshot.editor.result?.sql ?? (snapshot.editor.error ? snapshot.editor.lastExecutedSql : '');
+    const queryMessages = queryText
+        ? [
+              {
+                  tone: 'muted',
+                  label: 'QUERY',
+                  value: queryText,
+                  kind: 'query',
+              },
+          ]
+        : [];
+
     if (snapshot.editor.error) {
         return [
             {
@@ -3903,6 +4159,7 @@ export function getQueryMessages(snapshot = state) {
                 label: snapshot.editor.error.code,
                 value: snapshot.editor.error.message,
             },
+            ...queryMessages,
         ];
     }
 
@@ -3916,14 +4173,17 @@ export function getQueryMessages(snapshot = state) {
         ];
     }
 
-    return snapshot.editor.result.statements.map(statement => ({
-        tone: statement.kind === 'resultSet' ? 'success' : inferStatusTone(statement.keyword),
-        label: `${statement.keyword} #${statement.index + 1}`,
-        value:
-            statement.kind === 'resultSet'
-                ? `${statement.rowCount} row(s) returned.`
-                : `${statement.changes} row(s) affected.`,
-    }));
+    return [
+        ...snapshot.editor.result.statements.map(statement => ({
+            tone: statement.kind === 'resultSet' ? 'success' : inferStatusTone(statement.keyword),
+            label: `${statement.keyword} #${statement.index + 1}`,
+            value:
+                statement.kind === 'resultSet'
+                    ? `${statement.rowCount} row(s) returned.`
+                    : `${statement.changes} row(s) affected.`,
+        })),
+        ...queryMessages,
+    ];
 }
 
 export function getQueryPerformance(snapshot = state) {

package/frontend/js/views/charts.js

@@ -402,7 +402,7 @@ function renderChartCard(chart, state, analysis) {
 export function renderChartsDetail(state) {
     const detail = state.charts.detail;
     const selectedHistoryId = state.charts.selectedHistoryId;
-    const historyVisible = state.editor.historyPanelVisible !== false;
+    const historyVisible = state.charts.historyPanelVisible !== false;
 
     if (!selectedHistoryId) {
         return renderEmptyChartDetail();
@@ -514,7 +514,7 @@ export function renderChartsDetail(state) {
 }
 
 export function renderChartsView(state) {
-    const historyVisible = state.editor.historyPanelVisible !== false || !state.charts.selectedHistoryId;
+    const historyVisible = state.charts.historyPanelVisible !== false || !state.charts.selectedHistoryId;
 
     if (!state.connections.active && state.charts.error?.code === 'ACTIVE_DATABASE_REQUIRED') {
         return {