vzcode 2.15.0 → 2.16.0

package/src/client/hooks/useAutoScroll.ts

@@ -0,0 +1,329 @@
+import {
+  useRef,
+  useCallback,
+  useState,
+  useEffect,
+} from 'react';
+
+/**
+ * Auto-scroll state machine with simplified states
+ */
+type AutoScrollState = 'AUTO_SCROLL_ON' | 'AUTO_SCROLL_OFF';
+
+/**
+ * Check if the container is at the bottom with optional slack
+ */
+function isAtBottom(el: HTMLElement, slack = 2): boolean {
+  return (
+    el.scrollTop + el.clientHeight >=
+    el.scrollHeight - slack
+  );
+}
+
+/**
+ * Wait for scroll position to settle after programmatic scrolling
+ */
+function waitForScrollSettle(
+  el: HTMLElement,
+  {
+    epsilon = 1, // px change to consider "no movement"
+    stableFrames = 3, // frames in a row with no movement
+    maxWaitMs = 1000, // safety timeout
+  } = {},
+): Promise<void> {
+  return new Promise<void>((resolve) => {
+    let lastY = el.scrollTop;
+    let stable = 0;
+    let rafId = 0;
+    const start = performance.now();
+
+    const tick = () => {
+      const nowY = el.scrollTop;
+      const moved = Math.abs(nowY - lastY) > epsilon;
+      if (!moved) stable += 1;
+      else stable = 0;
+      lastY = nowY;
+
+      const timedOut =
+        performance.now() - start > maxWaitMs;
+      if (
+        (stable >= stableFrames && isAtBottom(el)) ||
+        timedOut
+      ) {
+        cancelAnimationFrame(rafId);
+        resolve();
+        return;
+      }
+      rafId = requestAnimationFrame(tick);
+    };
+
+    rafId = requestAnimationFrame(tick);
+  });
+}
+
+/**
+ * Hook options for customizing behavior
+ */
+interface UseAutoScrollOptions {
+  /** Threshold for "at bottom" detection in pixels (default: 24) */
+  threshold?: number;
+}
+
+/**
+ * Hook return type with methods and state
+ */
+interface UseAutoScrollReturn {
+  /** Ref to attach to the scrollable container */
+  containerRef: React.RefObject<HTMLDivElement>;
+  /** Current auto-scroll state */
+  autoScrollState: AutoScrollState;
+  /** Whether to show the "jump to latest" button */
+  showJumpButton: boolean;
+  /** Function to handle new content/events */
+  onNewEvent: (targetElement?: HTMLElement) => void;
+  /** Function to handle user clicking jump to latest button */
+  onJumpToLatest: (targetElement?: HTMLElement) => void;
+  /** Function to call before rendering new content (for anchoring) */
+  beforeRender: () => number;
+  /** Function to call after rendering new content (for anchoring) */
+  afterRender: (prevScrollHeight: number) => void;
+}
+
+/**
+ * Simplified auto-scroll hook implementing the state machine from the issue
+ *
+ * States: AUTO_SCROLL_ON, AUTO_SCROLL_OFF
+ * Transitions:
+ * - onNewEvent: if AUTO_SCROLL_ON → scrollToBottom(), if AUTO_SCROLL_OFF → no scroll
+ * - onUserScroll: if isAtBottom(el) → AUTO_SCROLL_ON; hide button, else → AUTO_SCROLL_OFF; show button
+ * - onJumpToLatestClick → AUTO_SCROLL_ON + scrollToBottom(); hide button
+ */
+export const useAutoScroll = (
+  options: UseAutoScrollOptions = {},
+): UseAutoScrollReturn => {
+  const { threshold = 24 } = options;
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [autoScrollState, setAutoScrollState] =
+    useState<AutoScrollState>('AUTO_SCROLL_ON');
+  const [showJumpButton, setShowJumpButton] =
+    useState(false);
+  const rafIdRef = useRef<number>();
+  const isProgrammaticScrollRef = useRef(false);
+
+  /**
+   * Check if the container is at the bottom
+   */
+  const isAtBottom = useCallback(
+    (el: HTMLElement): boolean => {
+      return (
+        el.scrollHeight - el.clientHeight - el.scrollTop <=
+        threshold
+      );
+    },
+    [threshold],
+  );
+
+  /**
+   * Update jump button visibility
+   */
+  const updateJumpButtonVisibility = useCallback(() => {
+    const container = containerRef.current;
+    if (!container) {
+      setShowJumpButton(false);
+      return;
+    }
+
+    // Only show when AUTO_SCROLL_OFF AND not at bottom
+    const shouldShow =
+      autoScrollState === 'AUTO_SCROLL_OFF' &&
+      !isAtBottom(container);
+    setShowJumpButton(shouldShow);
+  }, [autoScrollState, isAtBottom]);
+
+  /**
+   * Handle scroll events to detect user manual scrolling
+   */
+  const handleScroll = useCallback(() => {
+    // Ignore scroll events during programmatic scrolling
+    if (isProgrammaticScrollRef.current) return;
+
+    console.log('handleScroll called');
+    const container = containerRef.current;
+    if (!container) return;
+
+    if (isAtBottom(container)) {
+      // User scrolled back to bottom - enable auto-scroll and hide button
+      setAutoScrollState('AUTO_SCROLL_ON');
+    } else {
+      // User scrolled up - disable auto-scroll and show button
+      setAutoScrollState('AUTO_SCROLL_OFF');
+    }
+  }, [isAtBottom]);
+
+  /**
+   * Attach scroll listener to container
+   */
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    container.addEventListener('scroll', handleScroll, {
+      passive: true,
+    });
+
+    return () => {
+      container.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleScroll]);
+
+  /**
+   * Update jump button visibility when state changes
+   */
+  useEffect(() => {
+    updateJumpButtonVisibility();
+  }, [updateJumpButtonVisibility]);
+
+  /**
+   * Handle new event/message render
+   */
+  const onNewEvent = useCallback(
+    (targetElement?: HTMLElement) => {
+      if (autoScrollState === 'AUTO_SCROLL_ON') {
+        // Use requestAnimationFrame for batched updates
+        if (rafIdRef.current) {
+          cancelAnimationFrame(rafIdRef.current);
+        }
+
+        rafIdRef.current = requestAnimationFrame(
+          async () => {
+            const container = containerRef.current;
+            if (container) {
+              // Set flag to ignore scroll events during programmatic scroll
+              isProgrammaticScrollRef.current = true;
+
+              // Perform smooth scroll
+              if (targetElement) {
+                // Scroll to specific element
+                const containerRect =
+                  container.getBoundingClientRect();
+                const targetRect =
+                  targetElement.getBoundingClientRect();
+                const scrollTop =
+                  targetRect.top -
+                  containerRect.top +
+                  container.scrollTop;
+                container.scrollTo({
+                  top: scrollTop,
+                  behavior: 'smooth',
+                });
+              } else {
+                // Scroll to bottom
+                container.scrollTo({
+                  top: container.scrollHeight,
+                  behavior: 'smooth',
+                });
+              }
+
+              // Wait for scroll to settle before re-enabling scroll listener
+              await waitForScrollSettle(container);
+              isProgrammaticScrollRef.current = false;
+            }
+          },
+        );
+      }
+      // If AUTO_SCROLL_OFF, do nothing (no scroll)
+    },
+    [autoScrollState],
+  );
+
+  /**
+   * Handle jump to latest button click
+   */
+  const onJumpToLatest = useCallback(
+    async (targetElement?: HTMLElement) => {
+      const container = containerRef.current;
+      if (!container) return;
+
+      // Set flag to ignore scroll events during programmatic scroll
+      isProgrammaticScrollRef.current = true;
+
+      // Set state to AUTO_SCROLL_ON
+      setAutoScrollState('AUTO_SCROLL_ON');
+
+      // Perform smooth scroll
+      if (targetElement) {
+        // Scroll to specific element
+        const containerRect =
+          container.getBoundingClientRect();
+        const targetRect =
+          targetElement.getBoundingClientRect();
+        const scrollTop =
+          targetRect.top -
+          containerRect.top +
+          container.scrollTop;
+        container.scrollTo({
+          top: scrollTop,
+          behavior: 'smooth',
+        });
+      } else {
+        // Scroll to bottom
+        container.scrollTo({
+          top: container.scrollHeight,
+          behavior: 'smooth',
+        });
+      }
+
+      // Wait for scroll to settle before re-enabling scroll listener
+      await waitForScrollSettle(container);
+      isProgrammaticScrollRef.current = false;
+    },
+    [],
+  );
+
+  /**
+   * Get scroll height before rendering (for anchoring)
+   */
+  const beforeRender = useCallback((): number => {
+    const container = containerRef.current;
+    return container ? container.scrollHeight : 0;
+  }, []);
+
+  /**
+   * Adjust scroll position after rendering (for anchoring when OFF)
+   */
+  const afterRender = useCallback(
+    (prevScrollHeight: number) => {
+      if (autoScrollState === 'AUTO_SCROLL_OFF') {
+        const container = containerRef.current;
+        if (container) {
+          const delta =
+            container.scrollHeight - prevScrollHeight;
+          container.scrollTop += delta; // anchor view
+        }
+      }
+    },
+    [autoScrollState],
+  );
+
+  /**
+   * Clean up animation frame on unmount
+   */
+  useEffect(() => {
+    return () => {
+      if (rafIdRef.current) {
+        cancelAnimationFrame(rafIdRef.current);
+      }
+    };
+  }, []);
+
+  return {
+    containerRef,
+    autoScrollState,
+    showJumpButton,
+    onNewEvent,
+    onJumpToLatest,
+    beforeRender,
+    afterRender,
+  };
+};

