@tutti-os/agent-gui 0.0.15 → 0.0.16

package/dist/agent-message-center/index.js

@@ -3,7 +3,7 @@ import {
   approvalOptionDisplayLabel,
   getPromptToolDetails,
   isPromptRequestIdTitle
-} from "../chunk-2CA4NPP3.js";
+} from "../chunk-LW2S255I.js";
 import {
   PLAN_IMPLEMENTATION_ACTION_IMPLEMENT,
   PLAN_IMPLEMENTATION_PROMPT,
@@ -16,16 +16,17 @@ import {
   cn,
   extractAgentMcpToolTarget,
   normalizeAskUserQuestions
-} from "../chunk-YKDFQADM.js";
+} from "../chunk-FJYH2ZPX.js";
 import {
   managedAgentRoundedIconUrl,
   userAvatarPlaceholderUrl,
   workspaceAgentActivityStatusLabel
-} from "../chunk-OFGXNXYT.js";
+} from "../chunk-EKATXC3W.js";
 import "../chunk-MTFSQWZ6.js";
 import {
   resolveWorkspaceAgentSessionSortTimeUnixMs
 } from "../chunk-IBIMGLCD.js";
+import "../chunk-O5TUTXHT.js";
 import {
   workspaceAgentProviderLabel
 } from "../chunk-TYGL25EL.js";
