feat: implement 5 improvements from closed PRs (#78, #85, #95, #104, #105) (#108)

1. getNodeFs helper (#78): Extract repeated `typeof require === 'function' ? require('fs') : undefined` into reusable `getNodeFs()` in sqlite-db.ts (3 call sites).

2. Worker logging via RPC (#85): Route worker console.* through RPC LogEnvelope to VS Code output channel instead of losing logs in the worker thread.

3. Native schema fetch optimization (#95): Replace 3 parallel query() calls with single queryBatch() in nativeWorker.ts, with proper error handling instead of optional chaining.

4. Webview state serialization (#104): Replace retainContextWhenHidden with setState/getState persistence. Includes scroll position restoration after grid render, dateFormat/cellEditBehavior state fields, and all UI control value restoration.

5. JSON Patch SQL optimization (#105): Use SQLite's native json_patch() when available (probed at construction time), falling back to JS-side applyMergePatch. Uses COALESCE for NULL column handling.

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: zknpr

core/ui/modules/api.js

@@ -5,6 +5,25 @@
 
 const vscodeApi = typeof acquireVsCodeApi !== 'undefined' ? acquireVsCodeApi() : null;
 
+/**
+ * Get saved state from VS Code's webview state persistence.
+ * @returns {Object|undefined} Previously saved state, or undefined if none
+ */
+export function getVsCodeState() {
+    return vscodeApi ? vscodeApi.getState() : undefined;
+}
+
+/**
+ * Save state to VS Code's webview state persistence.
+ * This survives tab switches when retainContextWhenHidden is false.
+ * @param {Object} stateObj - State to save
+ */
+export function saveVsCodeState(stateObj) {
+    if (vscodeApi) {
+        vscodeApi.setState(stateObj);
+    }
+}
+
 // Default RPC timeout in milliseconds (60s to accommodate large blob operations)
 const RPC_TIMEOUT_MS = 60000;
 

core/ui/modules/grid.js

@@ -1,7 +1,7 @@
 /**
  * Data Grid Rendering and Logic
  */
-import { state } from './state.js';
+import { state, persistState } from './state.js';
 import { backendApi } from './api.js';
 import { escapeHtml, escapeIdentifier, formatCellValue, formatCellValueAsText } from './utils.js';
 import { updateStatus, showLoading, showErrorState, updateToolbarButtons } from './ui.js';
@@ -192,6 +192,13 @@ export function initGridInteraction() {
             }
         }
     });
+
+    // Track scroll position for state persistence
+    container.addEventListener('scroll', () => {
+        state.scrollPosition.left = container.scrollLeft;
+        state.scrollPosition.top = container.scrollTop;
+        persistState();
+    }, { passive: true });
 }
 
 function resolveRowIdType(idStr) {
@@ -727,20 +734,23 @@ export function onFilterChange() {
         state.filterQuery = document.getElementById('filterInput').value;
         state.currentPageIndex = 0;
         loadTableData();
+        persistState();
     }, 300);
 }
 
 export function onPageSizeChange() {
     state.rowsPerPage = parseInt(document.getElementById('pageSizeSelect').value, 10);
     state.currentPageIndex = 0;
     loadTableData();
+    persistState();
 }
 
 export function onDateFormatChange() {
     const select = document.getElementById('dateFormatSelect');
     if (select) {
         state.dateFormat = select.value;
         renderDataGrid();
+        persistState();
     }
 }
 
@@ -760,6 +770,7 @@ export function onColumnSort(columnName) {
         state.sortAscending = true;
     }
     loadTableData();
+    persistState();
 }
 
 export function applyColumnFilter(columnName) {
@@ -899,6 +910,7 @@ export function toggleColumnPin(event, columnName) {
         state.pinnedColumns.add(columnName);
     }
     renderDataGrid();
+    persistState();
 }
 
 // Row Pinning
@@ -910,6 +922,7 @@ export function toggleRowPin(event, rowId) {
         state.pinnedRowIds.add(rowId);
     }
     renderDataGrid();
+    persistState();
 }
 
 // Column Resizing

core/ui/modules/sidebar.js

@@ -1,7 +1,7 @@
 /**
  * Sidebar and Schema Logic
  */
-import { state } from './state.js';
+import { state, persistState } from './state.js';
 import { backendApi } from './api.js';
 import { escapeHtml } from './utils.js';
 import { updateStatus } from './ui.js';
