fix click expanded

src/web-ui/src/flow_chat/tool-cards/CompactToolCard.tsx

@@ -24,6 +24,9 @@ export interface CompactToolCardProps {
   isExpanded?: boolean;
   /** Card click callback */
   onClick?: (e: React.MouseEvent) => void;
+  onMouseDown?: (e: React.MouseEvent) => void;
+  onMouseUp?: (e: React.MouseEvent) => void;
+  onMouseMove?: (e: React.MouseEvent) => void;
   /** Custom class name */
   className?: string;
   /** Whether clickable */
@@ -37,18 +40,20 @@ export interface CompactToolCardProps {
 export const CompactToolCard: React.FC<CompactToolCardProps> = ({
   status,
   isExpanded = false,
-  onClick,
+  onMouseDown,
+  onMouseUp,
+  onMouseMove,
   className = '',
   clickable = false,
   header,
   expandedContent,
 }) => {
   const handleWrapperClick = (event: React.MouseEvent) => {
-    if (!onClick || shouldIgnoreCardToggleClick(event)) {
+    if (!onMouseUp || shouldIgnoreCardToggleClick(event)) {
       return;
     }
 
-    onClick(event);
+    onMouseUp(event);
   };
 
   const loadingShimmer =
@@ -67,7 +72,7 @@ export const CompactToolCard: React.FC<CompactToolCardProps> = ({
         className={`compact-tool-card-wrapper--expanded-card ${className}`.trim()}
         header={header}
         expandedContent={expandedContent}
-        headerExpandAffordance={clickable || Boolean(onClick)}
+        headerExpandAffordance={clickable || Boolean(onMouseUp)}
       />
     );
   }
@@ -78,7 +83,9 @@ export const CompactToolCard: React.FC<CompactToolCardProps> = ({
     >
       <div
         className={`compact-tool-card status-${status} ${clickable ? 'clickable' : ''} ${isExpanded ? 'expanded' : ''}`}
-        onClick={handleWrapperClick}
+        onMouseDown={onMouseDown}
+        onMouseMove={onMouseMove}
+        onMouseUp={handleWrapperClick}
         style={{ cursor: clickable ? 'pointer' : 'default' }}
       >
         {header}

src/web-ui/src/flow_chat/tool-cards/DefaultToolCard.tsx

@@ -93,6 +93,7 @@
   const { t } = useTranslation('flow-chat');
   const { toolCall, toolResult, status, requiresConfirmation, userConfirmed } = toolItem;
   const [isExpanded, setIsExpanded] = useState(false);
+  const [shouldExpand, setShouldExpand] = useState(true);
   const toolId = toolItem.id ?? toolCall?.id;
   const { cardRootRef, applyExpandedState } = useToolCardHeightContract({
     toolId,
@@ -128,14 +129,25 @@
     onReject?.();
   };
 
+  const handleMouseDown = useCallback(() => {
+    setShouldExpand(true);
+  }, [applyExpandedState, canExpand, isExpanded, onExpand,shouldExpand, setShouldExpand]);
+
+  const handleMouseMove = useCallback(() => {
+    setShouldExpand(false);
+  }, [applyExpandedState, canExpand, isExpanded, onExpand,shouldExpand, setShouldExpand]);
+
   const handleToggleExpand = useCallback(() => {
     if (!canExpand) return;
 
     const nextExpanded = !isExpanded;
-    applyExpandedState(isExpanded, nextExpanded, setIsExpanded, {
-      onExpand,
+    if (shouldExpand) {
+      applyExpandedState(isExpanded, nextExpanded, setIsExpanded, {
+        onExpand,
     });
-  }, [applyExpandedState, canExpand, isExpanded, onExpand]);
+    }
+    setShouldExpand(true);
+  }, [applyExpandedState, canExpand, isExpanded, onExpand, shouldExpand, setShouldExpand]);
 
   const getStatusText = () => {
     if (requiresConfirmation && !userConfirmed) {
@@ -213,7 +225,9 @@
       <CompactToolCard
         status={status}
         isExpanded={isExpanded}
-        onClick={handleToggleExpand}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleToggleExpand}
         className={`default-tool-card ${showConfirmationHighlight ? 'requires-confirmation' : ''}`}
         clickable={canExpand}
           header={

src/web-ui/src/flow_chat/tool-cards/GitToolDisplay.tsx

@@ -136,16 +136,27 @@
     return t('toolCards.git.executionFailed');
   };
 
+  const [shouldExpand, setShouldExpand] = useState(true);
+
+  const handleMouseDown = useCallback(() => {
+    setShouldExpand(true);
+  }, [hasOutput, isFailed, toggleExpanded, shouldExpand, setShouldExpand]);
+
+    const handleMouseMove = useCallback(() => {
+    setShouldExpand(false);
+  }, [hasOutput, isFailed, toggleExpanded, shouldExpand, setShouldExpand]);
+
   const handleCardClick = useCallback((e: React.MouseEvent) => {
     const target = e.target as HTMLElement;
     if (target.closest('.tool-card-header-actions, .git-action-buttons, .terminal-header-actions')) {
       return;
     }
 
-    if (hasOutput || isFailed) {
+    if ((hasOutput || isFailed) && shouldExpand) {
       toggleExpanded();
     }
-  }, [hasOutput, isFailed, toggleExpanded]);
+    setShouldExpand(true);
+  }, [hasOutput, isFailed, toggleExpanded, shouldExpand, setShouldExpand]);
 
   const renderStatusIcon = () => {
     if (isLoading) {
@@ -417,7 +428,9 @@
         <CompactToolCard
           status={status}
           isExpanded={false}
-          onClick={handleCardClick}
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}
+          onMouseUp={handleCardClick}
           className="git-tool-display"
           clickable
           header={renderCompactHeader()}

src/web-ui/src/flow_chat/tool-cards/GlobSearchDisplay.tsx

@@ -88,14 +88,24 @@
   const searchPath = getSearchPath();
   const hasDetails = status === 'completed' && files.length > 0;
   const hasResultData = toolResult?.result !== undefined && toolResult?.result !== null;
+  const [shouldExpand, setShouldExpand] = useState(true);
+
+  const handleMouseMove= useCallback(() => {
+    setShouldExpand(false);
+  }, [applyExpandedState, hasDetails, isExpanded, onExpand, shouldExpand, setShouldExpand]);
+
+  const handleMouseDown =  useCallback(() => {
+    setShouldExpand(true);
+  }, [applyExpandedState, hasDetails, isExpanded, onExpand, shouldExpand, setShouldExpand]);
 
   const handleClick = useCallback(() => {
-    if (hasDetails) {
+    if (hasDetails && shouldExpand) {
       applyExpandedState(isExpanded, !isExpanded, setIsExpanded, {
         onExpand,
       });
     }
-  }, [applyExpandedState, hasDetails, isExpanded, onExpand]);
+    setShouldExpand(true);
+  }, [applyExpandedState, hasDetails, isExpanded, onExpand,shouldExpand, setShouldExpand]);
 
   const renderContent = () => {
     if (status === 'completed') {
@@ -180,7 +190,9 @@
       <CompactToolCard
         status={status}
         isExpanded={isExpanded}
-        onClick={handleClick}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleClick}
         className="glob-search-card"
         clickable={hasDetails}
         header={

src/web-ui/src/flow_chat/tool-cards/GrepSearchDisplay.tsx

@@ -65,13 +65,24 @@ export const GrepSearchDisplay: React.FC<ToolCardProps> = ({
   const hasDetails = status === 'completed' && stats.matches > 0;
   const hasResultData = toolResult?.result !== undefined && toolResult?.result !== null;
 
+  const [shouldExpand, setShouldExpand] = useState(true);
+
+  const handleMouseMove = useCallback(() => {
+    setShouldExpand(false);
+  }, [applyExpandedState, hasDetails, isExpanded, onExpand, shouldExpand, setShouldExpand]);
+
+  const handleMouseDown = useCallback(() => {
+    setShouldExpand(true);
+  }, [applyExpandedState, hasDetails, isExpanded, onExpand, shouldExpand, setShouldExpand]);
+
   const handleClick = useCallback(() => {
-    if (hasDetails) {
+    if (hasDetails && shouldExpand) {
       applyExpandedState(isExpanded, !isExpanded, setIsExpanded, {
         onExpand,
       });
     }
-  }, [applyExpandedState, hasDetails, isExpanded, onExpand]);
+    setShouldExpand(true);
+  }, [applyExpandedState, hasDetails, isExpanded, onExpand, shouldExpand, setShouldExpand]);
 
   const renderContent = () => {
     if (status === 'completed') {
@@ -135,7 +146,9 @@ export const GrepSearchDisplay: React.FC<ToolCardProps> = ({
       <CompactToolCard
         status={status}
         isExpanded={isExpanded}
-        onClick={handleClick}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleClick}
         className="grep-search-card"
         clickable={hasDetails}
         header={

src/web-ui/src/flow_chat/tool-cards/LSDisplay.tsx

@@ -83,13 +83,21 @@ export const LSDisplay: React.FC<ToolCardProps> = ({
   const hasDetails = status === 'completed' && entries.length > 0;
   const hasResultData = toolResult?.result !== undefined && toolResult?.result !== null;
 
+  const [shouldExpand, setShouldExpand] = useState(true);
+  const handleMouseDown = useCallback(() => {
+    setShouldExpand(true);
+  }, [applyExpandedState, hasDetails, isExpanded, onExpand, shouldExpand, setShouldExpand]);
+
+  const handleMouseMove = useCallback(() => {
+    setShouldExpand(false);
+  }, [applyExpandedState, hasDetails, isExpanded, onExpand, shouldExpand, setShouldExpand]);
   const handleClick = useCallback(() => {
-    if (hasDetails) {
+    if (hasDetails && shouldExpand) {
       applyExpandedState(isExpanded, !isExpanded, setIsExpanded, {
         onExpand,
       });
     }
-  }, [applyExpandedState, hasDetails, isExpanded, onExpand]);
+  }, [applyExpandedState, hasDetails, isExpanded, onExpand,  shouldExpand, setShouldExpand]);
 
   const renderContent = () => {
     if (status === 'completed') {
@@ -176,7 +184,9 @@ export const LSDisplay: React.FC<ToolCardProps> = ({
       <CompactToolCard
         status={status}
         isExpanded={isExpanded}
-        onClick={handleClick}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleClick}
         className="ls-display-card"
         clickable={hasDetails}
         header={

src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.tsx

@@ -92,10 +92,23 @@ export const ModelThinkingDisplay: React.FC<ModelThinkingDisplayProps> = ({ thin
     return t('toolCards.think.thinkingCharacters', { count: content.length });
   }, [content, t]);
 
+  const shouldExpand = useRef(true);
+
+  const handleMouseDown = () => {
+    shouldExpand.current = true;
+  };
+
+  const handleMouseMove = () => {
+    shouldExpand.current = false;
+  };
+
   const handleToggleClick = () => {
-    const nextExpanded = !isExpanded;
-    userToggledRef.current = true;
-    applyExpandedState(isExpanded, nextExpanded, setIsExpanded);
+    if (shouldExpand.current) {
+      const nextExpanded = !isExpanded;
+      userToggledRef.current = true;
+      applyExpandedState(isExpanded, nextExpanded, setIsExpanded);
+    }
+    shouldExpand.current = true;
   };
 
   const headerLabel = (isExpanded
@@ -113,7 +126,9 @@ export const ModelThinkingDisplay: React.FC<ModelThinkingDisplayProps> = ({ thin
     <div ref={wrapperRef} data-tool-card-id={thinkingItem.id} className={wrapperClassName}>
       <div
         className="thinking-collapsed-header"
-        onClick={handleToggleClick}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleToggleClick}
       >
         <ChevronRight size={14} className="thinking-chevron" />
         <span className="thinking-label">{headerLabel}</span>

src/web-ui/src/flow_chat/tool-cards/ReadFileDisplay.tsx

@@ -2,7 +2,7 @@
  * Compact display for the read_file tool.
  */
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Check, FileText, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { IconButton } from '../../component-library';
@@ -152,6 +152,23 @@ export const ReadFileDisplay: React.FC<ToolCardProps> = React.memo(({
     return null;
   };
 
+  const [shouldExpand, setShouldExpand] = useState(true);
+
+  const handleMouseDown = () => {
+    setShouldExpand(true);
+  }
+
+  const handleMouseMove = () => {
+    setShouldExpand(false);
+  }
+
+  const handleMouseUp = () => {
+    if (shouldExpand && canOpenFile) {
+      handleOpenInEditor();
+    }
+    setShouldExpand(true);
+  }
+
   const renderActions = () => {
     if (!showConfirmationActions) {
       return undefined;
@@ -203,7 +220,9 @@ export const ReadFileDisplay: React.FC<ToolCardProps> = React.memo(({
     <CompactToolCard
       status={status}
       isExpanded={false}
-      onClick={() => canOpenFile && handleOpenInEditor()}
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
       className="read-file-card"
       clickable={canOpenFile}
       header={

src/web-ui/src/flow_chat/tool-cards/SessionControlToolCard.tsx

@@ -101,6 +101,23 @@ export const SessionControlToolCard: React.FC<ToolCardProps> = React.memo(({
     }
   };
 
+  const [shouldExpand, setShouldExpand] = useState(true);
+
+  const handleMouseDown = () => {
+    setShouldExpand(true);
+  }
+
+  const handleMouseMove = () => {
+    setShouldExpand(false);
+  }
+
+  const handleMouseUp = () => {
+    if (shouldExpand && hasDetails) {
+      applyExpandedState(isExpanded, !isExpanded, setIsExpanded);
+    }
+    setShouldExpand(true);
+  }
+
   const renderContent = () => {
     const label = getActionLabel();
 
@@ -261,11 +278,9 @@ export const SessionControlToolCard: React.FC<ToolCardProps> = React.memo(({
       <CompactToolCard
         status={status}
         isExpanded={isExpanded}
-        onClick={() => {
-          if (hasDetails) {
-            applyExpandedState(isExpanded, !isExpanded, setIsExpanded);
-          }
-        }}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
         className="session-control-card"
         clickable={hasDetails}
         header={(