vzcode 2.15.0 → 2.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
@@ -120,8 +120,8 @@
     "@codemirror/state": "^6.5.2",
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.38.2",
-    "@langchain/core": "^0.3.75",
-    "@langchain/openai": "^0.6.11",
+    "@langchain/core": "^0.3.77",
+    "@langchain/openai": "^0.6.13",
     "@lezer/highlight": "^1.2.1",
     "@livekit/components-react": "^2.9.14",
     "@replit/codemirror-indentation-markers": "^6.5.3",
@@ -172,7 +172,7 @@
     "react-bootstrap": "^2.10.10",
     "react-dom": "^18",
     "react-markdown": "^10.1.0",
-    "react-router-dom": "^7.8.2",
+    "react-router-dom": "^7.9.1",
     "remark-gfm": "^4.0.1",
     "sharedb": "^5.2.2",
     "sharedb-client-browser": "^5.2.2",
@@ -186,9 +186,9 @@
     "@types/d3-color": "^3.1.3",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@typescript-eslint/eslint-plugin": "^8.43.0",
-    "@typescript-eslint/parser": "^8.43.0",
-    "@vitejs/plugin-react": "^5.0.2",
+    "@typescript-eslint/eslint-plugin": "^8.44.0",
+    "@typescript-eslint/parser": "^8.44.0",
+    "@vitejs/plugin-react": "^5.0.3",
     "concurrently": "^9.2.1",
     "cross-env": "^10.0.0",
     "eslint": "^9.35.0",
@@ -196,16 +196,16 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "globals": "^16.4.0",
-    "npm-check-updates": "^18.1.0",
+    "npm-check-updates": "^18.1.1",
     "prettier": "^3.6.2",
     "sass": "^1.92.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.2",
-    "vite": "^7.1.5",
+    "vite": "^7.1.6",
     "vitest": "^3.2.4"
   },
   "optionalDependencies": {
-    "@rollup/rollup-darwin-arm64": "^4.50.1",
-    "@rollup/rollup-win32-x64-msvc": "^4.50.1"
+    "@rollup/rollup-darwin-arm64": "^4.50.2",
+    "@rollup/rollup-win32-x64-msvc": "^4.50.2"
   }
 }

package/src/client/AIAssist/AIAssistWidget/index.tsx

@@ -101,7 +101,18 @@ export const AIAssistWidget = ({
           : currentAIStreamId,
       );
     }
-  }, [activeFileId, paneId, aiStreamId]);
+  }, [
+    activeFileId,
+    paneId,
+    aiStreamId,
+    aiAssistEndpoint,
+    aiAssistOptions,
+    editorCache,
+    runCodeRef,
+    runPrettierRef,
+    shareDBDoc,
+    tabList,
+  ]);
 
   const showWidget = enableStopGeneration
     ? true

package/src/client/App/useShareDB.ts

@@ -138,7 +138,7 @@ export const useShareDB = ({
       // shareDBDoc.destroy();
       // docPresence.destroy();
     };
-  }, []);
+  }, [connection]);
 
   // True for "Saving..."
   // False for "Saved"

package/src/client/CodeEditor/index.tsx

@@ -134,15 +134,16 @@ export const CodeEditor = ({
   }, [
     activePane,
     shareDBDoc,
-    filesPath,
     localPresence,
     docPresence,
     theme,
     onInteract,
     editorCache,
-    usernameRef,
+    customInteractRules,
     aiCopilotEndpoint,
     esLintSource,
+    setIsAIChatOpen,
+    handleSendMessage,
   ]);
 
   // Every time the active file switches from one file to another,
