feat(web): messages progress et usages MCP dépliables/repliables, repliés par défaut — #233

frontend/src/features/agents/CustomAgentChatView.tsx

@@ -9,12 +9,15 @@
 import {
   useCallback,
   useEffect,
+  useId,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
   type ClipboardEvent,
   type KeyboardEvent,
   type MouseEvent as ReactMouseEvent,
+  type RefObject,
 } from "react";
 
 import type {
@@ -767,6 +770,9 @@ export function CustomAgentChatView({
           ? (chatConversationViewCache.get(initialConversationCacheKey)?.progressIndex ?? new Map())
           : new Map(),
   );
+  const [expandedProgressKeys, setExpandedProgressKeys] = useState<Set<string>>(
+    () => new Set(),
+  );
   const [currentSession, setCurrentSession] = useState(sessionId);
   const [externalSessionId, setExternalSessionId] = useState(sessionId);
   const [draft, setDraft] = useState("");
@@ -1988,7 +1994,23 @@ export function CustomAgentChatView({
           </p>
         ) : (
           displayTurns.map((turn, index) => (
-            <ChatBubble key={index} turn={turn} requesterName={agentName} />
+            <ChatBubble
+              key={index}
+              turn={turn}
+              requesterName={agentName}
+              expandedProgressKeys={expandedProgressKeys}
+              onToggleProgressExpanded={(key) =>
+                setExpandedProgressKeys((prev) => {
+                  const next = new Set(prev);
+                  if (next.has(key)) {
+                    next.delete(key);
+                  } else {
+                    next.add(key);
+                  }
+                  return next;
+                })
+              }
+            />
           ))
         )}
       </div>
@@ -2166,9 +2188,13 @@ export function CustomAgentChatView({
 function ChatBubble({
   turn,
   requesterName,
+  expandedProgressKeys,
+  onToggleProgressExpanded,
 }: {
   turn: ChatTurn;
   requesterName: string;
+  expandedProgressKeys: Set<string>;
+  onToggleProgressExpanded: (key: string) => void;
 }) {
   if (turn.role === "tool") {
     return (
@@ -2180,10 +2206,14 @@ function ChatBubble({
     );
   }
   if (turn.role === "progress") {
+    const key = progressUpsertKey(turn.progress);
     return (
       <ProgressBubble
         progress={turn.progress}
         requesterName={requesterName}
+        progressKey={key}
+        expanded={expandedProgressKeys.has(key)}
+        onToggleExpanded={() => onToggleProgressExpanded(key)}
       />
     );
   }
@@ -2401,6 +2431,7 @@ function parseKeyValue(text: string, key: string): string | null {
 function delegationSummary(progress: ReplyProgress): {
   requester: string | null;
   target: string | null;
+  detail: string | null;
   excerpt: string | null;
 } {
   const text = progress.text ?? "";
@@ -2411,6 +2442,7 @@ function delegationSummary(progress: ReplyProgress): {
   return {
     requester,
     target,
+    detail: task ?? fallback,
     excerpt: task
       ? previewText(task, 92)
       : fallback
@@ -2425,6 +2457,102 @@ const fourLineClamp = {
   WebkitLineClamp: 4,
 } as const;
 
+function useIsTextTruncated(
+  ref: RefObject<HTMLElement>,
+  content: string,
+  expanded: boolean,
+) {
+  const [truncated, setTruncated] = useState(false);
+
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const measure = () => {
+      const previousDisplay = element.style.display;
+      const previousBoxOrient = element.style.webkitBoxOrient;
+      const previousLineClamp = element.style.webkitLineClamp;
+
+      if (expanded) {
+        element.style.display = "-webkit-box";
+        element.style.webkitBoxOrient = "vertical";
+        element.style.webkitLineClamp = "4";
+      }
+
+      setTruncated(element.scrollHeight > element.clientHeight + 1);
+
+      if (expanded) {
+        element.style.display = previousDisplay;
+        element.style.webkitBoxOrient = previousBoxOrient;
+        element.style.webkitLineClamp = previousLineClamp;
+      }
+    };
+
+    measure();
+    const frame = window.requestAnimationFrame(measure);
+    window.addEventListener("resize", measure);
+    const observer =
+      typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    observer?.observe(element);
+
+    return () => {
+      window.cancelAnimationFrame(frame);
+      window.removeEventListener("resize", measure);
+      observer?.disconnect();
+    };
+  }, [content, expanded, ref]);
+
+  return truncated;
+}
+
+function ExpandableProgressDetail({
+  content,
+  className,
+  expanded,
+  onToggle,
+}: {
+  content: string;
+  className?: string;
+  expanded: boolean;
+  onToggle: () => void;
+}) {
+  const contentId = useId();
+  const detailRef = useRef<HTMLParagraphElement>(null);
+  const truncated = useIsTextTruncated(detailRef, content, expanded);
+  const showToggle = truncated;
+
+  return (
+    <div className="mt-1 min-w-0">
+      <p
+        id={contentId}
+        ref={detailRef}
+        data-testid="chat-progress-detail"
+        className={cn(
+          "overflow-hidden whitespace-pre-wrap break-words text-[11px] text-content",
+          className,
+        )}
+        style={expanded ? undefined : fourLineClamp}
+      >
+        {content}
+      </p>
+      {showToggle && (
+        <button
+          type="button"
+          className={cn(
+            "mt-1 text-[11px] font-medium text-primary underline-offset-2 hover:underline",
+            className?.includes("text-center") && "mx-auto block",
+          )}
+          aria-expanded={expanded}
+          aria-controls={contentId}
+          onClick={onToggle}
+        >
+          {expanded ? "Afficher moins" : "Afficher plus"}
+        </button>
+      )}
+    </div>
+  );
+}
+
 function TurnMarker({ progress }: { progress: ReplyProgress }) {
   const stage = progressStageLabel(progress.stage);
   const label = progress.label.trim() || "Tour";
@@ -2445,14 +2573,21 @@ function TurnMarker({ progress }: { progress: ReplyProgress }) {
 function ToolProgressCard({
   progress,
   requesterName,
+  progressKey,
+  expanded,
+  onToggleExpanded,
 }: {
   progress: ReplyProgress;
   requesterName: string;
+  progressKey: string;
+  expanded: boolean;
+  onToggleExpanded: () => void;
 }) {
   const stage = progressStageLabel(progress.stage);
-  const detail =
-    progress.text && !isDelegationProgress(progress) ? previewText(progress.text) : null;
   const delegation = isDelegationProgress(progress) ? delegationSummary(progress) : null;
+  const detail = delegation
+    ? delegation.detail
+    : progress.text?.trim() || null;
   const title = delegation
     ? delegation.target
       ? `${delegation.requester ?? requesterName} ${
@@ -2475,7 +2610,7 @@ function ToolProgressCard({
           )}
           <span className="shrink-0 text-muted">· {stage}</span>
         </div>
-        {delegation?.excerpt && (
+        {delegation?.excerpt && !detail && (
           <p className="mt-1 text-center text-[11px] text-content" style={fourLineClamp}>
             {delegation.excerpt}
           </p>
@@ -2494,12 +2629,13 @@ function ToolProgressCard({
           </div>
         )}
         {detail && (
-          <p
-            className="mt-1 overflow-hidden whitespace-pre-wrap break-words text-center text-[11px] text-content"
-            style={fourLineClamp}
-          >
-            {detail}
-          </p>
+          <ExpandableProgressDetail
+            key={progressKey}
+            content={detail}
+            className="text-center"
+            expanded={expanded}
+            onToggle={onToggleExpanded}
+          />
         )}
       </div>
     </div>
@@ -2509,9 +2645,15 @@ function ToolProgressCard({
 function ProgressBubble({
   progress,
   requesterName,
+  progressKey,
+  expanded,
+  onToggleExpanded,
 }: {
   progress: ReplyProgress;
   requesterName: string;
+  progressKey: string;
+  expanded: boolean;
+  onToggleExpanded: () => void;
 }) {
   if (isTimelineProgress(progress)) return <TurnMarker progress={progress} />;
   if (isCenteredToolProgress(progress)) {
@@ -2519,13 +2661,16 @@ function ProgressBubble({
       <ToolProgressCard
         progress={progress}
         requesterName={requesterName}
+        progressKey={progressKey}
+        expanded={expanded}
+        onToggleExpanded={onToggleExpanded}
       />
     );
   }
   const title = progressTitle(progress);
   const stage = progressStageLabel(progress.stage);
   const source = progressSourceLabel(progress);
-  const detail = progress.text ? previewText(progress.text, 180) : null;
+  const detail = progress.text?.trim() || null;
   return (
     <div data-testid="chat-progress-status" className="flex min-w-0 justify-end">
       <div
@@ -2546,12 +2691,12 @@ function ProgressBubble({
           )}
         </div>
         {detail && (
-          <p
-            className="mt-1 overflow-hidden whitespace-pre-wrap break-words text-content"
-            style={fourLineClamp}
-          >
-            {detail}
-          </p>
+          <ExpandableProgressDetail
+            key={progressKey}
+            content={detail}
+            expanded={expanded}
+            onToggle={onToggleExpanded}
+          />
         )}
       </div>
     </div>