vzcode 1.60.0 → 1.62.0

package/src/client/vzReducer/closeTabReducer.test.ts

@@ -16,8 +16,11 @@ describe('closeTabsReducer', () => {
 
     const stateWithTabs = {
       ...initialState,
-      tabList: [{ fileId: 'file1', isTransient: false }],
-      activeFileId: 'file1',
+      pane: {
+        ...initialState.pane,
+        tabList: [{ fileId: 'file1', isTransient: false }],
+        activeFileId: 'file1',
+      },
     };
 
     const newState = closeTabsReducer(
@@ -58,7 +61,7 @@ describe('closeTabsReducer', () => {
     expect(newState.pane.activeFileId).toBe('file1');
   });
 
-  it.only('Activates previous tab after closing an active tab', () => {
+  it('Activates previous tab after closing an active tab', () => {
     const action: VZAction = {
       type: 'close_tabs',
       fileIdsToClose: ['file2'],
@@ -116,12 +119,15 @@ describe('closeTabsReducer', () => {
   it('Closes a tab that is not currently active', () => {
     const stateWithMultipleTabs = {
       ...initialState,
-      tabList: [
-        { fileId: 'file1', isTransient: false },
-        { fileId: 'file2', isTransient: false },
-        { fileId: 'file3', isTransient: false },
-      ],
-      activeFileId: 'file3',
+      pane: {
+        ...initialState.pane,
+        tabList: [
+          { fileId: 'file1', isTransient: false },
+          { fileId: 'file2', isTransient: false },
+          { fileId: 'file3', isTransient: false },
+        ],
+        activeFileId: 'file3',
+      },
     };
 
     const action: VZAction = {
@@ -142,12 +148,15 @@ describe('closeTabsReducer', () => {
   it('Closes the first tab out of many, when it is active', () => {
     const stateWithMultipleTabs = {
       ...initialState,
-      tabList: [
-        { fileId: 'file1', isTransient: false },
-        { fileId: 'file2', isTransient: false },
-        { fileId: 'file3', isTransient: false },
-      ],
-      activeFileId: 'file1',
+      pane: {
+        ...initialState.pane,
+        tabList: [
+          { fileId: 'file1', isTransient: false },
+          { fileId: 'file2', isTransient: false },
+          { fileId: 'file3', isTransient: false },
+        ],
+        activeFileId: 'file1',
+      },
     };
 
     const action: VZAction = {
@@ -168,12 +177,15 @@ describe('closeTabsReducer', () => {
   it('Closes multiple tabs at once', () => {
     const stateWithMultipleTabs = {
       ...initialState,
-      tabList: [
-        { fileId: 'file1', isTransient: false },
-        { fileId: 'file2', isTransient: false },
-        { fileId: 'file3', isTransient: false },
-      ],
-      activeFileId: 'file2',
+      pane: {
+        ...initialState.pane,
+        tabList: [
+          { fileId: 'file1', isTransient: false },
+          { fileId: 'file2', isTransient: false },
+          { fileId: 'file3', isTransient: false },
+        ],
+        activeFileId: 'file2',
+      },
     };
 
     const action: VZAction = {

package/src/client/vzReducer/createInitialState.ts

@@ -24,6 +24,7 @@ export const createInitialState = ({
     focusedIndex: null,
     focusedChildIndex: null,
   },
+  isVisualEditorOpen: false,
   isSearchOpen: false,
   isAIChatOpen: true,
   aiChatFocused: false,

package/src/client/vzReducer/index.ts

@@ -38,6 +38,7 @@ import {
 import { toggleAutoFollowReducer } from './toggleAutoFollowReducer';
 import { updatePresenceIndicatorReducer } from './updatePresenceIndicatorReducer';
 import { splitCurrentPaneReducer } from './splitCurrentPaneReducer';
+import { setIsVisualEditorOpenReducer } from './visualEditorReducer';
 export { createInitialState } from './createInitialState';
 
 // The shape of the state managed by the reducer.
@@ -57,6 +58,9 @@ export type VZState = {
   // True to show the search instead of files
   isSearchOpen: boolean;
 
+  // True to show the visual editor instead of files
+  isVisualEditorOpen: boolean;
+
   // True to show the AI chat instead of files
   isAIChatOpen: boolean;
 
@@ -133,6 +137,10 @@ export type VZAction =
   //  * Sets whether the AI chat tab is open.
   | { type: 'set_is_ai_chat_open'; value: boolean }
 
+  // 'set_is_visual_editor_open'
+  // * Sets whether the Visual Editor is open.
+  | { type: 'set_is_visual_editor_open'; value: boolean }
+
   // `toggle_ai_chat_focused`
   // * Toggles focused variable to trigger AI chat input focus
   | { type: 'toggle_ai_chat_focused' }
@@ -219,6 +227,7 @@ const reducers = [
   toggleSearchFocusedReducer,
   setIsSearchOpenReducer,
   setIsAIChatOpenReducer,
+  setIsVisualEditorOpenReducer,
   toggleAIChatFocusedReducer,
   setAIChatModeReducer,
   setIsSettingsOpenReducer,

package/src/client/vzReducer/searchReducer.test.ts

@@ -99,7 +99,7 @@ describe('searchReducer', () => {
       expect(file1Results.matches[0].line).toBe(1);
       expect(file1Results.matches[0].index).toBe(6); // position of "Hello"
       expect(file1Results.matches[1].line).toBe(2);
-      expect(file1Results.matches[1].index).toBe(18); // position of "HELLO"
+      expect(file1Results.matches[1].index).toBe(17); // position of "HELLO"
 
       // Check file2.js results
       const file2Results =

package/src/client/vzReducer/visualEditorReducer.ts

@@ -0,0 +1,9 @@
+import { VZAction, VZState } from '.';
+
+export const setIsVisualEditorOpenReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  action.type === 'set_is_visual_editor_open'
+    ? { ...state, isVisualEditorOpen: action.value }
+    : state;

package/src/server/aiChatHandler/chatOperations.ts

@@ -227,6 +227,28 @@ export const updateAIMessageContent = (
   shareDBDoc.submitOp(messageOp);
 };
 
+/**
+ * Sets the AI status for a chat
+ */
+export const setAIStatus = (
+  shareDBDoc: ShareDBDoc<VizContent>,
+  chatId: VizChatId,
+  status: string | undefined,
+) => {
+  const op = diff(shareDBDoc.data, {
+    ...shareDBDoc.data,
+    chats: {
+      ...shareDBDoc.data.chats,
+      [chatId]: {
+        ...shareDBDoc.data.chats[chatId],
+        aiStatus: status,
+        updatedAt: dateToTimestamp(new Date()),
+      },
+    },
+  });
+  shareDBDoc.submitOp(op);
+};
+
 /**
  * Finalizes an AI message by clearing temporary fields
  */

package/src/server/aiChatHandler/errorHandling.ts

@@ -46,8 +46,21 @@ export const handleError = (
     );
   }
 
-  res.status(500).json({
-    error: 'Internal server error',
-    message: error.message,
-  });
+  if (res) {
+    res.status(500).json({
+      error: 'Internal server error',
+      message: error.message,
+    });
+  }
+};
+
+/**
+ * Handles errors in background processing (without HTTP response)
+ */
+export const handleBackgroundError = (
+  shareDBDoc,
+  chatId,
+  error,
+) => {
+  handleError(shareDBDoc, chatId, error, null);
 };

package/src/server/aiChatHandler/index.ts

@@ -4,13 +4,17 @@ import {
   ensureChatExists,
   addUserMessage,
   addDiffToAIMessage,
+  setAIStatus,
 } from './chatOperations.js';
 import { createLLMFunction } from './llmStreaming.js';
 import {
   performAIEditing,
   performAIChat,
 } from './aiEditing.js';
-import { handleError } from './errorHandling.js';
+import {
+  handleError,
+  handleBackgroundError,
+} from './errorHandling.js';
 import { createRunCodeFunction } from '../../runCode.js';
 import { ShareDBDoc } from '../../types.js';
 import { VizContent } from '@vizhub/viz-types';
@@ -25,12 +29,14 @@ export const handleAIChatMessage =
     onCreditDeduction,
     getCurrentCommitId,
     model,
+    aiRequestOptions,
   }: {
     shareDBDoc: ShareDBDoc<VizContent>;
     createAIEditLocalPresence: () => any;
     onCreditDeduction?: any;
     getCurrentCommitId?: () => string | null;
     model?: string;
+    aiRequestOptions?: any;
   }) =>
   async (req: any, res: any) => {
     const { content, chatId, mode = 'edit' } = req.body;
@@ -56,81 +62,139 @@ export const handleAIChatMessage =
       ensureChatsExist(shareDBDoc);
       ensureChatExists(shareDBDoc, chatId);
 
-      // Capture the current commit ID before making changes (for VizHub integration)
-      const beforeCommitId = getCurrentCommitId
-        ? getCurrentCommitId()
-        : null;
-
       // Add user message to chat
       addUserMessage(shareDBDoc, chatId, content);
 
-      // Create LLM function for streaming
-      const llmFunction = createLLMFunction({
+      // Return success immediately - AI generation continues in background
+      res.status(200).json('success');
+
+      // Set AI status to indicate generation is starting
+      setAIStatus(shareDBDoc, chatId, 'generating');
+
+      // Continue AI processing in background (don't await)
+      processAIRequestAsync({
         shareDBDoc,
-        createAIEditLocalPresence,
         chatId,
+        content,
+        mode,
+        createAIEditLocalPresence,
+        getCurrentCommitId,
         model,
+        aiRequestOptions,
+        onCreditDeduction,
+      }).catch((error) => {
+        console.error(
+          'Background AI processing error:',
+          error,
+        );
+        // Handle error without HTTP response
+        handleBackgroundError(shareDBDoc, chatId, error);
       });
+    } catch (error) {
+      handleError(shareDBDoc, chatId, error, res);
+    }
+  };
 
-      // Create server-side runCode function using shareDBDoc
-      const submitOperation =
-        createSubmitOperation(shareDBDoc);
-      const runCode =
-        createRunCodeFunction(submitOperation);
-
-      // Perform AI editing or chat based on mode
-      const editResult =
-        mode === 'ask'
-          ? await performAIChat({
-              prompt: content,
-              shareDBDoc,
-              llmFunction,
-            })
-          : await performAIEditing({
-              prompt: content,
-              shareDBDoc,
-              llmFunction,
-              runCode,
-            });
-
-      // Add diff data to the AI message if there are changes
-      if (
-        editResult.diffData &&
-        Object.keys(editResult.diffData).length > 0
-      ) {
-        addDiffToAIMessage(
-          shareDBDoc,
-          chatId,
-          editResult.diffData,
-          (editResult as any).beforeFiles, // Pass the beforeFiles snapshot for undo (legacy)
-          beforeCommitId, // Pass the commit ID before AI changes (for VizHub integration)
-        );
-      }
+/**
+ * Processes the AI request asynchronously in the background
+ */
+const processAIRequestAsync = async ({
+  shareDBDoc,
+  chatId,
+  content,
+  mode,
+  createAIEditLocalPresence,
+  getCurrentCommitId,
+  model,
+  aiRequestOptions,
+  onCreditDeduction,
+}: {
+  shareDBDoc: ShareDBDoc<VizContent>;
+  chatId: string;
+  content: string;
+  mode: string;
+  createAIEditLocalPresence: () => any;
+  getCurrentCommitId?: () => string | null;
+  model?: string;
+  aiRequestOptions?: any;
+  onCreditDeduction?: any;
+}) => {
+  try {
+    // Capture the current commit ID before making changes (for VizHub integration)
+    const beforeCommitId = getCurrentCommitId
+      ? getCurrentCommitId()
+      : null;
 
-      // Handle credit deduction if callback is provided
-      if (
-        onCreditDeduction &&
-        (editResult as any).upstreamCostCents
-      ) {
-        try {
-          await onCreditDeduction({
-            upstreamCostCents: (editResult as any)
-              .upstreamCostCents,
-            provider: (editResult as any).provider,
-            inputTokens: (editResult as any).inputTokens,
-            outputTokens: (editResult as any).outputTokens,
+    // Create LLM function for streaming
+    const llmFunction = createLLMFunction({
+      shareDBDoc,
+      createAIEditLocalPresence,
+      chatId,
+      model,
+      aiRequestOptions,
+    });
+
+    // Create server-side runCode function using shareDBDoc
+    const submitOperation =
+      createSubmitOperation(shareDBDoc);
+    const runCode = createRunCodeFunction(submitOperation);
+
+    // Perform AI editing or chat based on mode
+    const editResult =
+      mode === 'ask'
+        ? await performAIChat({
+            prompt: content,
+            shareDBDoc,
+            llmFunction,
+          })
+        : await performAIEditing({
+            prompt: content,
+            shareDBDoc,
+            llmFunction,
+            runCode,
           });
-        } catch (creditError) {
-          console.error(
-            'Credit deduction error:',
-            creditError,
-          );
-          // Don't fail the request if credit deduction fails
-        }
-      }
 
-      res.status(200).json('success');
-    } catch (error) {
-      handleError(shareDBDoc, chatId, error, res);
+    // Add diff data to the AI message if there are changes
+    if (
+      editResult.diffData &&
+      Object.keys(editResult.diffData).length > 0
+    ) {
+      addDiffToAIMessage(
+        shareDBDoc,
+        chatId,
+        editResult.diffData,
+        (editResult as any).beforeFiles, // Pass the beforeFiles snapshot for undo (legacy)
+        beforeCommitId, // Pass the commit ID before AI changes (for VizHub integration)
+      );
     }
-  };
+
+    // Handle credit deduction if callback is provided
+    if (
+      onCreditDeduction &&
+      (editResult as any).upstreamCostCents
+    ) {
+      try {
+        await onCreditDeduction({
+          upstreamCostCents: (editResult as any)
+            .upstreamCostCents,
+          provider: (editResult as any).provider,
+          inputTokens: (editResult as any).inputTokens,
+          outputTokens: (editResult as any).outputTokens,
+        });
+      } catch (creditError) {
+        console.error(
+          'Credit deduction error:',
+          creditError,
+        );
+        // Don't fail the request if credit deduction fails
+      }
+    }
+
+    // Clear the AI status to indicate completion
+    setAIStatus(shareDBDoc, chatId, undefined);
+  } catch (error) {
+    // Set error status and add error message to chat
+    setAIStatus(shareDBDoc, chatId, 'error');
+    handleBackgroundError(shareDBDoc, chatId, error);
+  }
+};

package/src/server/aiChatHandler/llmStreaming.ts

@@ -23,6 +23,17 @@ import { ShareDBDoc } from '../../types.js';
 
 const DEBUG = false;
 
+// Useful for testing/debugging the streaming behavior
+const slowMode = false;
+
+// Throttle the streaming updates, so that we don't
+// overwhelm the ShareDB server with too many updates.
+// It happened actually, before adding this.
+// MongoDB VizHub server got in fact overloaded with
+// too many updates from the AI streaming response, with
+// warning: "Replication Oplog Window has gone below 1 hour"
+const THROTTLE_INTERVAL_MS = 100;
+
 // Feature flag to enable/disable streaming editing.
 // * If `true`, the AI streaming response will be used to
 //   edit files in real-time by submitting ShareDB ops.
@@ -50,12 +61,14 @@ export const createLLMFunction = ({
   // and reasoning content is not processed in the streaming response.
   enableReasoningTokens = false,
   model,
+  aiRequestOptions,
 }: {
   shareDBDoc: ShareDBDoc<VizContent>;
   createAIEditLocalPresence: () => any;
   chatId: VizChatId;
   enableReasoningTokens?: boolean;
   model?: string;
+  aiRequestOptions?: any;
 }) => {
   return async (fullPrompt: string) => {
     const localPresence = enableStreamingEditing
@@ -82,18 +95,63 @@ export const createLLMFunction = ({
     // Create initial AI message for streaming
     const aiMessageId = createAIMessage(shareDBDoc, chatId);
 
+    // --- throttle wrapper ---
+    function makeThrottledUpdater() {
+      let lastCall = 0;
+      let latestContent = '';
+      let timer: NodeJS.Timeout | null = null;
+
+      function invoke() {
+        updateAIMessageContent(
+          shareDBDoc,
+          chatId,
+          aiMessageId,
+          latestContent,
+        );
+        lastCall = Date.now();
+      }
+
+      const fn = (content: string) => {
+        latestContent = content;
+        const now = Date.now();
+
+        if (now - lastCall >= THROTTLE_INTERVAL_MS) {
+          // safe to call immediately
+          invoke();
+        } else if (!timer) {
+          // schedule for later
+          timer = setTimeout(
+            () => {
+              timer = null;
+              invoke();
+            },
+            THROTTLE_INTERVAL_MS - (now - lastCall),
+          );
+        }
+      };
+
+      // expose a flush() helper to force an immediate write
+      fn.flush = () => {
+        if (timer) {
+          clearTimeout(timer);
+          timer = null;
+        }
+        invoke();
+      };
+
+      return fn;
+    }
+
+    const throttledUpdateAIMessageContent =
+      makeThrottledUpdater();
+
     // Function to report file edited
     // This is called when the AI has finished editing a file
     // and we want to update the message content with the file name.
     const reportFileEdited = () => {
       if (currentEditingFileName) {
         fullContent += ` * Edited ${currentEditingFileName}\n`;
-        updateAIMessageContent(
-          shareDBDoc,
-          chatId,
-          aiMessageId,
-          fullContent,
-        );
+        throttledUpdateAIMessageContent(fullContent);
         currentEditingFileName = null;
       }
     };
@@ -186,12 +244,7 @@ export const createLLMFunction = ({
           reportFileEdited();
         }
         fullContent += line + '\n';
-        updateAIMessageContent(
-          shareDBDoc,
-          chatId,
-          aiMessageId,
-          fullContent,
-        );
+        throttledUpdateAIMessageContent(fullContent);
       },
     };
 
@@ -210,11 +263,9 @@ export const createLLMFunction = ({
     const requestConfig: any = {
       model: modelName,
       messages: [{ role: 'user', content: fullPrompt }],
-      provider: {
-        sort: 'price',
-      },
       usage: { include: true },
       stream: true,
+      ...aiRequestOptions,
     };
 
     // Only include reasoning configuration if reasoning tokens are enabled
@@ -233,6 +284,11 @@ export const createLLMFunction = ({
     let contentStarted = false;
 
     for await (const chunk of stream) {
+      if (slowMode) {
+        await new Promise((resolve) =>
+          setTimeout(resolve, 500),
+        );
+      }
       const delta = chunk.choices[0]?.delta as any; // Type assertion for OpenRouter-specific reasoning fields
 
       if (delta?.reasoning && enableReasoningTokens) {
@@ -267,12 +323,7 @@ export const createLLMFunction = ({
           await parser.processChunk(chunkContent);
         } else {
           fullContent += chunkContent;
-          updateAIMessageContent(
-            shareDBDoc,
-            chatId,
-            aiMessageId,
-            fullContent,
-          );
+          throttledUpdateAIMessageContent(fullContent);
         }
       } else if (chunk.usage) {
         // Handle usage information
@@ -289,12 +340,10 @@ export const createLLMFunction = ({
     // Final cleanup - clear scratchpad and set final status
     updateAIScratchpad(shareDBDoc, chatId, '');
     updateAIStatus(shareDBDoc, chatId, 'Done editing.');
-    updateAIMessageContent(
-      shareDBDoc,
-      chatId,
-      aiMessageId,
-      fullContent,
-    );
+    throttledUpdateAIMessageContent(fullContent);
+
+    // Flush to ensure the final content is written immediately
+    throttledUpdateAIMessageContent.flush();
 
     // Finalize the AI message by clearing temporary fields
     finalizeAIMessage(shareDBDoc, chatId);

package/src/types.ts

@@ -191,3 +191,15 @@ export type Username = string;
 export type SubmitOperation = (
   next: (content: VizContent) => VizContent,
 ) => void;
+
+// A value that has the capacity to be changed in the visual editor
+export type VisualEditorConfigEntry =
+  | {
+      type: 'number';
+      property: string;
+      label: string;
+      min: number;
+      max: number;
+      value: number;
+    }
+  | { type: 'boolean' };