sqlite-hub 0.9.13 → 0.10.0

package/frontend/js/api.js

@@ -385,6 +385,13 @@ export function updateDataTableRow(tableName, payload) {
   });
 }
 
+export function previewDataTableRowUpdate(tableName, payload) {
+  return request(`/api/data/${encodeURIComponent(tableName)}/rows/preview-update`, {
+    method: "POST",
+    body: payload,
+  });
+}
+
 export function deleteDataTableRow(tableName, payload) {
   return request(`/api/data/${encodeURIComponent(tableName)}/rows`, {
     method: "DELETE",

package/frontend/js/app.js

@@ -49,6 +49,8 @@ import {
     openEditConnectionModal,
     openCreateQueryChartModal,
     openEditQueryChartModal,
+    openDataRowUpdatePreview,
+    openEditorRowUpdatePreview,
     refreshCurrentRoute,
     refreshMediaTaggingPreview,
     removeConnection,
@@ -66,6 +68,8 @@ import {
     selectStructureEntry,
     setTableDesignerSearchQuery,
     setTableDesignerSqlPreviewVisibility,
+    setDataTableSearchQuery,
+    setStructureTableSearchQuery,
     toggleStructureTablesPanel,
     setDataPage,
     setDataPageSize,
@@ -82,6 +86,7 @@ import {
     submitCreateMediaTaggingTagTable,
     submitCreateMediaTaggingMappingTable,
     submitDeleteQueryHistoryConfirmation,
+    submitRowUpdatePreviewConfirmation,
     setQueryHistoryPanelVisibility,
     sortDataTableByColumn,
     sortEditorResultsByColumn,
@@ -100,8 +105,6 @@ import {
     submitCreateConnection,
     createCurrentMediaTag,
     submitDeleteRowConfirmation,
-    submitDataRowUpdate,
-    submitEditorRowUpdate,
     submitEditConnection,
     submitImportSql,
     submitOpenConnection,
@@ -1775,6 +1778,16 @@ document.addEventListener('input', event => {
         return;
     }
 
+    if (bindNode.dataset.bind === 'data-table-search') {
+        setDataTableSearchQuery(bindNode.value);
+        return;
+    }
+
+    if (bindNode.dataset.bind === 'structure-table-search') {
+        setStructureTableSearchQuery(bindNode.value);
+        return;
+    }
+
     if (bindNode.dataset.bind === 'table-designer-search') {
         setTableDesignerSearchQuery(bindNode.value);
         return;
@@ -2055,6 +2068,9 @@ document.addEventListener('submit', async event => {
         case 'delete-query-history-confirm':
             await submitDeleteQueryHistoryConfirmation();
             return;
+        case 'apply-row-update-preview':
+            await submitRowUpdatePreviewConfirmation();
+            return;
         case 'create-media-tagging-tag-table':
             await submitCreateMediaTaggingTagTable();
             return;
@@ -2083,7 +2099,7 @@ document.addEventListener('submit', async event => {
                 }
             }
 
-            await submitDataRowUpdate(String(formData.get('rowIndex') ?? ''), values, rowIdentity);
+            await openDataRowUpdatePreview(String(formData.get('rowIndex') ?? ''), values, rowIdentity);
             return;
         }
         case 'save-editor-row': {
@@ -2097,7 +2113,7 @@ document.addEventListener('submit', async event => {
                 values[key.slice('field:'.length)] = String(value ?? '');
             }
 
-            await submitEditorRowUpdate(String(formData.get('rowIndex') ?? ''), values);
+            await openEditorRowUpdatePreview(String(formData.get('rowIndex') ?? ''), values);
             return;
         }
         case 'save-query-history-title': {

package/frontend/js/components/modal.js

@@ -425,6 +425,98 @@ function renderDeleteRowConfirmForm(modal) {
   ].join("");
 }
 
+function renderRowUpdatePreviewForm(modal) {
+  const preview = modal.preview ?? {};
+  const changes = preview.changes ?? [];
+  const params = preview.params ?? [];
+  const warnings = preview.warnings ?? [];
+  const changesMarkup = changes.length
+    ? [
+        '<div class="overflow-hidden border border-outline-variant/10">',
+        '<table class="w-full text-left text-sm">',
+        '<thead class="bg-surface-container-highest text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">',
+        '<tr><th class="px-3 py-2">Column</th><th class="px-3 py-2">Old</th><th class="px-3 py-2">New</th></tr>',
+        '</thead><tbody class="divide-y divide-outline-variant/10">',
+        changes
+          .map(
+            change => `
+              <tr>
+                <td class="px-3 py-2 font-mono text-xs text-primary-container">${escapeHtml(change.column)}</td>
+                <td class="px-3 py-2 text-on-surface-variant/70">${escapeHtml(change.oldValue)}</td>
+                <td class="px-3 py-2 text-on-surface">${escapeHtml(change.newValue)}</td>
+              </tr>
+            `,
+          )
+          .join(''),
+        '</tbody></table></div>',
+      ].join('')
+    : '<div class="border border-outline-variant/10 bg-surface-container-low px-4 py-3 text-sm text-on-surface-variant/65">No changed values were detected.</div>';
+  const paramsMarkup = params.length
+    ? `
+        <div class="space-y-2">
+          <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">Parameters</div>
+          <div class="space-y-2">
+            ${params
+              .map(
+                param => `
+                  <div class="flex gap-3 border border-outline-variant/10 bg-surface-container-low px-3 py-2 text-xs">
+                    <span class="font-mono text-primary-container">$${escapeHtml(param.index)}</span>
+                    <span class="min-w-0 break-words text-on-surface">${escapeHtml(param.value)}</span>
+                  </div>
+                `,
+              )
+              .join('')}
+          </div>
+        </div>
+      `
+    : '';
+  const warningsMarkup = warnings.length
+    ? `
+        <div class="space-y-2">
+          ${warnings
+            .map(
+              warning => `
+                <div class="border border-primary-container/20 bg-primary-container/10 px-4 py-3 text-sm text-on-surface">
+                  ${escapeHtml(warning)}
+                </div>
+              `,
+            )
+            .join('')}
+        </div>
+      `
+    : '';
+
+  return `
+    <form class="space-y-5" data-form="apply-row-update-preview">
+      <div class="space-y-2">
+        <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
+          ${escapeHtml(modal.tableName ?? 'Table Row')}
+        </div>
+        <p class="text-sm leading-7 text-on-surface-variant/70">
+          Review the SQL and changed values before applying this row update.
+        </p>
+      </div>
+      ${warningsMarkup}
+      <div class="space-y-2">
+        <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">SQL Preview</div>
+        ${renderSqlPreviewField(preview.sql ?? '', 'sql-highlight-shell--compact')}
+      </div>
+      <div class="space-y-2">
+        <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">Changed Values</div>
+        ${changesMarkup}
+      </div>
+      ${paramsMarkup}
+      ${renderError(modal.error)}
+      <div class="flex items-center justify-end gap-3 pt-2">
+        <button class="standard-button" data-action="close-modal" type="button">Cancel</button>
+        <button class="signature-button" type="submit">
+          ${modal.submitting ? 'Applying...' : 'Apply Changes'}
+        </button>
+      </div>
+    </form>
+  `;
+}
+
 function renderChartColumnOptions(analysis, { allowEmpty = false, includeNumericHint = false } = {}) {
   const options = allowEmpty ? [{ value: "", label: "None" }] : [];
 
@@ -869,6 +961,11 @@ export function renderModal(state) {
       title: "Delete Row",
       body: renderDeleteRowConfirmForm(modal),
     },
+    "row-update-preview": {
+      eyebrow: "Mutation // Review row update",
+      title: "Review Update",
+      body: renderRowUpdatePreviewForm(modal),
+    },
     "chart-editor": {
       eyebrow: "Charts // Configure query-based ECharts panel",
       title: modal.draft?.mode === "edit" ? "Edit Chart" : "New Chart",
@@ -904,7 +1001,7 @@ export function renderModal(state) {
 
   return `
     <div class="fixed inset-0 z-50 flex items-center justify-center bg-background/85 px-4 backdrop-blur-sm">
-      <div class="w-full ${modal.kind === "chart-editor" ? "max-w-3xl" : "max-w-xl"} border border-outline-variant/20 bg-surface-container shadow-[0_24px_80px_rgba(0,0,0,0.45)]">
+      <div class="w-full ${modal.kind === "chart-editor" || modal.kind === "row-update-preview" ? "max-w-3xl" : "max-w-xl"} border border-outline-variant/20 bg-surface-container shadow-[0_24px_80px_rgba(0,0,0,0.45)]">
         <div class="flex items-start justify-between gap-4 border-b border-outline-variant/10 bg-surface-container-low px-6 py-5">
           <div>
             <div class="text-[10px] font-mono uppercase tracking-[0.26em] text-primary-container/70">

package/frontend/js/components/queryEditor.js

@@ -38,7 +38,6 @@ function renderEditorSurface({ query }) {
 
 export function renderQueryEditor({
   query,
-  title,
   executing = false,
   exporting = false,
   historyLoading = false,
@@ -48,13 +47,7 @@ export function renderQueryEditor({
 }) {
   const secondaryButtonClass = "standard-button";
   const left = `
-    <div class="flex items-center gap-2 bg-surface-container-lowest px-3 py-1">
-      <span class="material-symbols-outlined text-xs text-[#FCE300]">database</span>
-      <span class="text-[10px] font-mono uppercase tracking-widest text-on-surface-variant">${escapeHtml(
-        title
-      )}</span>
-    </div>
-    <div class="hidden items-center gap-2 text-[10px] font-mono uppercase tracking-widest text-on-surface-variant/40 md:flex">
+    <div class="flex items-center gap-2 text-[10px] font-mono uppercase tracking-widest text-on-surface-variant/40">
       <span class="material-symbols-outlined text-xs">history</span>
       ${historyLoading ? "Loading history..." : `${historyTotal} queries tracked`}
     </div>

package/frontend/js/store.js

@@ -38,6 +38,7 @@ 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',
@@ -103,6 +104,23 @@ function storeBoolean(key, value) {
     }
 }
 
+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);
@@ -193,6 +211,7 @@ const state = {
         sortColumn: null,
         sortDirection: null,
         searchQuery: '',
+        tableSearchQuery: '',
         searchColumn: '',
         selectedRowIndex: null,
         selectedRow: null,
@@ -202,7 +221,7 @@ const state = {
         saveError: null,
     },
     editor: {
-        sqlText: '',
+        sqlText: readStoredString(UI_PREFERENCE_STORAGE_KEYS.sqlEditorQueryDraft),
         editorPanelVisible: readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.sqlEditorEditorVisible, true),
         history: [],
         historyPanelVisible: readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.sqlEditorHistoryVisible, true),
@@ -271,6 +290,7 @@ const state = {
         selectedName: null,
         detail: null,
         tablesVisible: readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.structureTablesVisible, true),
+        tableSearchQuery: '',
         loading: false,
         detailLoading: false,
         error: null,
@@ -527,6 +547,10 @@ function resetDataBrowserSearch() {
     state.dataBrowser.searchColumn = '';
 }
 
+function resetDataBrowserTableSearch() {
+    state.dataBrowser.tableSearchQuery = '';
+}
+
 function resetDataBrowserSort() {
     state.dataBrowser.sortColumn = null;
     state.dataBrowser.sortDirection = null;
@@ -707,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;
@@ -951,6 +979,7 @@ function setMissingDatabaseState() {
     state.dataBrowser.selectedTable = null;
     state.dataBrowser.table = null;
     state.dataBrowser.page = 1;
+    resetDataBrowserTableSearch();
     resetDataBrowserSort();
     resetDataBrowserSearch();
     clearDataBrowserRowSelectionState();
@@ -964,6 +993,7 @@ function setMissingDatabaseState() {
     state.structure.data = null;
     state.structure.detail = null;
     state.structure.tablesVisible = readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.structureTablesVisible, true);
+    state.structure.tableSearchQuery = '';
     state.structure.error = error;
 
     state.tableDesigner.loading = false;
@@ -1919,6 +1949,7 @@ function invalidateDatabaseCaches() {
     state.dataBrowser.selectedTable = null;
     state.dataBrowser.table = null;
     state.dataBrowser.page = 1;
+    resetDataBrowserTableSearch();
     resetDataBrowserSearch();
     clearDataBrowserRowSelectionState();
     state.dataBrowser.pendingOpenRow = null;
@@ -1939,6 +1970,7 @@ function invalidateDatabaseCaches() {
     state.structure.data = null;
     state.structure.detail = null;
     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;
@@ -2356,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();
@@ -2623,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();
@@ -2631,6 +2750,7 @@ export function setCurrentQuery(query) {
 
 export function clearCurrentQuery() {
     state.editor.sqlText = '';
+    storeString(UI_PREFERENCE_STORAGE_KEYS.sqlEditorQueryDraft, '');
     state.editor.result = null;
     state.editor.lastExecutedSql = '';
     resetEditorResultSort();
@@ -2696,6 +2816,8 @@ export async function executeCurrentQuery() {
         return true;
     } catch (error) {
         state.editor.error = normalizeError(error);
+        state.editor.activeTab = 'messages';
+        storeEditorActiveTab('messages');
         await refreshQueryHistoryState();
         return false;
     } finally {
@@ -2819,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;
 }
@@ -2926,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);
 
@@ -3577,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');
@@ -3601,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;
@@ -3654,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');
@@ -3688,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;
@@ -3767,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;
@@ -3988,12 +4154,12 @@ export function getQueryMessages(snapshot = state) {
 
     if (snapshot.editor.error) {
         return [
-            ...queryMessages,
             {
                 tone: 'alert',
                 label: snapshot.editor.error.code,
                 value: snapshot.editor.error.message,
             },
+            ...queryMessages,
         ];
     }
 
@@ -4008,7 +4174,6 @@ export function getQueryMessages(snapshot = state) {
     }
 
     return [
-        ...queryMessages,
         ...snapshot.editor.result.statements.map(statement => ({
             tone: statement.kind === 'resultSet' ? 'success' : inferStatusTone(statement.keyword),
             label: `${statement.keyword} #${statement.index + 1}`,
@@ -4017,6 +4182,7 @@ export function getQueryMessages(snapshot = state) {
                     ? `${statement.rowCount} row(s) returned.`
                     : `${statement.changes} row(s) affected.`,
         })),
+        ...queryMessages,
     ];
 }
 

package/frontend/js/views/data.js

@@ -16,8 +16,37 @@ function getSelectedRow(state) {
     return state.dataBrowser.table?.rows?.[rowIndex] ?? null;
 }
 
+function getFilteredTables(tables, searchQuery) {
+    const normalizedSearch = String(searchQuery ?? '')
+        .trim()
+        .toLowerCase();
+
+    if (!normalizedSearch) {
+        return tables;
+    }
+
+    return tables.filter(table => table.name.toLowerCase().includes(normalizedSearch));
+}
+
+function renderDataTableSearch(state) {
+    return `
+      <label class="table-designer-sidebar__search">
+        <span class="material-symbols-outlined text-sm text-on-surface-variant/55">search</span>
+        <input
+          class="table-designer-sidebar__search-input"
+          data-bind="data-table-search"
+          placeholder="Search tables..."
+          spellcheck="false"
+          type="search"
+          value="${escapeHtml(state.dataBrowser.tableSearchQuery ?? '')}"
+        />
+      </label>
+    `;
+}
+
 function renderTableList(state) {
     const tables = state.dataBrowser.tables ?? [];
+    const filteredTables = getFilteredTables(tables, state.dataBrowser.tableSearchQuery);
     const activeName = state.dataBrowser.selectedTable;
 
     if (state.dataBrowser.loading && !tables.length) {
@@ -39,10 +68,18 @@ function renderTableList(state) {
     `;
     }
 
+    if (!filteredTables.length) {
+        return `
+      <div class="px-6 py-6 text-sm text-on-surface-variant/55">
+        No tables match the current search.
+      </div>
+    `;
+    }
+
     return `
     <div class="custom-scrollbar flex-1 overflow-auto px-4 py-4">
       <div class="space-y-2">
-        ${tables
+        ${filteredTables
             .map(
                 table => `
               <button
@@ -556,6 +593,7 @@ export function renderDataView(state) {
                           total ${escapeHtml(formatNumber(state.dataBrowser.tables.length))}
                         </div>
                       </div>
+                      ${renderDataTableSearch(state)}
                       ${renderTableList(state)}
                     </aside>
                   `

package/frontend/js/views/editor.js

@@ -4,7 +4,7 @@ import { renderQueryHistoryDetail } from '../components/queryHistoryDetail.js';
 import { renderQueryHistoryPanel } from '../components/queryHistoryPanel.js';
 import { renderRowEditorPanel } from '../components/rowEditorPanel.js';
 import { renderQueryResultsPane } from '../components/queryResults.js';
-import { getCurrentConnection, getQueryMessages, getQueryPerformance } from '../store.js';
+import { getQueryMessages, getQueryPerformance } from '../store.js';
 import { escapeHtml, formatBytes, formatCellValue, formatExecutionTimeMs, formatNumber, isBlobPreview } from '../utils/format.js';
 
 function renderMissingDatabase() {
@@ -244,7 +244,6 @@ function renderResultsSurface(state, isResultsRoute) {
 }
 
 export function renderEditorView(state, { isResultsRoute = false } = {}) {
-    const connection = getCurrentConnection(state);
     const editorSectionClass = state.editor.editorPanelVisible ? 'min-h-[27.5%] max-h-[60%]' : 'flex-none';
     const resultsSectionClass = 'flex-1';
 
@@ -261,7 +260,6 @@ export function renderEditorView(state, { isResultsRoute = false } = {}) {
                 historyTotal: state.editor.historyTotal,
                 editorVisible: state.editor.editorPanelVisible,
                 historyVisible: state.editor.historyPanelVisible,
-                title: connection?.label ?? 'SQLite Query Workspace',
             })}
           </section>
           <section class="${resultsSectionClass} flex min-h-0 min-w-0 flex-col overflow-hidden">