Fix collapse-all trigger causing newly mounted items to auto-collapse

Author: everpcpc

packages/ui/src/components/panels/timeline/InlineDiffViewer.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState, useEffect } from 'react';
+import { useMemo, useState, useEffect, useRef } from 'react';
 import { Eye, EyeOff, ChevronDown, ChevronRight } from 'lucide-react';
 import './InlineDiffViewer.css';
 import { MarkdownPreview } from '../diff/MarkdownPreview';
@@ -201,10 +201,11 @@ export function InlineDiffViewer({
     }
   }, [storageKey, hasBeenViewed]);
 
-  // Listen to global collapse all trigger
+  // Listen to global collapse all trigger (only react to triggers after mount)
   const collapseContext = useDiffCollapseHook?.();
+  const initialCollapseTrigger = useRef(collapseContext?.collapseAllTrigger ?? 0);
   useEffect(() => {
-    if (collapseContext && collapseContext.collapseAllTrigger > 0) {
+    if (collapseContext && collapseContext.collapseAllTrigger > initialCollapseTrigger.current) {
       setIsExpanded(false);
     }
   }, [collapseContext?.collapseAllTrigger]);

packages/ui/src/components/panels/timeline/ThinkingMessage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Brain, ChevronDown, ChevronRight, Circle, Square } from 'lucide-react';
 import './ThinkingMessage.css';
 
@@ -26,10 +26,11 @@ export function ThinkingMessage({ content, timestamp, isStreaming }: ThinkingMes
     else setExpanded(false);
   }, [isStreaming, userToggled]);
 
-  // Listen to global collapse all trigger
+  // Listen to global collapse all trigger (only react to triggers after mount)
   const collapseContext = useThinkingCollapseHook?.();
+  const initialCollapseTrigger = useRef(collapseContext?.collapseAllTrigger ?? 0);
   useEffect(() => {
-    if (collapseContext && collapseContext.collapseAllTrigger > 0) {
+    if (collapseContext && collapseContext.collapseAllTrigger > initialCollapseTrigger.current) {
       setExpanded(false);
     }
   }, [collapseContext?.collapseAllTrigger]);

packages/ui/src/components/panels/timeline/TimelineView.tsx

@@ -675,10 +675,11 @@ const AgentResponse: React.FC<{
   const [expandedCommands, setExpandedCommands] = useState<Set<string>>(new Set());
   const agentLabel = useMemo(() => getAgentModelLabelFromCommands(commands), [commands]);
 
-  // Listen to global collapse all trigger
+  // Listen to global collapse all trigger (only react to triggers after mount)
   const toolCollapseContext = useContext(ToolCollapseContext);
+  const initialToolCollapseTrigger = useRef(toolCollapseContext?.collapseAllTrigger ?? 0);
   useEffect(() => {
-    if (toolCollapseContext && toolCollapseContext.collapseAllTrigger > 0) {
+    if (toolCollapseContext && toolCollapseContext.collapseAllTrigger > initialToolCollapseTrigger.current) {
       setShowCommands(false);
       setExpandedOutputs(new Set());
       setExpandedCommands(new Set());

packages/ui/src/components/panels/timeline/ToolCallMessage.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-refresh/only-export-components */
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import {
   ChevronDown,
   ChevronRight,
@@ -122,10 +122,11 @@ export function ToolCallMessage({
 }: ToolCallMessageProps) {
   const [expanded, setExpanded] = useState(false);
 
-  // Listen to global tool collapse trigger
+  // Listen to global tool collapse trigger (only react to triggers after mount)
   const toolCollapseContext = useToolCollapseHook?.();
+  const initialToolCollapseTrigger = useRef(toolCollapseContext?.collapseAllTrigger ?? 0);
   useEffect(() => {
-    if (toolCollapseContext && toolCollapseContext.collapseAllTrigger > 0) {
+    if (toolCollapseContext && toolCollapseContext.collapseAllTrigger > initialToolCollapseTrigger.current) {
       setExpanded(false);
     }
   }, [toolCollapseContext?.collapseAllTrigger]);