From fc3504eaed8ca7ed9214838d148ea385b8352c31 Mon Sep 17 00:00:00 2001
From: simosmik <simosmik@gmail.com>
Date: Mon, 20 Apr 2026 15:36:02 +0000
Subject: [PATCH] fix: migrate PlanDisplay raw params from native details to
 Collapsible primitive

---
 .../chat/tools/components/PlanDisplay.tsx      | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/chat/tools/components/PlanDisplay.tsx b/src/components/chat/tools/components/PlanDisplay.tsx
index 22477555..fe10e399 100644
--- a/src/components/chat/tools/components/PlanDisplay.tsx
+++ b/src/components/chat/tools/components/PlanDisplay.tsx
@@ -90,10 +90,10 @@ export const PlanDisplay: React.FC<PlanDisplayProps> = ({
             ) : null}
 
             {showRawParameters && rawContent && (
-              <details className="group/raw relative mt-3">
-                <summary className="flex cursor-pointer items-center gap-1.5 py-0.5 text-[11px] text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300">
+              <Collapsible className="mt-3">
+                <CollapsibleTrigger className="flex items-center gap-1.5 py-0.5 text-[11px] text-muted-foreground hover:text-foreground">
                   <svg
-                    className="h-2.5 w-2.5 transition-transform duration-150 group-open/raw:rotate-90"
+                    className="h-2.5 w-2.5 flex-shrink-0 transition-transform duration-150 data-[state=open]:rotate-90"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -101,11 +101,13 @@ export const PlanDisplay: React.FC<PlanDisplayProps> = ({
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                   </svg>
                   raw params
-                </summary>
-                <pre className="mt-1 overflow-hidden whitespace-pre-wrap break-words rounded border border-gray-200/40 bg-gray-50 p-2 font-mono text-[11px] text-gray-600 dark:border-gray-700/40 dark:bg-gray-900/50 dark:text-gray-400">
-                  {rawContent}
-                </pre>
-              </details>
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                  <pre className="mt-1 overflow-hidden whitespace-pre-wrap break-words rounded border border-border/40 bg-muted p-2 font-mono text-[11px] text-muted-foreground">
+                    {rawContent}
+                  </pre>
+                </CollapsibleContent>
+              </Collapsible>
             )}
           </CardContent>
         </CollapsibleContent>