@@ -155,10 +156,10 @@ export const CodeEditor = ({
     if (!editorCacheValue) return; // Guard against null editorCacheValue
     // if (openSplitPane) return;
 
+    const codeEditorEl = codeEditorRef.current;
+
     // Add the editor and apply the prior scroll position to the DOM.
-    codeEditorRef.current.appendChild(
-      editorCacheValue.editor.dom,
-    );
+    codeEditorEl.appendChild(editorCacheValue.editor.dom);
     editorCacheValue.editor.scrollDOM.scrollTo({
       top: editorCacheValue.scrollPosition ?? 0,
     });
@@ -168,18 +169,16 @@ export const CodeEditor = ({
       // This happens every time `activeFileId` changes.
       if (
         editorCacheValue &&
-        codeEditorRef.current?.contains(
-          editorCacheValue.editor.dom,
-        )
+        codeEditorEl?.contains(editorCacheValue.editor.dom)
       ) {
         editorCacheValue.scrollPosition =
           editorCacheValue.editor.scrollDOM.scrollTop;
-        codeEditorRef.current.removeChild(
+        codeEditorEl.removeChild(
           editorCacheValue.editor.dom,
         );
       }
     };
-  }, [shareDBDoc, editorCacheValue]);
+  }, [codeEditorRef, content, editorCacheValue]);
 
   // Focus the editor
   useEffect(() => {

package/src/client/VZCodeContext/types.ts

@@ -170,7 +170,6 @@ export type VZCodeContextValue = {
   setVoiceChatModalOpen: (state: boolean) => void;
   aiChatMessage: string;
   setAIChatMessage: (message: string) => void;
-  isLoading: boolean;
   currentChatId: string;
   selectedChatId: string | null;
   setSelectedChatId: (chatId: string | null) => void;
@@ -207,6 +206,9 @@ export type VZCodeContextValue = {
       options?: Record<string, string>,
     ) => void;
   }) => React.ReactNode;
+
+  // Feature flags
+  enableMinimalEditFlow: boolean;
 };
 
 export interface VZCodeProviderProps {

package/src/client/VZCodeContext/useVZCodeState.ts

@@ -27,6 +27,7 @@ import {
   VZCodeContextValue,
   VZCodeProviderProps,
 } from './types';
+import { enableMinimalEditFlow } from '../featureFlags';
 
 export const useVZCodeState = ({
   content,
@@ -280,7 +281,6 @@ export const useVZCodeState = ({
   // 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
   const messageHistory = useMemo(() => {
@@ -371,8 +371,7 @@ export const useVZCodeState = ({
       if (
         !messageContent ||
         typeof messageContent !== 'string' ||
-        !messageContent.trim() ||
-        isLoading
+        !messageContent.trim()
       ) {
         return;
       }
@@ -473,12 +472,13 @@ export const useVZCodeState = ({
     },
     [
       aiChatMessage,
-      isLoading,
       aiChatEndpoint,
       aiChatOptions,
       activeChatId,
       aiChatMode,
       autoForkAndRetryAI,
+      DEBUG,
+      setAIErrorMessage,
     ],
   );
 
@@ -679,7 +679,6 @@ export const useVZCodeState = ({
 
     aiChatMessage,
     setAIChatMessage,
-    isLoading,
     currentChatId,
     selectedChatId,
     setSelectedChatId,
@@ -699,5 +698,8 @@ export const useVZCodeState = ({
 
     // Additional widgets that can be rendered in AI chat messages
     additionalWidgets,
+
+    // Feature flags
+    enableMinimalEditFlow,
   };
 };

package/src/client/VZRight.tsx

@@ -42,7 +42,7 @@ export const VZRight = () => {
       content
         ? vizFilesToFileCollection(content.files)
         : null,
-    [content?.files],
+    [content],
   );
 
   const isInteracting = content?.isInteracting || false;
@@ -101,7 +101,15 @@ export const VZRight = () => {
     //   runtime.cleanup();
     //   worker.terminate();
     // };
-  }, [files, isInteracting, runIdChanged, hardRerun]);
+  }, [
+    files,
+    isInteracting,
+    runIdChanged,
+    hardRerun,
+    clearRuntimeError,
+    handleRuntimeError,
+    iframeRef,
+  ]);
 
   return (
     <div className="right">

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

@@ -18,7 +18,6 @@ interface ChatInputProps {
   aiChatMessage: string;
   setAIChatMessage: (message: string) => void;
   onSendMessage: () => void;
-  isLoading: boolean;
   focused: boolean;
   aiChatMode: 'ask' | 'edit';
   setAIChatMode: (mode: 'ask' | 'edit') => void;
@@ -31,7 +30,6 @@ const ChatInputComponent = ({
   aiChatMessage,
   setAIChatMessage,
   onSendMessage,
-  isLoading,
   focused,
   aiChatMode,
   setAIChatMode,
@@ -141,7 +139,6 @@ const ChatInputComponent = ({
               value="ask"
               checked={aiChatMode === 'ask'}
               onChange={() => setAIChatMode('ask')}
-              disabled={isLoading}
             >
               💬 Ask
             </ToggleButton>
@@ -157,7 +154,6 @@ const ChatInputComponent = ({
               value="edit"
               checked={aiChatMode === 'edit'}
               onChange={() => setAIChatMode('edit')}
-              disabled={isLoading}
             >
               ✏️ Edit
             </ToggleButton>
@@ -183,7 +179,6 @@ const ChatInputComponent = ({
               : 'Ask me anything about your code...'
           }
           spellCheck="false"
-          disabled={isLoading}
           aria-label="Chat message input"
         />
         <div className="ai-chat-input-footer">
@@ -197,7 +192,6 @@ const ChatInputComponent = ({
               }
               size="sm"
               onClick={toggleSpeechRecognition}
-              disabled={isLoading}
               aria-label={
                 isSpeaking
                   ? 'Stop voice typing'
@@ -226,7 +220,7 @@ const ChatInputComponent = ({
                   : 'outline-secondary'
               }
               onClick={handleSendClick}
-              disabled={!aiChatMessage.trim() || isLoading}
+              disabled={!aiChatMessage.trim()}
               className="ai-chat-send-button"
               aria-label="Send message"
               title="Send message (Enter)"

package/src/client/VZSidebar/AIChat/DiffView.scss

@@ -100,6 +100,7 @@
 
     // Fix file header styling
     .d2h-file-header {
+      display: none !important;
       background-color: var(
         --d2h-file-header-bg-color
       ) !important;

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

@@ -2,6 +2,8 @@ import React, {
   useContext,
   useEffect,
   useRef,
+  forwardRef,
+  useImperativeHandle,
 } from 'react';
 import {
   UnifiedFilesDiff,
@@ -12,15 +14,29 @@ import * as Diff2Html from 'diff2html';
 import 'diff2html/bundles/css/diff2html.min.css';
 import './DiffView.scss';
 import { VZCodeContext } from '../../VZCodeContext';
-import { VizFiles } from '@vizhub/viz-types';
+import {
+  scrollToFirstDiff,
+  getHeaderOffset,
+  announceDiffSummary,
+} from '../../utils/scrollUtils';
+import { getFileId } from '@vizhub/viz-utils';
 
 interface DiffViewProps {
   diffData: UnifiedFilesDiff;
 }
 
-export const DiffView: React.FC<DiffViewProps> = ({
-  diffData,
-}) => {
+// Methods that can be called on DiffView from parent components
+export interface DiffViewRef {
+  scrollToFirstHunk: () => void;
+  focusDiffContainer: () => void;
+  announceSummary: () => void;
+  getFirstHunkElement: () => HTMLElement | null;
+}
+
+export const DiffView = forwardRef<
+  DiffViewRef,
+  DiffViewProps
+>(({ diffData }, ref) => {
   const { content, openTab, setIsAIChatOpen } =
     useContext(VZCodeContext);
   const diffContainerRef = useRef<HTMLDivElement>(null);
@@ -48,6 +64,42 @@ export const DiffView: React.FC<DiffViewProps> = ({
     outputFormat: 'line-by-line',
   });
 
+  // Expose methods for parent components to control scrolling and focus
+  useImperativeHandle(
+    ref,
+    () => ({
+      scrollToFirstHunk: () => {
+        if (diffContainerRef.current) {
+          const headerOffset = getHeaderOffset();
+          scrollToFirstDiff(
+            diffContainerRef.current,
+            headerOffset,
+          );
+        }
+      },
+      focusDiffContainer: () => {
+        if (diffContainerRef.current) {
+          diffContainerRef.current.tabIndex = -1;
+          diffContainerRef.current.focus();
+        }
+      },
+      announceSummary: () => {
+        if (diffContainerRef.current) {
+          announceDiffSummary(diffContainerRef.current);
+        }
+      },
+      getFirstHunkElement: () => {
+        if (diffContainerRef.current) {
+          return diffContainerRef.current.querySelector(
+            '.d2h-diff-tbody tr',
+          );
+        }
+        return null;
+      },
+    }),
+    [],
+  );
+
   // Add click handlers to file names after HTML is rendered
   useEffect(() => {
     if (!diffContainerRef.current) return;
@@ -63,29 +115,13 @@ export const DiffView: React.FC<DiffViewProps> = ({
         const fileName = target.textContent?.trim();
 
         console.log('Clicked file name:', fileName);
-        if (fileName) {
-          const files: VizFiles = content?.files;
-          if (files) {
-            //             export type VizFiles = {
-            //     [fileId: VizFileId]: VizFile;
-            // };
-            // export type VizFileId = string;
-            // export type VizFile = {
-            //     name: string;
-            //     text: string;
-            // };
-
-            // TODO get fileId from content.files
-            const fileId = Object.entries(files).find(
-              ([_id, file]) => file.name === fileName,
-            )?.[0];
-            console.log('Mapped file ID:', fileId);
-
-            if (fileId) {
-              // Open the file tab and switch to files view
-              openTab({ fileId, isTransient: false });
-              setIsAIChatOpen(false);
-            }
+        if (fileName && content) {
+          const fileId = getFileId(content, fileName);
+
+          if (fileId) {
+            // Open the file tab and switch to files view
+            openTab({ fileId, isTransient: false });
+            setIsAIChatOpen(false);
           }
         }
       }
@@ -125,7 +161,7 @@ export const DiffView: React.FC<DiffViewProps> = ({
 
   return (
     <div className="diff-view">
-      <div className="diff-summary">
+      <div className="diff-summary" id="diff-summary">
         <div className="diff-stats">
           <span className="files-changed">
             {unifiedDiffs.length} file
@@ -147,8 +183,15 @@ export const DiffView: React.FC<DiffViewProps> = ({
       <div
         className="diff-files"
         ref={diffContainerRef}
+        tabIndex={-1}
+        role="region"
+        aria-label="Code diff content"
+        aria-describedby="diff-summary"
         dangerouslySetInnerHTML={{ __html: diffHtml }}
       />
     </div>
   );
-};
+});
+
+// Add display name for debugging
+DiffView.displayName = 'DiffView';

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

@@ -0,0 +1,81 @@
+import { Spinner } from '../../AIAssist/Spinner';
+
+interface AIEditingStatusIndicatorProps {
+  status: string;
+  fileName?: string;
+}
+
+export const AIEditingStatusIndicator: React.FC<
+  AIEditingStatusIndicatorProps
+> = ({ status, fileName }) => {
+  const getStatusDisplay = (status: string) => {
+    switch (status) {
+      case 'Analyzing request...':
+        return (
+          <>
+            🔍 <span>Analyzing request...</span>
+          </>
+        );
+      case 'Formulating a plan...':
+        return (
+          <>
+            💭 <span>Formulating a plan...</span>
+          </>
+        );
+      case 'Describing changes...':
+        return (
+          <>
+            📝 <span>Describing changes...</span>
+          </>
+        );
+      case 'Thinking...':
+        return (
+          <>
+            🤔 <span>Thinking...</span>
+          </>
+        );
+      case 'Done':
+        return (
+          <>
+            ✅ <span>Done</span>
+          </>
+        );
+      default:
+        // Handle file editing status (e.g., "Editing filename.js...")
+        if (status.startsWith('Editing ') && fileName) {
+          return (
+            <>
+              ✏️{' '}
+              <span>
+                Editing <code>{fileName}</code>...
+              </span>
+            </>
+          );
+        } else if (status.startsWith('Editing ')) {
+          return (
+            <>
+              ✏️ <span>{status}</span>
+            </>
+          );
+        }
+        return <span>{status}</span>;
+    }
+  };
+
+  const showSpinner = status !== 'Done';
+
+  return (
+    <div className="file-editing-indicator">
+      <div className="file-editing-header">
+        {showSpinner && (
+          <div className="file-editing-icon">
+            <Spinner height={16} fadeIn={false} />
+          </div>
+        )}
+        <div className="file-editing-text">
+          {getStatusDisplay(status)}
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,86 @@
+import React, { useMemo } from 'react';
+import * as Diff2Html from 'diff2html';
+import 'diff2html/bundles/css/diff2html.min.css';
+import './DiffView.scss';
+import { generateFileUnifiedDiff } from '../../../utils/fileDiff';
+
+interface IndividualFileDiffProps {
+  fileName: string;
+  beforeContent: string;
+  afterContent: string;
+}
+
+export const IndividualFileDiff: React.FC<
+  IndividualFileDiffProps
+> = ({ fileName, beforeContent, afterContent }) => {
+  // Generate unified diff for this single file
+  const unifiedDiff = useMemo(() => {
+    return generateFileUnifiedDiff(
+      'temp-id',
+      fileName,
+      beforeContent,
+      afterContent,
+    );
+  }, [fileName, beforeContent, afterContent]);
+
+  // Convert to HTML using diff2html
+  const diffHtml = useMemo(() => {
+    if (!unifiedDiff) return '';
+
+    return Diff2Html.html(unifiedDiff, {
+      drawFileList: false,
+      matching: 'words',
+      diffStyle: 'word',
+      outputFormat: 'line-by-line',
+    });
+  }, [unifiedDiff]);
+
+  // Calculate simple stats
+  const stats = useMemo(() => {
+    const lines = unifiedDiff.split('\n');
+    let additions = 0;
+    let deletions = 0;
+
+    lines.forEach((line) => {
+      if (line.startsWith('+') && !line.startsWith('+++')) {
+        additions++;
+      } else if (
+        line.startsWith('-') &&
+        !line.startsWith('---')
+      ) {
+        deletions++;
+      }
+    });
+
+    return { additions, deletions };
+  }, [unifiedDiff]);
+
+  if (!unifiedDiff) {
+    return null;
+  }
+
+  return (
+    <div className="diff-view" data-file={fileName}>
+      <div className="diff-summary">
+        <div className="diff-stats">
+          <span className="files-changed">{fileName}</span>
+          {stats.additions > 0 && (
+            <span className="additions">
+              +{stats.additions}
+            </span>
+          )}
+          {stats.deletions > 0 && (
+            <span className="deletions">
+              -{stats.deletions}
+            </span>
+          )}
+        </div>
+      </div>
+
+      <div
+        className="diff-files"
+        dangerouslySetInnerHTML={{ __html: diffHtml }}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,64 @@
+import React, { useCallback } from 'react';
+
+/**
+ * Props for the JumpToLatestButton component
+ */
+interface JumpToLatestButtonProps {
+  /** Whether the button is visible */
+  visible: boolean;
+  /** Callback when button is clicked */
+  onClick: () => void;
+  /** Additional CSS class name */
+  className?: string;
+}
+
+/**
+ * Circular "down arrow" button that floats at the bottom center of scroll area
+ * Appears when auto-scroll is disabled and user is not at bottom
+ */
+export const JumpToLatestButton: React.FC<
+  JumpToLatestButtonProps
+> = ({ visible, onClick, className = '' }) => {
+  /**
+   * Handle button click
+   */
+  const handleClick = useCallback(() => {
+    onClick();
+  }, [onClick]);
+
+  /**
+   * Handle keyboard events for accessibility
+   */
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        onClick();
+      }
+    },
+    [onClick],
+  );
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <button
+      className={`jump-to-latest-button ${className}`.trim()}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      aria-label="Jump to latest"
+      tabIndex={0}
+      type="button"
+    >
+      {/* Down arrow icon using Unicode or can be replaced with SVG */}
+      <span
+        className="jump-to-latest-icon"
+        aria-hidden="true"
+      >
+        ▼
+      </span>
+    </button>
+  );
+};