fix(workspace): cap the changes list so one project cannot freeze the tab

A whole workspace folder registered as one project listed every untracked
file it held - 33,274 files, a 7.6 MB response - and painting that many
rows froze the app. The diff endpoint now caps the list at a thousand
files (tracked changes first, so the cap bites the untracked tail) and
reports totalFiles/truncated, the no-commits fallback included; the tab
shows the held-back count, its rows are memoised with stable handlers so
expanding one does not repaint the rest, and a single diff renders five
hundred rows before offering the remainder.

Author: devswha

server/routes/git.js

@@ -323,6 +323,21 @@ export function splitGitDiffPatches(diffOutput) {
   }).filter(({ path: filePath }) => filePath);
 }
 
+/** How many files one response lists, however many the tree holds. */
+const DIFF_FILE_LIMIT = 1000;
+
+/**
+ * Caps the file list and reports the truth of what was held back. Exported
+ * for tests.
+ */
+export function capDiffFiles(files, fileLimit = DIFF_FILE_LIMIT) {
+  return {
+    files: files.slice(0, fileLimit),
+    totalFiles: files.length,
+    truncated: files.length > fileLimit,
+  };
+}
+
 /**
  * Attaches patch text while enforcing the per-file and response-wide limits.
  */
@@ -418,7 +433,9 @@ router.get('/diff', async (req, res) => {
     const { stdout: statusOutput } = await spawnAsync('git', ['status', '--porcelain=v1', '-z', '--untracked-files=all'], { cwd: projectPath });
 
     if (!hasCommits) {
-      return res.json({ branch, hasCommits, files: buildNoCommitsDiffFiles(statusOutput) });
+      // The cap applies here too: a never-committed workspace directory can
+      // hold every file it contains.
+      return res.json({ branch, hasCommits, ...capDiffFiles(buildNoCommitsDiffFiles(statusOutput)) });
     }
 
     const [{ stdout: numstatOutput }, { stdout: diffOutput }] = await Promise.all([
@@ -474,11 +491,11 @@ router.get('/diff', async (req, res) => {
       ...untrackedFiles,
     ];
 
-    res.json({
-      branch,
-      hasCommits,
-      files: attachDiffPatches(files, patches),
-    });
+    // A whole workspace registered as one project can list tens of thousands
+    // of untracked files; the list is capped so one project cannot freeze the
+    // tab, and the response says what was held back. Tracked changes come
+    // first in `files`, so the cap bites the untracked tail.
+    res.json({ branch, hasCommits, ...capDiffFiles(attachDiffPatches(files, patches)) });
   } catch (error) {
     console.error('Git diff error:', error);
     res.json({

server/routes/git.test.js

@@ -4,6 +4,7 @@ import test from 'node:test';
 import {
   attachDiffPatches,
   buildNoCommitsDiffFiles,
+  capDiffFiles,
   parseGitLogWithStats,
   parseGitNumstatOutput,
   parseGitStatusOutput,
@@ -221,3 +222,12 @@ test('parseGitLogWithStats parses commits with parents, refs, and shortstat line
 test('parseGitLogWithStats handles empty output', () => {
   assert.deepEqual(parseGitLogWithStats(''), []);
 });
+
+test('capDiffFiles caps the list and reports what was held back', () => {
+  const files = Array.from({ length: 1002 }, (_, index) => ({ path: `f${index}` }));
+  const capped = capDiffFiles(files, 1000);
+  assert.equal(capped.files.length, 1000);
+  assert.equal(capped.totalFiles, 1002);
+  assert.equal(capped.truncated, true);
+  assert.deepEqual(capDiffFiles(files.slice(0, 10)).truncated, false);
+});

src/components/workspace/hooks/useProjectChanges.ts

@@ -18,6 +18,9 @@ export type ProjectChanges = {
   branch: string | null;
   hasCommits: boolean;
   files: ProjectChange[];
+  /** The list was capped server-side; how many exist in all. */
+  totalFiles: number;
+  truncated: boolean;
 };
 
 export type ProjectChangesState =
@@ -64,7 +67,13 @@ function readChanges(body: Record<string, unknown>): ProjectChanges {
     }];
   }) : [];
 
-  return { branch, hasCommits: body.hasCommits !== false, files };
+  return {
+    branch,
+    hasCommits: body.hasCommits !== false,
+    files,
+    totalFiles: typeof body.totalFiles === 'number' ? body.totalFiles : files.length,
+    truncated: body.truncated === true,
+  };
 }
 
 export function useProjectChanges(projectId: string | undefined, enabled: boolean) {

src/components/workspace/view/UnifiedDiff.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { parseUnifiedDiff, type UnifiedDiffRow } from '../utils/unifiedDiff';
@@ -23,11 +23,17 @@ export default function UnifiedDiff({ patch, onLineComment }: UnifiedDiffProps)
   return <UnifiedDiffRows rows={rows} onLineComment={onLineComment} />;
 }
 
+/** Rows rendered before the remainder hides behind a reveal; a generated
+ * file's patch can be thousands of lines and the tab must not paint them. */
+const ROW_LIMIT = 500;
+
 export function UnifiedDiffRows({ rows, onLineComment }: { rows: UnifiedDiffRow[]; onLineComment?: (row: DiffCommentRow) => void }) {
   const { t } = useTranslation();
+  const [showAll, setShowAll] = useState(false);
+  const visible = showAll || rows.length <= ROW_LIMIT ? rows : rows.slice(0, ROW_LIMIT);
   return (
     <div className="overflow-x-auto border-t border-border/60 font-mono text-xs leading-[18px]">
-      {rows.map((row, index) => {
+      {visible.map((row, index) => {
         if (row.kind === 'hunk') {
           return <div key={index} className="px-2 text-muted-foreground">{row.content}</div>;
         }
@@ -56,6 +62,15 @@ export function UnifiedDiffRows({ rows, onLineComment }: { rows: UnifiedDiffRow[
           </div>
         );
       })}
+      {rows.length > ROW_LIMIT && !showAll && (
+        <button
+          type="button"
+          onClick={() => setShowAll(true)}
+          className="block w-full px-2 py-1 text-left font-sans text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground"
+        >
+          {t('workspace.changes.moreLines', { count: rows.length - ROW_LIMIT })}
+        </button>
+      )}
     </div>
   );
 }

src/components/workspace/view/WorkspaceChangesTab.test.tsx

@@ -47,8 +47,8 @@ test('renders the loading state and refresh control before a static render can l
 test('renders a file row with counts, rename, and expanded unified diff', () => {
   const html = renderToStaticMarkup(createElement(ChangeRow, {
     file: changedFile,
-    expanded: true,
-    onToggle: () => {},
+    openPath: changedFile.path,
+    onSetOpenPath: () => {},
     onOpenInEditor: () => {},
     t,
   }));
@@ -64,8 +64,8 @@ test('renders a file row with counts, rename, and expanded unified diff', () =>
 test('a row with an insert target offers a line comment and sends the formatted draft', () => {
   const html = renderToStaticMarkup(createElement(ChangeRow, {
     file: changedFile,
-    expanded: true,
-    onToggle: () => {},
+    openPath: changedFile.path,
+    onSetOpenPath: () => {},
     onOpenInEditor: () => {},
     onComposerInsert: () => {},
     t,
@@ -74,7 +74,7 @@ test('a row with an insert target offers a line comment and sends the formatted
 
   // Without an insert target the offer is absent.
   const bare = renderToStaticMarkup(createElement(ChangeRow, {
-    file: changedFile, expanded: true, onToggle: () => {}, onOpenInEditor: () => {}, t,
+    file: changedFile, openPath: changedFile.path, onSetOpenPath: () => {}, onOpenInEditor: () => {}, t,
   }));
   assert.doesNotMatch(bare, /comment\.add/);
 });

src/components/workspace/view/WorkspaceChangesTab.tsx

@@ -1,5 +1,5 @@
 import { ExternalLink, RefreshCw } from 'lucide-react';
-import { useState } from 'react';
+import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { api } from '../../../utils/api';
@@ -42,13 +42,13 @@ export default function WorkspaceChangesTab({
   const { files: lastTurnFiles, refresh: refreshLastTurn } = useLastTurnChanges(sessionId, active && scope === 'lastTurn');
   const [openPath, setOpenPath] = useState<string | null>(null);
 
-  const openInEditor = (path: string) => {
+  const openInEditor = useCallback((path: string) => {
     if (!projectPath) {
       return;
     }
     const absolutePath = path.startsWith('/') ? path : `${projectPath.replace(/\/$/, '')}/${path}`;
     void api.system.openFile(absolutePath);
-  };
+  }, [projectPath]);
 
   const refresh = () => {
     if (scope === 'workingTree') {
@@ -109,9 +109,10 @@ export default function WorkspaceChangesTab({
                 <LastTurnChangeRow
                   key={`${index}:${file.path}`}
                   file={file}
-                  expanded={openPath === `${index}:${file.path}`}
-                  onToggle={() => setOpenPath((current) => current === `${index}:${file.path}` ? null : `${index}:${file.path}`)}
-                  onOpenInEditor={() => openInEditor(file.path)}
+                  rowKey={`${index}:${file.path}`}
+                  openPath={openPath}
+                  onSetOpenPath={setOpenPath}
+                  onOpenInEditor={openInEditor}
                   onComposerInsert={onComposerInsert}
                   t={t}
                 />
@@ -120,8 +121,11 @@ export default function WorkspaceChangesTab({
           ) : state.kind === 'ready' ? (
             <>
               <div className="truncate border-b border-border/60 px-2.5 py-1.5 text-muted-foreground">
-                {state.changes.branch ?? projectName ?? '—'} · {t('workspace.changes.files', { count: state.changes.files.length })}
+                {state.changes.branch ?? projectName ?? '—'} · {t('workspace.changes.files', { count: state.changes.truncated ? state.changes.totalFiles : state.changes.files.length })}
               </div>
+              {state.changes.truncated && (
+                <p className="border-b border-border/60 px-2.5 py-1.5 text-muted-foreground">{t('workspace.changes.truncated', { shown: state.changes.files.length, total: state.changes.totalFiles })}</p>
+              )}
               {!state.changes.hasCommits && (
                 <p className="border-b border-border/60 px-2.5 py-1.5 text-muted-foreground">{t('workspace.changes.noCommits')}</p>
               )}
@@ -135,9 +139,9 @@ export default function WorkspaceChangesTab({
                   <ChangeRow
                     key={file.path}
                     file={file}
-                    expanded={openPath === file.path}
-                    onToggle={() => setOpenPath((current) => current === file.path ? null : file.path)}
-                    onOpenInEditor={() => openInEditor(file.path)}
+                    openPath={openPath}
+                    onSetOpenPath={setOpenPath}
+                    onOpenInEditor={openInEditor}
                     onComposerInsert={onComposerInsert}
                     t={t}
                   />
@@ -157,22 +161,24 @@ export default function WorkspaceChangesTab({
   );
 }
 
-export function ChangeRow({
+export const ChangeRow = memo(function ChangeRow({
   file,
-  expanded,
-  onToggle,
+  openPath,
+  onSetOpenPath,
   onOpenInEditor,
   onComposerInsert,
   t,
 }: {
   file: ProjectChange;
-  expanded: boolean;
-  onToggle: () => void;
-  onOpenInEditor: () => void;
+  openPath: string | null;
+  onSetOpenPath: (path: string | null) => void;
+  onOpenInEditor: (path: string) => void;
   onComposerInsert?: (text: string) => void;
   t: (key: string, options?: Record<string, unknown>) => string;
 }) {
   const [commentRow, setCommentRow] = useState<DiffCommentRow | null>(null);
+  const expanded = openPath === file.path;
+  const onToggle = () => onSetOpenPath(expanded ? null : file.path);
   const appearance = statusAppearance[file.status];
   return (
     <div className="border-b border-border/60 last:border-b-0">
@@ -194,7 +200,7 @@ export function ChangeRow({
         </button>
         <button
           type="button"
-          onClick={onOpenInEditor}
+          onClick={() => onOpenInEditor(file.path)}
           title={t('workspace.changes.openInEditor')}
           aria-label={t('workspace.changes.openInEditor')}
           className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground"
@@ -220,7 +226,7 @@ export function ChangeRow({
       )}
     </div>
   );
-}
+});
 
 const lastTurnAppearance: Record<LastTurnFile['kind'], { label: string; className: string }> = {
   edit: { label: 'E', className: 'bg-muted text-muted-foreground' },
@@ -229,22 +235,26 @@ const lastTurnAppearance: Record<LastTurnFile['kind'], { label: string; classNam
   move: { label: 'M', className: 'bg-diff-added text-diff-added-foreground' },
 };
 
-function LastTurnChangeRow({
+const LastTurnChangeRow = memo(function LastTurnChangeRow({
   file,
-  expanded,
-  onToggle,
+  rowKey,
+  openPath,
+  onSetOpenPath,
   onOpenInEditor,
   onComposerInsert,
   t,
 }: {
   file: LastTurnFile;
-  expanded: boolean;
-  onToggle: () => void;
-  onOpenInEditor: () => void;
+  rowKey: string;
+  openPath: string | null;
+  onSetOpenPath: (path: string | null) => void;
+  onOpenInEditor: (path: string) => void;
   onComposerInsert?: (text: string) => void;
   t: (key: string, options?: Record<string, unknown>) => string;
 }) {
   const [commentRow, setCommentRow] = useState<DiffCommentRow | null>(null);
+  const expanded = openPath === rowKey;
+  const onToggle = () => onSetOpenPath(expanded ? null : rowKey);
   const appearance = lastTurnAppearance[file.kind];
   return (
     <div className="border-b border-border/60 last:border-b-0">
@@ -255,7 +265,7 @@ function LastTurnChangeRow({
             {file.oldPath ? <>{file.oldPath} <span className="text-muted-foreground">{t('workspace.changes.renameArrow')}</span> {file.path}</> : file.path}
           </span>
         </button>
-        <button type="button" onClick={onOpenInEditor} title={t('workspace.changes.openInEditor')} aria-label={t('workspace.changes.openInEditor')} className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground">
+        <button type="button" onClick={() => onOpenInEditor(file.path)} title={t('workspace.changes.openInEditor')} aria-label={t('workspace.changes.openInEditor')} className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground">
           <ExternalLink className="h-3 w-3" />
         </button>
       </div>
@@ -275,7 +285,7 @@ function LastTurnChangeRow({
       )}
     </div>
   );
-}
+});
 
 
 const COMMENT_MARKER = { added: '+', removed: '-', context: ' ' } as const;

src/i18n/locales/de/common.json

@@ -96,7 +96,10 @@
         "placeholder": "Kommentar zu dieser Zeile…",
         "send": "Kommentar an den Chat senden",
         "cancel": "Kommentar verwerfen"
-      }
+      },
+      "truncated": "Zeige {{shown}} von {{total}} Dateien; die Liste wurde gekürzt.",
+      "moreLines_one": "{{count}} weitere Zeile anzeigen",
+      "moreLines_other": "{{count}} weitere Zeilen anzeigen"
     },
     "browser": {
       "address": "Webadresse",

src/i18n/locales/en/common.json

@@ -96,7 +96,10 @@
         "placeholder": "Comment on this line…",
         "send": "Send comment to chat",
         "cancel": "Discard comment"
-      }
+      },
+      "truncated": "Showing {{shown}} of {{total}} files; the list is capped.",
+      "moreLines_one": "Show {{count}} more line",
+      "moreLines_other": "Show {{count}} more lines"
     },
     "browser": {
       "address": "Web address",

src/i18n/locales/fr/common.json

@@ -96,7 +96,10 @@
         "placeholder": "Commentaire sur cette ligne…",
         "send": "Envoyer le commentaire au chat",
         "cancel": "Abandonner le commentaire"
-      }
+      },
+      "truncated": "Affichage de {{shown}} fichiers sur {{total}} ; la liste est tronquée.",
+      "moreLines_one": "Afficher {{count}} ligne de plus",
+      "moreLines_other": "Afficher {{count}} lignes de plus"
     },
     "browser": {
       "address": "Adresse Internet",

src/i18n/locales/it/common.json

@@ -96,7 +96,10 @@
         "placeholder": "Commento a questa riga…",
         "send": "Invia il commento alla chat",
         "cancel": "Scarta il commento"
-      }
+      },
+      "truncated": "Mostrati {{shown}} file su {{total}}; l’elenco è limitato.",
+      "moreLines_one": "Mostra {{count}} altra riga",
+      "moreLines_other": "Mostra {{count}} altre righe"
     },
     "browser": {
       "address": "Indirizzo web",