@@ -35,12 +36,12 @@ import {
 import {
   AgentGuiI18nProvider,
   useTranslation
-} from "../chunk-KJPMZ7G5.js";
+} from "../chunk-SIDWRR5I.js";
 import "../chunk-PJP5BUU6.js";
 
 // agent-message-center/WorkspaceAgentMessageCenterPanel.tsx
 import {
-  memo,
+  memo as memo2,
   useCallback as useCallback2,
   useEffect as useEffect3,
   useLayoutEffect as useLayoutEffect2,
@@ -928,6 +929,8 @@ import { cn as cn3 } from "@tutti-os/ui-system";
 
 // agent-message-center/WorkspaceAgentMessageCenterCard.tsx
 import {
+  cloneElement,
+  memo,
   useCallback,
   useEffect,
   useLayoutEffect,
@@ -947,122 +950,129 @@ import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function stopMessageCenterTextPointerPropagation(event) {
   event.stopPropagation();
 }
-function WorkspaceAgentMessageCenterCard({
-  cardRef,
-  highlighted = false,
-  interactive = true,
-  item,
-  isSubmitting,
-  onLinkAction,
-  onOpenChat,
-  onSubmitPrompt
-}) {
-  "use memo";
-  const { t } = useTranslation();
-  const prompt = item.pendingPrompt;
-  const displayTitle = normalizeAgentTitleText(item.title);
-  const summary = messageCenterVisibleSummary(item);
-  const displayStatus = statusClass(item);
-  const statusLabel = workspaceAgentActivityStatusLabel(displayStatus, t);
-  return /* @__PURE__ */ jsxs(
-    "article",
-    {
-      ref: cardRef,
-      className: cn2(
-        "workspace-agent-message-center__card group/message-card flex min-w-0 flex-col gap-2.5 rounded-lg border border-[var(--line-2)] bg-[var(--background-fronted)] p-3.5 outline outline-0 outline-offset-2 outline-transparent transition-[background-color,border-color,outline-color]",
-        isWaitingMessageCenterItem(item) && "agent-gui-edge-glow border-[var(--tutti-purple-border)] bg-[var(--tutti-purple-bg)]",
-        highlighted && "outline-2 outline-[var(--accent)]"
-      ),
-      "data-highlighted": highlighted ? "true" : void 0,
-      "data-message-center-digest-kind": item.digest.primary.kind,
-      "data-message-center-item-id": item.id,
-      "data-waiting": isWaitingMessageCenterItem(item) ? "true" : void 0,
-      "data-status": displayStatus,
-      tabIndex: highlighted ? -1 : void 0,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-between gap-2.5", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
-            /* @__PURE__ */ jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsx2(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx2(
-                "h3",
-                {
-                  className: "workspace-agent-message-center__copy-text min-w-0 truncate text-[13px] font-bold leading-5 text-[var(--text-secondary)]",
-                  onPointerDown: stopMessageCenterTextPointerPropagation,
-                  children: displayTitle
-                }
-              ) }),
+var WorkspaceAgentMessageCenterCard = memo(
+  function WorkspaceAgentMessageCenterCard2({
+    cardRef,
+    highlighted = false,
+    interactive = true,
+    item,
+    isSubmitting,
+    lazySummary = false,
+    onLinkAction,
+    onOpenChat,
+    onSubmitPrompt
+  }) {
+    "use memo";
+    const { t } = useTranslation();
+    const prompt = item.pendingPrompt;
+    const displayTitle = normalizeAgentTitleText(item.title);
+    const summary = messageCenterVisibleSummary(item);
+    const displayStatus = statusClass(item);
+    const statusLabel = workspaceAgentActivityStatusLabel(displayStatus, t);
+    return /* @__PURE__ */ jsxs(
+      "article",
+      {
+        ref: cardRef,
+        className: cn2(
+          "workspace-agent-message-center__card group/message-card flex min-w-0 flex-col gap-2.5 rounded-lg border border-[var(--line-2)] bg-[var(--background-fronted)] p-3.5 outline outline-0 outline-offset-2 outline-transparent transition-[background-color,border-color,outline-color]",
+          isWaitingMessageCenterItem(item) && "agent-gui-edge-glow border-[var(--tutti-purple-border)] bg-[var(--tutti-purple-bg)]",
+          highlighted && "outline-2 outline-[var(--accent)]"
+        ),
+        "data-highlighted": highlighted ? "true" : void 0,
+        "data-message-center-digest-kind": item.digest.primary.kind,
+        "data-message-center-item-id": item.id,
+        "data-waiting": isWaitingMessageCenterItem(item) ? "true" : void 0,
+        "data-status": displayStatus,
+        tabIndex: highlighted ? -1 : void 0,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-between gap-2.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
               /* @__PURE__ */ jsx2(
-                TooltipContent,
+                LazyMessageCenterTooltip,
                 {
+                  content: displayTitle,
                   side: "top",
                   align: "start",
                   className: "max-w-[min(360px,calc(100vw-32px))] whitespace-normal text-left [overflow-wrap:anywhere]",
-                  children: displayTitle
+                  children: /* @__PURE__ */ jsx2(
+                    "h3",
+                    {
+                      className: "workspace-agent-message-center__copy-text min-w-0 truncate text-[13px] font-bold leading-5 text-[var(--text-secondary)]",
+                      onPointerDown: stopMessageCenterTextPointerPropagation,
+                      children: displayTitle
+                    }
+                  )
                 }
-              )
+              ),
+              item.cwd ? /* @__PURE__ */ jsx2(ProjectPathInfo, { path: item.cwd }) : null
             ] }),
-            item.cwd ? /* @__PURE__ */ jsx2(ProjectPathInfo, { path: item.cwd }) : null
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "workspace-agent-message-center__status inline-flex shrink-0 items-center gap-1.5 text-[11px] font-semibold leading-4 text-[var(--text-secondary)]",
+                "data-status": displayStatus,
+                title: statusLabel,
+                children: [
+                  /* @__PURE__ */ jsx2(
+                    StatusDot,
+                    {
+                      tone: messageCenterStatusTone(item),
+                      pulse: isWaitingMessageCenterItem(item) || item.status === "working",
+                      size: "sm",
+                      title: statusLabel
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2("span", { children: statusLabel })
+                ]
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsxs(
-            "span",
+          summary ? /* @__PURE__ */ jsx2(
+            MessageCenterSummary,
             {
-              className: "workspace-agent-message-center__status inline-flex shrink-0 items-center gap-1.5 text-[11px] font-semibold leading-4 text-[var(--text-secondary)]",
-              "data-status": displayStatus,
-              title: statusLabel,
-              children: [
-                /* @__PURE__ */ jsx2(
-                  StatusDot,
-                  {
-                    tone: messageCenterStatusTone(item),
-                    pulse: isWaitingMessageCenterItem(item) || item.status === "working",
-                    size: "sm",
-                    title: statusLabel
-                  }
-                ),
-                /* @__PURE__ */ jsx2("span", { children: statusLabel })
-              ]
+              item,
+              lazy: lazySummary,
+              onLinkAction,
+              summary,
+              emptyLabel: t("agentHost.workspaceAgentMessageCenterNoSummary")
+            }
+          ) : null,
+          prompt && interactive ? /* @__PURE__ */ jsx2("div", { className: "min-w-0", children: /* @__PURE__ */ jsx2(
+            AgentInteractivePromptSurface,
+            {
+              embedded: true,
+              variant: "compact",
+              keyboardShortcuts: false,
+              prompt,
+              isSubmitting,
+              onSubmit: onSubmitPrompt,
+              labels: buildWorkspaceAgentInteractivePromptLabels(
+                t,
+                item.provider
+              )
+            }
+          ) }) : null,
+          /* @__PURE__ */ jsx2(
+            MessageCenterOpenChatButton,
+            {
+              provider: item.provider,
+              item,
+              label: t("agentHost.workspaceAgentMessageCenterOpenChat"),
+              onOpenChat,
+              alwaysVisible: interactive && prompt !== null
             }
           )
-        ] }),
-        summary ? /* @__PURE__ */ jsx2(
-          MessageCenterSummary,
-          {
-            item,
-            onLinkAction,
-            summary,
-            emptyLabel: t("agentHost.workspaceAgentMessageCenterNoSummary")
-          }
-        ) : null,
-        prompt && interactive ? /* @__PURE__ */ jsx2("div", { className: "min-w-0", children: /* @__PURE__ */ jsx2(
-          AgentInteractivePromptSurface,
-          {
-            embedded: true,
-            variant: "compact",
-            keyboardShortcuts: false,
-            prompt,
-            isSubmitting,
-            onSubmit: onSubmitPrompt,
-            labels: buildWorkspaceAgentInteractivePromptLabels(
-              t,
-              item.provider
-            )
-          }
-        ) }) : null,
-        /* @__PURE__ */ jsx2(
-          MessageCenterOpenChatButton,
-          {
-            provider: item.provider,
-            item,
-            label: t("agentHost.workspaceAgentMessageCenterOpenChat"),
-            onOpenChat,
-            alwaysVisible: interactive && prompt !== null
-          }
-        )
-      ]
-    }
-  );
-}
+        ]
+      }
+    );
+  }
+);
 var STACK_PRESENCE_FALLBACK_MS = 380;
