From 51bcb5635c701b51f82eb412fe7809f34bec6433 Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaanjaffer0324@gmail.com>
Date: Wed, 6 May 2026 15:03:33 -0700
Subject: [PATCH] feat(ui/agents): add FilesChangedAccordion
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Aggregates file_diff events into a 'N Files Changed' collapsible at
the bottom of the conversation pane. Cumulative across the run per
LIT-2881 spec — latest patch wins, additions/deletions sum per path.
---
 .../three-pane/files-changed-accordion.tsx    | 85 +++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/agents/components/three-pane/files-changed-accordion.tsx

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/agents/components/three-pane/files-changed-accordion.tsx b/ui/litellm-dashboard/src/app/(dashboard)/agents/components/three-pane/files-changed-accordion.tsx
new file mode 100644
index 00000000000..2ce7bdff813
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/agents/components/three-pane/files-changed-accordion.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+/**
+ * FilesChangedAccordion — collapsible "N Files Changed" block in the
+ * conversation pane. Aggregates file_diff events by path: the latest patch
+ * wins, additions/deletions are summed per file.
+ *
+ * Cumulative across the entire run (per spec).
+ */
+import { Collapse, Tag, Typography } from "antd";
+import type { FileDiffPayload } from "@/types/cloud-agents";
+
+const { Paragraph, Text } = Typography;
+
+interface FilesChangedAccordionProps {
+  diffs: FileDiffPayload[];
+}
+
+interface AggregatedDiff {
+  path: string;
+  additions: number;
+  deletions: number;
+  patch: string;
+}
+
+function aggregate(diffs: FileDiffPayload[]): AggregatedDiff[] {
+  const byPath = new Map<string, AggregatedDiff>();
+  for (const d of diffs) {
+    const existing = byPath.get(d.path);
+    if (existing) {
+      existing.additions += d.additions;
+      existing.deletions += d.deletions;
+      existing.patch = d.patch; // latest wins
+    } else {
+      byPath.set(d.path, { path: d.path, additions: d.additions, deletions: d.deletions, patch: d.patch });
+    }
+  }
+  return Array.from(byPath.values());
+}
+
+export default function FilesChangedAccordion({ diffs }: FilesChangedAccordionProps) {
+  const aggregated = aggregate(diffs);
+  if (aggregated.length === 0) return null;
+
+  return (
+    <Collapse
+      size="small"
+      className="!mb-3"
+      data-testid="files-changed-accordion"
+      items={[
+        {
+          key: "files",
+          label: (
+            <Text strong className="!text-sm">
+              {aggregated.length} {aggregated.length === 1 ? "File" : "Files"} Changed
+            </Text>
+          ),
+          children: (
+            <div className="space-y-2" data-testid="files-changed-list">
+              {aggregated.map((d) => (
+                <div key={d.path} className="flex items-center gap-2 text-xs" data-testid={`file-diff-${d.path}`}>
+                  <Tag color="green" className="!m-0">
+                    +{d.additions}
+                  </Tag>
+                  <Tag color="red" className="!m-0">
+                    -{d.deletions}
+                  </Tag>
+                  <Text className="!font-mono">{d.path}</Text>
+                </div>
+              ))}
+              {aggregated.map((d) => (
+                <Paragraph
+                  key={`${d.path}-patch`}
+                  className="!mb-0 whitespace-pre-wrap !text-xs !font-mono !bg-gray-50 !p-2"
+                >
+                  {d.patch}
+                </Paragraph>
+              ))}
+            </div>
+          ),
+        },
+      ]}
+    />
+  );
+}