vzcode 2.2.0 → 2.4.0

package/dist/submitOperation.js

@@ -0,0 +1,14 @@
+import { diff } from './ot.js';
+/**
+ * Creates a submitOperation function that can be used to submit diff-based operations to ShareDB.
+ * This is the core logic extracted from useSubmitOperation for reuse across client and server.
+ */
+export const createSubmitOperation = (shareDBDoc) => {
+    return (next) => {
+        const data = shareDBDoc.data;
+        const op = diff(data, next(data));
+        if (op && shareDBDoc) {
+            shareDBDoc.submitOp(op);
+        }
+    };
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/fileDiff.js

@@ -0,0 +1,66 @@
+import { createTwoFilesPatch } from 'diff';
+/**
+ * Generate a unified diff for a single file using the diff library
+ */
+export function generateFileUnifiedDiff(fileId, fileName, beforeContent, afterContent) {
+    // Only generate diff if there are actual changes
+    if (beforeContent === afterContent) {
+        return '';
+    }
+    // Use the diff library's createTwoFilesPatch function to generate unified diff
+    const unifiedDiff = createTwoFilesPatch(fileName, fileName, beforeContent, afterContent, '', '', { context: 3 });
+    return unifiedDiff;
+}
+/**
+ * Generate unified diffs for multiple files
+ */
+export function generateFilesUnifiedDiff(beforeFiles, afterFiles) {
+    const result = {};
+    const allFileIds = new Set([
+        ...Object.keys(beforeFiles),
+        ...Object.keys(afterFiles),
+    ]);
+    for (const fileId of allFileIds) {
+        const beforeFile = beforeFiles[fileId];
+        const afterFile = afterFiles[fileId];
+        const beforeContent = beforeFile?.text || '';
+        const afterContent = afterFile?.text || '';
+        const fileName = afterFile?.name || beforeFile?.name || fileId;
+        const unifiedDiff = generateFileUnifiedDiff(fileId, fileName, beforeContent, afterContent);
+        // Only include files that have changes
+        if (unifiedDiff) {
+            result[fileId] = unifiedDiff;
+        }
+    }
+    return result;
+}
+/**
+ * Create a snapshot of current files for diff comparison
+ */
+export function createFilesSnapshot(files) {
+    return JSON.parse(JSON.stringify(files));
+}
+/**
+ * Parse unified diff to extract basic statistics
+ */
+export function parseUnifiedDiffStats(unifiedDiff) {
+    const lines = unifiedDiff.split('\n');
+    let additions = 0;
+    let deletions = 0;
+    for (const line of lines) {
+        if (line.startsWith('+') && !line.startsWith('+++')) {
+            additions++;
+        }
+        else if (line.startsWith('-') &&
+            !line.startsWith('---')) {
+            deletions++;
+        }
+    }
+    return { additions, deletions };
+}
+/**
+ * Combine multiple unified diffs into a single diff string
+ */
+export function combineUnifiedDiffs(unifiedDiffs) {
+    return Object.values(unifiedDiffs).join('\n');
+}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "vzcode",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
-  "bin": "src/server/index.ts",
+  "bin": "dist/cli.js",
   "files": [
     "dist/**",
     "src/**"
@@ -15,8 +15,9 @@
     "prettier": "prettier {*.*,**/*.*} --write",
     "typecheck": "tsc --noEmit",
     "dev": "cross-env EDITOR_PORT=5173 concurrently \"npm run test-interactive\" \"vite\"",
-    "build": "vite build",
-    "build-release": "vite build --mode release",
+    "build": "vite build && npm run build:server",
+    "build:server": "tsc --project tsconfig.server.json",
+    "build-release": "vite build --mode release && npm run build:server",
     "preview": "concurrently \"npm run test-interactive\" \"vite preview\"",
     "tauri": "tauri",
     "tauri:dev": "tauri dev",
@@ -117,7 +118,7 @@
     "@codemirror/state": "^6.5.2",
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.38.1",
-    "@langchain/core": "^0.3.68",
+    "@langchain/core": "^0.3.70",
     "@langchain/openai": "^0.6.7",
     "@lezer/highlight": "^1.2.1",
     "@livekit/components-react": "^2.9.14",
@@ -127,17 +128,17 @@
     "@replit/codemirror-vscode-keymap": "^6.0.2",
     "@teamwork/websocket-json-stream": "^2.0.0",
     "@typescript/vfs": "^1.6.1",
-    "@uiw/codemirror-theme-abcdef": "^4.24.2",
-    "@uiw/codemirror-theme-dracula": "^4.24.2",
-    "@uiw/codemirror-theme-eclipse": "^4.24.2",
-    "@uiw/codemirror-theme-github": "^4.24.2",
-    "@uiw/codemirror-theme-material": "^4.24.2",
-    "@uiw/codemirror-theme-nord": "^4.24.2",
-    "@uiw/codemirror-theme-okaidia": "^4.24.2",
-    "@uiw/codemirror-theme-xcode": "^4.24.2",
-    "@uiw/codemirror-themes": "^4.24.2",
+    "@uiw/codemirror-theme-abcdef": "^4.25.1",
+    "@uiw/codemirror-theme-dracula": "^4.25.1",
+    "@uiw/codemirror-theme-eclipse": "^4.25.1",
+    "@uiw/codemirror-theme-github": "^4.25.1",
+    "@uiw/codemirror-theme-material": "^4.25.1",
+    "@uiw/codemirror-theme-nord": "^4.25.1",
+    "@uiw/codemirror-theme-okaidia": "^4.25.1",
+    "@uiw/codemirror-theme-xcode": "^4.25.1",
+    "@uiw/codemirror-themes": "^4.25.1",
     "@valtown/codemirror-ts": "^2.3.1",
-    "@vizhub/runtime": "^4.3.0",
+    "@vizhub/runtime": "^4.4.0",
     "@vizhub/viz-types": "^0.4.0",
     "@vizhub/viz-utils": "^1.4.0",
     "body-parser": "^2.2.0",
@@ -153,12 +154,12 @@
     "diff2html": "^3.4.52",
     "dotenv": "^17.2.1",
     "editcodewithai": "^2.3.0",
-    "eslint-linter-browserify": "^9.32.0",
+    "eslint-linter-browserify": "^9.33.0",
     "express": "^5.1.0",
     "ignore": "^7.0.5",
     "json0-ot-diff": "^1.1.2",
     "jszip": "^3.10.1",
-    "livekit-server-sdk": "^2.13.1",
+    "livekit-server-sdk": "^2.13.2",
     "llm-code-format": "^3.0.0",
     "lucide-react": "^0.539.0",
     "npm": "^11.5.2",
@@ -177,21 +178,21 @@
     "ws": "^8.18.3"
   },
   "devDependencies": {
-    "@eslint/js": "^9.32.0",
+    "@eslint/js": "^9.33.0",
     "@tauri-apps/cli": "^2.7.1",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@vitejs/plugin-react": "^5.0.0",
     "concurrently": "^9.2.0",
     "cross-env": "^10.0.0",
-    "eslint": "^9.32.0",
+    "eslint": "^9.33.0",
     "globals": "^16.3.0",
     "npm-check-updates": "^18.0.2",
     "prettier": "^3.6.2",
     "sass": "^1.90.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.2",
-    "vite": "^7.1.1",
+    "vite": "^7.1.2",
     "vitest": "^3.2.4"
   },
   "optionalDependencies": {

package/src/cli.ts

@@ -0,0 +1,208 @@
+#!/usr/bin/env node
+
+import { spawn } from 'child_process';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs';
+
+// Get the directory of the current module
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Function to find the Tauri binary
+function findTauriApp(): string | null {
+  // Look for the Tauri binary in common locations
+  const possiblePaths = [
+    // Development location (when running from source)
+    path.join(
+      __dirname,
+      '..',
+      'src-tauri',
+      'target',
+      'debug',
+      'vzcode',
+    ),
+    path.join(
+      __dirname,
+      '..',
+      'src-tauri',
+      'target',
+      'debug',
+      'vzcode.exe',
+    ),
+    // Release location (when running from built package)
+    path.join(
+      __dirname,
+      '..',
+      'src-tauri',
+      'target',
+      'release',
+      'vzcode',
+    ),
+    path.join(
+      __dirname,
+      '..',
+      'src-tauri',
+      'target',
+      'release',
+      'vzcode.exe',
+    ),
+    // MacOS app bundle
+    path.join(
+      __dirname,
+      '..',
+      'src-tauri',
+      'target',
+      'debug',
+      'vzcode.app',
+      'Contents',
+      'MacOS',
+      'vzcode',
+    ),
+    path.join(
+      __dirname,
+      '..',
+      'src-tauri',
+      'target',
+      'release',
+      'vzcode.app',
+      'Contents',
+      'MacOS',
+      'vzcode',
+    ),
+  ];
+
+  for (const binaryPath of possiblePaths) {
+    if (fs.existsSync(binaryPath)) {
+      return binaryPath;
+    }
+  }
+
+  return null;
+}
+
+// Function to launch the Tauri app
+function launchTauriApp(workingDirectory: string): void {
+  const tauriBinary = findTauriApp();
+
+  if (!tauriBinary) {
+    console.error(
+      'VZCode desktop app not found. Please build it first with: npm run tauri:build',
+    );
+    console.error(
+      'Falling back to launching browser version...',
+    );
+    launchBrowserVersion(workingDirectory);
+    return;
+  }
+
+  console.log(
+    `Launching VZCode desktop app from: ${workingDirectory}`,
+  );
+
+  // First start the server in the background
+  startServerInBackground(workingDirectory);
+
+  // Give the server a moment to start, then launch Tauri
+  setTimeout(() => {
+    const child = spawn(tauriBinary, [], {
+      cwd: workingDirectory,
+      stdio: 'inherit',
+      detached: true,
+    });
+
+    // Allow the parent process to exit while keeping the child running
+    child.unref();
+  }, 2000);
+}
+
+// Function to start the server in the background
+function startServerInBackground(
+  workingDirectory: string,
+): void {
+  // Start the server process in the background
+  const serverPath = path.join(
+    __dirname,
+    'server',
+    'index.js',
+  );
+  const serverChild = spawn('node', [serverPath], {
+    cwd: workingDirectory,
+    stdio: ['ignore', 'pipe', 'pipe'],
+    detached: true,
+  });
+
+  // Don't block on the server process
+  serverChild.unref();
+
+  // Log server output for debugging
+  if (serverChild.stdout) {
+    serverChild.stdout.on('data', (data) => {
+      console.log('Server:', data.toString());
+    });
+  }
+
+  if (serverChild.stderr) {
+    serverChild.stderr.on('data', (data) => {
+      console.error('Server error:', data.toString());
+    });
+  }
+}
+
+// Fallback function to launch the browser version
+async function launchBrowserVersion(
+  workingDirectory: string,
+): Promise<void> {
+  const { default: open } = await import('open');
+  const serverModule = await import('./server/index.js');
+
+  // Note: The server/index.js will use process.cwd() automatically
+  // and we're already in the correct working directory
+  console.log(
+    `Starting VZCode server from: ${workingDirectory}`,
+  );
+}
+
+// Main CLI function
+function main(): void {
+  const workingDirectory = process.cwd();
+
+  // Parse command line arguments
+  const args = process.argv.slice(2);
+
+  if (args.includes('--help') || args.includes('-h')) {
+    console.log('VZCode - Multiplayer Code Editor');
+    console.log('');
+    console.log('Usage: vzcode [options]');
+    console.log('');
+    console.log('Options:');
+    console.log('  --help, -h     Show this help message');
+    console.log(
+      '  --browser      Force browser version instead of desktop app',
+    );
+    console.log(
+      '  --port=<port>  Specify port for server (default: 3030)',
+    );
+    console.log('');
+    console.log('Examples:');
+    console.log(
+      '  vzcode                    # Launch desktop app in current directory',
+    );
+    console.log(
+      '  vzcode --browser          # Launch browser version',
+    );
+    console.log(
+      '  vzcode --port=4000        # Start server on port 4000',
+    );
+    return;
+  }
+
+  if (args.includes('--browser')) {
+    launchBrowserVersion(workingDirectory);
+  } else {
+    launchTauriApp(workingDirectory);
+  }
+}
+
+// Run the CLI
+main();

package/src/client/App/index.tsx

@@ -118,7 +118,6 @@ function App() {
         liveKitConnection={liveKitConnection}
         setLiveKitConnection={setLiveKitConnection}
         aiChatEndpoint="/ai-chat-message"
-        aiChatUndoEndpoint="/ai-chat-undo"
         aiChatOptions={{}}
       >
         <LiveKitRoom

package/src/client/VZCodeContext/types.ts

@@ -103,7 +103,6 @@ export type VZCodeContextValue = {
   aiChatMode: 'ask' | 'edit';
   setAIChatMode: (mode: 'ask' | 'edit') => void;
   aiChatEndpoint?: string;
-  aiChatUndoEndpoint?: string;
   aiChatOptions?: { [key: string]: any };
   setSearchResults: (files: ShareDBDoc<VizContent>) => void;
   setSearchFileVisibility: (
@@ -173,6 +172,8 @@ export type VZCodeContextValue = {
   setAIChatMessage: (message: string) => void;
   isLoading: boolean;
   currentChatId: string;
+  selectedChatId: string | null;
+  setSelectedChatId: (chatId: string | null) => void;
   aiErrorMessage: string | null;
   setAIErrorMessage: (state: string | null) => void;
   handleSendMessage: (
@@ -201,7 +202,6 @@ export type VZCodeContextValue = {
   additionalWidgets?: React.ComponentType<{
     messageId: string;
     chatId: string;
-    canUndo: boolean;
     handleSendMessage?: (
       messageToSend?: string,
       options?: Record<string, string>,
@@ -228,7 +228,6 @@ export interface VZCodeProviderProps {
   liveKitConnection?: boolean;
   setLiveKitConnection?: (state: boolean) => void;
   aiChatEndpoint?: string;
-  aiChatUndoEndpoint?: string;
   aiChatOptions?: { [key: string]: any };
   autoForkAndRetryAI?: (
     prompt: string,
@@ -243,7 +242,7 @@ export interface VZCodeProviderProps {
   additionalWidgets?: React.ComponentType<{
     messageId: string;
     chatId: string;
-    canUndo: boolean;
   }>;
   iframeRef?: React.MutableRefObject<HTMLIFrameElement>;
+  handleChatError?: (error: string) => void;
 }

package/src/client/VZCodeContext/useVZCodeState.ts

@@ -46,13 +46,13 @@ export const useVZCodeState = ({
   liveKitConnection,
   setLiveKitConnection,
   aiChatEndpoint,
-  aiChatUndoEndpoint,
   aiChatOptions,
   autoForkAndRetryAI,
   clearStoredAIPrompt,
   getStoredAIPrompt,
   additionalWidgets,
   iframeRef: externalIframeRef,
+  handleChatError,
 }: Omit<
   VZCodeProviderProps,
   'children'
@@ -272,7 +272,13 @@ export const useVZCodeState = ({
 
   // Compute isLoading based on the current chat's aiStatus
   const [currentChatId] = useState(() => uuidv4());
-  const currentChat = content?.chats?.[currentChatId];
+  const [selectedChatId, setSelectedChatId] = useState<
+    string | null
+  >(null);
+
+  // Use selectedChatId if available, otherwise use currentChatId for backward compatibility
+  const activeChatId = selectedChatId || currentChatId;
+  const currentChat = content?.chats?.[activeChatId];
   const isLoading = currentChat?.aiStatus === 'generating';
 
   // Message history for up/down arrow navigation - using ShareDB document data
@@ -287,10 +293,21 @@ export const useVZCodeState = ({
   const [historyIndex, setHistoryIndex] = useState(-1);
   const [currentDraft, setCurrentDraft] = useState('');
 
-  const [aiErrorMessage, setAIErrorMessage] = useState<
+  const [aiErrorMessage, setAIErrorMessageState] = useState<
     string | null
   >(null);
 
+  // Create the combined setAIErrorMessage function that calls both state setter and external callback
+  const setAIErrorMessage = useCallback(
+    (error: string | null) => {
+      setAIErrorMessageState(error);
+      if (error && handleChatError) {
+        handleChatError(error);
+      }
+    },
+    [handleChatError],
+  );
+
   // Message history navigation functions
   const navigateMessageHistoryUp = useCallback(() => {
     if (messageHistory.length === 0) return;
@@ -378,7 +395,7 @@ export const useVZCodeState = ({
           body: JSON.stringify({
             ...aiChatOptions,
             content: messageContent.trim(),
-            chatId: currentChatId,
+            chatId: activeChatId,
             mode: aiChatMode,
             ...options,
           }),
@@ -441,7 +458,7 @@ export const useVZCodeState = ({
       isLoading,
       aiChatEndpoint,
       aiChatOptions,
-      currentChatId,
+      activeChatId,
       aiChatMode,
       autoForkAndRetryAI,
     ],
@@ -497,7 +514,6 @@ export const useVZCodeState = ({
     aiChatMode: state.aiChatMode,
     setAIChatMode,
     aiChatEndpoint,
-    aiChatUndoEndpoint,
     aiChatOptions,
 
     isSettingsOpen,
@@ -564,6 +580,8 @@ export const useVZCodeState = ({
     setAIChatMessage,
     isLoading,
     currentChatId,
+    selectedChatId,
+    setSelectedChatId,
     aiErrorMessage,
     setAIErrorMessage,
     handleSendMessage,

package/src/client/VZSidebar/AIChat/ChatInput.tsx

@@ -60,6 +60,10 @@ const ChatInputComponent = ({
       if (event.key === 'Enter' && !event.shiftKey) {
         event.preventDefault();
         onSendMessage();
+      } else if (event.key === 'Enter' && event.shiftKey) {
+        // Shift+Enter should add a newline, not trigger run code
+        // We prevent the event from bubbling up to the global keyboard handler
+        event.stopPropagation();
       } else if (event.key === 'ArrowUp') {
         // Only navigate history if cursor is at the beginning of the first line
         const textarea =

package/src/client/VZSidebar/AIChat/Message.tsx

@@ -19,9 +19,7 @@ interface MessageProps {
   timestamp: number;
   isStreaming?: boolean;
   diffData?: UnifiedFilesDiff;
-  beforeFiles?: any;
   chatId?: string;
-  canUndo?: boolean;
 }
 
 const MessageComponent = ({
@@ -31,17 +29,10 @@ const MessageComponent = ({
   timestamp,
   isStreaming,
   diffData,
-  beforeFiles,
   chatId,
-  canUndo,
 }: MessageProps) => {
-  const [isUndoing, setIsUndoing] = useState(false);
-  const {
-    aiChatUndoEndpoint,
-    aiChatOptions = {},
-    additionalWidgets,
-    handleSendMessage,
-  } = useContext(VZCodeContext);
+  const { additionalWidgets, handleSendMessage } =
+    useContext(VZCodeContext);
 
   // Memoize date formatting to avoid repeated computation
   const formattedTime = useMemo(() => {
@@ -59,47 +50,6 @@ const MessageComponent = ({
     return `ai-chat-message ${role}${isStreaming ? ' streaming' : ''}`;
   }, [role, isStreaming]);
 
-  const handleUndo = async () => {
-    if (
-      !id ||
-      !chatId ||
-      !beforeFiles ||
-      isUndoing ||
-      !aiChatUndoEndpoint
-    ) {
-      return;
-    }
-
-    setIsUndoing(true);
-    try {
-      const response = await fetch(aiChatUndoEndpoint, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          vizId: aiChatOptions.vizId,
-          chatId,
-          messageId: id,
-        }),
-      });
-
-      if (!response.ok) {
-        throw new Error(
-          `HTTP error! status: ${response.status}`,
-        );
-      }
-
-      // The server will handle the ShareDB operations to undo the changes
-      // The UI will update automatically via ShareDB
-    } catch (error) {
-      console.error('Error undoing AI edit:', error);
-      // TODO: Show user-friendly error message
-    } finally {
-      setIsUndoing(false);
-    }
-  };
-
   return (
     <div className={messageClassName}>
       <div className="ai-chat-message-content">
@@ -112,26 +62,12 @@ const MessageComponent = ({
             <DiffView diffData={diffData} />
           )}
         {additionalWidgets &&
-          canUndo &&
           chatId &&
           React.createElement(additionalWidgets, {
             messageId: id,
             chatId: chatId,
-            canUndo: canUndo,
             handleSendMessage,
           })}
-        {!additionalWidgets && canUndo && beforeFiles && (
-          <div className="undo-button-container">
-            <button
-              className="undo-button"
-              onClick={handleUndo}
-              disabled={isUndoing}
-              title="Undo this AI edit"
-            >
-              {isUndoing ? 'Undoing...' : 'Undo'}
-            </button>
-          </div>
-        )}
       </div>
       <div className="ai-chat-message-time">
         {formattedTime}

package/src/client/VZSidebar/AIChat/MessageList.tsx

@@ -161,19 +161,6 @@ const MessageListComponent = ({
       onScroll={handleScroll}
     >
       {messages.map((msg, index) => {
-        // Only the most recent assistant message with diffData can be undone
-        const isLastAssistantMessage =
-          msg.role === 'assistant' &&
-          index === messages.length - 1 &&
-          !isLoading; // Can't undo while AI is still generating
-
-        const canUndo =
-          isLastAssistantMessage &&
-          (msg as any).diffData &&
-          (msg as any).beforeFiles &&
-          Object.keys((msg as any).diffData || {}).length >
-            0;
-
         return (
           <Message
             key={msg.id}
@@ -182,9 +169,7 @@ const MessageListComponent = ({
             content={msg.content}
             timestamp={msg.timestamp}
             diffData={(msg as any).diffData}
-            beforeFiles={(msg as any).beforeFiles}
             chatId={chatId}
-            canUndo={canUndo}
           />
         );
       })}