sqlite-hub 0.9.12 → 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,
@@ -75,12 +79,14 @@ import {
     setCurrentQuery,
     setChartsHeightPreset,
     setChartsHistoryTab,
+    setChartsHistoryPanelVisibility,
     setEditorPanelVisibility,
     setEditorTab,
     submitDeleteChartConfirmation,
     submitCreateMediaTaggingTagTable,
     submitCreateMediaTaggingMappingTable,
     submitDeleteQueryHistoryConfirmation,
+    submitRowUpdatePreviewConfirmation,
     setQueryHistoryPanelVisibility,
     sortDataTableByColumn,
     sortEditorResultsByColumn,
@@ -99,8 +105,6 @@ import {
     submitCreateConnection,
     createCurrentMediaTag,
     submitDeleteRowConfirmation,
-    submitDataRowUpdate,
-    submitEditorRowUpdate,
     submitEditConnection,
     submitImportSql,
     submitOpenConnection,
@@ -163,10 +167,47 @@ let pendingNewTableDesignerAutofocus = false;
 let pendingQueryEditorFocus = false;
 let pendingMediaTaggingTagSearchFocus = false;
 
+const APP_TITLE = 'SQLite Hub';
+const ROUTE_TITLE_SEGMENTS = {
+    connections: 'Connections',
+    overview: 'Overview',
+    data: 'Data',
+    structure: 'Structure',
+    editor: 'SQL Editor',
+    editorResults: 'SQL Editor',
+    charts: 'Charts',
+    tableDesigner: 'Table Designer',
+    mediaTaggingSetup: 'Media Tagging',
+    mediaTaggingQueue: 'Tagging Queue',
+    settings: 'Settings',
+    notFound: 'Not Found',
+};
+
 function invalidateMainRenderCache() {
     lastRenderedMainMarkup = null;
 }
 
+function isSqlEditorRouteName(routeName) {
+    return routeName === 'editor' || routeName === 'editorResults';
+}
+
+function resolveDocumentTitle(state) {
+    if (isSqlEditorRouteName(state.route.name) && state.editor.executing) {
+        return `${APP_TITLE} | Running`;
+    }
+
+    const segment = ROUTE_TITLE_SEGMENTS[state.route.name];
+    return segment ? `${APP_TITLE} | ${segment}` : APP_TITLE;
+}
+
+function syncDocumentTitle(state) {
+    const nextTitle = resolveDocumentTitle(state);
+
+    if (document.title !== nextTitle) {
+        document.title = nextTitle;
+    }
+}
+
 function isMediaTaggingRouteName(routeName) {
     return routeName === 'mediaTaggingSetup' || routeName === 'mediaTaggingQueue';
 }
@@ -589,7 +630,7 @@ function buildChartsHistorySignature(state) {
         return '';
     }
 
-    const historyVisible = state.editor.historyPanelVisible !== false || !state.charts.selectedHistoryId;
+    const historyVisible = state.charts.historyPanelVisible !== false || !state.charts.selectedHistoryId;
 
     if (!historyVisible) {
         return 'charts-history:hidden';
@@ -691,7 +732,7 @@ function patchChartsDetailUi(state) {
         return false;
     }
 
-    const historyVisible = state.editor.historyPanelVisible !== false || !state.charts.selectedHistoryId;
+    const historyVisible = state.charts.historyPanelVisible !== false || !state.charts.selectedHistoryId;
     const sidebarNode = chartsView.querySelector('.charts-view__sidebar');
 
     if (Boolean(sidebarNode) !== historyVisible) {
@@ -1033,6 +1074,8 @@ async function handleTableDesignerCsvImport(fileInput) {
 }
 
 function renderApp(state) {
+    syncDocumentTitle(state);
+
     const previousRoutePath = lastRenderedRoutePath;
     const previousRouteName = lastRenderedRouteName;
     const { main, panel } = resolveView(state);
@@ -1208,7 +1251,8 @@ const router = createRouter(route => {
 
 async function executeEditorQueryAndNavigate() {
     const success = await executeCurrentQuery();
-    router.navigate(success ? '/editor/results' : '/editor');
+    const activeTab = getState().editor.activeTab;
+    router.navigate(success && activeTab === 'results' ? '/editor/results' : '/editor');
 }
 
 async function handleAction(actionNode) {
@@ -1337,9 +1381,15 @@ async function handleAction(actionNode) {
             }
             return;
         case 'toggle-query-history-panel':
-            setQueryHistoryPanelVisibility(
-                actionNode.dataset.nextValue ? actionNode.dataset.nextValue === 'true' : undefined,
-            );
+            if (getState().route.name === 'charts') {
+                setChartsHistoryPanelVisibility(
+                    actionNode.dataset.nextValue ? actionNode.dataset.nextValue === 'true' : undefined,
+                );
+            } else {
+                setQueryHistoryPanelVisibility(
+                    actionNode.dataset.nextValue ? actionNode.dataset.nextValue === 'true' : undefined,
+                );
+            }
             return;
         case 'toggle-editor-panel':
             setEditorPanelVisibility(
@@ -1357,7 +1407,8 @@ async function handleAction(actionNode) {
         case 'run-query-history':
             if (actionNode.dataset.historyId) {
                 const success = await runQueryHistoryItem(actionNode.dataset.historyId);
-                router.navigate(success ? '/editor/results' : '/editor');
+                const activeTab = getState().editor.activeTab;
+                router.navigate(success && activeTab === 'results' ? '/editor/results' : '/editor');
             }
             return;
         case 'toggle-query-history-saved':
@@ -1727,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;
@@ -2007,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;
@@ -2035,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': {
@@ -2049,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/components/structureGraph.js

@@ -6,6 +6,33 @@ let cytoscapeFactory = null;
 let currentGraph = null;
 let mountVersion = 0;
 let persistedGraphState = null;
+const STRUCTURE_INSPECTOR_VISIBLE_STORAGE_KEY = 'sqlite_hub_structure_inspector_visible';
+
+function readStoredInspectorHidden() {
+    try {
+        const value = globalThis.localStorage?.getItem(STRUCTURE_INSPECTOR_VISIBLE_STORAGE_KEY);
+
+        if (value === 'true') {
+            return false;
+        }
+
+        if (value === 'false') {
+            return true;
+        }
+
+        return false;
+    } catch {
+        return false;
+    }
+}
+
+function storeInspectorHidden(hidden) {
+    try {
+        globalThis.localStorage?.setItem(STRUCTURE_INSPECTOR_VISIBLE_STORAGE_KEY, String(!hidden));
+    } catch {
+        // Ignore unavailable browser storage; the in-memory setting still applies.
+    }
+}
 
 function getTableId(tableName) {
     return `table:${tableName}`;
@@ -690,6 +717,7 @@ export function setupToolbar(cy) {
                 break;
             case 'toggle-inspector':
                 currentGraph.inspectorHidden = !currentGraph.inspectorHidden;
+                storeInspectorHidden(currentGraph.inspectorHidden);
                 updateInspectorToggleButton();
                 syncInspectorLayout();
                 break;
@@ -765,7 +793,7 @@ export async function mountStructureGraph(snapshot) {
         resizeHandler: null,
         openDataButton: null,
         inspectorToggleButton: null,
-        inspectorHidden: cachedState?.inspectorHidden ?? false,
+        inspectorHidden: cachedState?.inspectorHidden ?? readStoredInspectorHidden(),
         persistStateOnDestroy: true,
         selectedTableName: null,
     };