From 5a598bf6cc987176f11b655e11dff1a69db214b0 Mon Sep 17 00:00:00 2001
From: Nate <sestinj@gmail.com>
Date: Fri, 4 Jul 2025 21:57:08 -0700
Subject: [PATCH 1/4] don't expand edit tool codeblocks by default

---
 gui/src/pages/gui/ToolCallDiv/EditFile.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gui/src/pages/gui/ToolCallDiv/EditFile.tsx b/gui/src/pages/gui/ToolCallDiv/EditFile.tsx
index 77fd2757faa..17d30637406 100644
--- a/gui/src/pages/gui/ToolCallDiv/EditFile.tsx
+++ b/gui/src/pages/gui/ToolCallDiv/EditFile.tsx
@@ -18,7 +18,7 @@ export function EditFile(props: EditToolCallProps) {
 
   return (
     <StyledMarkdownPreview
-      expandCodeblocks={props.expandCodeblocks ?? false}
+      expandCodeblocks={false}
       isRenderingInStepContainer
       disableManualApply
       source={src}

From 85450d44e9dc036104cf08aca340b36879fc7ff8 Mon Sep 17 00:00:00 2001
From: Nate <sestinj@gmail.com>
Date: Fri, 4 Jul 2025 22:19:47 -0700
Subject: [PATCH 2/4] make edit container collapsible

---
 .../CollapsibleContainer.tsx                  | 48 +++++++++++++++++++
 .../StepContainerPreToolbar/index.tsx         |  5 +-
 2 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/CollapsibleContainer.tsx

diff --git a/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/CollapsibleContainer.tsx b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/CollapsibleContainer.tsx
new file mode 100644
index 00000000000..1b029ddb660
--- /dev/null
+++ b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/CollapsibleContainer.tsx
@@ -0,0 +1,48 @@
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import { useState } from "react";
+
+interface CollapsibleContainerProps {
+  children: React.ReactNode;
+  maxHeight?: string;
+  className?: string;
+}
+
+export function CollapsibleContainer({
+  children,
+  maxHeight = "max-h-40",
+  className = "",
+}: CollapsibleContainerProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <div className={`relative ${className}`}>
+      <div className={`overflow-hidden ${isExpanded ? "" : maxHeight}`}>
+        {children}
+      </div>
+
+      {!isExpanded && (
+        <div className="from-editor absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t to-transparent">
+          <div
+            onClick={() => setIsExpanded(true)}
+            className="flex h-full cursor-pointer items-end justify-center pb-2"
+          >
+            <span title="Expand to show full content">
+              <ChevronDownIcon className="text-lightgray h-4 w-4" />
+            </span>
+          </div>
+        </div>
+      )}
+
+      {isExpanded && (
+        <div
+          onClick={() => setIsExpanded(false)}
+          className="mt-2 flex cursor-pointer justify-center"
+        >
+          <span title="Collapse to compact view">
+            <ChevronDownIcon className="text-lightgray h-4 w-4 rotate-180" />
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/index.tsx b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/index.tsx
index 8ece216bbd2..0b564582f43 100644
--- a/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/index.tsx
+++ b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/index.tsx
@@ -13,6 +13,7 @@ import { getFontSize } from "../../../util";
 import Spinner from "../../gui/Spinner";
 import { isTerminalCodeBlock } from "../utils";
 import { ApplyActions } from "./ApplyActions";
+import { CollapsibleContainer } from "./CollapsibleContainer";
 import { CopyButton } from "./CopyButton";
 import { CreateFileButton } from "./CreateFileButton";
 import { FileInfo } from "./FileInfo";
@@ -299,9 +300,7 @@ export function StepContainerPreToolbar({
         </div>
       </div>
 
-      {isExpanded && (
-        <div className="overflow-hidden overflow-y-auto">{children}</div>
-      )}
+      {isExpanded && <CollapsibleContainer>{children}</CollapsibleContainer>}
     </div>
   );
 }

From 76d73dbb915d44ac4928c23da0f8da1ccf5524de Mon Sep 17 00:00:00 2001
From: Nate <sestinj@gmail.com>
Date: Fri, 4 Jul 2025 22:24:52 -0700
Subject: [PATCH 3/4] hover color

---
 .../StepContainerPreToolbar/CollapsibleContainer.tsx      | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/CollapsibleContainer.tsx b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/CollapsibleContainer.tsx
index 1b029ddb660..fbc5f13664a 100644
--- a/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/CollapsibleContainer.tsx
+++ b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/CollapsibleContainer.tsx
@@ -24,10 +24,10 @@ export function CollapsibleContainer({
         <div className="from-editor absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t to-transparent">
           <div
             onClick={() => setIsExpanded(true)}
-            className="flex h-full cursor-pointer items-end justify-center pb-2"
+            className="group flex h-full cursor-pointer items-end justify-center pb-2"
           >
             <span title="Expand to show full content">
-              <ChevronDownIcon className="text-lightgray h-4 w-4" />
+              <ChevronDownIcon className="text-lightgray group-hover:text-foreground h-4 w-4" />
             </span>
           </div>
         </div>
@@ -36,10 +36,10 @@ export function CollapsibleContainer({
       {isExpanded && (
         <div
           onClick={() => setIsExpanded(false)}
-          className="mt-2 flex cursor-pointer justify-center"
+          className="group mt-2 flex cursor-pointer justify-center"
         >
           <span title="Collapse to compact view">
-            <ChevronDownIcon className="text-lightgray h-4 w-4 rotate-180" />
+            <ChevronDownIcon className="text-lightgray group-hover:text-foreground h-4 w-4 rotate-180" />
           </span>
         </div>
       )}

From 923b7e79d30aefec77d7209cd3174fd06d76a08f Mon Sep 17 00:00:00 2001
From: Nate <sestinj@gmail.com>
Date: Fri, 4 Jul 2025 22:50:08 -0700
Subject: [PATCH 4/4] don't collapse code blocks in chat mode

---
 .../StepContainerPreToolbar/CollapsibleContainer.tsx     | 7 +++++++
 .../StepContainerPreToolbar/index.tsx                    | 9 +++++++--
 gui/src/components/StyledMarkdownPreview/index.tsx       | 2 ++
 gui/src/pages/gui/ToolCallDiv/EditFile.tsx               | 1 +
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/CollapsibleContainer.tsx b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/CollapsibleContainer.tsx
index fbc5f13664a..464c4b4cf04 100644
--- a/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/CollapsibleContainer.tsx
+++ b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/CollapsibleContainer.tsx
@@ -5,15 +5,22 @@ interface CollapsibleContainerProps {
   children: React.ReactNode;
   maxHeight?: string;
   className?: string;
+  collapsible?: boolean;
 }
 
 export function CollapsibleContainer({
   children,
   maxHeight = "max-h-40",
   className = "",
+  collapsible = false,
 }: CollapsibleContainerProps) {
   const [isExpanded, setIsExpanded] = useState(false);
 
+  // If not collapsible, just render children without any collapsible behavior
+  if (!collapsible) {
+    return <div className={className}>{children}</div>;
+  }
+
   return (
     <div className={`relative ${className}`}>
       <div className={`overflow-hidden ${isExpanded ? "" : maxHeight}`}>
diff --git a/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/index.tsx b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/index.tsx
index 0b564582f43..1d252dbdb39 100644
--- a/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/index.tsx
+++ b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/index.tsx
@@ -33,6 +33,7 @@ export interface StepContainerPreToolbarProps {
   children: any;
   expanded?: boolean;
   disableManualApply?: boolean;
+  collapsible?: boolean;
 }
 
 export function StepContainerPreToolbar({
@@ -48,6 +49,7 @@ export function StepContainerPreToolbar({
   children,
   expanded,
   disableManualApply,
+  collapsible,
 }: StepContainerPreToolbarProps) {
   const ideMessenger = useContext(IdeMessengerContext);
   const history = useAppSelector((state) => state.session.history);
@@ -299,8 +301,11 @@ export function StepContainerPreToolbar({
           {renderActionButtons()}
         </div>
       </div>
-
-      {isExpanded && <CollapsibleContainer>{children}</CollapsibleContainer>}
+      {isExpanded && (
+        <CollapsibleContainer collapsible={collapsible}>
+          {children}
+        </CollapsibleContainer>
+      )}
     </div>
   );
 }
diff --git a/gui/src/components/StyledMarkdownPreview/index.tsx b/gui/src/components/StyledMarkdownPreview/index.tsx
index 0f2d1af0df8..b01e49256b8 100644
--- a/gui/src/components/StyledMarkdownPreview/index.tsx
+++ b/gui/src/components/StyledMarkdownPreview/index.tsx
@@ -127,6 +127,7 @@ interface StyledMarkdownPreviewProps {
   disableManualApply?: boolean;
   toolCallId?: string;
   expandCodeblocks?: boolean;
+  collapsible?: boolean;
 }
 
 const HLJS_LANGUAGE_CLASSNAME_PREFIX = "language-";
@@ -305,6 +306,7 @@ const StyledMarkdownPreview = memo(function StyledMarkdownPreview(
               forceToolCallId={props.toolCallId}
               expanded={props.expandCodeblocks}
               disableManualApply={props.disableManualApply}
+              collapsible={props.collapsible}
             >
               <SyntaxHighlightedPre {...preProps} />
             </StepContainerPreToolbar>
diff --git a/gui/src/pages/gui/ToolCallDiv/EditFile.tsx b/gui/src/pages/gui/ToolCallDiv/EditFile.tsx
index 17d30637406..27b09379990 100644
--- a/gui/src/pages/gui/ToolCallDiv/EditFile.tsx
+++ b/gui/src/pages/gui/ToolCallDiv/EditFile.tsx
@@ -24,6 +24,7 @@ export function EditFile(props: EditToolCallProps) {
       source={src}
       toolCallId={props.toolCallId}
       itemIndex={props.historyIndex}
+      collapsible={true}
     />
   );
 }