Fix changes panel updates

vipmax · vipmax · commit 4aa9edb3240e · 2026-06-08T21:26:12.000+03:00
diff --git a/anycode-backend/src/git.rs b/anycode-backend/src/git.rs
@@ -1254,17 +1254,19 @@ impl GitManager {
 
         let x_char = stdout[0] as char;
         let y_char = stdout[1] as char;
+        let untracked = x_char == '?' && y_char == '?';
 
         let conflicted = x_char == 'U'
             || y_char == 'U'
             || (x_char == 'D' && y_char == 'D')
             || (x_char == 'A' && y_char == 'A');
         let staged = x_char != ' ' && x_char != '?' && x_char != '!' && !conflicted;
-        let unstaged = y_char != ' ' && y_char != '?' && y_char != '!' && !conflicted;
+        let unstaged =
+            untracked || (y_char != ' ' && y_char != '?' && y_char != '!' && !conflicted);
 
         let file_status = if conflicted {
             FileStatus::Conflict
-        } else if x_char == '?' || x_char == 'A' || y_char == 'A' {
+        } else if untracked || x_char == 'A' || y_char == 'A' {
             FileStatus::Added
         } else if x_char == 'D' || y_char == 'D' {
             FileStatus::Deleted
diff --git a/anycode-backend/src/tests/git.rs b/anycode-backend/src/tests/git.rs
@@ -95,6 +95,25 @@ fn path_status_uses_repo_root_when_workdir_is_subdirectory() {
     assert!(status.unstaged);
 }
 
+#[test]
+fn untracked_file_is_reported_as_unstaged_by_path_status() {
+    let temp_dir = tempfile::TempDir::new().unwrap();
+    Repository::init(temp_dir.path()).unwrap();
+
+    let file_path = temp_dir.path().join("new.txt");
+    std::fs::write(&file_path, "new line\n").unwrap();
+
+    let mut manager = GitManager::new(temp_dir.path().to_path_buf());
+    let status = manager
+        .status_file_custom("new.txt")
+        .unwrap()
+        .expect("untracked file should be reported");
+
+    assert_eq!(status.status, FileStatus::Added);
+    assert!(!status.staged);
+    assert!(status.unstaged);
+}
+
 #[test]
 fn deleted_file_numstat_counts_lines_not_bytes() {
     let temp_dir = tempfile::TempDir::new().unwrap();
diff --git a/anycode/components/ChangesPanel.tsx b/anycode/components/ChangesPanel.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useLayoutEffect, useRef, useCallback, useMemo } from 'react';
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { Icons } from './Icons';
 import { FileIcon } from './FileIcon';
 import './ChangesPanel.css';
@@ -57,51 +57,6 @@ const areChangedFileEqual = (prev: ChangedFile, next: ChangedFile): boolean => (
     && (prev.removed ?? 0) === (next.removed ?? 0)
 );
 
-const areChangedFileStructureEqual = (prev: ChangedFile, next: ChangedFile): boolean => (
-    prev.path === next.path
-    && prev.status === next.status
-    && !!prev.staged === !!next.staged
-    && !!prev.unstaged === !!next.unstaged
-    && !!prev.conflicted === !!next.conflicted
-);
-
-const updateStatsElement = (
-    element: HTMLSpanElement | undefined,
-    added: number,
-    removed: number,
-) => {
-    if (!element) {
-        return;
-    }
-
-    element.style.display = added > 0 || removed > 0 ? '' : 'none';
-
-    const addedElement = element.querySelector<HTMLElement>('[data-stat="added"]');
-    if (addedElement) {
-        addedElement.textContent = added > 0 ? `+${added}` : '';
-        addedElement.style.display = added > 0 ? '' : 'none';
-    }
-
-    const removedElement = element.querySelector<HTMLElement>('[data-stat="removed"]');
-    if (removedElement) {
-        removedElement.textContent = removed > 0 ? `-${removed}` : '';
-        removedElement.style.display = removed > 0 ? '' : 'none';
-    }
-};
-
-const statsElementsByPath = new Map<string, Set<HTMLSpanElement>>();
-
-export const updateChangesFileStats = (path: string, added: number, removed: number) => {
-    const elements = statsElementsByPath.get(path);
-    if (!elements) {
-        return;
-    }
-
-    for (const element of elements) {
-        updateStatsElement(element, added, removed);
-    }
-};
-
 interface ChangesPanelItemProps {
     rowId: string;
     file: ChangedFile;
@@ -114,23 +69,21 @@ interface ChangesPanelItemProps {
     onStage: (path: string) => void;
     onUnstage: (path: string) => void;
     setItemRef: (rowId: string, element: HTMLDivElement | null) => void;
-    setStatsRef: (path: string, element: HTMLSpanElement | null) => void;
 }
 
 interface ChangesFileStatsProps {
-    path: string;
-    setStatsRef: (path: string, element: HTMLSpanElement | null) => void;
+    added: number;
+    removed: number;
 }
 
-const ChangesFileStats = React.memo(({ path, setStatsRef }: ChangesFileStatsProps) => {
-    const refCallback = useCallback((element: HTMLSpanElement | null) => {
-        setStatsRef(path, element);
-    }, [path, setStatsRef]);
-
+const ChangesFileStats = React.memo(({ added, removed }: ChangesFileStatsProps) => {
+    if (added === 0 && removed === 0) {
+        return null;
+    }
     return (
-        <span className="changes-file-stats" ref={refCallback} style={{ display: 'none' }}>
-            <span className="changes-stat-added" data-stat="added" />
-            <span className="changes-stat-removed" data-stat="removed" />
+        <span className="changes-file-stats">
+            {added > 0 && <span className="changes-stat-added">+{added}</span>}
+            {removed > 0 && <span className="changes-stat-removed">-{removed}</span>}
         </span>
     );
 });
@@ -148,7 +101,6 @@ const ChangesPanelItemImpl: React.FC<ChangesPanelItemProps> = ({
     onStage,
     onUnstage,
     setItemRef,
-    setStatsRef,
 }) => {
     const handleRevert = useCallback((e: React.MouseEvent) => {
         e.stopPropagation();
@@ -213,7 +165,7 @@ const ChangesPanelItemImpl: React.FC<ChangesPanelItemProps> = ({
                         {stageButtonLabel}
                     </button>
                 </div>
-                <ChangesFileStats path={file.path} setStatsRef={setStatsRef} />
+                <ChangesFileStats added={file.added ?? 0} removed={file.removed ?? 0} />
             </div>
         </div>
     );
@@ -233,8 +185,7 @@ const areChangesPanelItemsEqual = (
     && prev.onStage === next.onStage
     && prev.onUnstage === next.onUnstage
     && prev.setItemRef === next.setItemRef
-    && prev.setStatsRef === next.setStatsRef
-    && areChangedFileStructureEqual(prev.file, next.file)
+    && areChangedFileEqual(prev.file, next.file)
 );
 
 const ChangesPanelItem = React.memo(ChangesPanelItemImpl, areChangesPanelItemsEqual);
@@ -274,30 +225,6 @@ const ChangesPanelImpl: React.FC<ChangesPanelProps> = ({
         itemRefs.current.delete(rowId);
     }, []);
 
-    const setStatsRef = useCallback((path: string, element: HTMLSpanElement | null) => {
-        const elements = statsElementsByPath.get(path);
-        if (!element) {
-            elements?.forEach((existingElement) => {
-                if (!existingElement.isConnected) {
-                    elements.delete(existingElement);
-                }
-            });
-            if (elements?.size === 0) {
-                statsElementsByPath.delete(path);
-            }
-            return;
-        }
-
-        if (!elements) {
-            statsElementsByPath.set(path, new Set([element]));
-            return;
-        }
-
-        if (element) {
-            elements.add(element);
-        }
-    }, []);
-
     const conflictingFiles = useMemo(
         () => files.filter((file) => file.conflicted || file.status === 'conflict'),
         [files],
@@ -330,16 +257,6 @@ const ChangesPanelImpl: React.FC<ChangesPanelProps> = ({
     const stagedStats = useMemo(() => countGroupStats(stagedFiles), [countGroupStats, stagedFiles]);
     const changedStats = useMemo(() => countGroupStats(changedFiles), [changedFiles, countGroupStats]);
 
-    useLayoutEffect(() => {
-        for (const row of displayedRows) {
-            updateChangesFileStats(
-                row.file.path,
-                row.file.added ?? 0,
-                row.file.removed ?? 0,
-            );
-        }
-    }, [displayedRows]);
-
     useEffect(() => {
         if (typeof window === 'undefined') return;
         if (message) {
@@ -532,10 +449,9 @@ const ChangesPanelImpl: React.FC<ChangesPanelProps> = ({
                 onStage={onStage}
                 onUnstage={onUnstage}
                 setItemRef={setItemRef}
-                setStatsRef={setStatsRef}
             />
         ))
-    ), [activeFilePath, handleItemClick, onRevert, onStage, onUnstage, selectedRowId, setItemRef, setStatsRef, fileIconsStyle]);
+    ), [activeFilePath, handleItemClick, onRevert, onStage, onUnstage, selectedRowId, setItemRef, fileIconsStyle]);
 
     return (
         <div className="changes-panel">
diff --git a/anycode/hooks/useGit.ts b/anycode/hooks/useGit.ts
@@ -1,7 +1,6 @@
 import { useCallback, useState } from 'react';
 import type { Socket } from 'socket.io-client';
 import type { ChangedFile } from '../components';
-import { updateChangesFileStats } from '../components/ChangesPanel';
 
 type UseGitParams = {
     wsRef: React.RefObject<Socket | null>;
@@ -49,20 +48,6 @@ const areChangedFilesEqual = (prev: ChangedFile, next: ChangedFile): boolean =>
     && prev.removed === next.removed
 );
 
-const areChangedFilesStructureEqual = (prev: ChangedFile, next: Omit<GitPatchItem, 'status'> & { status: ChangedFile['status'] }): boolean => (
-    prev.path === next.path
-    && prev.status === next.status
-    && prev.staged === next.staged
-    && prev.unstaged === next.unstaged
-    && prev.conflicted === next.conflicted
-);
-
-const updateFileStatsInPlace = (file: ChangedFile, added?: number, removed?: number) => {
-    file.added = added;
-    file.removed = removed;
-    updateChangesFileStats(file.path, added ?? 0, removed ?? 0);
-};
-
 export const useGit = ({ wsRef, isConnected }: UseGitParams) => {
     const [changedFiles, setChangedFiles] = useState<ChangedFile[]>([]);
     const [gitBranch, setGitBranch] = useState<string>('');
@@ -120,21 +105,20 @@ export const useGit = ({ wsRef, isConnected }: UseGitParams) => {
                                 removed: item.removed,
                             });
                             structurallyChanged = true;
-                        } else if (areChangedFilesStructureEqual(existing, item)) {
-                            if (existing.added !== item.added || existing.removed !== item.removed) {
-                                updateFileStatsInPlace(existing, item.added, item.removed);
-                            }
                         } else {
-                            next.set(item.path, {
+                            const updated: ChangedFile = {
                                 path: item.path,
                                 status: item.status,
                                 staged: item.staged,
                                 unstaged: item.unstaged,
                                 conflicted: item.conflicted,
                                 added: item.added,
                                 removed: item.removed,
-                            });
-                            structurallyChanged = true;
+                            };
+                            if (!areChangedFilesEqual(existing, updated)) {
+                                next.set(item.path, updated);
+                                structurallyChanged = true;
+                            }
                         }
                     }
                 }
@@ -165,9 +149,6 @@ export const useGit = ({ wsRef, isConnected }: UseGitParams) => {
                     const b = nextFiles[i];
                     if (areChangedFilesEqual(a, b)) {
                         reusedFiles[i] = a;
-                    } else if (areChangedFilesStructureEqual(a, b)) {
-                        updateFileStatsInPlace(a, b.added, b.removed);
-                        reusedFiles[i] = a;
                     } else {
                         reusedFiles[i] = b;
                         isDifferent = true;
diff --git a/anycode/shims/node-fs-promises.js b/anycode/shims/node-fs-promises.js
@@ -0,0 +1,3 @@
+export const readFile = async () => {
+  throw new Error("Node fs/promises is unavailable in the browser");
+};
diff --git a/anycode/shims/node-module.js b/anycode/shims/node-module.js
@@ -0,0 +1,3 @@
+export const createRequire = () => {
+  throw new Error("Node module.createRequire is unavailable in the browser");
+};
diff --git a/anycode/vite.config.js b/anycode/vite.config.js
@@ -1,5 +1,28 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { fileURLToPath, URL } from "node:url";
+
+const vendorChunk = (id) => {
+  if (!id.includes("node_modules") && !id.includes("/anycode-base/")) {
+    return undefined;
+  }
+  if (id.includes("web-tree-sitter") || id.includes("/anycode-base/")) {
+    return "editor";
+  }
+  if (id.includes("@xterm/")) {
+    return "terminal";
+  }
+  if (id.includes("react-markdown") || id.includes("remark-") || id.includes("micromark")) {
+    return "markdown";
+  }
+  if (id.includes("dockview")) {
+    return "dockview";
+  }
+  if (id.includes("/react/") || id.includes("/react-dom/") || id.includes("scheduler")) {
+    return "react";
+  }
+  return undefined;
+};
 
 export default defineConfig(({ mode }) => {
   const backendPort = process.env.ANYCODE_PORT || "3000";
@@ -9,6 +32,10 @@ export default defineConfig(({ mode }) => {
     plugins: [react()],
     resolve: {
       extensions: [".ts", ".tsx", ".js", ".jsx"],
+      alias: {
+        "fs/promises": fileURLToPath(new URL("./shims/node-fs-promises.js", import.meta.url)),
+        "module": fileURLToPath(new URL("./shims/node-module.js", import.meta.url)),
+      },
     },
     assetsInclude: ["**/*.wasm"],
     hot: true,
@@ -23,6 +50,18 @@ export default defineConfig(({ mode }) => {
     build: {
       // Keep maps only for development packaging, not for production release embedding.
       sourcemap: mode === "development",
+      rolldownOptions: {
+        onLog(level, log, handler) {
+          const isTreeSitterEval = log.code === "EVAL"
+            && log.id?.includes("web-tree-sitter");
+          if (!isTreeSitterEval) {
+            handler(level, log);
+          }
+        },
+        output: {
+          manualChunks: vendorChunk,
+        },
+      },
     },
   };
 });

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export const readFile = async () => {`
	`2`	`+ throw new Error("Node fs/promises is unavailable in the browser");`
	`3`	`+};`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export const createRequire = () => {`
	`2`	`+ throw new Error("Node module.createRequire is unavailable in the browser");`
	`3`	`+};`