package/src/client/tabsSearchParameters.ts

@@ -1,5 +1,6 @@
 import { TabState } from '../types';
 import { VizFileId, VizContent } from '@vizhub/viz-types';
+import { getFileId } from '@vizhub/viz-utils';
 
 // The delimiter used to separate file names in the `tabs` parameter.
 // We need a character that is both URL-safe (does not get escaped in URLs)
@@ -28,23 +29,6 @@ import { VizFileId, VizContent } from '@vizhub/viz-types';
 //   in file names for JavaScript and CSS files, making it a suitable choice for a delimiter.
 export const delimiter = '~';
 
-// Gets the file id of a file with the given name.
-// Returns null if not found.
-const getFileId = (
-  content: VizContent,
-  fileName: string,
-): string | null => {
-  if (content && content.files) {
-    for (const fileId of Object.keys(content.files)) {
-      const file = content.files[fileId];
-      if (file.name === fileName) {
-        return fileId;
-      }
-    }
-  }
-  return null;
-};
-
 // Gets the file name of a file with the given id,
 // guard against failure cases.
 // Returns null if not found.

package/src/client/useFileCRUD.ts

@@ -46,7 +46,7 @@ export const useFileCRUD = ({
         openTab({ fileId, isTransient: false });
       }
     },
-    [submitOperation],
+    [submitOperation, openTab],
   );
 
   const createDirectory = useCallback(
@@ -86,6 +86,9 @@ export const useFileCRUD = ({
         },
       }));
 
