From 3506156464cb52d8920e89466a207acde8091f39 Mon Sep 17 00:00:00 2001
From: oneishaansharma <oneishaansharma@gmail.com>
Date: Wed, 14 Jan 2026 00:21:43 -0800
Subject: [PATCH 1/2] chore: make File Changes section collapsible

---
 frontend/src/components/message/PatchPart.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/message/PatchPart.tsx b/frontend/src/components/message/PatchPart.tsx
index 0d5df52..4792965 100644
--- a/frontend/src/components/message/PatchPart.tsx
+++ b/frontend/src/components/message/PatchPart.tsx
@@ -10,14 +10,14 @@ interface PatchPartProps {
 
 export function PatchPart({ part, onFileClick }: PatchPartProps) {
   return (
-    <div className="border border-border rounded-lg overflow-hidden my-2">
-      <div className="px-3 py-1.5 bg-card flex items-center justify-between text-sm">
+    <details className="border border-border rounded-lg overflow-hidden my-2">
+      <summary className="px-3 py-1.5 bg-card hover:bg-accent cursor-pointer flex items-center justify-between text-sm">
         <span className="font-medium">
           File Changes ({part.files.length} file{part.files.length !== 1 ? 's' : ''})
         </span>
         <span className="text-muted-foreground text-xs font-mono">{part.hash.slice(0, 8)}</span>
-      </div>
-      
+      </summary>
+
       <div className="bg-card px-3 py-2 space-y-1">
         {part.files.map((file, index) => (
           <div
@@ -29,6 +29,6 @@ export function PatchPart({ part, onFileClick }: PatchPartProps) {
           </div>
         ))}
       </div>
-    </div>
+    </details>
   )
 }
\ No newline at end of file

From 5bd987a9aa3267acbabb0690ba737b48b0764c45 Mon Sep 17 00:00:00 2001
From: oneishaansharma <oneishaansharma@gmail.com>
Date: Thu, 15 Jan 2026 13:19:13 -0800
Subject: [PATCH 2/2] enhacement: PatchPart component with collapsible file
 list with preview, and chevron to match others

---
 frontend/src/components/message/PatchPart.tsx | 48 ++++++++++++++++---
 1 file changed, 42 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/message/PatchPart.tsx b/frontend/src/components/message/PatchPart.tsx
index 4792965..725a763 100644
--- a/frontend/src/components/message/PatchPart.tsx
+++ b/frontend/src/components/message/PatchPart.tsx
@@ -1,5 +1,7 @@
+import { useState } from 'react'
 import type { components } from '@/api/opencode-types'
 import { getRelativePath } from './FileToolRender'
+import { ChevronDown, ChevronUp } from 'lucide-react'
 
 type PatchPartType = components['schemas']['PatchPart']
 
@@ -8,18 +10,32 @@ interface PatchPartProps {
   onFileClick?: (filePath: string) => void
 }
 
+const INITIAL_FILES_SHOWN = 3
+
 export function PatchPart({ part, onFileClick }: PatchPartProps) {
+  const [expanded, setExpanded] = useState(false)
+
+  const hasMoreFiles = part.files.length > INITIAL_FILES_SHOWN
+  const displayedFiles = expanded ? part.files : part.files.slice(0, INITIAL_FILES_SHOWN)
+  const hiddenCount = part.files.length - INITIAL_FILES_SHOWN
+
   return (
-    <details className="border border-border rounded-lg overflow-hidden my-2">
-      <summary className="px-3 py-1.5 bg-card hover:bg-accent cursor-pointer flex items-center justify-between text-sm">
+    <div className="border border-border rounded-lg overflow-hidden my-2">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="w-full px-3 py-1.5 bg-card hover:bg-card-hover text-left flex items-center justify-between text-sm gap-2"
+      >
         <span className="font-medium">
           File Changes ({part.files.length} file{part.files.length !== 1 ? 's' : ''})
         </span>
-        <span className="text-muted-foreground text-xs font-mono">{part.hash.slice(0, 8)}</span>
-      </summary>
+        <div className="flex items-center gap-2 flex-shrink-0">
+          <span className="text-muted-foreground text-xs font-mono">{part.hash.slice(0, 8)}</span>
+          {expanded ? <ChevronUp className="w-4 h-4 text-muted-foreground" /> : <ChevronDown className="w-4 h-4 text-muted-foreground" />}
+        </div>
+      </button>
 
       <div className="bg-card px-3 py-2 space-y-1">
-        {part.files.map((file, index) => (
+        {displayedFiles.map((file, index) => (
           <div
             key={index}
             className="text-xs font-mono text-blue-600 dark:text-blue-400 hover:underline cursor-pointer"
@@ -28,7 +44,27 @@ export function PatchPart({ part, onFileClick }: PatchPartProps) {
             {getRelativePath(file)}
           </div>
         ))}
+
+        {!expanded && hasMoreFiles && (
+          <button
+            onClick={() => setExpanded(true)}
+            className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1 mt-1"
+          >
+            <ChevronDown className="w-3 h-3" />
+            +{hiddenCount} more file{hiddenCount !== 1 ? 's' : ''}
+          </button>
+        )}
+
+        {expanded && hasMoreFiles && (
+          <button
+            onClick={() => setExpanded(false)}
+            className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1 mt-1"
+          >
+            <ChevronUp className="w-3 h-3" />
+            Show less
+          </button>
+        )}
       </div>
-    </details>
+    </div>
   )
 }
\ No newline at end of file