fix: align chat expansion animations

Use the same spring height animation for thinking and tool details
Reduce mismatch between auto-collapse and manual collapse behavior
Keep existing expanded state behavior unchanged

packages/ui/src/components/chat/message/parts/ReasoningPart.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { animate, type AnimationPlaybackControls } from 'motion';
 import type { Part } from '@opencode-ai/sdk/v2';
 import { cn } from '@/lib/utils';
 import type { ContentChangeReason } from '@/hooks/useChatAutoFollow';
@@ -29,6 +30,7 @@ const cleanReasoningText = (text: string): string => {
 
 const SUMMARY_MAX_CHARS = 80;
 const INLINE_THRESHOLD = 120;
+const EXPANDED_CONTENT_SPRING = { type: 'spring' as const, visualDuration: 0.35, bounce: 0 };
 
 /** Strip common markdown syntax so the header preview reads as plain text. */
 const stripMarkdown = (text: string): string =>
@@ -95,6 +97,9 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
     const [isExpanded, setIsExpanded] = React.useState(defaultExpanded ?? isStreaming);
     const contentId = React.useId();
     const scrollRef = React.useRef<HTMLElement>(null);
+    const contentRef = React.useRef<HTMLDivElement>(null);
+    const contentAnimationRef = React.useRef<AnimationPlaybackControls | null>(null);
+    const contentMountedRef = React.useRef(false);
     // Track previous isStreaming so the effect only collapses on true→false
     // transitions and does NOT override defaultExpanded on initial mount.
     const prevIsStreamingRef = React.useRef(isStreaming);
@@ -139,6 +144,67 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
         }
     }, [text, isStreaming, isExpanded]);
 
+    React.useLayoutEffect(() => {
+        const element = contentRef.current;
+        if (!element) {
+            return;
+        }
+
+        contentAnimationRef.current?.stop();
+
+        if (!contentMountedRef.current) {
+            contentMountedRef.current = true;
+            element.style.height = isExpanded ? 'auto' : '0px';
+            element.style.opacity = isExpanded ? '1' : '0';
+            element.style.overflow = isExpanded ? 'visible' : 'hidden';
+            return;
+        }
+
+        element.style.overflow = 'hidden';
+
+        if (isExpanded) {
+            element.style.height = '0px';
+            element.style.opacity = '0';
+        } else {
+            element.style.height = `${element.scrollHeight}px`;
+            element.style.opacity = '1';
+        }
+
+        const animation = animate(
+            element,
+            { height: isExpanded ? 'auto' : '0px', opacity: isExpanded ? 1 : 0 },
+            EXPANDED_CONTENT_SPRING,
+        );
+        contentAnimationRef.current = animation;
+
+        void animation.finished.then(() => {
+            if (contentAnimationRef.current !== animation) {
+                return;
+            }
+            contentAnimationRef.current = null;
+            if (isExpanded) {
+                element.style.overflow = 'visible';
+                element.style.height = 'auto';
+            } else {
+                element.style.overflow = 'hidden';
+            }
+        }).catch(() => undefined);
+
+        return () => {
+            animation.stop();
+            if (contentAnimationRef.current === animation) {
+                contentAnimationRef.current = null;
+            }
+        };
+    }, [isExpanded]);
+
+    React.useEffect(() => {
+        return () => {
+            contentAnimationRef.current?.stop();
+            contentAnimationRef.current = null;
+        };
+    }, []);
+
     if (!text || text.trim().length === 0) {
         return null;
     }
@@ -246,14 +312,16 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
 
             {/* Expanded content — keep mounted so auto-collapse can animate smoothly. */}
             <div
+                ref={contentRef}
                 id={contentId}
                 aria-hidden={!isExpanded}
-                className={cn(
+                style={{
-                    'grid transition-[grid-template-rows,opacity] duration-[350ms] ease-out motion-reduce:transition-none',
+                    height: isExpanded ? 'auto' : '0px',
-                    isExpanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0',
+                    opacity: isExpanded ? 1 : 0,
-                )}
+                    overflow: isExpanded ? 'visible' : 'hidden',
+                    overflowAnchor: 'none',
+                }}
             >
-                <div className="min-h-0 overflow-hidden">
                 <div className="relative ml-2 pl-3 pb-1 pt-0.5">
                     <span
                         aria-hidden="true"
@@ -289,7 +357,6 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
                 </div>
             </div>
         </div>
-        </div>
     );
 };
 

packages/ui/src/components/chat/message/parts/ToolPart.tsx

@@ -1,5 +1,6 @@
 
 import React from 'react';