+var MESSAGE_CENTER_STACK_INITIAL_RENDER_COUNT = 24;
+var MESSAGE_CENTER_STACK_RENDER_BATCH_SIZE = 24;
+var MESSAGE_CENTER_STACK_RENDER_BATCH_DELAY_MS = 40;
+var MESSAGE_CENTER_SUMMARY_LAZY_ROOT_MARGIN = "480px 0px";
+var MESSAGE_CENTER_SUMMARY_OVERFLOW_MEASURE_DELAY_MS = 80;
 function useStackRegionPresence(visible) {
   const [mounted, setMounted] = useState(visible);
   const closing = mounted && !visible;
@@ -1092,117 +1102,171 @@ function useStackRegionPresence(visible) {
   );
   return { closing, mounted, onAnimationEnd };
 }
-function WorkspaceAgentMessageCenterStack({
-  className,
-  expanded,
-  groupId,
-  items,
-  renderCard,
-  onCollapse,
-  onExpand
-}) {
-  "use memo";
-  const { t } = useTranslation();
-  const summaryRegion = useStackRegionPresence(!expanded);
-  const cardsRegion = useStackRegionPresence(expanded);
-  if (items.length < 2) {
-    return null;
-  }
-  const collapseLabel = t(
-    "agentHost.workspaceAgentMessageCenterCollapseStackAria"
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn2("relative flex min-w-0 flex-col", className),
-      "data-stack-count": items.length,
-      "data-stack-motion": "smooth",
-      "data-stack-state": expanded ? "expanded" : "collapsed",
-      "data-stack-top-item-id": items[0]?.id,
-      "data-testid": `workspace-agent-message-stack-${groupId}`,
-      children: [
-        summaryRegion.mounted ? /* @__PURE__ */ jsx2(
-          "div",
-          {
-            className: cn2(
-              "workspace-agent-message-center__stack-rest min-w-0",
-              summaryRegion.closing ? "workspace-agent-message-center__stack-rest--closing" : "workspace-agent-message-center__stack-rest--opening"
-            ),
-            onAnimationEnd: summaryRegion.onAnimationEnd,
-            children: /* @__PURE__ */ jsx2(
-              "div",
-              {
-                className: "min-h-0 min-w-0 overflow-hidden",
-                "aria-hidden": summaryRegion.closing ? true : void 0,
-                inert: summaryRegion.closing ? true : void 0,
-                children: /* @__PURE__ */ jsx2(
-                  MessageCenterStackSummary,
-                  {
-                    groupId,
-                    items,
-                    onExpand
-                  }
-                )
-              }
-            )
-          }
-        ) : null,
-        cardsRegion.mounted ? /* @__PURE__ */ jsx2(
-          "div",
-          {
-            className: cn2(
-              "workspace-agent-message-center__stack-rest min-w-0",
-              cardsRegion.closing ? "workspace-agent-message-center__stack-rest--closing" : "workspace-agent-message-center__stack-rest--opening"
-            ),
-            onAnimationEnd: cardsRegion.onAnimationEnd,
-            children: /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "min-h-0 min-w-0 overflow-hidden",
-                "aria-hidden": cardsRegion.closing ? true : void 0,
-                inert: cardsRegion.closing ? true : void 0,
-                children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-between gap-2 px-0.5 pb-1.5", children: [
-                    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5 text-[13px] font-semibold leading-4 text-[var(--text-tertiary)]", children: [
+var WorkspaceAgentMessageCenterStack = memo(
+  function WorkspaceAgentMessageCenterStack2({
+    className,
+    expanded,
+    groupId,
+    highlightedItemId,
+    items,
+    renderCard,
+    onCollapse,
+    onExpand
+  }) {
+    "use memo";
+    const { t } = useTranslation();
+    const summaryRegion = useStackRegionPresence(!expanded);
+    const cardsRegion = useStackRegionPresence(expanded);
+    const visibleItems = useBatchedMessageCenterStackItems({
+      expanded,
+      highlightedItemId,
+      items,
+      mounted: cardsRegion.mounted
+    });
+    if (items.length < 2) {
+      return null;
+    }
+    const collapseLabel = t(
+      "agentHost.workspaceAgentMessageCenterCollapseStackAria"
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn2("relative flex min-w-0 flex-col", className),
+        "data-stack-count": items.length,
+        "data-stack-motion": "smooth",
+        "data-stack-state": expanded ? "expanded" : "collapsed",
+        "data-stack-top-item-id": items[0]?.id,
+        "data-testid": `workspace-agent-message-stack-${groupId}`,
+        children: [
+          summaryRegion.mounted ? /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: cn2(
+                "workspace-agent-message-center__stack-rest min-w-0",
+                summaryRegion.closing ? "workspace-agent-message-center__stack-rest--closing" : "workspace-agent-message-center__stack-rest--opening"
+              ),
+              onAnimationEnd: summaryRegion.onAnimationEnd,
+              children: /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  className: "min-h-0 min-w-0 overflow-hidden",
+                  "aria-hidden": summaryRegion.closing ? true : void 0,
+                  inert: summaryRegion.closing ? true : void 0,
+                  children: /* @__PURE__ */ jsx2(
+                    MessageCenterStackSummary,
+                    {
+                      groupId,
+                      items,
+                      onExpand
+                    }
+                  )
+                }
+              )
+            }
+          ) : null,
+          cardsRegion.mounted ? /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: cn2(
+                "workspace-agent-message-center__stack-rest min-w-0",
+                cardsRegion.closing ? "workspace-agent-message-center__stack-rest--closing" : "workspace-agent-message-center__stack-rest--opening"
+              ),
+              onAnimationEnd: cardsRegion.onAnimationEnd,
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "min-h-0 min-w-0 overflow-hidden",
+                  "aria-hidden": cardsRegion.closing ? true : void 0,
+                  inert: cardsRegion.closing ? true : void 0,
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-between gap-2 px-0.5 pb-1.5", children: [
+                      /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5 text-[13px] font-semibold leading-4 text-[var(--text-tertiary)]", children: [
+                        /* @__PURE__ */ jsx2(
+                          MessageCenterIdentityAvatarMark,
+                          {
+                            identity: items[0]?.identity ?? null,
+                            provider: items[0]?.provider ?? "",
+                            userId: items[0]?.userId ?? null
+                          }
+                        ),
+                        /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate", children: t(
+                          "agentHost.workspaceAgentMessageCenterStackSummaryCount",
+                          {
+                            count: items.length
+                          }
+                        ) })
+                      ] }),
                       /* @__PURE__ */ jsx2(
-                        MessageCenterIdentityAvatarMark,
+                        LazyMessageCenterTooltip,
                         {
-                          identity: items[0]?.identity ?? null,
-                          provider: items[0]?.provider ?? "",
-                          userId: items[0]?.userId ?? null
+                          content: collapseLabel,
+                          side: "top",
+                          align: "center",
+                          children: /* @__PURE__ */ jsx2(
+                            Button,
+                            {
+                              type: "button",
+                              variant: "ghost",
+                              size: "icon-sm",
+                              "aria-label": collapseLabel,
+                              className: "size-6 text-[var(--text-tertiary)] hover:text-[var(--text-primary)]",
+                              onClick: () => onCollapse(groupId),
+                              children: /* @__PURE__ */ jsx2(ChevronUp, { className: "size-3.5", "aria-hidden": "true" })
+                            }
+                          )
                         }
-                      ),
-                      /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate", children: t("agentHost.workspaceAgentMessageCenterStackSummaryCount", {
-                        count: items.length
-                      }) })
+                      )
                     ] }),