@@ -533,6 +533,7 @@ export async function selectTableItem(name, type) {
 
     await loadTableColumns();
     await loadTableData(true, false);
+    persistState();
 }
 
 export async function reloadFromDisk() {

core/ui/modules/state.js

@@ -1,6 +1,8 @@
 /**
  * Application State
  */
+import { saveVsCodeState } from './api.js';
+
 export const state = {
     isDbConnected: false,
     selectedTable: null,
@@ -65,3 +67,33 @@ export const state = {
     dateFormat: 'raw', // 'raw', 'local', 'iso', 'relative'
     cellEditBehavior: 'inline' // 'inline', 'modal', 'vscode'
 };
+
+/**
+ * Debounced state persistence to VS Code.
+ * Saves a snapshot of user-facing state so it survives tab switches
+ * when retainContextWhenHidden is false.
+ */
+let _persistTimer;
+export function persistState() {
+    if (_persistTimer) clearTimeout(_persistTimer);
+    _persistTimer = setTimeout(() => {
+        saveVsCodeState({
+            selectedTable: state.selectedTable,
+            selectedTableType: state.selectedTableType,
+            currentPageIndex: state.currentPageIndex,
+            rowsPerPage: state.rowsPerPage,
+            sortedColumn: state.sortedColumn,
+            sortAscending: state.sortAscending,
+            filterQuery: state.filterQuery,
+            columnWidths: state.columnWidths,
+            columnFilters: state.columnFilters,
+            pinnedColumns: Array.from(state.pinnedColumns),
+            pinnedRowIds: Array.from(state.pinnedRowIds),
+            selectedColumns: Array.from(state.selectedColumns),
+            sidebarFilter: state.sidebarFilter,
+            scrollPosition: state.scrollPosition,
+            dateFormat: state.dateFormat,
+            cellEditBehavior: state.cellEditBehavior,
+        });
+    }, 500);
+}

core/ui/modules/web-api.js

@@ -9,6 +9,22 @@
 // Use parent window for RPC instead of VS Code API
 const parentWindow = window.parent;
 
+/**
+ * No-op in web demo: VS Code state persistence is not available.
+ * @returns {undefined}
+ */
+export function getVsCodeState() {
+    return undefined;
+}
+
+/**
+ * No-op in web demo: VS Code state persistence is not available.
+ * @param {Object} _stateObj - Ignored
+ */
+export function saveVsCodeState(_stateObj) {
+    // No VS Code API available in web demo
+}
+
 // Default RPC timeout in milliseconds (60s to accommodate large blob operations)
 const RPC_TIMEOUT_MS = 60000;
 

core/ui/viewer.html

@@ -3,10 +3,11 @@
  */
 import { state } from './modules/state.js';
 import { initRpc } from './modules/rpc.js';
-import { backendApi } from './modules/api.js';
+import { backendApi, getVsCodeState } from './modules/api.js';
 import {
     initSidebar,
-    refreshSchema
+    refreshSchema,
+    renderSidebar
 } from './modules/sidebar.js';
 import {
     initExport
@@ -27,6 +28,7 @@ import {
 } from './modules/modals.js';
 import {
     loadTableData,
+    loadTableColumns,
     onSelectAllClick,
     initGridInteraction,
     initGridControls,
@@ -88,8 +90,74 @@ async function initializeApp() {
         // Load schema
         await refreshSchema();
 
-        updateStatus('Ready');
-        showEmptyState();
+        // Restore previously saved webview state (survives tab switches
+        // when retainContextWhenHidden is false)
+        const savedState = getVsCodeState();
+        if (savedState && savedState.selectedTable) {
+            // Restore scalar state fields
+            state.selectedTable = savedState.selectedTable;
+            state.selectedTableType = savedState.selectedTableType || 'table';
+            state.currentPageIndex = savedState.currentPageIndex || 0;
+            state.rowsPerPage = savedState.rowsPerPage || 500;
+            state.sortedColumn = savedState.sortedColumn || null;
+            state.sortAscending = savedState.sortAscending !== false;
+            state.filterQuery = savedState.filterQuery || '';
+            state.columnWidths = savedState.columnWidths || {};
+            state.columnFilters = savedState.columnFilters || {};
+            state.sidebarFilter = savedState.sidebarFilter || '';
+            state.dateFormat = savedState.dateFormat || 'raw';
+            state.cellEditBehavior = savedState.cellEditBehavior || 'inline';
+
+            // Restore Set-based state (serialized as arrays)
+            state.pinnedColumns = new Set(savedState.pinnedColumns || []);
+            state.pinnedRowIds = new Set(savedState.pinnedRowIds || []);
+            state.selectedColumns = new Set(savedState.selectedColumns || []);
+
+            // Capture scroll position before rendering (will be applied after grid render)
+            const savedScroll = savedState.scrollPosition || { top: 0, left: 0 };
+            state.scrollPosition = { ...savedScroll };
+
+            // Restore sidebar filter input value
+            const sidebarFilterInput = document.getElementById('sidebarFilterInput');
+            if (sidebarFilterInput) sidebarFilterInput.value = state.sidebarFilter;
+
+            // Restore global filter input value
+            const filterInput = document.getElementById('filterInput');
+            if (filterInput) filterInput.value = state.filterQuery;
+
+            // Restore date format dropdown
+            const dateFormatSelect = document.getElementById('dateFormatSelect');
+            if (dateFormatSelect) dateFormatSelect.value = state.dateFormat;
+
+            // Restore page size dropdown
+            const pageSizeSelect = document.getElementById('pageSizeSelect');
+            if (pageSizeSelect) pageSizeSelect.value = String(state.rowsPerPage);
+
+            // Update table name label
+            const tableNameLabel = document.getElementById('tableNameLabel');
+            if (tableNameLabel) tableNameLabel.textContent = state.selectedTable;
+
+            // Re-render sidebar with restored selection highlight
+            renderSidebar();
+
+            // Load column metadata and table data, then restore scroll position
+            await loadTableColumns();
+            await loadTableData(true, false);
+
+            // Restore scroll position after the grid has been rendered.
+            // loadTableData already uses state.scrollPosition for its render call,
+            // but we also explicitly set it here to handle any race with the DOM update.
+            const container = document.getElementById('gridContainer');
+            if (container) {
+                container.scrollLeft = savedScroll.left;
+                container.scrollTop = savedScroll.top;
+            }
+
+            updateStatus(`${state.totalRecordCount} records`);
+        } else {
+            updateStatus('Ready');
+            showEmptyState();
+        }
 
         // Global shortcuts
         document.addEventListener('keydown', async (event) => {

core/ui/viewer.js

@@ -38,10 +38,19 @@ interface ResponseEnvelope {
   readonly errorText?: string;
 }
 
+/**
+ * Log message forwarded from worker to host.
+ */
+interface LogEnvelope {
+  readonly kind: 'log';
+  readonly level: 'log' | 'warn' | 'error';
+  readonly args: unknown[];
+}
+
 /**
  * Union of all protocol message types.
  */
-type ProtocolEnvelope = InvocationEnvelope | ResponseEnvelope;
+type ProtocolEnvelope = InvocationEnvelope | ResponseEnvelope | LogEnvelope;
 
 // ============================================================================
 // State Management
@@ -202,10 +211,16 @@ type ResponseDispatcher = (response: ResponseEnvelope, transfer?: Transferable[]
  * @param sendResponse - Optional function to send responses
  * @returns true if message was handled, false otherwise
  */
+/**
+ * Callback for handling log messages forwarded from a worker.
+ */
+type LogHandler = (level: 'log' | 'warn' | 'error', args: unknown[]) => void;
+
 export function processProtocolMessage(
   envelope: unknown,
   localMethods?: MethodImplementations,
-  sendResponse?: ResponseDispatcher
+  sendResponse?: ResponseDispatcher,
+  onLog?: LogHandler
 ): boolean {
   // Validate envelope structure
   if (!envelope || typeof envelope !== 'object') return false;
@@ -270,6 +285,15 @@ export function processProtocolMessage(
     return true;
   }
 
+  // Handle log message forwarded from worker
+  if (msg.kind === 'log' && 'level' in msg && 'args' in msg) {
+    const logMsg = msg as LogEnvelope;
+    if (onLog) {
+      onLog(logMsg.level, logMsg.args);
+    }
+    return true;
+  }
+
   // Handle incoming response
   if (msg.kind === 'result') {
     const { correlationId, payload, errorText } = msg;
@@ -313,7 +337,8 @@ interface WorkerPort {
  */
 export function connectWorkerPort<T extends object>(
   port: WorkerPort,
-  methodNames: string[]
+  methodNames: string[],
+  onLog?: LogHandler
 ): T {
   const dispatcher: MessageDispatcher = (envelope, transfer) => {
     // Check if port supports transfer list (Browser/Node worker compatible)
@@ -332,7 +357,7 @@ export function connectWorkerPort<T extends object>(
   };
 
   port.on('message', (data) => {
-    processProtocolMessage(data);
+    processProtocolMessage(data, undefined, undefined, onLog);
   });
 
   return buildMethodProxy<T>(dispatcher, methodNames);