Collapse files in diff view (vibe-kanban) (#531)

* Perfect! The collapse functionality has been successfully implemented. Here's what was added:

## Summary of Changes

**DiffCard.tsx:**
- Added `isCollapsed` and `onToggle` props
- Made the header clickable with hover effects
- Added a rotating chevron icon to indicate collapse state
- Only renders `DiffView` when not collapsed (performance optimization)
- Added accessibility attributes and keyboard support
- Prevented event bubbling on the "Open in IDE" button

**DiffTab.tsx:**
- Added `Set<string>` state to track collapsed files using stable file path identifiers
- Added toggle logic with proper React state management
- Added a sticky "Collapse All" / "Expand All" button with tri-state logic
- Connected collapse state to each DiffCard

The implementation follows all the Oracle's recommendations:
- Uses `Set<string>` with stable identifiers (file paths)
- Keeps state centralized in DiffTab
- Only renders DiffView when expanded for better performance
- Provides accessible clickable headers with proper ARIA attributes
- Includes keyboard support for toggling

The type checking and build process completed successfully with no errors related to our changes.

* Cleanup script changes for task attempt 9592ba9e-ff81-483b-b0f4-14bdf6461e24

* Done! The Collapse All button is now using the "xs" size.

* Perfect! The high-level stats display has been successfully implemented. Here's what was added:

## Summary of Changes

**Enhanced the sticky header to show:**
- **Files changed**: Shows count with proper singular/plural handling ("1 file" vs "3 files")
- **Total additions**: Green `+45` style matching existing DiffCard styling  
- **Total deletions**: Red `-12` style matching existing DiffCard styling
- **Collapse All button**: Positioned on the right with proper spacing

**Key Features:**
- **Efficient calculation**: Extended existing `useMemo` to calculate both files and totals in a single pass
- **Proper edge case handling**: Handles undefined `additionLength`/`deletionLength` values
- **Consistent styling**: Uses same CSS variables as individual file stats (`--console-success`, `--console-error`)
- **Responsive layout**: Flexbox with proper gap and shrink controls
- **Accessibility**: Added `aria-live="polite"` for screen reader updates
- **Performance**: Only recalculates when diffs change, not on every render

The implementation follows all Oracle recommendations and maintains consistency with the existing codebase design patterns. The type checking passed successfully with no errors.

* Cleanup script changes for task attempt 9592ba9e-ff81-483b-b0f4-14bdf6461e24

frontend/src/components/DiffCard.tsx

@@ -5,15 +5,18 @@ import { useConfig } from './config-provider';
 import { useContext } from 'react';
 import { TaskSelectedAttemptContext } from './context/taskDetailsContext';
 import { Button } from './ui/button';
-import { FolderOpen } from 'lucide-react';
+import { FolderOpen, ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
 import { attemptsApi } from '@/lib/api';
 
 type Props = {
   diffFile: DiffFile;
   key: any;
+  isCollapsed: boolean;
+  onToggle: () => void;
 };
 
-const DiffCard = ({ diffFile, key }: Props) => {
+const DiffCard = ({ diffFile, key, isCollapsed, onToggle }: Props) => {
   const { config } = useConfig();
   const { selectedAttempt } = useContext(TaskSelectedAttemptContext);
 
@@ -37,37 +40,56 @@ const DiffCard = ({ diffFile, key }: Props) => {
 
   return (
     <div className="my-4 border" key={key}>
-      <div className="flex items-center justify-between px-4 py-2">
-        <p
-          className="text-xs font-mono overflow-x-auto flex-1"
-          style={{ color: 'hsl(var(--muted-foreground) / 0.7)' }}
-        >
-          {diffFile._newFileName}{' '}
-          <span style={{ color: 'hsl(var(--console-success))' }}>
-            +{diffFile.additionLength}
-          </span>{' '}
-          <span style={{ color: 'hsl(var(--console-error))' }}>
-            -{diffFile.deletionLength}
-          </span>
-        </p>
+      <div
+        className="flex items-center justify-between px-4 py-2 cursor-pointer select-none hover:bg-muted/50 transition-colors"
+        onClick={onToggle}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && onToggle()}
+        aria-expanded={!isCollapsed}
+      >
+        <div className="flex items-center gap-2 overflow-x-auto flex-1">
+          <ChevronRight
+            className={cn('h-4 w-4 transition-transform', {
+              'rotate-90': !isCollapsed,
+            })}
+          />
+          <p
+            className="text-xs font-mono"
+            style={{ color: 'hsl(var(--muted-foreground) / 0.7)' }}
+          >
+            {diffFile._newFileName}{' '}
+            <span style={{ color: 'hsl(var(--console-success))' }}>
+              +{diffFile.additionLength}
+            </span>{' '}
+            <span style={{ color: 'hsl(var(--console-error))' }}>
+              -{diffFile.deletionLength}
+            </span>
+          </p>
+        </div>
         <Button
           variant="ghost"
           size="sm"
-          onClick={handleOpenInIDE}
+          onClick={(e) => {
+            e.stopPropagation();
+            handleOpenInIDE();
+          }}
           className="h-6 w-6 p-0 ml-2"
           title="Open in IDE"
         >
           <FolderOpen className="h-3 w-3" />
         </Button>
       </div>
-      <DiffView
-        diffFile={diffFile}
-        diffViewWrap={false}
-        diffViewTheme={theme}
-        diffViewHighlight
-        diffViewMode={DiffModeEnum.Unified}
-        diffViewFontSize={12}
-      />
+      {!isCollapsed && (
+        <DiffView
+          diffFile={diffFile}
+          diffViewWrap={false}
+          diffViewTheme={theme}
+          diffViewHighlight
+          diffViewMode={DiffModeEnum.Unified}
+          diffViewFontSize={12}
+        />
+      )}
     </div>
   );
 };

frontend/src/components/tasks/TaskDetails/DiffTab.tsx

@@ -5,11 +5,13 @@ import { TaskSelectedAttemptContext } from '@/components/context/taskDetailsCont
 import { Diff } from 'shared/types';
 import { getHighLightLanguageFromPath } from '@/utils/extToLanguage';
 import { Loader } from '@/components/ui/loader';
+import { Button } from '@/components/ui/button';
 import DiffCard from '@/components/DiffCard';
 
 function DiffTab() {
   const { selectedAttempt } = useContext(TaskSelectedAttemptContext);
   const [loading, setLoading] = useState(true);
+  const [collapsedIds, setCollapsedIds] = useState<Set<string>>(new Set());
   const { diffs, error } = useDiffEntries(selectedAttempt?.id ?? null, true);
 
   useEffect(() => {
@@ -41,12 +43,40 @@ function DiffTab() {
     }
   }, []);
 
-  const diffFiles = useMemo(() => {
-    return diffs
+  const { files: diffFiles, totals } = useMemo(() => {
+    const files = diffs
       .map((diff) => createDiffFile(diff))
       .filter((diffFile) => diffFile !== null);
+
+    const totals = files.reduce(
+      (acc, file) => {
+        acc.added += file.additionLength ?? 0;
+        acc.deleted += file.deletionLength ?? 0;
+        return acc;
+      },
+      { added: 0, deleted: 0 }
+    );
+
+    return { files, totals };
   }, [diffs, createDiffFile]);
 
+  const toggle = useCallback((id: string) => {
+    setCollapsedIds((prev) => {
+      const next = new Set(prev);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+  }, []);
+
+  const allCollapsed = collapsedIds.size === diffFiles.length;
+  const handleCollapseAll = useCallback(() => {
+    setCollapsedIds(
+      allCollapsed
+        ? new Set()
+        : new Set(diffFiles.map((diffFile) => diffFile._newFileName))
+    );
+  }, [allCollapsed, diffFiles]);
+
   if (error) {
     return (
       <div className="bg-red-50 border border-red-200 rounded-lg p-4 m-4">
@@ -65,9 +95,42 @@ function DiffTab() {
 
   return (
     <div className="h-full flex flex-col">
+      {diffFiles.length > 0 && (
+        <div className="sticky top-0 bg-background border-b px-4 py-2 z-10">
+          <div className="flex items-center justify-between gap-4">
+            <span
+              className="text-xs font-mono whitespace-nowrap"
+              aria-live="polite"
+              style={{ color: 'hsl(var(--muted-foreground) / 0.7)' }}
+            >
+              {diffFiles.length} file{diffFiles.length === 1 ? '' : 's'}{' '}
+              changed,{' '}
+              <span style={{ color: 'hsl(var(--console-success))' }}>
+                +{totals.added}
+              </span>{' '}
+              <span style={{ color: 'hsl(var(--console-error))' }}>
+                -{totals.deleted}
+              </span>
+            </span>
+            <Button
+              variant="outline"
+              size="xs"
+              onClick={handleCollapseAll}
+              className="shrink-0"
+            >
+              {allCollapsed ? 'Expand All' : 'Collapse All'}
+            </Button>
+          </div>
+        </div>
+      )}
       <div className="flex-1 overflow-y-auto px-4">
         {diffFiles.map((diffFile, idx) => (
-          <DiffCard key={idx} diffFile={diffFile} />
+          <DiffCard
+            key={idx}
+            diffFile={diffFile}
+            isCollapsed={collapsedIds.has(diffFile._newFileName)}
+            onToggle={() => toggle(diffFile._newFileName)}
+          />
         ))}
       </div>
     </div>