sqlite-hub 0.9.0 → 0.9.3

package/frontend/js/app.js

@@ -69,6 +69,7 @@ import {
     toggleDataTablesPanel,
     setCurrentQuery,
     setChartsHeightPreset,
+    setChartsHistoryTab,
     setEditorPanelVisibility,
     setEditorTab,
     submitDeleteChartConfirmation,
@@ -87,6 +88,7 @@ import {
     toggleChartsResultsPanel,
     toggleChartsSqlPanel,
     setMediaTaggingWorkflowMediaDetailsVisible,
+    setMediaTaggingWorkflowMediaRotationDegrees,
     queueTableDesignerCsvImport,
     showToast,
     submitCreateConnection,
@@ -110,7 +112,7 @@ import {
     applyCurrentMediaTaggingSelection,
     removeCurrentTableDesignerColumn,
 } from './store.js';
-import { renderChartsView } from './views/charts.js';
+import { renderChartsDetail, renderChartsView } from './views/charts.js';
 import { renderConnectionsView } from './views/connections.js';
 import { renderDataRowEditorPanel, renderDataView } from './views/data.js';
 import { renderEditorView } from './views/editor.js';
@@ -137,6 +139,7 @@ const shellRefs = {
     toast: document.querySelector('#toast-root'),
 };
 let lastRenderedRoutePath = null;
+let lastRenderedRouteName = null;
 let lastRenderedTopNavMarkup = '';
 let lastRenderedSidebarMarkup = '';
 let lastRenderedStatusBarMarkup = '';
@@ -144,15 +147,21 @@ let lastRenderedMainMarkup = '';
 let lastRenderedPanelMarkup = '';
 let lastRenderedModalMarkup = '';
 let lastRenderedToastMarkup = '';
+let lastRenderedChartsHistorySignature = '';
 let lastRenderedPanelOpen = false;
 let lastRenderedLockedRoute = false;
 let pendingNewTableDesignerAutofocus = false;
 let pendingQueryEditorFocus = false;
+let pendingMediaTaggingTagSearchFocus = false;
 
 function invalidateMainRenderCache() {
     lastRenderedMainMarkup = null;
 }
 
+function isMediaTaggingRouteName(routeName) {
+    return routeName === 'mediaTaggingSetup' || routeName === 'mediaTaggingQueue';
+}
+
 function resetStructureGraphForDatabaseChange() {
     resetPersistedStructureGraphState();
 }
@@ -258,6 +267,45 @@ function syncMediaTaggingCurrentMediaUi(button, detailsVisible) {
     return true;
 }
 
+function normalizeMediaTaggingRotationDegrees(value) {
+    const numericValue = Number(value);
+
+    if (!Number.isFinite(numericValue)) {
+        return 0;
+    }
+
+    return ((Math.round(numericValue / 90) * 90) % 360 + 360) % 360;
+}
+
+function syncMediaTaggingMediaRotationUi(node, rotationDegrees) {
+    if (!(node instanceof HTMLElement)) {
+        return false;
+    }
+
+    const preview = node.closest('.media-tagging-preview');
+    const target = preview?.querySelector('[data-media-tagging-rotation-target]');
+
+    if (!(preview instanceof HTMLElement) || !(target instanceof HTMLElement)) {
+        return false;
+    }
+
+    const normalizedRotation = normalizeMediaTaggingRotationDegrees(rotationDegrees);
+
+    target.style.setProperty('--media-tagging-preview-rotation', `${normalizedRotation}deg`);
+    target.dataset.rotationDegrees = String(normalizedRotation);
+    target.classList.toggle('is-rotated-quarter', normalizedRotation === 90 || normalizedRotation === 270);
+
+    const resetButton = preview.querySelector(
+        '[data-action="rotate-media-tagging-current-media"][data-rotation-command="reset"]',
+    );
+
+    if (resetButton instanceof HTMLButtonElement) {
+        resetButton.disabled = normalizedRotation === 0;
+    }
+
+    return true;
+}
+
 function syncMediaTaggingTagSearchUi(input) {
     if (!(input instanceof HTMLInputElement)) {
         return false;
@@ -371,6 +419,188 @@ function syncQueryHistorySelectionUi(selectedHistoryId = null) {
     return true;
 }
 
+function isEditorRouteName(routeName) {
+    return routeName === 'editor' || routeName === 'editorResults';
+}
+
+function captureQueryHistoryScrollState() {
+    if (!isEditorRouteName(lastRenderedRouteName)) {
+        return null;
+    }
+
+    const scrollNode = shellRefs.view.querySelector('[data-query-history-scroll]');
+
+    if (!(scrollNode instanceof HTMLElement)) {
+        return null;
+    }
+
+    return {
+        committedSearch: scrollNode.dataset.queryHistoryCommittedSearch ?? '',
+        historyTab: scrollNode.dataset.queryHistoryTab ?? '',
+        routeName: lastRenderedRouteName,
+        renderedItemCount: scrollNode.querySelectorAll('.query-history-item').length,
+        renderedLoadingMore: scrollNode.dataset.queryHistoryLoadingMore === 'true',
+        searchInput: scrollNode.dataset.queryHistorySearch ?? '',
+        scrollLeft: scrollNode.scrollLeft,
+        scrollTop: scrollNode.scrollTop,
+    };
+}
+
+function shouldRestoreQueryHistoryScroll(snapshot, state) {
+    if (!snapshot || !isEditorRouteName(state.route.name) || snapshot.routeName !== state.route.name) {
+        return false;
+    }
+
+    if (!state.editor.historyPanelVisible) {
+        return false;
+    }
+
+    if (
+        snapshot.historyTab !== state.editor.historyTab ||
+        snapshot.searchInput !== state.editor.historySearchInput ||
+        snapshot.committedSearch !== state.editor.historySearch
+    ) {
+        return false;
+    }
+
+    return (
+        state.editor.historyLoadingMore ||
+        snapshot.renderedLoadingMore ||
+        state.editor.history.length > snapshot.renderedItemCount
+    );
+}
+
+function restoreQueryHistoryScrollState(snapshot) {
+    const scrollNode = shellRefs.view.querySelector('[data-query-history-scroll]');
+
+    if (!(scrollNode instanceof HTMLElement)) {
+        return false;
+    }
+
+    scrollNode.scrollLeft = snapshot.scrollLeft;
+    scrollNode.scrollTop = snapshot.scrollTop;
+    return true;
+}
+
+function buildChartsHistorySignature(state) {
+    if (state.route.name !== 'charts') {
+        return '';
+    }
+
+    const historyVisible = state.editor.historyPanelVisible !== false || !state.charts.selectedHistoryId;
+
+    if (!historyVisible) {
+        return 'charts-history:hidden';
+    }
+
+    const queries = state.charts.queries ?? [];
+
+    if (!queries.length) {
+        if (state.charts.loading) {
+            return 'charts-history:loading-empty';
+        }
+
+        if (state.charts.error) {
+            return `charts-history:error:${state.charts.error.code}:${state.charts.error.message}`;
+        }
+
+        return 'charts-history:empty';
+    }
+
+    return JSON.stringify({
+        tab: state.charts.historyTab ?? 'recent',
+        queries: queries.map(item => [
+            item.id,
+            item.displayTitle,
+            item.previewSql,
+            Boolean(item.isSaved),
+            Array.isArray(item.chartTypes) ? item.chartTypes.join(',') : '',
+        ]),
+    });
+}
+
+function syncChartsHistorySelectionUi(state) {
+    const selectedHistoryId = String(state.charts.selectedHistoryId ?? '');
+    const historyButtons = shellRefs.view.querySelectorAll(
+        '.charts-view__sidebar [data-action="navigate"][data-history-id]',
+    );
+
+    for (const button of historyButtons) {
+        if (!(button instanceof HTMLElement)) {
+            continue;
+        }
+
+        const itemNode = button.closest('[data-charts-history-item]');
+        const isSelected = button.dataset.historyId === selectedHistoryId;
+        const titleNode = button.querySelector('[data-charts-history-title]');
+        const selectionNode = itemNode instanceof HTMLElement ? itemNode : button;
+
+        selectionNode.classList.toggle('border-primary-container/30', isSelected);
+        selectionNode.classList.toggle('bg-surface-container-high', isSelected);
+        selectionNode.classList.toggle('border-outline-variant/10', !isSelected);
+        selectionNode.classList.toggle('bg-surface-container-lowest', !isSelected);
+        selectionNode.classList.toggle('hover:bg-surface-container-high', !isSelected);
+
+        if (titleNode instanceof HTMLElement) {
+            titleNode.classList.toggle('text-primary-container', isSelected);
+            titleNode.classList.toggle('text-on-surface', !isSelected);
+        }
+    }
+
+    return true;
+}
+
+function syncChartsSavedToggleUi(actionNode, nextValue) {
+    const itemNode = actionNode.closest('[data-charts-history-item]');
+
+    actionNode.classList.toggle('is-active', nextValue);
+    actionNode.dataset.nextValue = nextValue ? 'false' : 'true';
+    actionNode.title = nextValue ? 'Remove from saved' : 'Save query';
+
+    const iconNode = actionNode.querySelector('.material-symbols-outlined');
+    if (iconNode instanceof HTMLElement) {
+        iconNode.textContent = nextValue ? 'bookmark' : 'bookmark_add';
+    }
+
+    if (itemNode instanceof HTMLElement) {
+        itemNode.querySelector('[data-charts-saved-badge]')?.toggleAttribute('hidden', !nextValue);
+
+        if (!nextValue && getState().charts.historyTab === 'saved') {
+            itemNode.remove();
+        }
+    }
+
+    const countNode = shellRefs.view.querySelector('[data-charts-history-count]');
+    if (countNode instanceof HTMLElement) {
+        const state = getState();
+        const count =
+            state.charts.historyTab === 'saved'
+                ? (state.charts.queries ?? []).filter(item => item.isSaved).length
+                : (state.charts.queries ?? []).length;
+        countNode.textContent = String(count);
+    }
+}
+
+function patchChartsDetailUi(state) {
+    const chartsView = shellRefs.view.querySelector('.charts-view');
+    const detailNode = chartsView?.querySelector('.charts-view__detail');
+
+    if (!(chartsView instanceof HTMLElement) || !(detailNode instanceof HTMLElement)) {
+        return false;
+    }
+
+    const historyVisible = state.editor.historyPanelVisible !== false || !state.charts.selectedHistoryId;
+    const sidebarNode = chartsView.querySelector('.charts-view__sidebar');
+
+    if (Boolean(sidebarNode) !== historyVisible) {
+        return false;
+    }
+
+    detailNode.innerHTML = renderChartsDetail(state);
+    syncChartsHistorySelectionUi(state);
+    return true;
+}
+
 function readFileAsBase64(file) {
     return new Promise((resolve, reject) => {
         const reader = new FileReader();
@@ -615,6 +845,52 @@ function focusQueryEditorInput() {
     return true;
 }
 
+function focusMediaTaggingTagSearchInput() {
+    const input = document.querySelector('[data-bind="media-tagging-tag-search"]');
+
+    if (!(input instanceof HTMLInputElement)) {
+        return false;
+    }
+
+    input.focus({ preventScroll: true });
+    input.setSelectionRange(input.value.length, input.value.length);
+    return true;
+}
+
+function syncSidebarActiveRoute(routeName) {
+    if (!isMediaTaggingRouteName(routeName)) {
+        return false;
+    }
+
+    const mediaTaggingLink = shellRefs.sidebar.querySelector('a.sidebar-link[data-group="mediaTagging"]');
+    const setupLink = shellRefs.sidebar.querySelector('a.sidebar-sublink[href="#/media-tagging"]');
+    const queueLink = shellRefs.sidebar.querySelector('a.sidebar-sublink[href="#/media-tagging/queue"]');
+
+    if (
+        !(mediaTaggingLink instanceof HTMLAnchorElement) ||
+        !(setupLink instanceof HTMLAnchorElement) ||
+        !(queueLink instanceof HTMLAnchorElement)
+    ) {
+        return false;
+    }
+
+    mediaTaggingLink.classList.add('is-active');
+    setupLink.classList.toggle('is-active', routeName === 'mediaTaggingSetup');
+    queueLink.classList.toggle('is-active', routeName === 'mediaTaggingQueue');
+    return true;
+}
+
+async function applyMediaTaggingAndFocusSearch() {
+    pendingMediaTaggingTagSearchFocus = true;
+    const result = await applyCurrentMediaTaggingSelection();
+
+    if (!result) {
+        pendingMediaTaggingTagSearchFocus = false;
+    }
+
+    return result;
+}
+
 async function handleTableDesignerCsvImport(fileInput) {
     if (!(fileInput instanceof HTMLInputElement)) {
         return;
@@ -656,12 +932,14 @@ async function handleTableDesignerCsvImport(fileInput) {
 
 function renderApp(state) {
     const previousRoutePath = lastRenderedRoutePath;
+    const previousRouteName = lastRenderedRouteName;
     const { main, panel } = resolveView(state);
     const topNavMarkup = renderTopNav(state);
     const sidebarMarkup = renderSidebar(state);
     const statusBarMarkup = renderStatusBar(state);
     const modalMarkup = renderModal(state);
     const toastMarkup = renderToasts(state.toasts);
+    const chartsHistorySignature = buildChartsHistorySignature(state);
     const isLockedRoute = [
         'editor',
         'editorResults',
@@ -679,6 +957,7 @@ function renderApp(state) {
     const mainChanged = main !== lastRenderedMainMarkup;
     const panelChanged = panel !== lastRenderedPanelMarkup;
     const modalChanged = modalMarkup !== lastRenderedModalMarkup;
+    const chartsHistoryChanged = chartsHistorySignature !== lastRenderedChartsHistorySignature;
     const panelOpenChanged = panelOpen !== lastRenderedPanelOpen;
     const lockedRouteChanged = isLockedRoute !== lastRenderedLockedRoute;
     const shellMarkupUnchanged =
@@ -703,6 +982,7 @@ function renderApp(state) {
     }
 
     const focusedInput = captureFocusedInputState();
+    const queryHistoryScrollState = captureQueryHistoryScrollState();
     const isEnteringNewTableDesignerRoute =
         state.route.name === 'tableDesigner' && state.route.params?.isNew && previousRoutePath !== state.route.path;
 
@@ -712,9 +992,20 @@ function renderApp(state) {
         pendingNewTableDesignerAutofocus = false;
     }
 
-    if (mainChanged) {
-        teardownStructureGraph();
+    const canPatchChartsMain =
+        mainChanged && previousRouteName === 'charts' && state.route.name === 'charts' && !chartsHistoryChanged;
+    let mainPatched = false;
+
+    if (canPatchChartsMain) {
         teardownQueryChartRenderer();
+        mainPatched = patchChartsDetailUi(state);
+    }
+
+    if (mainChanged) {
+        if (!mainPatched) {
+            teardownStructureGraph();
+            teardownQueryChartRenderer();
+        }
     }
 
     if (topNavChanged) {
@@ -722,14 +1013,21 @@ function renderApp(state) {
     }
 
     if (sidebarChanged) {
-        shellRefs.sidebar.innerHTML = sidebarMarkup;
+        const sidebarSynced =
+            isMediaTaggingRouteName(previousRouteName) &&
+            isMediaTaggingRouteName(state.route.name) &&
+            syncSidebarActiveRoute(state.route.name);
+
+        if (!sidebarSynced) {
+            shellRefs.sidebar.innerHTML = sidebarMarkup;
+        }
     }
 
     if (statusBarChanged) {
         shellRefs.statusBar.innerHTML = statusBarMarkup;
     }
 
-    if (mainChanged) {
+    if (mainChanged && !mainPatched) {
         shellRefs.view.innerHTML = main;
     }
 
@@ -753,10 +1051,18 @@ function renderApp(state) {
         shellRefs.shell.classList.toggle('panel-open', panelOpen);
     }
 
+    if (shouldRestoreQueryHistoryScroll(queryHistoryScrollState, state)) {
+        restoreQueryHistoryScrollState(queryHistoryScrollState);
+    }
+
     if (pendingQueryEditorFocus && (state.route.name === 'editor' || state.route.name === 'editorResults')) {
         if (focusQueryEditorInput()) {
             pendingQueryEditorFocus = false;
         }
+    } else if (pendingMediaTaggingTagSearchFocus && state.route.name === 'mediaTaggingQueue') {
+        if (focusMediaTaggingTagSearchInput()) {
+            pendingMediaTaggingTagSearchFocus = false;
+        }
     } else if (
         pendingNewTableDesignerAutofocus &&
         state.route.name === 'tableDesigner' &&
@@ -771,6 +1077,7 @@ function renderApp(state) {
     }
 
     lastRenderedRoutePath = state.route.path;
+    lastRenderedRouteName = state.route.name;
     lastRenderedTopNavMarkup = topNavMarkup;
     lastRenderedSidebarMarkup = sidebarMarkup;
     lastRenderedStatusBarMarkup = statusBarMarkup;
@@ -778,6 +1085,7 @@ function renderApp(state) {
     lastRenderedPanelMarkup = panel;
     lastRenderedModalMarkup = modalMarkup;
     lastRenderedToastMarkup = toastMarkup;
+    lastRenderedChartsHistorySignature = chartsHistorySignature;
     lastRenderedPanelOpen = panelOpen;
     lastRenderedLockedRoute = isLockedRoute;
 
@@ -958,6 +1266,20 @@ async function handleAction(actionNode) {
                 );
             }
             return;
+        case 'toggle-charts-query-history-saved':
+            if (actionNode.dataset.historyId) {
+                const nextValue = actionNode.dataset.nextValue === 'true';
+                const updated = await toggleQueryHistorySavedState(actionNode.dataset.historyId, nextValue, {
+                    notify: false,
+                    refresh: false,
+                    toast: false,
+                });
+
+                if (updated) {
+                    syncChartsSavedToggleUi(actionNode, nextValue);
+                }
+            }
+            return;
         case 'toggle-charts-sql-panel':
             toggleChartsSqlPanel();
             return;
@@ -969,6 +1291,11 @@ async function handleAction(actionNode) {
                 setChartsHeightPreset(actionNode.dataset.preset);
             }
             return;
+        case 'set-charts-history-tab':
+            if (actionNode.dataset.tab) {
+                setChartsHistoryTab(actionNode.dataset.tab);
+            }
+            return;
         case 'export-query-chart-png':
             if (actionNode.dataset.chartId && !exportQueryChartAsPng(actionNode.dataset.chartId)) {
                 showToast('The selected chart is not ready for PNG export.', 'alert');
@@ -1071,7 +1398,7 @@ async function handleAction(actionNode) {
             await resetSkippedMediaTaggingItems();
             return;
         case 'apply-media-tagging':
-            await applyCurrentMediaTaggingSelection();
+            await applyMediaTaggingAndFocusSearch();
             return;
         case 'toggle-media-tagging-current-media':
             if (actionNode instanceof HTMLButtonElement) {
@@ -1080,6 +1407,20 @@ async function handleAction(actionNode) {
                 setMediaTaggingWorkflowMediaDetailsVisible(nextValue, { notify: false });
             }
             return;
+        case 'rotate-media-tagging-current-media': {
+            const currentRotation = getState().mediaTagging.workflowMediaRotationDegrees ?? 0;
+            const command = actionNode.dataset.rotationCommand;
+            const nextRotation =
+                command === 'left'
+                    ? currentRotation - 90
+                    : command === 'right'
+                      ? currentRotation + 90
+                      : 0;
+
+            syncMediaTaggingMediaRotationUi(actionNode, nextRotation);
+            setMediaTaggingWorkflowMediaRotationDegrees(nextRotation, { notify: false });
+            return;
+        }
         case 'open-media-tagging-current-in-data': {
             const currentState = getState();
             const mediaTableName = currentState.mediaTagging.draft?.mediaTable ?? '';
@@ -1093,6 +1434,17 @@ async function handleAction(actionNode) {
             router.navigate(`/data/${encodeURIComponent(mediaTableName)}`);
             return;
         }
+        case 'open-media-tagging-current-in-structure': {
+            const mediaTableName = String(getState().mediaTagging.draft?.mediaTable ?? '').trim();
+
+            if (!mediaTableName) {
+                showToast('The current media table could not be opened in Structure.', 'alert');
+                return;
+            }
+
+            router.navigate(`/structure/${encodeURIComponent(mediaTableName)}`);
+            return;
+        }
         case 'import-table-designer-csv': {
             const fileInput = document.querySelector('[data-bind="table-designer-import-file"]');
 
@@ -1149,6 +1501,19 @@ async function handleAction(actionNode) {
     }
 }
 
+function isMediaTaggingMenuActive(routeName) {
+    return routeName === 'mediaTaggingSetup' || routeName === 'mediaTaggingQueue';
+}
+
+function canApplyMediaTaggingShortcut(state) {
+    return (
+        isMediaTaggingMenuActive(state.route.name) &&
+        Boolean(state.mediaTagging.workflow?.currentItem) &&
+        !state.mediaTagging.applying &&
+        (state.mediaTagging.selectedTagKeys?.length ?? 0) > 0
+    );
+}
+
 document.addEventListener('click', event => {
     const actionNode = event.target.closest('[data-action]');
 
@@ -1161,6 +1526,7 @@ document.addEventListener('click', event => {
 
 document.addEventListener('keydown', event => {
     const target = event.target;
+    const state = getState();
 
     // Handle Enter key in tag form fields to trigger create tag
     if (
@@ -1181,6 +1547,20 @@ document.addEventListener('keydown', event => {
         return;
     }
 
+    if (
+        (event.key === 'Enter' || event.code === 'Enter' || event.code === 'NumpadEnter') &&
+        event.shiftKey &&
+        !event.altKey &&
+        !event.ctrlKey &&
+        !event.metaKey &&
+        !event.defaultPrevented &&
+        canApplyMediaTaggingShortcut(state)
+    ) {
+        event.preventDefault();
+        void applyMediaTaggingAndFocusSearch();
+        return;
+    }
+
     if (
         event.key === 'Enter' &&
         event.shiftKey &&
@@ -1204,8 +1584,6 @@ document.addEventListener('keydown', event => {
         return;
     }
 
-    const state = getState();
-
     if (state.modal) {
         event.preventDefault();
         closeModal();

package/frontend/js/components/modal.js

@@ -481,13 +481,22 @@ function renderChartEditorForm(modal, state) {
           bind: "query-chart-draft-config:y_column",
         })}
       </div>
-      <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+      <div class="grid grid-cols-1 gap-4 md:grid-cols-4">
+        ${renderSelectField({
+          label: "Sort By",
+          value: draft.config?.sort_by ?? "y",
+          options: [
+            { value: "x", label: "X column" },
+            { value: "y", label: "Y value" },
+          ],
+          bind: "query-chart-draft-config:sort_by",
+        })}
         ${renderSelectField({
           label: "Sort Direction",
-          value: draft.config?.sort_direction ?? "asc",
+          value: draft.config?.sort_direction ?? "desc",
           options: [
-            { value: "asc", label: "Ascending" },
-            { value: "desc", label: "Descending" },
+            { value: "asc", label: "Ascending / smallest first" },
+            { value: "desc", label: "Descending / largest first" },
           ],
           bind: "query-chart-draft-config:sort_direction",
         })}

package/frontend/js/components/queryHistoryDetail.js

@@ -23,6 +23,18 @@ function canOpenQueryHistoryInCharts(item) {
   return Boolean(item?.chartsEligible);
 }
 
+function getQueryTypeTone(queryType) {
+  if (queryType === "select" || queryType === "update") {
+    return "success";
+  }
+
+  if (queryType === "pragma") {
+    return "primary";
+  }
+
+  return "muted";
+}
+
 function renderRunItem(run) {
   return `
     <div class="border border-outline-variant/10 bg-surface-container px-3 py-3">
@@ -135,9 +147,9 @@ export function renderQueryHistoryDetail({
           </button>
         </div>
         <div class="mt-4 flex flex-wrap gap-2">
-          ${renderStatusBadge(item.queryType, item.isDestructive ? "alert" : "primary")}
+          ${renderStatusBadge(item.queryType, getQueryTypeTone(item.queryType))}
           ${item.isSaved ? renderStatusBadge("saved", "primary") : ""}
-          ${item.isDestructive ? renderStatusBadge("destructive", "alert") : ""}
+          ${item.isDestructive ? renderStatusBadge("destructive", "warning") : ""}
           ${item.lastRun ? renderStatusBadge(item.lastRun.status, item.lastRun.status === "error" ? "alert" : "success") : ""}
         </div>
       </div>

package/frontend/js/components/queryHistoryPanel.js

@@ -4,12 +4,8 @@ import {
 } from "../utils/format.js";
 import { renderStatusBadge } from "./badges.js";
 
-function getQueryTypeTone(queryType, isDestructive) {
-  if (isDestructive) {
-    return "alert";
-  }
-
-  if (queryType === "select") {
+function getQueryTypeTone(queryType) {
+  if (queryType === "select" || queryType === "update") {
     return "success";
   }
 
@@ -39,9 +35,9 @@ export function renderQueryHistoryListItem(item, activeHistoryId, selectedHistor
           <span class="truncate font-headline text-sm font-bold uppercase tracking-tight text-on-surface">
             ${escapeHtml(item.displayTitle)}
           </span>
-          ${renderStatusBadge(item.queryType, getQueryTypeTone(item.queryType, item.isDestructive))}
+          ${renderStatusBadge(item.queryType, getQueryTypeTone(item.queryType))}
           ${item.isSaved ? renderStatusBadge("saved", "primary") : ""}
-          ${item.isDestructive ? renderStatusBadge("destructive", "alert") : ""}
+          ${item.isDestructive ? renderStatusBadge("destructive", "warning") : ""}
         </div>
         <p class="query-history-sql-preview mt-2 text-left font-mono text-xs leading-5 text-on-surface-variant/75">
           ${escapeHtml(item.previewSql)}
@@ -143,6 +139,7 @@ export function renderQueryHistoryPanel({
   error = null,
   activeTab = "recent",
   search = "",
+  committedSearch = "",
   total = 0,
   hasMore = false,
   activeHistoryId = null,
@@ -180,7 +177,14 @@ export function renderQueryHistoryPanel({
           />
         </label>
       </div>
-      <div class="custom-scrollbar min-h-0 flex-1 overflow-auto px-3 py-3">
+      <div
+        class="custom-scrollbar min-h-0 flex-1 overflow-auto px-3 py-3"
+        data-query-history-committed-search="${escapeHtml(committedSearch)}"
+        data-query-history-loading-more="${loadingMore ? "true" : "false"}"
+        data-query-history-search="${escapeHtml(search)}"
+        data-query-history-scroll
+        data-query-history-tab="${escapeHtml(activeTab)}"
+      >
         ${
           error
             ? `