v1.2.5

- Bug Fixes: Fixed UI freezing during blob uploads caused by debug logging that serialized binary data as massive JSON strings. Large blob uploads now complete in under 1 second instead of 15+ seconds.

- Bug Fixes: Added proper state tracking for drag-and-drop blob uploads to prevent concurrent operations and ensure UI recovery after failed uploads.

- Performance: Added `Transfer` wrapper for blob operations from extension host to worker, eliminating buffer copying for large binary data.

- Performance: Converted synchronous Base64 encoding to async chunked encoding with event loop yields, keeping the UI responsive during large blob serialization.

Author: zknpr

CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 1.2.5
+
+### Bug Fixes
+
+- **Blob Upload Freeze**: Fixed UI freezing during blob uploads caused by debug logging that serialized binary data as massive JSON strings. Large blob uploads now complete in under 1 second instead of 15+ seconds.
+- **Upload State Management**: Added proper state tracking for drag-and-drop blob uploads to prevent concurrent operations and ensure UI recovery after failed uploads.
+
+### Performance
+
+- **Zero-Copy Blob Transfer**: Added `Transfer` wrapper for blob operations from extension host to worker, eliminating buffer copying for large binary data.
+- **Async Base64 Encoding**: Converted synchronous Base64 encoding to async chunked encoding with event loop yields, keeping the UI responsive during large blob serialization.
+
 ## 1.2.4
 
 ### New Features

core/ui/modules/api.js

@@ -17,14 +17,49 @@ const pendingRpcCalls = new Map();
 // ============================================================================
 
 /**
- * Encode Uint8Array to Base64 string.
- * Uses native btoa with chunked processing to avoid call stack limits on large arrays.
+ * Encode Uint8Array to Base64 string asynchronously.
+ * Uses chunked processing with microtask yields to prevent UI blocking.
+ *
+ * For small arrays (< 64KB), uses synchronous encoding for speed.
+ * For larger arrays, yields control between chunks to keep UI responsive.
+ *
+ * @param {Uint8Array} bytes - Binary data to encode
+ * @returns {Promise<string>} Base64 encoded string
+ */
+async function uint8ArrayToBase64Async(bytes) {
+    // For small arrays, synchronous encoding is fast enough and avoids async overhead
+    const SYNC_THRESHOLD = 65536; // 64KB
+    if (bytes.length <= SYNC_THRESHOLD) {
+        return uint8ArrayToBase64Sync(bytes);
+    }
+
+    // For larger arrays, use chunked async encoding to prevent UI freeze
+    // Process in chunks and yield to the event loop between chunks
+    const CHUNK_SIZE = 32768; // 32KB per chunk
+    let binary = '';
+
+    for (let i = 0; i < bytes.length; i += CHUNK_SIZE) {
+        const chunk = bytes.subarray(i, Math.min(i + CHUNK_SIZE, bytes.length));
+        binary += String.fromCharCode.apply(null, chunk);
+
+        // Yield to event loop every few chunks to allow UI updates
+        // Using a microtask (Promise.resolve) for minimal delay while still allowing repaints
+        if (i > 0 && (i / CHUNK_SIZE) % 4 === 0) {
+            await new Promise(resolve => setTimeout(resolve, 0));
+        }
+    }
+
+    return btoa(binary);
+}
+
+/**
+ * Synchronous Base64 encoding for small arrays.
+ * Used when async overhead isn't worth it.
  *
  * @param {Uint8Array} bytes - Binary data to encode
  * @returns {string} Base64 encoded string
  */