+      if (!content) {
+        return;
+      }
       const oldName = content.files[fileId].name;
       const oldExtension = getFileExtension(oldName);
 
@@ -125,7 +128,7 @@ export const useFileCRUD = ({
         }
       }
     },
-    [submitOperation],
+    [submitOperation, content, editorCache],
   );
 
   // Renames a directory

package/src/client/useKeyboardShortcuts.ts

@@ -451,5 +451,12 @@ export const useKeyboardShortcuts = ({
     activeFileId,
     setActiveFileLeft,
     setActiveFileRight,
+    activePaneId,
+    codeEditorRef,
+    editorCache,
+    runCodeRef,
+    runPrettierRef,
+    sidebarRef,
+    toggleSearchFocused,
   ]);
 };

package/src/client/useOpenDirectories.ts

@@ -45,6 +45,7 @@ export const useOpenDirectories = ({
     if (
       activePane.type === 'leafPane' &&
       activePane?.activeFileId &&
+      content.files &&
       content.files[activePane.activeFileId]
     ) {
       const activeFileId = activePane.activeFileId;
@@ -58,7 +59,7 @@ export const useOpenDirectories = ({
         return updated;
       });
     }
-  }, [activePane]);
+  }, [activePane, content?.files]);
 
   // Whether a directory is open.
   const isDirectoryOpen: (path: VZPath) => boolean =

