zknpr · zknpr · Feb 7, 2026 · Feb 7, 2026 · Feb 7, 2026 · Feb 7, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,59 @@
 # Changelog
 
+## 1.3.0
+
+### Security
+
+- **SQL Wildcard Injection Prevention**: Added `escapeLikePattern()` function to escape `%`, `_`, and `\` characters in LIKE queries. Prevents attackers from crafting inputs that cause expensive full table scans or bypass filters. All filter queries now use `ESCAPE '\\'` clause.
+- **NUL Byte Escaping**: Fixed potential SQL injection via NUL characters in exported SQL strings. Strings containing `\0` are now encoded as hex blobs with `CAST(X'...' AS TEXT)`.
+- **JSON Merge Patch Stack Overflow**: Added `MAX_DEPTH=1000` limit to prevent stack overflow from malicious or deeply nested JSON data.
+- **Unbounded Undo History Memory**: Added `maxMemory` limit (50MB default) to undo history to prevent memory exhaustion on long editing sessions.
+- **CSP Hardening**: Removed unsafe inline styles from webview HTML, extracting 20+ inline styles to CSS classes for stricter Content Security Policy compliance.
+
+### Performance
+
+- **Query Timeout Protection**: Added 30-second query timeout using `iterateStatements` API. Prevents runaway queries from freezing the extension. Timeout is checked during row iteration for interruptible execution.
+- **Async File Operations**: Converted synchronous `fs.existsSync` and `readFileSync` calls to async equivalents in native worker, preventing main thread blocking.
+- **Batch Undo Operations**: Undo/redo for batch cell updates now uses `updateCellBatch` instead of individual transactions, significantly improving performance.
+- **Batch Row Insertions**: Added `insertRowBatch` for bulk row operations, respecting SQLite's 999 parameter limit.
+- **Optimized Pragma Fetching**: Added `queryBatch` for fetching multiple pragmas in a single IPC round-trip.
+- **Native JSON Patch**: Uses SQLite's native `json_patch()` function when available, with JS fallback for older versions.
+
+### Improvements
+
+- **Type Safety**: Replaced `any[]` with proper `Transferable[]` types throughout the RPC layer, removing `@ts-ignore` comments.
+- **Memory Leak Fix**: Fixed listener leak in `cancelTokenToAbortSignal` by properly disposing the cancellation listener after abort.
+- **Table Existence Validation**: Virtual file system now validates table/view existence before attempting cell reads.
+- **Configurable Query Timeout**: Added `sqliteExplorer.queryTimeout` setting (default 30s) to control query execution timeout.
+- **Configurable Undo Memory**: Added `sqliteExplorer.maxUndoMemory` setting (default 50MB) to control undo/redo history memory limit.
+- **Full CSP Compliance**: Removed all `'unsafe-inline'` usage from both scripts and styles. Dynamic styles now use CSSOM which is CSP-compliant.
+
+### Refactoring
+
+- **Extracted Serialization Module**: Moved RPC serialization utilities to `src/core/serialization.ts` for reuse.
+- **WebviewMessageHandler**: Extracted webview message handling to dedicated class for better separation of concerns.
+- **Query Builder DRY**: Extracted `buildFilterConditions` helper to eliminate duplicated filter logic between SELECT and COUNT queries.
+- **Undo/Redo Refactor**: Extracted undo operations into private methods (`undoCellUpdate`, `undoRowInsert`, etc.) for better readability.
+- **BlobInspector Cleanup**: Removed unused `hostBridge` constructor parameter, using `backendApi` consistently.
+- **Worker Endpoint Cleanup**: Removed redundant operations proxy object from worker endpoint initialization.
+- **Type Definitions**: Added `WasmPreparedStatement` interface replacing `any` types for sql.js statements.
+
+### Testing
+
+- **New Test Suites**: Added comprehensive tests for:
+  - `ModificationTracker` serialization/deserialization
+  - `cancelTokenToAbortSignal` utility
+  - `WebviewCollection` management
+  - `getUriParts` URI parsing
+  - `WasmDatabaseEngine.updateCellBatch` batch operations
+  - `WasmDatabaseEngine.addColumn` column creation
+  - `toDatasetAttrs` HTML attribute generation
+  - `SQLiteFileSystemProvider` read/write operations
+  - `escapeLikePattern` wildcard escaping
+  - RPC `Transfer` wrapper handling
+- **VS Code Mocks**: Added comprehensive VS Code API mocks for unit testing extension code.
+- **Test Configuration**: Added `tsconfig.test.json` for proper test compilation with mock paths.
+
 ## 1.2.7
 
 ### Bug Fixes

diff --git a/CLAUDE.md b/CLAUDE.md
@@ -141,7 +141,7 @@ workerProxy.method(new Transfer(data, [data.buffer]));
 
 ### Content Security Policy (CSP)
 - **Scripts**: Strict nonce-based policy. No `'unsafe-inline'` allowed.
-- **Styles**: `'unsafe-inline'` allowed (currently required for dynamic grid layout/resizing).
+- **Styles**: Nonce-based policy for `<style>` tags. Dynamic inline styles are applied via CSSOM (`element.style.prop = ...`) which is permitted by CSP.
 - **Isolation**: Webview communicates only via RPC.
 
 ### Cross-Site Scripting (XSS) Prevention
@@ -296,9 +296,30 @@ Settings in `package.json` → `contributes.configuration`:
 |---------|---------|-------------|
 | `sqliteExplorer.maxFileSize` | 200 | Max file size in MB (0 = unlimited) |
 | `sqliteExplorer.maxRows` | 0 | Max rows to display (0 = unlimited) |
-| `sqliteExplorer.defaultPageSize` | 1000 | Default page size for pagination |
+| `sqliteExplorer.defaultPageSize` | 500 | Default page size for pagination |
 | `sqliteExplorer.instantCommit` | "never" | Auto-save strategy (always/never/remote-only) |
 | `sqliteExplorer.doubleClickBehavior` | "inline" | Double-click action (inline/modal/vscode) |
+| `sqliteExplorer.queryTimeout` | 30000 | Query execution timeout in ms (prevents runaway queries) |
+| `sqliteExplorer.maxUndoMemory` | 52428800 | Max undo history memory in bytes (default 50MB) |
+
+## Gotchas
+
+### SQL Security
+- **LIKE wildcards**: User input in LIKE queries must use `escapeLikePattern()` with `ESCAPE '\\'` clause
+- **SQL types in DDL**: Always validate with `validateSqlType()` to prevent injection via malicious type strings
+- **NUL bytes**: Strings containing `\0` must be encoded as hex blobs in exported SQL
+
+### RPC Serialization
+- **Uint8Array becomes `{}`**: Never send raw Uint8Array via postMessage - use the marker format
+- **Transfer for blobs**: Large binary data should use `Transfer` wrapper for zero-copy
+
+### Testing
+- **VS Code mocks required**: Unit tests need `tests/mocks/vscode.ts` imported first
+- **JSON patch tests**: Test behavior (merged result) not implementation (SQL function)
+
+### Build
+- **WASM not found**: Run `node scripts/build.mjs` if `assets/sqlite3.wasm` is missing
+- **Browser vs Node**: Check `import.meta.env.VSCODE_BROWSER_EXT` for environment-specific code
 
 ## Extension Identifiers
 

diff --git a/core/ui/modules/blob-inspector.js b/core/ui/modules/blob-inspector.js
@@ -5,8 +5,7 @@ import { updateStatus } from './ui.js';
 import { validateRowId } from './utils.js';
 
 export class BlobInspector {
-    constructor(hostBridge) {
-        this.hostBridge = hostBridge;
+    constructor() {
         this.currentObjectUrl = null;
         this.modal = document.getElementById('blob-inspector-modal');
         this.previewContainer = document.getElementById('tab-preview');
@@ -86,9 +85,8 @@ export class BlobInspector {
                 this.showFileInput();
             } else {
                 // Native mode: Use VS Code API to select file
-                // NOTE: Use backendApi instead of this.hostBridge because backendApi has the
-                // proper serialize/deserialize layer for Uint8Array data. While hostBridge
-                // also uses RPC, backendApi ensures consistent handling across all callers.
+                // NOTE: Use backendApi directly because it has the proper serialize/deserialize
+                // layer for Uint8Array data, ensuring consistent handling across all callers.
                 const result = await backendApi.selectFile();
                 if (result) {
                     // Data should already be a Uint8Array after deserialization

diff --git a/core/ui/modules/crud.js b/core/ui/modules/crud.js
@@ -202,7 +202,14 @@ async function submitDeleteColumns() {
 
     try {
         updateStatus('Deleting columns...');
-        await backendApi.deleteColumns(state.selectedTable, columnNames);
+        const result = await backendApi.deleteColumns(state.selectedTable, columnNames);
+
+        // If user cancelled the operation (e.g., declined to drop dependent indexes), don't reload
+        if (result && result.cancelled) {
+            updateStatus('Delete cancelled');
+            closeModal('deleteModal');
+            return;
+        }
 
         closeModal('deleteModal');
         state.selectedColumns.clear();

diff --git a/core/ui/modules/edit.js b/core/ui/modules/edit.js
@@ -12,7 +12,7 @@ import { BlobInspector } from './blob-inspector.js';
 let blobInspector;
 
 export function initEdit() {
-    blobInspector = new BlobInspector(backendApi);
+    blobInspector = new BlobInspector();
 
     // Cell Preview Modal
     document.getElementById('btnCloseCellPreview')?.addEventListener('click', closeCellPreview);

diff --git a/core/ui/modules/grid.js b/core/ui/modules/grid.js
@@ -350,7 +350,12 @@ export async function loadTableData(showSpinner = true, saveScrollPosition = tru
 export function renderDataGrid(savedScrollTop = null, savedScrollLeft = null) {
     const headerHeight = 52;
     const rowHeight = 26;
-    const rowNumWidth = 50;
+
+    // Calculate row number column width based on the largest row number that will be displayed
+    // Base width: 50px for up to 2 digits, add ~8px per additional digit
+    const maxRowNum = state.currentPageIndex * state.rowsPerPage + state.gridData.length;
+    const digitCount = Math.max(2, String(maxRowNum).length);
+    const rowNumWidth = 36 + (digitCount * 8); // Base 36px + 8px per digit
 
     const container = document.getElementById('gridContainer');
     if (!container) return;
@@ -439,7 +444,7 @@ export function renderDataGrid(savedScrollTop = null, savedScrollLeft = null) {
         background: 'var(--bg-secondary)'
     });
     rowNumTh.title = 'Click to select all rows';
-    rowNumTh.innerHTML = '<div class="header-content"><div class="header-top" style="height:100%;justify-content:center">#</div></div>';
+    rowNumTh.innerHTML = '<div class="header-content"><div class="header-top header-top-center">#</div></div>';
     headerTr.appendChild(rowNumTh);
 
     for (const col of orderedColumns) {

diff --git a/core/ui/modules/ui.js b/core/ui/modules/ui.js
@@ -39,7 +39,7 @@ export function showErrorState(message) {
     if (container) {
         container.innerHTML = `
             <div class="empty-view">
