fix: stabilize agent progress display

features/agent/components/agent-message-details.tsx

@@ -157,7 +157,7 @@ export function AgentMessageProgress({
     return null;
   }
 
-  return <ProgressList key={running ? "running" : "settled"} progress={progress} running={running} />;
+  return <ProgressList progress={progress} running={running} />;
 }
 
 function AgentNestedBlock({
@@ -200,35 +200,35 @@ function AnimatedDetailItem({ children }: { children: ReactNode }) {
 
 function ProgressList({ progress, running }: { progress: AgentChatProgress[]; running: boolean }) {
   const [expanded, setExpanded] = useState(false);
-  const visibleProgress = running
-    ? progress.slice(-STREAMING_PROGRESS_LIMIT)
-    : expanded
-      ? progress
+  const compact = running && !expanded;
+  const visibleProgress = expanded
+    ? progress
+    : running
+      ? progress.slice(-STREAMING_PROGRESS_LIMIT)
       : [];
-  const listMode = running ? "streaming" : expanded ? "expanded" : "collapsed";
+  const listMode = expanded ? "expanded" : running ? "streaming" : "collapsed";
 
   return (
     <div className="agent-panel-nested rounded-xl p-2.5">
       <button
         type="button"
-        className="flex w-full items-center gap-2 text-left text-xs font-semibold text-slate-600 disabled:cursor-default"
-        aria-expanded={running || expanded}
-        disabled={running}
+        className="flex w-full items-center gap-2 text-left text-xs font-semibold text-slate-600"
+        aria-expanded={expanded}
         onClick={() => setExpanded((current) => !current)}
       >
         <ListTree size={16} className="shrink-0 text-blue-700" aria-hidden="true" />
         <span>执行进度</span>
         <span className="flex-1" />
         <span className="shrink-0 font-normal text-slate-400">
-          {running
-            ? `最近 ${Math.min(progress.length, STREAMING_PROGRESS_LIMIT)} 条`
-            : expanded
-              ? `全部 ${progress.length} 条`
+          {expanded
+            ? `全部 ${progress.length} 条`
+            : running
+              ? `最近 ${Math.min(progress.length, STREAMING_PROGRESS_LIMIT)} 条`
               : `共 ${progress.length} 条`}
         </span>
         <ChevronDown
           size={14}
-          className={cn("shrink-0 text-slate-400 transition-transform", !running && expanded && "rotate-180")}
+          className={cn("shrink-0 text-slate-400 transition-transform", expanded && "rotate-180")}
           aria-hidden="true"
         />
       </button>
@@ -236,18 +236,21 @@ function ProgressList({ progress, running }: { progress: AgentChatProgress[]; ru
         {visibleProgress.length ? (
           <motion.ol
             key={listMode}
-            aria-label={!running && expanded ? "全部执行进度" : "最近执行进度"}
+            aria-label={expanded ? "全部执行进度" : "最近执行进度"}
             className="mt-2 space-y-1.5 overflow-hidden"
             initial={{ height: 0, opacity: 0 }}
             animate={{ height: "auto", opacity: 1 }}
             exit={{ height: 0, opacity: 0 }}
             transition={agentLayoutTransition}
           >
-            <AnimatePresence initial={false} mode={expanded ? "sync" : "wait"}>
+            <AnimatePresence initial={false} mode="popLayout">
               {visibleProgress.map((item) => (
                 <motion.li
                   key={item.id}
-                  className="grid h-12 grid-cols-[16px_minmax(0,1fr)_auto] items-start gap-2 overflow-hidden text-xs"
+                  className={cn(
+                    "grid grid-cols-[16px_minmax(0,1fr)_auto] items-start gap-2 text-xs",
+                    compact && "h-12 overflow-hidden"
+                  )}
                   initial={{ opacity: 0, y: 4 }}
                   animate={{ opacity: 1, y: 0 }}
                   exit={{ opacity: 0, y: -2 }}
@@ -275,11 +278,23 @@ function ProgressList({ progress, running }: { progress: AgentChatProgress[]; ru
                     }
                   />
                   <span className="min-w-0">
-                    <span className="block truncate font-semibold text-slate-800" title={item.title}>
+                    <span
+                      className={cn(
+                        "block font-semibold text-slate-800",
+                        compact ? "truncate" : "break-words"
+                      )}
+                      title={item.title}
+                    >
                       {item.title}
                     </span>
                     {item.detail ? (
-                      <span className="block truncate leading-5 text-slate-500" title={item.detail}>
+                      <span
+                        className={cn(
+                          "block leading-5 text-slate-500",
+                          compact ? "truncate" : "break-words"
+                        )}
+                        title={item.detail}
+                      >
                         {item.detail}
                       </span>
                     ) : null}