+import { animate, type AnimationPlaybackControls } from 'motion';
 import { RuntimeAPIContext } from '@/contexts/runtimeAPIContext';
 import { PatchDiff } from '@pierre/diffs/react';
 import { cn } from '@/lib/utils';
@@ -188,6 +189,7 @@ const LiveDuration: React.FC<{ start: number; end?: number; active: boolean }> =
 };
 
 const EXPANDED_CONTENT_TRANSITION_MS = 350;
+const EXPANDED_CONTENT_SPRING = { type: 'spring' as const, visualDuration: 0.35, bounce: 0 };
 
 const useAnimatedExpandedContent = (isExpanded: boolean) => {
     const [shouldRender, setShouldRender] = React.useState(isExpanded);
@@ -1900,15 +1902,77 @@ const ToolPart: React.FC<ToolPartProps> = ({
 
     const onContentChangeRef = React.useRef(onContentChange);
     onContentChangeRef.current = onContentChange;
+    const expandedContentRef = React.useRef<HTMLDivElement>(null);
+    const expandedContentAnimationRef = React.useRef<AnimationPlaybackControls | null>(null);
+    const expandedContentMountedRef = React.useRef(false);
 
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
-        if (!shouldNotifyStructuralChange) {
+        if (isTaskTool) {
             return;
         }
-        if (typeof isExpanded === 'boolean') {
+
+        const element = expandedContentRef.current;
+        if (!element) {
+            return;
+        }
+
+        expandedContentAnimationRef.current?.stop();
+
+        if (!expandedContentMountedRef.current) {
+            expandedContentMountedRef.current = true;
+            element.style.height = isExpanded ? 'auto' : '0px';
+            element.style.opacity = isExpanded ? '1' : '0';
+            element.style.overflow = isExpanded ? 'visible' : 'hidden';
+            return;
+        }
+
+        element.style.overflow = 'hidden';
+
+        if (isExpanded) {
+            element.style.height = '0px';
+            element.style.opacity = '0';
+        } else {
+            element.style.height = `${element.scrollHeight}px`;
+            element.style.opacity = '1';
+        }
+
+        const animation = animate(
+            element,
+            { height: isExpanded ? 'auto' : '0px', opacity: isExpanded ? 1 : 0 },
+            EXPANDED_CONTENT_SPRING,
+        );
+        expandedContentAnimationRef.current = animation;
+
+        void animation.finished.then(() => {
+            if (expandedContentAnimationRef.current !== animation) {
+                return;
+            }
+            expandedContentAnimationRef.current = null;
+            if (isExpanded) {
+                element.style.overflow = 'visible';
+                element.style.height = 'auto';
+            } else {
+                element.style.overflow = 'hidden';
+            }
+            if (shouldNotifyStructuralChange) {
                 onContentChangeRef.current?.('structural');
             }
-    }, [isExpanded, shouldNotifyStructuralChange]);
+        }).catch(() => undefined);
+
+        return () => {
+            animation.stop();
+            if (expandedContentAnimationRef.current === animation) {
+                expandedContentAnimationRef.current = null;
+            }
+        };
+    }, [isExpanded, isTaskTool, shouldNotifyStructuralChange]);
+
+    React.useEffect(() => {
+        return () => {
+            expandedContentAnimationRef.current?.stop();
+            expandedContentAnimationRef.current = null;
+        };
+    }, []);
 
     const stateWithData = state as ToolStateWithMetadata;
     const metadata = stateWithData.metadata;
@@ -2676,13 +2740,15 @@ const ToolPart: React.FC<ToolPartProps> = ({
 
             {!isTaskTool ? (
                 <div
+                    ref={expandedContentRef}
                     aria-hidden={!isExpanded}
-                    className={cn(
+                    style={{
-                        'grid transition-[grid-template-rows,opacity] duration-[350ms] ease-out motion-reduce:transition-none',
+                        height: isExpanded ? 'auto' : '0px',
-                        isExpanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0',
+                        opacity: isExpanded ? 1 : 0,
-                    )}
+                        overflow: isExpanded ? 'visible' : 'hidden',
+                        overflowAnchor: 'none',
+                    }}
                 >
-                    <div className="min-h-0 overflow-hidden">
                     {shouldRenderExpandedContent ? (
                         <div className="relative ml-2 pl-3">
                             <span
@@ -2700,7 +2766,6 @@ const ToolPart: React.FC<ToolPartProps> = ({
                         </div>
                     ) : null}
                 </div>
-                </div>
             ) : null}
         </div>
     );