-                <span class="empty-icon codicon codicon-error" style="color: var(--error-color)"></span>
+                <span class="empty-icon codicon codicon-error error-icon"></span>
                 <span class="empty-title">Error</span>
                 <span class="empty-desc">${escapeHtml(message)}</span>
             </div>

diff --git a/core/ui/viewer.css b/core/ui/viewer.css
@@ -1115,3 +1115,140 @@ body {
     background-color: var(--hover-bg);
     outline-offset: -2px;
 }
+
+/* ================================================================
+   UTILITY & NEW CLASSES (Replaces Inline Styles)
+   ================================================================ */
+.header-top-center {
+    height: 100%;
+    justify-content: center;
+}
+
+.error-icon {
+    color: var(--error-color);
+}
+
+.ml-auto {
+    margin-left: auto;
+}
+
+.mr-6 {
+    margin-right: 6px;
+}
+
+.mt-8 {
+    margin-top: 8px;
+}
+
+.settings-section {
+    border-top: 1px solid var(--border-color);
+    flex-shrink: 0;
+}
+
+.batch-update-container {
+    padding: 12px;
+}
+
+.batch-update-btn {
+    width: 100%;
+    margin-bottom: 12px;
+}
+
+.modal-dialog-md {
+    width: 500px;
+}
+
+.modal-dialog-lg {
+    width: 600px;
+}
+
+.export-columns-list {
+    max-height: 150px;
+    overflow-y: auto;
+    border: 1px solid var(--border-color);
+    padding: 8px;
+    border-radius: 3px;
+    background: var(--bg-primary);
+}
+
+.flex-spacer {
+    flex: 1;
+}
+
+.readonly-badge {
+    display: none;
+    margin-left: 8px;
+    color: var(--vscode-editorWarning-foreground, #cca700);
+}
+
+.blob-inspector-dialog {
+    min-width: 600px;
+    height: 600px;
+}
+
+.blob-inspector-body {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+}
+
+.blob-inspector-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--border-color);
+    background: var(--bg-tertiary);
+}
+
+.tab-btn {
+    padding: 8px 16px;
+    border: none;
+    background: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+}
+
+.tab-btn.active {
+    color: var(--text-primary);
+    border-bottom-color: var(--accent-color);
+}
+
+.blob-info-bar {
+    padding: 8px 16px;
+    font-size: 11px;
+    color: var(--text-secondary);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.blob-preview-pane {
+    flex: 1;
+    overflow: auto;
+    padding: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-primary);
+}
+
+.blob-hex-pane {
+    display: none;
+    flex: 1;
+    overflow: auto;
+}
+
+.hex-dump-textarea {
+    width: 100%;
+    height: 100%;
+    resize: none;
+    border: none;
+    padding: 12px;
+    font-family: monospace;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    outline: none;
+}
+
+.blob-preview-placeholder {
+    color: var(--text-secondary);
+}