package/src/client/usePrettier/index.ts

@@ -170,7 +170,7 @@ export const usePrettier = ({
 
       shareDBDoc.removeListener('op batch', handleOpBatch);
     };
-  }, [shareDBDoc]);
+  }, [shareDBDoc, prettierWorker, submitOperation]);
 
   // Return the errors and run prettier function ref
   // for use elsewhere.

package/src/client/useURLSync.ts

@@ -68,6 +68,7 @@ export const useURLSync = ({
     setActiveFileId,
     openTab,
     isInitialized,
+    tabStateParams,
   ]);
 
   // Track content in a ref so that we can use it in the

package/src/client/utils/scrollUtils.ts

@@ -0,0 +1,170 @@
+/**
+ * Utility functions for scrolling behavior in the AI editing interface
+ * Part of Phase 2: Diff-First Review Experience
+ */
+
+/**
+ * Scrolls to the first diff hunk in a diff container
+ * Accounts for fixed headers and navigation
+ * @param diffContainer - The container element with diff content
+ * @param headerOffset - Offset for fixed headers (default: 60px)
+ */
+export const scrollToFirstDiff = (
+  diffContainer: HTMLElement,
+  headerOffset: number = 60,
+): void => {
+  // Look for the first diff hunk row
+  const firstHunk = diffContainer.querySelector(
+    '.d2h-diff-tbody tr',
+  );
+
+  if (firstHunk) {
+    // Scroll to the first hunk with header offset
+    firstHunk.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start',
+    });
+
+    // Adjust for fixed headers
+    window.scrollBy(0, -headerOffset);
+
+    // Set focus for keyboard navigation accessibility
+    if (diffContainer.setAttribute) {
+      diffContainer.tabIndex = -1;
+      diffContainer.focus();
+    }
+  }
+};
+
+/**
+ * Gets the first diff anchor element for scroll targeting
+ * @param diffContainer - The container element with diff content
+ * @returns The first diff element or null if not found
+ */
+export const getFirstDiffAnchor = (
+  diffContainer: HTMLElement,
+): HTMLElement | null => {
+  // Try different selectors for various diff formats
+  const selectors = [
+    '.d2h-diff-tbody tr:first-child', // diff2html format
+    '.diff-line:first-child', // alternative format
+    '.hunk:first-child', // git diff format
+    '.d2h-file-wrapper:first-child', // file-level anchor
+  ];
+
+  for (const selector of selectors) {
+    const element = diffContainer.querySelector(selector);
+    if (element) {
+      return element as HTMLElement;
+    }
+  }
+
+  return null;
+};
+
+/**
+ * Scrolls to a specific element with header-aware offset
+ * @param element - The element to scroll to
+ * @param headerOffset - Offset for fixed headers (default: 60px)
+ * @param behavior - Scroll behavior ('smooth' or 'auto')
+ */
+export const scrollToElementWithOffset = (
+  element: HTMLElement,
+  headerOffset: number = 60,
+  behavior: ScrollBehavior = 'smooth',
+): void => {
+  element.scrollIntoView({
+    behavior,
+    block: 'start',
+  });
+
+  // Adjust for fixed headers
+  window.scrollBy(0, -headerOffset);
+};
+
+/**
+ * Gets the appropriate header offset by measuring actual header height
+ * Falls back to default if header elements not found
+ * @param defaultOffset - Default offset if header not found (default: 60px)
+ * @returns The calculated header offset
+ */
+export const getHeaderOffset = (
+  defaultOffset: number = 60,
+): number => {
+  // Try to find the actual header element
+  const header =
+    document.querySelector('#appHeader') ||
+    document.querySelector('.app-header') ||
+    document.querySelector('header');
+
+  if (header) {
+    return header.getBoundingClientRect().height;
+  }
+
+  return defaultOffset;
+};
+
+/**
+ * Handles edge cases for diff scrolling
+ * @param diffContainer - The container element with diff content
+ * @returns Object describing the diff state
+ */
+export const analyzeDiffContent = (
+  diffContainer: HTMLElement,
+) => {
+  const fileWrappers = diffContainer.querySelectorAll(
+    '.d2h-file-wrapper',
+  );
+  const diffLines = diffContainer.querySelectorAll(
+    '.d2h-diff-tbody tr',
+  );
+
+  return {
+    hasFiles: fileWrappers.length > 0,
+    fileCount: fileWrappers.length,
+    hasDiffLines: diffLines.length > 0,
+    diffLineCount: diffLines.length,
+    isEmpty:
+      fileWrappers.length === 0 && diffLines.length === 0,
+    isMultiFile: fileWrappers.length > 1,
+  };
+};
+
+/**
+ * Announces diff summary for screen readers
+ * @param diffContainer - The container element with diff content
+ */
+export const announceDiffSummary = (
+  diffContainer: HTMLElement,
+): void => {
+  const analysis = analyzeDiffContent(diffContainer);
+
+  let announcement = '';
+
+  if (analysis.isEmpty) {
+    announcement = 'No changes to review';
+  } else if (analysis.isMultiFile) {
+    announcement = `${analysis.fileCount} files changed. Review diff content.`;
+  } else {
+    announcement = `1 file changed. Review diff content.`;
+  }
+
+  // Create or update ARIA live region for announcements
+  let liveRegion = document.getElementById(
+    'diff-announcements',
+  );
+  if (!liveRegion) {
+    liveRegion = document.createElement('div');
+    liveRegion.id = 'diff-announcements';
+    liveRegion.setAttribute('aria-live', 'polite');
+    liveRegion.setAttribute('aria-atomic', 'true');
+    liveRegion.style.position = 'absolute';
+    liveRegion.style.left = '-10000px';
+    liveRegion.style.width = '1px';
+    liveRegion.style.height = '1px';
+    liveRegion.style.overflow = 'hidden';
+    document.body.appendChild(liveRegion);
+  }
+
+  liveRegion.textContent = announcement;
+};

package/src/client/vzReducer/searchReducer.ts

@@ -11,14 +11,17 @@ function searchPattern(
   shareDBDoc: ShareDBDoc<VizContent>,
   pattern: string,
 ): SearchResult {
-  const files = shareDBDoc.data.files;
-  const fileIds = Object.keys(shareDBDoc.data.files);
+  const files = shareDBDoc?.data?.files;
+  if (!files) {
+    return {};
+  }
+  const fileIds = Object.keys(files);
   const results: { [id: string]: SearchFile } = {};
 
   for (let i = 0; i < fileIds.length; i++) {
     const file = files[fileIds[i]];
 
-    if (files[fileIds[i]].text) {
+    if (file.text) {
       const fileName = file.name;
       const lines = file.text.split('\n');
       const matches = [];