vzcode 2.30.0 → 2.31.0

package/dist/index.html

@@ -20,7 +20,7 @@
       href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-CD0x02Rq.js"></script>
+    <script type="module" crossorigin src="/assets/index-BfDRE_ou.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-Dyt9tpmu.css">
   </head>
   <body>

package/dist/llm-streaming-server/chatOperations.js

@@ -248,22 +248,50 @@ export const finalizeAIMessage = (shareDBDoc, chatId) => {
     shareDBDoc.submitOp(op);
 };
 /**
- * Adds diff data to the most recent AI message
+ * Adds diff data to a specific AI message by ID
+ * Phase 3 Fix: Use explicit message ID instead of assuming
+ * last message is AI, preventing bugs with rapid message sends
  */
-export const addDiffToAIMessage = (shareDBDoc, chatId, diffData, beforeCommitId) => {
+export const addDiffToAIMessage = (shareDBDoc, chatId, diffData, beforeCommitId, // Commit ID before AI changes
+messageId) => {
     const chat = shareDBDoc.data.chats[chatId];
+    if (!chat || !chat.messages) {
+        console.warn(`Chat ${chatId} not found or has no messages`);
+        return;
+    }
     const messages = [...chat.messages];
-    // Find the most recent AI message
-    const lastAIMessageIndex = messages.length - 1;
-    if (lastAIMessageIndex >= 0 &&
-        messages[lastAIMessageIndex].role === 'assistant') {
+    let targetMessageIndex = -1;
+    // Phase 3 Fix: Use explicit message ID if provided
+    if (messageId) {
+        targetMessageIndex = messages.findIndex((msg) => msg.id === messageId);
+        if (targetMessageIndex === -1 ||
+            messages[targetMessageIndex].role !== 'assistant') {
+            console.warn(`AI message with id ${messageId} not found in chat ${chatId}`);
+            return;
+        }
+    }
+    else {
+        // Fallback: Find the most recent AI message (safer than
+        // just assuming last message)
+        for (let i = messages.length - 1; i >= 0; i--) {
+            if (messages[i].role === 'assistant') {
+                targetMessageIndex = i;
+                break;
+            }
+        }
+        if (targetMessageIndex === -1) {
+            console.warn(`No AI message found in chat ${chatId}`);
+            return;
+        }
+    }
+    // Update the target message with diff data
+    if (targetMessageIndex >= 0) {
         const newMessage = {
-            ...messages[lastAIMessageIndex],
+            ...messages[targetMessageIndex],
             diffData,
-            ...(beforeCommitId && { beforeCommitId }), // Add beforeCommitId for VizHub integration
+            ...(beforeCommitId && { beforeCommitId }),
         };
-        // Use type assertion to extend the message with diffData
-        messages[lastAIMessageIndex] = newMessage;
+        messages[targetMessageIndex] = newMessage;
         const messageOp = diff(shareDBDoc.data, {
             ...shareDBDoc.data,
             chats: {
@@ -276,6 +304,8 @@ export const addDiffToAIMessage = (shareDBDoc, chatId, diffData, beforeCommitId)
             },
         });
         shareDBDoc.submitOp(messageOp);
+        DEBUG &&
+            console.log(`addDiffToAIMessage: Successfully added diff to message ${targetMessageIndex} in chat ${chatId}`);
     }
 };
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "2.30.0",
+  "version": "2.31.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",

package/src/client/CodeEditor/getOrCreateEditor.tsx

@@ -189,6 +189,7 @@ export const getOrCreateEditor = async ({
   rainbowBracketsEnabled = true,
   setIsAIChatOpen,
   setAIChatMessage,
+  enableBuiltInAIChat = true,
 }: {
   // TODO pass this in from the outside
   paneId?: PaneId;
@@ -226,6 +227,10 @@ export const getOrCreateEditor = async ({
   rainbowBracketsEnabled?: boolean; // New parameter type
   setIsAIChatOpen: (isAIChatOpen: boolean) => void;
   setAIChatMessage: (message: string) => void;
+  // When false, skip the "Implement the TODO" widget, which opens
+  // VZCode's built-in AI chat (hosts that own the AI entry point
+  // disable it).
+  enableBuiltInAIChat?: boolean;
 }): Promise<ExtendedEditorCacheValue> => {
   // Cache hit
 
@@ -580,7 +585,7 @@ export const getOrCreateEditor = async ({
       return todoPlugin;
     }
 
-    if (enableToDoPlugin) {
+    if (enableToDoPlugin && enableBuiltInAIChat) {
       extensions.push(createToDoPlugin());
     }
   }

package/src/client/CodeEditor/index.tsx

@@ -22,12 +22,14 @@ export const CodeEditor = ({
   customInteractRules,
   aiCopilotEndpoint,
   esLintSource,
+  enableBuiltInAIChat = true,
 }: {
   customInteractRules?: Array<InteractRule>;
   aiCopilotEndpoint?: string;
   esLintSource: (
     view: EditorView,
   ) => Promise<readonly Diagnostic[]>;
+  enableBuiltInAIChat?: boolean;
 }) => {
   const {
     activePane,
@@ -118,6 +120,7 @@ export const CodeEditor = ({
         esLintSource,
         setIsAIChatOpen,
         setAIChatMessage,
+        enableBuiltInAIChat,
       });
 
       if (isMounted) {
@@ -143,6 +146,7 @@ export const CodeEditor = ({
     esLintSource,
     setIsAIChatOpen,
     setAIChatMessage,
+    enableBuiltInAIChat,
   ]);
 
   // Every time the active file switches from one file to another,

package/src/client/VZCodeContext/useVZCodeState.ts

@@ -541,6 +541,7 @@ export const useVZCodeState = ({
       activeChatId,
       aiChatMode,
       autoForkAndRetryAI,
+      onAIChatMessageSubmitted,
       DEBUG,
       setAIErrorMessage,
     ],

package/src/client/VZLeft.tsx

@@ -10,10 +10,25 @@ import { VoiceChatModal } from './VZSidebar/VoiceChatModal';
 // * The sidebar
 // * The settings modal
 // * The create file modal
-export const VZLeft = ({ enableUsernameField = true }) => {
+//
+// `enableAIChat` is forwarded to `VZSidebar` so a host can hide the
+// "Edit with AI" sidebar button. `undefined` falls back to the
+// compile-time feature flag.
+export const VZLeft = ({
+  enableUsernameField = true,
+  enableAIChat,
+  aiChatButtonEvent,
+}: {
+  enableUsernameField?: boolean;
+  enableAIChat?: boolean;
+  aiChatButtonEvent?: string;
+} = {}) => {
   return (
     <div className="left">
-      <VZSidebar />
+      <VZSidebar
+        enableAIChat={enableAIChat}
+        aiChatButtonEvent={aiChatButtonEvent}
+      />
       <VZSettings
         enableUsernameField={enableUsernameField}
       />

package/src/client/VZMiddle.tsx

@@ -28,6 +28,7 @@ const PaneView = ({
   aiAssistClickOverride,
   aiCopilotEndpoint,
   esLintSource,
+  enableBuiltInAIChat,
 }) => {
   // This prevents the CodeEditor from rendering
   // during SSR.
@@ -67,6 +68,7 @@ const PaneView = ({
               customInteractRules={customInteractRules}
               aiCopilotEndpoint={aiCopilotEndpoint}
               esLintSource={esLintSource}
+              enableBuiltInAIChat={enableBuiltInAIChat}
             />
           );
         })()}
@@ -104,6 +106,8 @@ export const VZMiddle = ({
   aiCopilotEndpoint,
   customInteractRules,
   esLintSource,
+  enableAIChat = true,
+  aiChatButtonEvent,
 }: {
   enableAIAssist?: boolean;
   aiAssistEndpoint?: string;
@@ -115,7 +119,14 @@ export const VZMiddle = ({
   esLintSource: (
     view: EditorView,
   ) => Promise<readonly Diagnostic[]>;
+  enableAIChat?: boolean;
+  aiChatButtonEvent?: string;
 }) => {
+  // The built-in AI chat (including the TODO widget, which prefills a
+  // chat message) is only reachable when the feature is enabled and the
+  // host hasn't taken over the sidebar button with a custom event.
+  const enableBuiltInAIChat =
+    enableAIChat && !aiChatButtonEvent;
   const { codeEditorWidth } = useContext(
     SplitPaneResizeContext,
   );
@@ -152,6 +163,7 @@ export const VZMiddle = ({
         aiAssistClickOverride={aiAssistClickOverride}
         aiCopilotEndpoint={aiCopilotEndpoint}
         esLintSource={esLintSource}
+        enableBuiltInAIChat={enableBuiltInAIChat}
       />
       <CodeErrorOverlay
         errorMessage={errorMessage}

package/src/client/VZSidebar/VisualEditor/VisualEditor.tsx

@@ -16,6 +16,10 @@ import { CheckboxWidget } from './CheckboxWidget';
 import { TextInputWidget } from './TextInputWidget';
 import { DropdownWidget } from './DropdownWidget';
 import { ColorWidget } from './ColorWidget';
+import {
+  getNestedProperty,
+  setNestedProperty,
+} from './utils';
 
 export const VisualEditor = () => {
   const { files, submitOperation } =
@@ -66,11 +70,12 @@ export const VisualEditor = () => {
           [property]: newValue,
         }));
 
-        // Update config.json
-        const newConfigData = {
-          ...configData,
-          [property]: newValue,
-        };
+        // Update config.json with support for nested properties
+        const newConfigData = setNestedProperty(
+          configData,
+          property,
+          newValue,
+        );
 
         submitOperation((document: VizContent) => ({
           ...document,
@@ -97,11 +102,12 @@ export const VisualEditor = () => {
           [property]: newValue,
         }));
 
-        // Update config.json
-        const newConfigData = {
-          ...configData,
-          [property]: newValue,
-        };
+        // Update config.json with support for nested properties
+        const newConfigData = setNestedProperty(
+          configData,
+          property,
+          newValue,
+        );
 
         submitOperation((document: VizContent) => ({
           ...document,
@@ -128,11 +134,12 @@ export const VisualEditor = () => {
           [property]: newValue,
         }));
 
-        // Update config.json
-        const newConfigData = {
-          ...configData,
-          [property]: newValue,
-        };
+        // Update config.json with support for nested properties
+        const newConfigData = setNestedProperty(
+          configData,
+          property,
+          newValue,
+        );
 
         submitOperation((document: VizContent) => ({
           ...document,
@@ -156,11 +163,12 @@ export const VisualEditor = () => {
         [property]: newValue,
       }));
 
-      // Update config.json
-      const newConfigData = {
-        ...configData,
-        [property]: newValue,
-      };
+      // Update config.json with support for nested properties
+      const newConfigData = setNestedProperty(
+        configData,
+        property,
+        newValue,
+      );
 
       submitOperation((document: VizContent) => ({
         ...document,
@@ -224,9 +232,10 @@ export const VisualEditor = () => {
           event.currentTarget.value,
         );
 
-        // Get current hex color from config
+        // Get current hex color from config using nested property access
         const currentHex =
-          configData[property] || '#000000';
+          getNestedProperty<string>(configData, property) ??
+          '#000000';
 
         // Convert current hex to LCH
         let hclFromRGB: HCLColor;
@@ -281,11 +290,12 @@ export const VisualEditor = () => {
           [`${property}_l`]: newhcl[2],
         }));
 
-        // Update config.json with hex value
-        const newConfigData = {
-          ...configData,
-          [property]: newHex,
-        };
+        // Update config.json with hex value using nested property access
+        const newConfigData = setNestedProperty(
+          configData,
+          property,
+          newHex,
+        );
 
         submitOperation((document: VizContent) => ({
           ...document,
@@ -320,23 +330,36 @@ export const VisualEditor = () => {
     } = {};
     visualEditorWidgets.forEach((widget) => {
       if (widget.type === 'slider') {
-        newLocalValues[widget.property] =
-          configData[widget.property];
+        newLocalValues[widget.property] = getNestedProperty(
+          configData,
+          widget.property,
+        );
       } else if (widget.type === 'checkbox') {
-        newLocalValues[widget.property] =
-          configData[widget.property];
+        newLocalValues[widget.property] = getNestedProperty(
+          configData,
+          widget.property,
+        );
       } else if (widget.type === 'textInput') {
-        newLocalValues[widget.property] =
-          configData[widget.property];
+        newLocalValues[widget.property] = getNestedProperty(
+          configData,
+          widget.property,
+        );
       } else if (widget.type === 'dropdown') {
-        newLocalValues[widget.property] =
-          configData[widget.property];
+        newLocalValues[widget.property] = getNestedProperty(
+          configData,
+          widget.property,
+        );
       } else if (widget.type === 'color') {
-        newLocalValues[widget.property] =
-          configData[widget.property];
+        newLocalValues[widget.property] = getNestedProperty(
+          configData,
+          widget.property,
+        );
 
         // Convert hex to LCH for internal state
-        const hexColor = configData[widget.property];
+        const hexColor = getNestedProperty<string>(
+          configData,
+          widget.property,
+        );
 
         if (localValues[widget.property] !== hexColor) {
           if (hexColor) {
@@ -414,8 +437,14 @@ export const VisualEditor = () => {
         if (widgetConfig.type === 'slider') {
           // Use local value if available, otherwise fall back to config value
           const currentValue =
-            localValues[widgetConfig.property] ??
-            configData[widgetConfig.property];
+            (localValues[
+              widgetConfig.property
+            ] as number) ??
+            getNestedProperty<number>(
+              configData,
+              widgetConfig.property,
+            ) ??
+            widgetConfig.min;
 
           return (
             <SliderWidget
@@ -434,8 +463,14 @@ export const VisualEditor = () => {
         } else if (widgetConfig.type === 'checkbox') {
           // Use local value if available, otherwise fall back to config value
           const currentValue =
-            localValues[widgetConfig.property] ??
-            configData[widgetConfig.property];
+            (localValues[
+              widgetConfig.property
+            ] as boolean) ??
+            getNestedProperty<boolean>(
+              configData,
+              widgetConfig.property,
+            ) ??
+            false;
 
           return (
             <CheckboxWidget
@@ -451,8 +486,14 @@ export const VisualEditor = () => {
         } else if (widgetConfig.type === 'textInput') {
           // Use local value if available, otherwise fall back to config value
           const currentValue =
-            localValues[widgetConfig.property] ??
-            configData[widgetConfig.property];
+            (localValues[
+              widgetConfig.property
+            ] as string) ??
+            getNestedProperty<string>(
+              configData,
+              widgetConfig.property,
+            ) ??
+            '';
 
           return (
             <TextInputWidget
@@ -468,8 +509,15 @@ export const VisualEditor = () => {
         } else if (widgetConfig.type === 'dropdown') {
           // Use local value if available, otherwise fall back to config value
           const currentValue =
-            localValues[widgetConfig.property] ??
-            configData[widgetConfig.property];
+            (localValues[
+              widgetConfig.property
+            ] as string) ??
+            getNestedProperty<string>(
+              configData,
+              widgetConfig.property,
+            ) ??
+            widgetConfig.options?.[0] ??
+            '';
           const isOpen =
             openDropdown === widgetConfig.property;
 
@@ -495,8 +543,13 @@ export const VisualEditor = () => {
         } else if (widgetConfig.type === 'color') {
           // Use local value if available, otherwise fall back to config value
           const currentHex =
-            localValues[widgetConfig.property] ??
-            configData[widgetConfig.property] ??
+            (localValues[
+              widgetConfig.property
+            ] as string) ??
+            getNestedProperty<string>(
+              configData,
+              widgetConfig.property,
+            ) ??
             '#000000';
 
           // Convert hex to LCH for slider values

package/src/client/VZSidebar/VisualEditor/utils.ts

@@ -100,3 +100,116 @@ export const renderSliderBackground = (
 
   ctx.putImageData(imageData, 0, 0);
 };
+
+// Helper function to get nested property value using dot notation
+export const getNestedProperty = <T = unknown>(
+  obj: Record<string, unknown>,
+  path: string,
+): T | undefined => {
+  // Validate path to prevent empty strings, consecutive dots, or leading/trailing dots
+  if (
+    !path ||
+    path.includes('..') ||
+    path.startsWith('.') ||
+    path.endsWith('.')
+  ) {
+    return undefined;
+  }
+
+  const keys = path.split('.');
+  let value: unknown = obj;
+  for (const key of keys) {
+    // Skip empty keys that might result from splitting
+    if (!key) {
+      return undefined;
+    }
+    if (value === null || value === undefined) {
+      return undefined;
+    }
+    // Type guard to ensure value is an object before accessing property
+    if (typeof value !== 'object') {
+      return undefined;
+    }
+    value = (value as Record<string, unknown>)[key];
+  }
+  return value as T | undefined;
+};
+
+// Helper function to set nested property value using dot notation
+export const setNestedProperty = <
+  T extends Record<string, unknown>,
+>(
+  obj: T,
+  path: string,
+  value: unknown,
+): T => {
+  // Validate path to prevent empty strings, consecutive dots, or leading/trailing dots
+  if (
+    !path ||
+    path.includes('..') ||
+    path.startsWith('.') ||
+    path.endsWith('.')
+  ) {
+    throw new Error(
+      `Invalid property path "${path}" - path cannot be empty, contain consecutive dots, or have leading/trailing dots`,
+    );
+  }
+
+  const keys = path.split('.');
+
+  // Check for empty keys
+  if (keys.some((key) => !key)) {
+    throw new Error(
+      `Invalid property path "${path}" - path contains empty segments`,
+    );
+  }
+
+  const newObj = { ...obj };
+  let current: Record<string, unknown> = newObj;
+
+  // List of dangerous keys that could lead to prototype pollution
+  const dangerousKeys = [
+    '__proto__',
+    'constructor',
+    'prototype',
+  ];
+
+  for (let i = 0; i < keys.length - 1; i++) {
+    const key = keys[i];
+
+    // Guard against prototype pollution
+    if (dangerousKeys.includes(key)) {
+      throw new Error(
+        `Cannot set property "${key}" - potential prototype pollution`,
+      );
+    }
+
+    // Create nested object if it doesn't exist or isn't a plain object
+    if (
+      current[key] == null ||
+      typeof current[key] !== 'object' ||
+      Array.isArray(current[key])
+    ) {
+      current[key] = {};
+    } else {
+      // Clone the nested object to avoid mutation
+      current[key] = {
+        ...(current[key] as Record<string, unknown>),
+      };
+    }
+    current = current[key] as Record<string, unknown>;
+  }
+
+  // Guard against prototype pollution for the final key
+  const finalKey = keys[keys.length - 1];
+  if (dangerousKeys.includes(finalKey)) {
+    throw new Error(
+      `Cannot set property "${finalKey}" - potential prototype pollution`,
+    );
+  }
+
+  // Set the final value
+  current[finalKey] = value;
+
+  return newObj;
+};

package/src/client/VZSidebar/index.tsx

@@ -40,14 +40,22 @@ import { useDragAndDrop } from './useDragAndDrop';
 import { createAICopyPasteHandlers } from './aiCopyPaste';
 import {
   enableLiveKit,
-  enableAIChat,
+  enableAIChat as enableAIChatFeatureFlag,
 } from '../featureFlags';
+import { handleAIChatButtonClick } from '../aiChatButtonEvent';
 import './styles.scss';
 import { VisualEditor } from './VisualEditor';
 
 const enableConnectionStatus = true;
 
 export const VZSidebar = ({
+  // Host-provided override so consumers (e.g. VizHub Studio, which has
+  // its own top-bar "AI Edit" entry point) can hide the "Edit with AI"
+  // sidebar button. Defaults to the compile-time feature flag.
+  enableAIChat = enableAIChatFeatureFlag,
+  // When set, clicking the button dispatches this custom event instead
+  // of opening VZCode's built-in AI chat, letting the host handle it.
+  aiChatButtonEvent,
   createFileTooltipText = (
     <>
       <strong>New file</strong>
@@ -135,6 +143,8 @@ export const VZSidebar = ({
   voiceChatToolTipText?: React.ReactNode;
   aiChatToolTipText?: React.ReactNode;
   visualEditorToolTipText?: React.ReactNode;
+  enableAIChat?: boolean;
+  aiChatButtonEvent?: string;
 }) => {
   const {
     files,
@@ -341,11 +351,17 @@ export const VZSidebar = ({
               <i
                 id="ai-chat-icon"
                 className="icon-button icon-button-dark"
-                onClick={() => {
-                  setIsAIChatOpen(true);
-                  setIsSearchOpen(false);
-                  setSidebarView(true); // Switch to AI chat view
-                }}
+                onClick={() =>
+                  handleAIChatButtonClick({
+                    aiChatButtonEvent,
+                    target: window,
+                    openAIChat: () => {
+                      setIsAIChatOpen(true);
+                      setIsSearchOpen(false);
+                      setSidebarView(true); // Switch to AI chat view
+                    },
+                  })
+                }
               >
                 <SparklesSVG />
               </i>
@@ -411,6 +427,7 @@ export const VZSidebar = ({
                 setIsVisualEditorOpen(true);
                 setIsAIChatOpen(false);
                 setIsSearchOpen(false);
+                setSidebarView(false); // Switch to files view width for visual editor
               }}
             >
               <AdjustmentSVG />