@tutti-os/agent-gui 0.0.131 → 0.0.132

package/dist/agent-conversation/index.js

@@ -6,7 +6,7 @@ import {
   projectAgentConversationVM,
   reconcileProjectedAgentConversationVM,
   useProjectedAgentConversation
-} from "../chunk-2RSNLVOX.js";
+} from "../chunk-JZS4SWFJ.js";
 import "../chunk-XNE2ROCP.js";
 import "../chunk-VMQNG2KI.js";
 import "../chunk-FGLQZ6I4.js";

package/dist/agent-gui.js

@@ -1,6 +1,6 @@
 import {
   AgentGUI
-} from "./chunk-WVWSFGBU.js";
+} from "./chunk-G75CPIVV.js";
 import "./chunk-A4WCTHWS.js";
 import "./chunk-GCQYN7BR.js";
 import "./chunk-TUWQV2MC.js";
@@ -8,7 +8,7 @@ import "./chunk-MHOYBRCY.js";
 import "./chunk-PVTAFUDS.js";
 import "./chunk-5HIF53K5.js";
 import "./chunk-R2ZADXRB.js";
-import "./chunk-2RSNLVOX.js";
+import "./chunk-JZS4SWFJ.js";
 import "./chunk-XNE2ROCP.js";
 import "./chunk-VMQNG2KI.js";
 import "./chunk-UP3ZDYTN.js";

package/dist/{chunk-WVWSFGBU.js → chunk-G75CPIVV.js}