-                    /* @__PURE__ */ jsxs(Tooltip, { children: [
-                      /* @__PURE__ */ jsx2(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx2(
-                        Button,
-                        {
-                          type: "button",
-                          variant: "ghost",
-                          size: "icon-sm",
-                          "aria-label": collapseLabel,
-                          className: "size-6 text-[var(--text-tertiary)] hover:text-[var(--text-primary)]",
-                          onClick: onCollapse,
-                          children: /* @__PURE__ */ jsx2(ChevronUp, { className: "size-3.5", "aria-hidden": "true" })
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsx2(TooltipContent, { side: "top", align: "center", children: collapseLabel })
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsx2("div", { className: "flex min-w-0 flex-col gap-2.5", children: items.map(
-                    (item, stackedIndex) => renderCard(item, { stackedIndex })
-                  ) })
-                ]
-              }
-            )
-          }
-        ) : null
-      ]
-    }
+                    /* @__PURE__ */ jsx2("div", { className: "flex min-w-0 flex-col gap-2.5", children: visibleItems.map(
+                      (item, stackedIndex) => renderCard(item, { stackedIndex })
+                    ) })
+                  ]
+                }
+              )
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+function useBatchedMessageCenterStackItems({
+  expanded,
+  highlightedItemId,
+  items,
+  mounted
+}) {
+  const limit = items.length;
+  const highlightedIndex = highlightedItemId === null || highlightedItemId === void 0 ? -1 : items.findIndex((item) => item.id === highlightedItemId);
+  const initialCount = Math.min(
+    limit,
+    Math.max(MESSAGE_CENTER_STACK_INITIAL_RENDER_COUNT, highlightedIndex + 1)
   );
+  const [renderCount, setRenderCount] = useState(initialCount);
+  useEffect(() => {
+    if (!mounted) {
+      setRenderCount(initialCount);
+      return;
+    }
+    setRenderCount(
+      (current) => Math.min(Math.max(current, initialCount), limit)
+    );
+  }, [initialCount, limit, mounted]);
+  useEffect(() => {
+    if (!expanded || !mounted || renderCount >= limit) {
+      return void 0;
+    }
+    const timeoutId = window.setTimeout(() => {
+      setRenderCount(
+        (current) => Math.min(current + MESSAGE_CENTER_STACK_RENDER_BATCH_SIZE, limit)
+      );
+    }, MESSAGE_CENTER_STACK_RENDER_BATCH_DELAY_MS);
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [expanded, limit, mounted, renderCount]);
+  return items.slice(0, Math.min(renderCount, limit));
 }
 function MessageCenterStackSummary({
   groupId,
@@ -1231,7 +1295,7 @@ function MessageCenterStackSummary({
       "data-stack-provider": firstItem.provider,
       "data-stack-user-id": firstItem.userId ?? "",
       "data-testid": `workspace-agent-message-stack-summary-${groupId}`,
-      onClick: onExpand,
+      onClick: () => onExpand(groupId),
       children: /* @__PURE__ */ jsxs(
         "span",
         {
@@ -1357,12 +1421,21 @@ function isGenericApprovalSummary(summary) {
 function MessageCenterSummary({
   emptyLabel,
   item,
+  lazy,
   onLinkAction,
   summary
 }) {
   "use memo";
   const summaryRef = useRef(null);
   const [isOverflowing, setIsOverflowing] = useState(false);
+  const shouldRenderRichSummary = useLazyMessageCenterSummaryReady(
+    summaryRef,
+    lazy
+  );
+  const shouldMeasureOverflow = useDeferredMessageCenterSummaryMeasureReady(
+    summaryRef,
+    shouldRenderRichSummary
+  );
   const handleLinkAction = useCallback(
     (action) => {
       onLinkAction?.(
@@ -1371,21 +1444,29 @@ function MessageCenterSummary({
     },
     [item.provider, onLinkAction]
   );
-  useLayoutEffect(() => {
+  useEffect(() => {
+    if (!shouldMeasureOverflow) {
+      setIsOverflowing(false);
+      return void 0;
+    }
     const element = summaryRef.current;
     if (!element) {
-      return;
+      return void 0;
     }
     const updateOverflowState = () => {
       setIsOverflowing(element.scrollHeight > element.clientHeight + 1);
     };
-    updateOverflowState();
-    const resizeObserver = new ResizeObserver(updateOverflowState);
-    resizeObserver.observe(element);
+    let resizeObserver = null;
+    const timeoutId = window.setTimeout(() => {
+      updateOverflowState();
+      resizeObserver = new ResizeObserver(updateOverflowState);
+      resizeObserver.observe(element);
+    }, MESSAGE_CENTER_SUMMARY_OVERFLOW_MEASURE_DELAY_MS);
     return () => {
-      resizeObserver.disconnect();
+      window.clearTimeout(timeoutId);
+      resizeObserver?.disconnect();
     };
-  }, [summary]);
+  }, [shouldMeasureOverflow, summary]);
   return /* @__PURE__ */ jsx2(
     AgentVerticalScrollArea,
     {
@@ -1398,7 +1479,7 @@ function MessageCenterSummary({
       onPointerDown: stopMessageCenterTextPointerPropagation,
       scrollbarClassName: "top-2 bottom-2 right-1.5",
       syncKey: summary,
-      children: summary ? /* @__PURE__ */ jsx2(
+      children: summary && shouldRenderRichSummary ? /* @__PURE__ */ jsx2(
         AgentMessageMarkdown,
         {
           content: summary,
@@ -1411,10 +1492,85 @@ function MessageCenterSummary({
           },
           enableImageZoom: true
         }
-      ) : emptyLabel
+      ) : summary ? /* @__PURE__ */ jsx2("div", { className: "whitespace-pre-wrap [overflow-wrap:anywhere]", children: summary }) : emptyLabel
     }
   );
 }
+function useLazyMessageCenterSummaryReady(ref, lazy) {
+  const [ready, setReady] = useState(!lazy);
+  useEffect(() => {
+    setReady(!lazy);
+  }, [lazy]);
+  useEffect(() => {
+    if (!lazy) {
+      return void 0;
+    }
+    if (ready) {
+      return void 0;
+    }
+    const element = ref.current;
+    if (!element || typeof IntersectionObserver === "undefined") {
+      setReady(true);
+      return void 0;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          setReady(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: MESSAGE_CENTER_SUMMARY_LAZY_ROOT_MARGIN }
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [lazy, ready, ref]);
+  return ready;
+}
+function useDeferredMessageCenterSummaryMeasureReady(ref, enabled) {
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    if (!enabled) {
+      setReady(false);
+      return void 0;
+    }
+    if (ready) {
+      return void 0;
+    }
+    const element = ref.current;
+    if (!element || typeof IntersectionObserver === "undefined") {
+      const timeoutId2 = window.setTimeout(
+        () => setReady(true),
+        MESSAGE_CENTER_SUMMARY_OVERFLOW_MEASURE_DELAY_MS
+      );
+      return () => {
+        window.clearTimeout(timeoutId2);
+      };
+    }
+    let timeoutId = null;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (!entries.some((entry) => entry.isIntersecting)) {
+          return;
+        }
+        observer.disconnect();
+        timeoutId = window.setTimeout(
+          () => setReady(true),
+          MESSAGE_CENTER_SUMMARY_OVERFLOW_MEASURE_DELAY_MS
+        );
+      },
+      { rootMargin: MESSAGE_CENTER_SUMMARY_LAZY_ROOT_MARGIN }
+    );
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+      if (timeoutId !== null) {
+        window.clearTimeout(timeoutId);
+      }
+    };
+  }, [enabled, ready, ref]);
+  return ready;
+}
 function MessageCenterOpenChatButton({
   alwaysVisible = false,
   item,
@@ -1573,25 +1729,66 @@ function MessageCenterIdentityAvatarStack({
 }
 function ProjectPathInfo({ path }) {
   "use memo";
-  return /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx2(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx2(
-      "button",
-      {
-        type: "button",
-        className: "workspace-agent-message-center__project-info-button invisible inline-flex size-5 shrink-0 items-center justify-center rounded-sm text-[var(--text-secondary)] opacity-0 transition-[background-color,color,opacity,visibility] group-hover/message-card:visible group-hover/message-card:opacity-100 group-focus-within/message-card:visible group-focus-within/message-card:opacity-100 hover:bg-[var(--transparency-hover)] hover:text-[var(--text-primary)] focus-visible:bg-[var(--transparency-hover)] focus-visible:text-[var(--text-primary)] focus-visible:outline-none",
-        "aria-label": path,
-        children: /* @__PURE__ */ jsx2(Info, { className: "size-3.5", strokeWidth: 2, "aria-hidden": "true" })
-      }
-    ) }),
-    /* @__PURE__ */ jsx2(
-      TooltipContent,
-      {
-        side: "top",
-        align: "start",
-        className: "max-w-[320px] text-[11px] [overflow-wrap:anywhere]",
-        children: path
-      }
-    )
+  return /* @__PURE__ */ jsx2(
+    LazyMessageCenterTooltip,
+    {
+      content: path,
+      side: "top",
+      align: "start",
+      className: "max-w-[320px] text-[11px] [overflow-wrap:anywhere]",
+      children: /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "workspace-agent-message-center__project-info-button invisible inline-flex size-5 shrink-0 items-center justify-center rounded-sm text-[var(--text-secondary)] opacity-0 transition-[background-color,color,opacity,visibility] group-hover/message-card:visible group-hover/message-card:opacity-100 group-focus-within/message-card:visible group-focus-within/message-card:opacity-100 hover:bg-[var(--transparency-hover)] hover:text-[var(--text-primary)] focus-visible:bg-[var(--transparency-hover)] focus-visible:text-[var(--text-primary)] focus-visible:outline-none",
+          "aria-label": path,
+          children: /* @__PURE__ */ jsx2(Info, { className: "size-3.5", strokeWidth: 2, "aria-hidden": "true" })
+        }
+      )
+    }
+  );
+}
+function LazyMessageCenterTooltip({
+  align,
+  children,
+  className,
+  content,
+  side
+}) {
+  "use memo";
+  const [hydrated, setHydrated] = useState(false);
+  const [open, setOpen] = useState(false);
+  const showTooltip = useCallback(() => {
+    setHydrated(true);
+    setOpen(true);
+  }, []);
+  const hideTooltip = useCallback(() => {
+    setOpen(false);
+  }, []);
+  const trigger = cloneElement(children, {
+    onBlur: (event) => {
+      children.props.onBlur?.(event);
+      hideTooltip();
+    },
+    onFocus: (event) => {
+      children.props.onFocus?.(event);
+      showTooltip();
+    },
+    onPointerEnter: (event) => {
+      children.props.onPointerEnter?.(event);
+      showTooltip();
+    },
+    onPointerLeave: (event) => {
+      children.props.onPointerLeave?.(event);
+      hideTooltip();
+    }
+  });
+  if (!hydrated) {
+    return trigger;
+  }
+  return /* @__PURE__ */ jsxs(Tooltip, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx2(TooltipTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx2(TooltipContent, { side, align, className, children: content })
   ] });
 }
 function AgentProviderLabel({ provider }) {
@@ -1971,7 +2168,12 @@ function groupMessageCenterItems(items, groupBy, t) {
         {
           id: "needs-attention",
           label: t("agentHost.workspaceAgentMessageCenterGroupNeedsAttention"),
-          match: (item) => messageCenterStatusFilterValue(item) === "waiting" || messageCenterStatusFilterValue(item) === "failed"
+          match: (item) => messageCenterStatusFilterValue(item) === "waiting"
+        },
+        {
+          id: "failed",
+          label: t("agentHost.workspaceAgentMessageCenterFilterFailed"),
+          match: (item) => messageCenterStatusFilterValue(item) === "failed"
         },
         {
           id: "working",
@@ -2193,7 +2395,8 @@ function MessageCenterOptionWithCount({
 // agent-message-center/WorkspaceAgentMessageCenterPanel.tsx
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var MESSAGE_CENTER_TOOLTIP_DELAY_MS = 300;
-var WorkspaceAgentMessageCenterPanel = memo(
+var MESSAGE_CENTER_STACK_EAGER_SUMMARY_COUNT = 8;
+var WorkspaceAgentMessageCenterPanel = memo2(
   function WorkspaceAgentMessageCenterPanel2({
     open,
     i18n,
@@ -2209,6 +2412,9 @@ var WorkspaceAgentMessageCenterPanel = memo(
     onSubmitPrompt
   }) {
     "use memo";
+    if (!open) {
+      return null;
+    }
     return /* @__PURE__ */ jsx5(AgentGuiI18nProvider, { runtime: i18n, locale, children: /* @__PURE__ */ jsx5(
       WorkspaceAgentMessageCenterPanelContent,
       {
@@ -2284,6 +2490,13 @@ function WorkspaceAgentMessageCenterPanelContent({
     () => groupMessageCenterItems(listItems, groupBy, t),
     [groupBy, t, listItems]
   );
+  const itemGroupStacks = useMemo2(
+    () => itemGroups.map((group) => ({
+      ...group,
+      stacks: partitionMessageCenterItemsByAgentUser(group.items)
+    })),
+    [itemGroups]
+  );
   const highlightedItem = useMemo2(
     () => highlightedItemId ? model.items.find((item) => item.id === highlightedItemId) ?? null : null,
     [highlightedItemId, model.items]
@@ -2436,15 +2649,15 @@ function WorkspaceAgentMessageCenterPanelContent({
     if (!open || !highlightedItemId) {
       return;
     }
-    for (const group of itemGroups) {
-      for (const stack of partitionMessageCenterItemsByAgentUser(group.items)) {
+    for (const group of itemGroupStacks) {
+      for (const stack of group.stacks) {
         if (stack.items.length > 1 && stack.items.some((item) => item.id === highlightedItemId)) {
           expandStack(`${group.id}:${stack.id}`);
           return;
         }
       }
     }
-  }, [expandStack, highlightedItemId, itemGroups, open]);
+  }, [expandStack, highlightedItemId, itemGroupStacks, open]);
   useLayoutEffect2(() => {
     if (!open || !highlightedItemId) {
       lastScrolledHighlightedItemIdRef.current = null;
@@ -2487,6 +2700,48 @@ function WorkspaceAgentMessageCenterPanelContent({
       window.clearTimeout(timeoutId);
     };
   }, [highlightedItemId, onHighlightedItemSettled, open]);
+  const renderMessageCenterCard = useCallback2(
+    (item, options = {}) => {
+      const highlighted = item.id === highlightedItemId;
+      const stackedIndex = options.stackedIndex;
+      const card = /* @__PURE__ */ jsx5(
+        MessageCenterRenderedCard,
+        {
+          highlighted,
+          item,
+          isSubmitting: submittingPromptKey === `${item.agentSessionId}:${item.pendingPrompt?.requestId}`,
+          lazySummary: stackedIndex !== void 0 && stackedIndex >= MESSAGE_CENTER_STACK_EAGER_SUMMARY_COUNT,
+          registerNode: setItemNode,
+          onLinkAction,
+          onOpenChat,
+          onSubmitPrompt: submitPrompt
+        },
+        item.agentSessionId
+      );
+      if (stackedIndex === void 0) {
+        return card;
+      }
+      return /* @__PURE__ */ jsx5(
+        "div",
+        {
+          className: "min-w-0 motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-top-1 motion-safe:duration-200 motion-safe:ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:animate-none",
+          style: {
+            animationDelay: `${Math.min(stackedIndex * 24, 96)}ms`
+          },
+          children: card
+        },
+        item.agentSessionId
+      );
+    },
+    [
+      highlightedItemId,
+      onLinkAction,
+      onOpenChat,
+      setItemNode,
+      submitPrompt,
+      submittingPromptKey
+    ]
+  );
   return /* @__PURE__ */ jsx5(
     Drawer,
     {
@@ -2551,7 +2806,7 @@ function WorkspaceAgentMessageCenterPanelContent({
                       onSubmitPrompt: (item, input) => void submitPrompt(item, input)
                     }
                   ) : null,
-                  itemGroups.map((group) => /* @__PURE__ */ jsxs4(
+                  itemGroupStacks.map((group) => /* @__PURE__ */ jsxs4(
                     "section",
                     {
                       className: "flex min-w-0 flex-col gap-2.5",
@@ -2559,45 +2814,13 @@ function WorkspaceAgentMessageCenterPanelContent({
                       children: [
                         /* @__PURE__ */ jsx5("div", { className: "flex min-w-0 items-center justify-between gap-3 px-0.5", children: /* @__PURE__ */ jsx5(MessageCenterGroupHeading, { group }) }),
                         (() => {
-                          const renderCard = (item, options = {}) => {
-                            const highlighted = item.id === highlightedItemId;
-                            const card = /* @__PURE__ */ jsx5(
-                              MessageCenterCard,
-                              {
-                                cardRef: (node) => setItemNode(item.id, node),
-                                highlighted,
-                                item,
-                                isSubmitting: submittingPromptKey === `${item.agentSessionId}:${item.pendingPrompt?.requestId}`,
-                                onLinkAction,
-                                onOpenChat,
-                                onSubmitPrompt: (input) => void submitPrompt(item, input)
-                              },
-                              item.agentSessionId
-                            );
-                            if (options.stackedIndex === void 0) {
-                              return card;
-                            }
-                            return /* @__PURE__ */ jsx5(
-                              "div",
-                              {
-                                className: "min-w-0 motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-top-1 motion-safe:duration-200 motion-safe:ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:animate-none",
-                                style: {
-                                  animationDelay: `${Math.min(options.stackedIndex * 24, 96)}ms`
-                                },
-                                children: card
-                              },
-                              item.agentSessionId
-                            );
-                          };
-                          return partitionMessageCenterItemsByAgentUser(
-                            group.items
-                          ).map((stack) => {
+                          return group.stacks.map((stack) => {
                             const firstItem = stack.items[0];
                             if (!firstItem) {
                               return null;
                             }
                             if (stack.items.length === 1) {
-                              return renderCard(firstItem);
+                              return renderMessageCenterCard(firstItem);
                             }
                             const stackId = group.id === stack.id ? stack.id : `${group.id}:${stack.id}`;
                             return /* @__PURE__ */ jsx5(
@@ -2605,10 +2828,11 @@ function WorkspaceAgentMessageCenterPanelContent({
                               {
                                 expanded: expandedStackIds.has(stackId),
                                 groupId: stackId,
+                                highlightedItemId,
                                 items: stack.items,
-                                renderCard,
-                                onCollapse: () => collapseStack(stackId),
-                                onExpand: () => expandStack(stackId)
+                                renderCard: renderMessageCenterCard,
+                                onCollapse: collapseStack,
+                                onExpand: expandStack
                               },
                               stackId
                             );
@@ -2642,6 +2866,42 @@ function WorkspaceAgentMessageCenterPanelContent({
 }
 var MessageCenterCard = WorkspaceAgentMessageCenterCard;
 var MessageCenterStack = WorkspaceAgentMessageCenterStack;
+var MessageCenterRenderedCard = memo2(function MessageCenterRenderedCard2({
+  highlighted,
+  isSubmitting,
+  item,
+  lazySummary,
+  onLinkAction,
+  onOpenChat,
+  onSubmitPrompt,
+  registerNode
+}) {
+  const cardRef = useCallback2(
+    (node) => {
+      registerNode(item.id, node);
+    },
+    [item.id, registerNode]
+  );
+  const handleSubmitPrompt = useCallback2(
+    (input) => {
+      onSubmitPrompt(item, input);
+    },
+    [item, onSubmitPrompt]
+  );
+  return /* @__PURE__ */ jsx5(
+    MessageCenterCard,
+    {
+      cardRef,
+      highlighted,
+      item,
+      isSubmitting,
+      lazySummary,
+      onLinkAction,
+      onOpenChat,
+      onSubmitPrompt: handleSubmitPrompt
+    }
+  );
+});
 function MessageCenterGroupHeading({
   group
 }) {