-function uint8ArrayToBase64(bytes) {
-    // Process in 32KB chunks to avoid call stack size limits with String.fromCharCode.apply
+function uint8ArrayToBase64Sync(bytes) {
     const CHUNK_SIZE = 32768;
     let binary = '';
     for (let i = 0; i < bytes.length; i += CHUNK_SIZE) {
@@ -54,48 +89,51 @@ function base64ToUint8Array(base64) {
 // ============================================================================
 
 /**
- * Serialize a value for RPC transmission.
+ * Serialize a value for RPC transmission (async version).
  * Converts Uint8Array to Base64 format for efficient transfer.
+ * Uses async encoding to prevent UI blocking for large binary data.
  *
  * Performance: Base64 encoding is ~33% larger than binary but significantly faster
  * and more compact than array-of-numbers JSON serialization (which was ~300% larger).
  *
  * @param {*} value - Value to serialize
- * @returns {*} Serialized value
+ * @returns {Promise<*>} Serialized value
  */
-function serializeValue(value) {
+async function serializeValueAsync(value) {
     // Handle Uint8Array by converting to Base64 marker object
     if (value instanceof Uint8Array) {
-        return { __type: 'Uint8Array', base64: uint8ArrayToBase64(value) };
+        const base64 = await uint8ArrayToBase64Async(value);
+        return { __type: 'Uint8Array', base64 };
     }
     // Handle other ArrayBuffer views (like DataView)
     if (ArrayBuffer.isView(value)) {
         const uint8 = new Uint8Array(value.buffer, value.byteOffset, value.byteLength);
-        return { __type: 'Uint8Array', base64: uint8ArrayToBase64(uint8) };
+        const base64 = await uint8ArrayToBase64Async(uint8);
+        return { __type: 'Uint8Array', base64 };
     }
     // Recursively serialize arrays
     if (Array.isArray(value)) {
-        return value.map(serializeValue);
+        return Promise.all(value.map(serializeValueAsync));
     }
     // Recursively serialize plain object properties only
     // Using Object.prototype.toString for robust object detection (handles null prototype)
     if (value && typeof value === 'object' && Object.prototype.toString.call(value) === '[object Object]') {
         const result = {};
         for (const key of Object.keys(value)) {
-            result[key] = serializeValue(value[key]);
+            result[key] = await serializeValueAsync(value[key]);
         }
         return result;
     }
     return value;
 }
 
 /**
- * Serialize arguments array for RPC transmission.
+ * Serialize arguments array for RPC transmission (async version).
  * @param {Array} args - Arguments to serialize
- * @returns {Array} Serialized arguments
+ * @returns {Promise<Array>} Serialized arguments
  */
-function serializeArgs(args) {
-    return args.map(serializeValue);
+async function serializeArgsAsync(args) {
+    return Promise.all(args.map(serializeValueAsync));
 }
 
 /**
@@ -143,11 +181,16 @@ function deserializeValue(value) {
 
 /**
  * Send an RPC request to the extension host.
+ * Uses async serialization to prevent UI blocking during large blob encoding.
  */
-export function sendRpcRequest(method, args) {
-    return new Promise((resolve, reject) => {
-        const messageId = `rpc_${++rpcMessageId}_${Date.now()}`;
+export async function sendRpcRequest(method, args) {
+    const messageId = `rpc_${++rpcMessageId}_${Date.now()}`;
 
+    // Serialize args asynchronously to handle Uint8Array without blocking UI
+    // This is done before setting up the timeout to ensure encoding time is included
+    const serializedArgs = await serializeArgsAsync(args);
+
+    return new Promise((resolve, reject) => {
         const timeoutId = setTimeout(() => {
             if (pendingRpcCalls.has(messageId)) {
                 pendingRpcCalls.delete(messageId);
@@ -158,8 +201,6 @@ export function sendRpcRequest(method, args) {
         pendingRpcCalls.set(messageId, { resolve, reject, timeoutId });
 
         if (vscodeApi) {
-            // Serialize args to handle Uint8Array and other non-JSON-safe types
-            const serializedArgs = serializeArgs(args);
             vscodeApi.postMessage({
                 channel: 'rpc',
                 content: {

core/ui/modules/blob-inspector.js

@@ -150,7 +150,6 @@ export class BlobInspector {
             const sizeMB = uint8Array.length / (1024 * 1024);
 
             // Reject files larger than 50MB to prevent extension freeze
-            // Large blobs require synchronous Base64 encoding which blocks the UI thread
             const MAX_BLOB_SIZE_MB = 50;
             if (sizeMB > MAX_BLOB_SIZE_MB) {
                 throw new Error(`File too large (${sizeMB.toFixed(1)}MB). Maximum size is ${MAX_BLOB_SIZE_MB}MB to prevent freezing.`);

core/ui/modules/web-api.js

@@ -26,14 +26,49 @@ function getTargetOrigin() {
 // ============================================================================
 
 /**
- * Encode Uint8Array to Base64 string.
- * Uses native btoa with chunked processing to avoid call stack limits on large arrays.
+ * Encode Uint8Array to Base64 string asynchronously.
+ * Uses chunked processing with microtask yields to prevent UI blocking.
+ *
+ * For small arrays (< 64KB), uses synchronous encoding for speed.
+ * For larger arrays, yields control between chunks to keep UI responsive.
+ *
+ * @param {Uint8Array} bytes - Binary data to encode
+ * @returns {Promise<string>} Base64 encoded string
+ */
+async function uint8ArrayToBase64Async(bytes) {
+    // For small arrays, synchronous encoding is fast enough and avoids async overhead
+    const SYNC_THRESHOLD = 65536; // 64KB
+    if (bytes.length <= SYNC_THRESHOLD) {
+        return uint8ArrayToBase64Sync(bytes);
+    }
+
+    // For larger arrays, use chunked async encoding to prevent UI freeze
+    // Process in chunks and yield to the event loop between chunks
+    const CHUNK_SIZE = 32768; // 32KB per chunk
+    let binary = '';
+
+    for (let i = 0; i < bytes.length; i += CHUNK_SIZE) {
+        const chunk = bytes.subarray(i, Math.min(i + CHUNK_SIZE, bytes.length));
+        binary += String.fromCharCode.apply(null, chunk);
+
+        // Yield to event loop every few chunks to allow UI updates
+        // Using a microtask (Promise.resolve) for minimal delay while still allowing repaints
+        if (i > 0 && (i / CHUNK_SIZE) % 4 === 0) {
+            await new Promise(resolve => setTimeout(resolve, 0));
+        }
+    }
+
+    return btoa(binary);
+}
+
+/**
+ * Synchronous Base64 encoding for small arrays.
+ * Used when async overhead isn't worth it.
  *
  * @param {Uint8Array} bytes - Binary data to encode
  * @returns {string} Base64 encoded string
  */
-function uint8ArrayToBase64(bytes) {
-    // Process in 32KB chunks to avoid call stack size limits with String.fromCharCode.apply
+function uint8ArrayToBase64Sync(bytes) {
     const CHUNK_SIZE = 32768;
     let binary = '';
     for (let i = 0; i < bytes.length; i += CHUNK_SIZE) {
@@ -63,48 +98,51 @@ function base64ToUint8Array(base64) {
 // ============================================================================
 
 /**
- * Serialize a value for RPC transmission.
+ * Serialize a value for RPC transmission (async version).
  * Converts Uint8Array to Base64 format for efficient transfer.
+ * Uses async encoding to prevent UI blocking for large binary data.
  *
  * Performance: Base64 encoding is ~33% larger than binary but significantly faster
  * and more compact than array-of-numbers JSON serialization (which was ~300% larger).
  *
  * @param {*} value - Value to serialize
- * @returns {*} Serialized value
+ * @returns {Promise<*>} Serialized value
  */
-function serializeValue(value) {
+async function serializeValueAsync(value) {
     // Handle Uint8Array by converting to Base64 marker object
     if (value instanceof Uint8Array) {
-        return { __type: 'Uint8Array', base64: uint8ArrayToBase64(value) };
+        const base64 = await uint8ArrayToBase64Async(value);
+        return { __type: 'Uint8Array', base64 };
     }
     // Handle other ArrayBuffer views (like DataView)
     if (ArrayBuffer.isView(value)) {
         const uint8 = new Uint8Array(value.buffer, value.byteOffset, value.byteLength);
-        return { __type: 'Uint8Array', base64: uint8ArrayToBase64(uint8) };
+        const base64 = await uint8ArrayToBase64Async(uint8);
+        return { __type: 'Uint8Array', base64 };
     }
     // Recursively serialize arrays
     if (Array.isArray(value)) {
-        return value.map(serializeValue);
+        return Promise.all(value.map(serializeValueAsync));
     }
     // Recursively serialize plain object properties only
     // Using Object.prototype.toString for robust object detection (handles null prototype)
     if (value && typeof value === 'object' && Object.prototype.toString.call(value) === '[object Object]') {
         const result = {};
         for (const key of Object.keys(value)) {
-            result[key] = serializeValue(value[key]);
+            result[key] = await serializeValueAsync(value[key]);
         }
         return result;
     }
     return value;
 }
 
 /**
- * Serialize arguments array for RPC transmission.
+ * Serialize arguments array for RPC transmission (async version).
  * @param {Array} args - Arguments to serialize
- * @returns {Array} Serialized arguments
+ * @returns {Promise<Array>} Serialized arguments
  */
-function serializeArgs(args) {
-    return args.map(serializeValue);
+async function serializeArgsAsync(args) {
+    return Promise.all(args.map(serializeValueAsync));
 }
 
 /**
@@ -152,14 +190,19 @@ function deserializeValue(value) {
 
 /**
  * Send an RPC request to the parent window.
+ * Uses async serialization to prevent UI blocking during large blob encoding.
  * @param {string} method - Method name to call
  * @param {Array} args - Arguments for the method
  * @returns {Promise<*>} - Result from parent
  */
-export function sendRpcRequest(method, args) {
-    return new Promise((resolve, reject) => {
-        const messageId = `rpc_${++rpcMessageId}_${Date.now()}`;
+export async function sendRpcRequest(method, args) {
+    const messageId = `rpc_${++rpcMessageId}_${Date.now()}`;
+
+    // Serialize args asynchronously to handle Uint8Array without blocking UI
+    // This is done before setting up the timeout to ensure encoding time is included
+    const serializedArgs = await serializeArgsAsync(args);
 
+    return new Promise((resolve, reject) => {
         const timeoutId = setTimeout(() => {
             if (pendingRpcCalls.has(messageId)) {
                 pendingRpcCalls.delete(messageId);
@@ -169,9 +212,6 @@ export function sendRpcRequest(method, args) {
 
         pendingRpcCalls.set(messageId, { resolve, reject, timeoutId });
 
-        // Serialize args to handle Uint8Array and other non-JSON-safe types
-        const serializedArgs = serializeArgs(args);
-
         // Post message to parent window instead of VS Code API
         parentWindow.postMessage({
             channel: 'rpc',