@@ -63,7 +63,7 @@ import {
   toLocalShortDateTime,
   updateAgentComposerDraft,
   useProjectedAgentConversation
-} from "./chunk-2RSNLVOX.js";
+} from "./chunk-JZS4SWFJ.js";
 import {
   agentRichTextContentToPromptText,
   createAgentRichTextInputExtensions,
@@ -37231,4 +37231,4 @@ export {
   resolveAgentGUIAgentTarget,
   AgentGUI
 };
-//# sourceMappingURL=chunk-WVWSFGBU.js.map
+//# sourceMappingURL=chunk-G75CPIVV.js.map

package/dist/{chunk-2RSNLVOX.js → chunk-JZS4SWFJ.js}

@@ -5012,11 +5012,11 @@ function AgentTranscriptSkeleton({
 import {
   Fragment as Fragment7,
   memo as memo4,
-  useCallback as useCallback11,
+  useCallback as useCallback13,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo7,
-  useRef as useRef10,
-  useState as useState23
+  useRef as useRef12,
+  useState as useState24
 } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 
@@ -5452,6 +5452,7 @@ function CollapsibleReveal({
   children,
   className,
   innerClassName,
+  onHeightTransitionEnd,
   preMountOnIdle = false
 }) {
   "use memo";
@@ -5463,6 +5464,17 @@ function CollapsibleReveal({
   const heightRef = useRef2(height);
   const measuredHeightRef = useRef2(null);
   const previousExpandedRef = useRef2(expanded);
+  const heightTransitionPendingRef = useRef2(false);
+  const setRootRef = useCallback2(
+    (node) => {
+      if (rootRef.current !== null && node === null && heightTransitionPendingRef.current) {
+        heightTransitionPendingRef.current = false;
+        onHeightTransitionEnd?.();
+      }
+      rootRef.current = node;
+    },
+    [onHeightTransitionEnd]
+  );
   const setRevealHeight = useCallback2((nextHeight) => {
     heightRef.current = nextHeight;
     setHeight(nextHeight);
@@ -5475,11 +5487,18 @@ function CollapsibleReveal({
       setMounted(true);
       return void 0;
     }
+    let mountFrameStarted = false;
     const animationFrame = requestAnimationFrame(() => {
+      mountFrameStarted = true;
       setMounted(true);
     });
-    return () => cancelAnimationFrame(animationFrame);
-  }, [expanded, mounted, preMountOnIdle]);
+    return () => {
+      cancelAnimationFrame(animationFrame);
+      if (!mountFrameStarted) {
+        onHeightTransitionEnd?.();
+      }
+    };
+  }, [expanded, mounted, onHeightTransitionEnd, preMountOnIdle]);
   useEffect2(() => {
     if (!preMountOnIdle || mounted || expanded) {
       return void 0;
@@ -5508,6 +5527,7 @@ function CollapsibleReveal({
       if (wasExpanded && visible && height === "auto") {
         return void 0;
       }
+      heightTransitionPendingRef.current = true;
       setVisible(false);
       setRevealHeight("0px");
       const animationFrame2 = requestAnimationFrame(() => {
@@ -5518,6 +5538,7 @@ function CollapsibleReveal({
       return () => cancelAnimationFrame(animationFrame2);
     }
     if (!wasExpanded) {
+      heightTransitionPendingRef.current = false;
       setVisible(false);
       setRevealHeight("0px");
       return void 0;
@@ -5526,6 +5547,7 @@ function CollapsibleReveal({
     const cachedHeight = measuredHeightRef.current;
     const measuredHeight = renderedHeight > 0 ? renderedHeight : cachedHeight ?? root.scrollHeight;
     measuredHeightRef.current = measuredHeight;
+    heightTransitionPendingRef.current = true;
     setRevealHeight(`${measuredHeight}px`);
     setVisible(false);
     const animationFrame = requestAnimationFrame(() => {
@@ -5583,17 +5605,19 @@ function CollapsibleReveal({
     }
     if (visible) {
       setRevealHeight("auto");
-      return;
-    }
-    if (!expanded && !preMountOnIdle) {
+    } else if (!expanded && !preMountOnIdle) {
       setMounted(false);
     }
+    if (heightTransitionPendingRef.current) {
+      heightTransitionPendingRef.current = false;
+      onHeightTransitionEnd?.();
+    }
   };
   const rootStyle = { height };
   return /* @__PURE__ */ jsx5(
     "div",
     {
-      ref: rootRef,
+      ref: setRootRef,
       className: ["agent-collapsible-reveal", className ?? ""].filter(Boolean).join(" "),
       "data-expanded": preMountOnIdle && expanded ? "true" : visible ? "true" : "false",
       "aria-hidden": visible ? void 0 : true,
@@ -12864,7 +12888,8 @@ function useAgentTurnDisclosureStoreState() {
 }
 
 // shared/agentConversation/components/AgentTurnWorkSection.tsx
-import { BareIconButton } from "@tutti-os/ui-system/components";
+import { useCallback as useCallback11, useRef as useRef8 } from "react";
+import { Button as Button2 } from "@tutti-os/ui-system/components";
 import { ChevronDownIcon } from "@tutti-os/ui-system/icons";
 
 // shared/agentConversation/components/agentTurnWorkSectionModel.ts
@@ -13069,12 +13094,47 @@ function AgentTurnWorkSection({
   turnKey,
   showDivider = false,
   disclosureStore,
+  onDisclosureMotionChange,
   renderRow
 }) {
   const { t } = useTranslation();
   const disclosureKey = `${sessionId}:${turnKey}`;
   const expanded = model.collapseEligible ? disclosureStore.expandedOverrides[disclosureKey] ?? false : true;
   const toggleLabel = expanded ? t("agentHost.agentGui.collapseTurnWork") : t("agentHost.agentGui.expandTurnWork");
+  const pendingRevealTransitionsRef = useRef8(0);
+  const disclosureMotionActiveRef = useRef8(false);
+  const collapsibleSectionCount = model.sections.reduce(
+    (count, section) => count + (section.kind === "work" && model.collapseEligible ? 1 : 0),
+    0
+  );
+  const finishDisclosureMotion = useCallback11(() => {
+    if (!disclosureMotionActiveRef.current) {
+      return;
+    }
+    disclosureMotionActiveRef.current = false;
+    pendingRevealTransitionsRef.current = 0;
+    onDisclosureMotionChange?.(turnKey, false);
+  }, [onDisclosureMotionChange, turnKey]);
+  const startDisclosureMotion = useCallback11(
+    (anchorElement) => {
+      pendingRevealTransitionsRef.current = collapsibleSectionCount;
+      if (collapsibleSectionCount === 0) {
+        return;
+      }
+      disclosureMotionActiveRef.current = true;
+      onDisclosureMotionChange?.(turnKey, true, anchorElement);
+    },
+    [collapsibleSectionCount, onDisclosureMotionChange, turnKey]
+  );
+  const handleRevealTransitionEnd = useCallback11(() => {
+    if (!disclosureMotionActiveRef.current) {
+      return;
+    }
+    pendingRevealTransitionsRef.current -= 1;
+    if (pendingRevealTransitionsRef.current <= 0) {
+      finishDisclosureMotion();
+    }
+  }, [finishDisclosureMotion]);
   return /* @__PURE__ */ jsxs45("div", { className: "grid min-w-0", "data-agent-turn-work-section": turnKey, children: [
     showDivider ? /* @__PURE__ */ jsx64(
       "div",
@@ -13085,31 +13145,42 @@ function AgentTurnWorkSection({
       }
     ) : null,
     model.leadingRows.length > 0 ? /* @__PURE__ */ jsx64("div", { className: "mb-4 grid gap-4", children: renderRows(model.leadingRows, renderRow) }) : null,
-    /* @__PURE__ */ jsxs45(
+    /* @__PURE__ */ jsx64(
       "div",
       {
         className: "flex min-h-6 items-center gap-0.5 text-[12px] text-[var(--text-tertiary)]",
         "data-agent-turn-work-header": turnKey,
-        children: [
-          /* @__PURE__ */ jsx64(AgentTurnDurationLabel, { timing: model.timing }),
-          model.collapseEligible ? /* @__PURE__ */ jsx64(
-            BareIconButton,
-            {
-              size: "sm",
-              "aria-label": toggleLabel,
-              "aria-expanded": expanded,
-              title: toggleLabel,
-              onClick: () => disclosureStore.setExpandedOverride(disclosureKey, !expanded),
-              children: /* @__PURE__ */ jsx64(
+        children: model.collapseEligible ? /* @__PURE__ */ jsxs45(
+          Button2,
+          {
+            type: "button",
+            variant: "chrome",
+            size: "xs",
+            className: "-ml-2 gap-0.5 px-2 text-[12px] font-normal",
+            "aria-label": toggleLabel,
+            "aria-expanded": expanded,
+            title: toggleLabel,
+            onClick: (event) => {
+              startDisclosureMotion(
+                event.currentTarget.closest(
+                  "[data-agent-turn-work-header]"
+                )
+              );
+              disclosureStore.setExpandedOverride(disclosureKey, !expanded);
+            },
+            children: [
+              /* @__PURE__ */ jsx64(AgentTurnDurationLabel, { timing: model.timing }),
+              /* @__PURE__ */ jsx64(
                 ChevronDownIcon,
                 {
                   "aria-hidden": "true",
+                  "data-icon": "inline-end",
                   className: `transition-transform duration-150 ${expanded ? "rotate-0" : "-rotate-90"}`
                 }
               )
-            }
-          ) : null
-        ]
+            ]
+          }
+        ) : /* @__PURE__ */ jsx64(AgentTurnDurationLabel, { timing: model.timing })
       }
     ),
     model.sections.map((section, sectionIndex) => {
@@ -13131,6 +13202,7 @@ function AgentTurnWorkSection({
         {
           expanded,
           innerClassName: "grid gap-4 pt-4",
+          onHeightTransitionEnd: handleRevealTransitionEnd,
           children: content
         },
         `work:${firstRow?.renderKey ?? firstRow?.row.id ?? sectionIndex}`
@@ -13314,18 +13386,21 @@ function looksLikeTableSeparator(line) {
   });
 }
 
+// shared/agentConversation/components/useTurnDisclosureMotion.ts
+import { useCallback as useCallback12, useRef as useRef11, useState as useState23 } from "react";
+
 // shared/agentConversation/components/AgentMessageLocatorRail.tsx
 import {
   useEffect as useEffect13,
   useLayoutEffect as useLayoutEffect3,
-  useRef as useRef9,
+  useRef as useRef10,
   useState as useState22
 } from "react";
 
 // shared/agentConversation/components/agentTranscriptModel.ts
-import { useLayoutEffect as useLayoutEffect2, useRef as useRef8 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef9 } from "react";
 function useEnteringTranscriptRows(rowKeys) {
-  const previousKeysRef = useRef8(null);
+  const previousKeysRef = useRef9(null);
   const previousKeys = previousKeysRef.current;
   const enteringRowKeys = /* @__PURE__ */ new Set();
   if (previousKeys) {
@@ -13464,14 +13539,14 @@ function AgentMessageLocatorRail({
   label,
   onLocate
 }) {
-  const locatorRef = useRef9(null);
-  const locatorViewportRef = useRef9(null);
-  const closePanelTimeoutRef = useRef9(null);
+  const locatorRef = useRef10(null);
+  const locatorViewportRef = useRef10(null);
+  const closePanelTimeoutRef = useRef10(null);
   const [isPanelOpen, setIsPanelOpen] = useState22(false);
   const [shouldRenderPanel, setShouldRenderPanel] = useState22(false);
   const [activeKey, setActiveKey] = useState22(null);
   const [selectedKey, setSelectedKey] = useState22(null);
-  const previousAgentResponseByKeyRef = useRef9(null);
+  const previousAgentResponseByKeyRef = useRef10(null);
   const [unreadAgentResponseKeys, setUnreadAgentResponseKeys] = useState22(/* @__PURE__ */ new Set());
   const [visibleFrame, setVisibleFrame] = useState22(null);
   useEffect13(() => {
@@ -13938,6 +14013,83 @@ function selectMessageLocatorItemAtViewportCenter(scrollParent, items) {
   return nearest?.key ?? null;
 }
 
+// shared/agentConversation/components/useTurnDisclosureMotion.ts
+var TurnDisclosureMotionController = class {
+  movingTurnKeys = /* @__PURE__ */ new Set();
+  scrollAnchor = null;
+  setTurnMotionActive(turnKey, active, anchorElement) {
+    if (active) {
+      this.movingTurnKeys.add(turnKey);
+      if (anchorElement) {
+        this.scrollAnchor?.release();
+        this.scrollAnchor = lockDisclosureRowPosition(anchorElement);
+      }
+    } else {
+      this.movingTurnKeys.delete(turnKey);
+      if (this.movingTurnKeys.size === 0) {
+        this.scrollAnchor?.release();
+        this.scrollAnchor = null;
+      }
+    }
+    return this.movingTurnKeys.size > 0;
+  }
+};
+function lockDisclosureRowPosition(anchorElement) {
+  const scrollParent = findMessageLocatorScrollParent(anchorElement);
+  if (!scrollParent) {
+    return null;
+  }
+  const anchorTop = anchorElement.getBoundingClientRect().top;
+  const previousOverflowAnchor = scrollParent.style.getPropertyValue("overflow-anchor");
+  const previousOverflowAnchorPriority = scrollParent.style.getPropertyPriority("overflow-anchor");
+  scrollParent.style.setProperty("overflow-anchor", "none");
+  const preserveAnchorTop = () => {
+    if (!anchorElement.isConnected) {
+      return;
+    }
+    const topDelta = anchorElement.getBoundingClientRect().top - anchorTop;
+    if (Math.abs(topDelta) < 0.5) {
+      return;
+    }
+    scrollParent.scrollTop += topDelta;
+  };
+  scrollParent.addEventListener("scroll", preserveAnchorTop);
+  return {
+    release: () => {
+      preserveAnchorTop();
+      scrollParent.removeEventListener("scroll", preserveAnchorTop);
+      if (previousOverflowAnchor) {
+        scrollParent.style.setProperty(
+          "overflow-anchor",
+          previousOverflowAnchor,
+          previousOverflowAnchorPriority
+        );
+      } else {
+        scrollParent.style.removeProperty("overflow-anchor");
+      }
+    }
+  };
+}
+function useTurnDisclosureMotion() {
+  const motionControllerRef = useRef11(
+    null
+  );
+  if (!motionControllerRef.current) {
+    motionControllerRef.current = new TurnDisclosureMotionController();
+  }
+  const motionController = motionControllerRef.current;
+  const [active, setActive] = useState23(false);
+  const setTurnMotionActive = useCallback12(
+    (turnKey, moving, anchorElement) => {
+      setActive(
+        motionController.setTurnMotionActive(turnKey, moving, anchorElement)
+      );
+    },
+    [motionController]
+  );
+  return [active, setTurnMotionActive];
+}
+
 // shared/agentConversation/components/AgentTranscriptView.tsx
 import { Fragment as Fragment8, jsx as jsx66, jsxs as jsxs47 } from "react/jsx-runtime";
 var AGENT_TRANSCRIPT_VIRTUALIZATION_OVERSCAN = 6;
@@ -13945,6 +14097,7 @@ var AGENT_TRANSCRIPT_ESTIMATED_TURN_HEIGHT_PX = 280;
 var AGENT_TRANSCRIPT_DISCLOSURE_TURN_GAP_PX = 24;
 var AGENT_TRANSCRIPT_LEGACY_TURN_GAP_PX = 12;
 var AGENT_TRANSCRIPT_FALLBACK_TURN_COUNT = 3;
+var preventVirtualScrollAdjustment = () => false;
 function transcriptLabelsEqual(previous, next) {
   return previous === next || previous.thinkingLabel === next.thinkingLabel && previous.processing === next.processing && previous.turnSummary === next.turnSummary && previous.rawTimelineJson === next.rawTimelineJson && previous.userMessageLocator === next.userMessageLocator && previous.toolCallsLabel === next.toolCallsLabel;
 }
@@ -13983,10 +14136,11 @@ var AgentTranscriptView = memo4(function AgentTranscriptView2({
   labels
 }) {
   "use memo";
-  const [expandedToolRows, setExpandedToolRows] = useState23({});
+  const [expandedToolRows, setExpandedToolRows] = useState24({});
+  const [hasMovingTurnDisclosure, handleDisclosureMotionChange] = useTurnDisclosureMotion();
   const turnDisclosureStore = useAgentTurnDisclosureStore();
-  const virtualizerHostRef = useRef10(null);
-  const [virtualScrollElement, setVirtualScrollElement] = useState23(null);
+  const virtualizerHostRef = useRef12(null);
+  const [virtualScrollElement, setVirtualScrollElement] = useState24(null);
   const rowKeys = useMemo7(
     () => conversation.rows.map(transcriptRowKey),
     [conversation.rows]
@@ -14008,7 +14162,7 @@ var AgentTranscriptView = memo4(function AgentTranscriptView2({
     [conversation.rows, rowKeys, turnGroupIndexByRowIndex]
   );
   const enteringRowKeys = useEnteringTranscriptRows(rowKeys);
-  const handleToolGroupExpandedChange = useCallback11(
+  const handleToolGroupExpandedChange = useCallback13(
     (key, expanded) => {
       setExpandedToolRows((previous) => {
         if (previous[key] === expanded) {
@@ -14062,7 +14216,7 @@ var AgentTranscriptView = memo4(function AgentTranscriptView2({
     [turnGroups]
   );
   const rowVirtualizer = useVirtualizer({
-    anchorTo: "end",
+    anchorTo: shouldVirtualize && hasMovingTurnDisclosure ? "start" : "end",
     count: turnGroups.length,
     estimateSize: () => AGENT_TRANSCRIPT_ESTIMATED_TURN_HEIGHT_PX,
     getItemKey: (index) => turnGroups[index]?.key ?? index,
@@ -14070,7 +14224,8 @@ var AgentTranscriptView = memo4(function AgentTranscriptView2({
     overscan: AGENT_TRANSCRIPT_VIRTUALIZATION_OVERSCAN,
     scrollEndThreshold: 24
   });
-  const handleLocateUserMessage = useCallback11(
+  rowVirtualizer.shouldAdjustScrollPositionOnItemSizeChange = shouldVirtualize && hasMovingTurnDisclosure ? preventVirtualScrollAdjustment : void 0;
+  const handleLocateUserMessage = useCallback13(
     (item) => {
       const scrollParent = virtualizerHostRef.current ? findMessageLocatorScrollParent(virtualizerHostRef.current) : null;
       const scrollToRenderedRow = () => {
@@ -14169,6 +14324,7 @@ var AgentTranscriptView = memo4(function AgentTranscriptView2({
           ({ rowIndex }) => dividerRowIndexes.has(rowIndex)
         ),
         disclosureStore: turnDisclosureStore,
+        onDisclosureMotionChange: handleDisclosureMotionChange,
         renderRow
       },
       group.key
@@ -14282,13 +14438,13 @@ var AgentConversationFlow = memo5(function AgentConversationFlow2({
 });
 
 // shared/agentConversation/projection/useProjectedAgentConversation.ts
-import { useMemo as useMemo8, useRef as useRef11 } from "react";
+import { useMemo as useMemo8, useRef as useRef13 } from "react";
 function useProjectedAgentConversation({
   conversation,
   detail,
   avoidGroupingEdits = false
 }) {
-  const previousConversationRef = useRef11(null);
+  const previousConversationRef = useRef13(null);
   return useMemo8(() => {
     if (!conversation && !detail) {
       previousConversationRef.current = null;
@@ -14344,4 +14500,4 @@ export {
   AgentConversationFlow,
   useProjectedAgentConversation
 };
-//# sourceMappingURL=chunk-2RSNLVOX.js.map
+//# sourceMappingURL=chunk-JZS4SWFJ.js.map