@adecore/agents-react 0.44.3 → 0.45.0

package/dist/chat/ui/SubagentTimeline.js

@@ -19,6 +19,7 @@ import { useChatRow } from '../../state/chats.js';
 import { useChatPreferences } from '../preferences.js';
 import { readingWidthStyle } from '../reading-width.js';
 import { useChatHost } from '../../host.js';
+import { useHostHidesToolCalls } from '../../host-hooks.js';
 import { useChatScope } from '../../scope.js';
 import { EmptyState, ContextMenu, Icon } from '@adecore/ui';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -117,12 +118,14 @@ export function SubagentTimeline(t0) {
     t5 = $[14];
   }
   useEffect(t4, t5);
+  const hideTools = useHostHidesToolCalls(scope.id, chatId);
   const rows = deriveTimelineRows(state.items, {
     expandedGroups: groups.ids,
     expandedTurns: NO_TURNS,
     expandedSubagents: subagents.ids,
     activeTurnId: null,
-    commandLooks
+    commandLooks,
+    hideTools
   });
   let t6;
   if ($[15] !== state.items) {

package/dist/chat/ui/Timeline.js

@@ -38,7 +38,7 @@ import { FileLinkContext } from './file-links.js';
 import { AgentIcon } from '../../agents/AgentIcon.js';
 import { useModelName } from '../../agents/model-name.js';
 import { ContextMenu, EmptyState, ErrorBoundary, Icon, SectionLabel } from '@adecore/ui';
-import { useHostContextSources, useHostHidesFolder, useHostThreadCards, useHostTimelineFind, useHostWelcome } from '../../host-hooks.js';
+import { useHostContextSources, useHostHidesFolder, useHostHidesToolCalls, useHostThreadCards, useHostTimelineFind, useHostWelcome } from '../../host-hooks.js';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ESTIMATED_ROW_PX = 56;
 // How long a jump waits for a thread that is still loading before it calls the item missing.
@@ -476,6 +476,7 @@ export function Timeline({
       setLoadingEarlier(false);
     });
   }, [scope, chatId, cursor]);
+  const hideTools = useHostHidesToolCalls(scopeId, chatId);
   const threadRows = useMemo(() => {
     if (!order || !items) {
       return [];
@@ -486,9 +487,10 @@ export function Timeline({
       expandedSubagents: subagents.ids,
       activeTurnId,
       forkedTurns,
-      commandLooks: host.commandLooks
+      commandLooks: host.commandLooks,
+      hideTools
     });
-  }, [order, items, groups.ids, turns.ids, subagents.ids, activeTurnId, forkedTurns, host.commandLooks]);
+  }, [order, items, groups.ids, turns.ids, subagents.ids, activeTurnId, forkedTurns, host.commandLooks, hideTools]);
   const cards = useHostThreadCards(scopeId, chatId);
   const drawsVisuals = host.visuals !== null;
   // Where the part of the thread this client holds begins, while there is a page before it.
@@ -631,32 +633,57 @@ export function Timeline({
       viewport: element_2.clientHeight
     };
   }, [rows.length, totalSize, composerHeight, frame.height]);
+  /*
+   * A height that changes after the first paint (the composer taking its draft, a row measured again) is
+   * seen by an observer before the page paints, but the state it sets is drawn after that paint. The
+   * end is pinned here as well, so the page never paints the thread with its end out of view.
+   */
+  useLayoutEffect(() => {
+    const content = contentRef.current;
+    if (content === null || typeof ResizeObserver === 'undefined') {
+      return;
+    }
+    const observer_1 = new ResizeObserver(() => {
+      const element_3 = scrollRef.current;
+      if (!followRef.current || element_3 === null) {
+        return;
+      }
+      element_3.scrollTop = element_3.scrollHeight;
+      scrollGeometry.current = {
+        top: element_3.scrollTop,
+        height: element_3.scrollHeight,
+        viewport: element_3.clientHeight
+      };
+    });
+    observer_1.observe(content);
+    return () => observer_1.disconnect();
+  }, []);
   // Prepending history moves rows; keep the reader on the same row at the same height.
   useLayoutEffect(() => {
-    const element_3 = scrollRef.current;
+    const element_4 = scrollRef.current;
     const head = order?.[0];
     const moved = head !== headRef.current;
     headRef.current = head;
-    if (element_3 === null) {
+    if (element_4 === null) {
       return;
     }
     const anchor = anchorRef.current;
     const index_2 = moved && anchor !== null && !followRef.current ? rows.findIndex(row_9 => row_9.id === anchor.id) : -1;
     if (anchor !== null && index_2 !== -1) {
       virtualizer.getTotalSize();
-      element_3.scrollTop = virtualizer.measurementsCache[index_2].start - anchor.offset;
+      element_4.scrollTop = virtualizer.measurementsCache[index_2].start - anchor.offset;
       return;
     }
-    const row_10 = virtualizer.getVirtualItemForOffset(element_3.scrollTop);
+    const row_10 = virtualizer.getVirtualItemForOffset(element_4.scrollTop);
     anchorRef.current = row_10 === undefined ? null : {
       id: String(row_10.key),
-      offset: row_10.start - element_3.scrollTop
+      offset: row_10.start - element_4.scrollTop
     };
   });
   // Close to the top, the page before goes in; again after each page that left too little above the reader.
   useEffect(() => {
-    const element_4 = scrollRef.current;
-    if (element_4 !== null && wantsEarlier(element_4)) {
+    const element_5 = scrollRef.current;
+    if (element_5 !== null && wantsEarlier(element_5)) {
       loadEarlier();
     }
   }, [rows, loadEarlier, frame.height]);
@@ -698,7 +725,7 @@ export function Timeline({
     starts,
     inView
   };
-  const followStrip = element_5 => {
+  const followStrip = element_6 => {
     const {
       starts: current_0,
       inView: shown
@@ -708,7 +735,7 @@ export function Timeline({
     }
     const next = messagesInView({
       starts: current_0,
-      scrollTop: element_5.scrollTop,
+      scrollTop: element_6.scrollTop,
       visibleHeight: visibleHeightRef.current
     });
     if (next?.first !== shown.first || next?.last !== shown.last) {

package/dist/chat/ui/rows/Rows.js

@@ -70,7 +70,7 @@ function AppCardRow(t0) {
 }
 /* One row of a thread, the chat's own or a subagent's read back, drawn the same way in both. */
 export function Row(t0) {
-  const $ = _c(84);
+  const $ = _c(85);
   const {
     row,
     chatId,
@@ -308,38 +308,40 @@ export function Row(t0) {
           t1 = $[48];
         }
         let t2;
-        if ($[49] !== row.expanded || $[50] !== row.label || $[51] !== row.turn || $[52] !== row.work || $[53] !== t1) {
+        if ($[49] !== row.expandable || $[50] !== row.expanded || $[51] !== row.label || $[52] !== row.turn || $[53] !== row.work || $[54] !== t1) {
           t2 = /*#__PURE__*/_jsx(TurnFoldRow, {
             turn: row.turn,
             label: row.label,
             work: row.work,
             expanded: row.expanded,
+            expandable: row.expandable,
             onToggle: t1
           });
-          $[49] = row.expanded;
-          $[50] = row.label;
-          $[51] = row.turn;
-          $[52] = row.work;
-          $[53] = t1;
-          $[54] = t2;
+          $[49] = row.expandable;
+          $[50] = row.expanded;
+          $[51] = row.label;
+          $[52] = row.turn;
+          $[53] = row.work;
+          $[54] = t1;
+          $[55] = t2;
         } else {
-          t2 = $[54];
+          t2 = $[55];
         }
         return t2;
       }
     case "forks":
       {
         let t1;
-        if ($[55] !== chatId || $[56] !== row.turnId) {
+        if ($[56] !== chatId || $[57] !== row.turnId) {
           t1 = /*#__PURE__*/_jsx(ForksRow, {
             chatId: chatId,
             turnId: row.turnId
           });
-          $[55] = chatId;
-          $[56] = row.turnId;
-          $[57] = t1;
+          $[56] = chatId;
+          $[57] = row.turnId;
+          $[58] = t1;
         } else {
-          t1 = $[57];
+          t1 = $[58];
         }
         return t1;
       }
@@ -347,7 +349,7 @@ export function Row(t0) {
       {
         const t1 = row.heldBack === true;
         let t2;
-        if ($[58] !== chatId || $[59] !== row.baseMoved || $[60] !== row.checkpoint || $[61] !== row.diff || $[62] !== row.tools || $[63] !== row.turnId || $[64] !== t1) {
+        if ($[59] !== chatId || $[60] !== row.baseMoved || $[61] !== row.checkpoint || $[62] !== row.diff || $[63] !== row.tools || $[64] !== row.turnId || $[65] !== t1) {
           t2 = /*#__PURE__*/_jsx(ChangedFilesRow, {
             chatId: chatId,
             turnId: row.turnId,
@@ -357,122 +359,122 @@ export function Row(t0) {
             baseMoved: row.baseMoved,
             heldBack: t1
           });
-          $[58] = chatId;
-          $[59] = row.baseMoved;
-          $[60] = row.checkpoint;
-          $[61] = row.diff;
-          $[62] = row.tools;
-          $[63] = row.turnId;
-          $[64] = t1;
-          $[65] = t2;
+          $[59] = chatId;
+          $[60] = row.baseMoved;
+          $[61] = row.checkpoint;
+          $[62] = row.diff;
+          $[63] = row.tools;
+          $[64] = row.turnId;
+          $[65] = t1;
+          $[66] = t2;
         } else {
-          t2 = $[65];
+          t2 = $[66];
         }
         return t2;
       }
     case "approval":
       {
         let t1;
-        if ($[66] !== row.item) {
+        if ($[67] !== row.item) {
           t1 = /*#__PURE__*/_jsx(ApprovalHistoryRow, {
             item: row.item
           });
-          $[66] = row.item;
-          $[67] = t1;
+          $[67] = row.item;
+          $[68] = t1;
         } else {
-          t1 = $[67];
+          t1 = $[68];
         }
         return t1;
       }
     case "question":
       {
         let t1;
-        if ($[68] !== row.item) {
+        if ($[69] !== row.item) {
           t1 = /*#__PURE__*/_jsx(QuestionHistoryRow, {
             item: row.item
           });
-          $[68] = row.item;
-          $[69] = t1;
+          $[69] = row.item;
+          $[70] = t1;
         } else {
-          t1 = $[69];
+          t1 = $[70];
         }
         return t1;
       }
     case "note":
       {
         let t1;
-        if ($[70] !== row.from || $[71] !== row.id || $[72] !== row.level || $[73] !== row.text) {
+        if ($[71] !== row.from || $[72] !== row.id || $[73] !== row.level || $[74] !== row.text) {
           t1 = /*#__PURE__*/_jsx(NoteRow, {
             id: row.id,
             level: row.level,
             text: row.text,
             from: row.from
           });
-          $[70] = row.from;
-          $[71] = row.id;
-          $[72] = row.level;
-          $[73] = row.text;
-          $[74] = t1;
+          $[71] = row.from;
+          $[72] = row.id;
+          $[73] = row.level;
+          $[74] = row.text;
+          $[75] = t1;
         } else {
-          t1 = $[74];
+          t1 = $[75];
         }
         return t1;
       }
     case "compaction":
       {
         let t1;
-        if ($[75] !== row.preTokens) {
+        if ($[76] !== row.preTokens) {
           t1 = /*#__PURE__*/_jsx(CompactionRow, {
             preTokens: row.preTokens
           });
-          $[75] = row.preTokens;
-          $[76] = t1;
+          $[76] = row.preTokens;
+          $[77] = t1;
         } else {
-          t1 = $[76];
+          t1 = $[77];
         }
         return t1;
       }
     case "working":
       {
         let t1;
-        if ($[77] !== row.startedAt) {
+        if ($[78] !== row.startedAt) {
           t1 = /*#__PURE__*/_jsx(WorkingRow, {
             startedAt: row.startedAt
           });
-          $[77] = row.startedAt;
-          $[78] = t1;
+          $[78] = row.startedAt;
+          $[79] = t1;
         } else {
-          t1 = $[78];
+          t1 = $[79];
         }
         return t1;
       }
     case "app-card":
       {
         let t1;
-        if ($[79] !== row.card) {
+        if ($[80] !== row.card) {
           t1 = /*#__PURE__*/_jsx(AppCardRow, {
             card: row.card
           });
-          $[79] = row.card;
-          $[80] = t1;
+          $[80] = row.card;
+          $[81] = t1;
         } else {
-          t1 = $[80];
+          t1 = $[81];
         }
         return t1;
       }
     case "visual":
       {
         let t1;
-        if ($[81] !== chatId || $[82] !== row.visual) {
+        if ($[82] !== chatId || $[83] !== row.visual) {
           t1 = /*#__PURE__*/_jsx(VisualRow, {
             chatId: chatId,
             visual: row.visual
           });
-          $[81] = chatId;
-          $[82] = row.visual;
-          $[83] = t1;
+          $[82] = chatId;
+          $[83] = row.visual;
+          $[84] = t1;
         } else {
-          t1 = $[83];
+          t1 = $[84];
         }
         return t1;
       }

package/dist/chat/ui/rows/SubagentRow.js

@@ -17,7 +17,7 @@ import { canOpenSubagent, crumbOf } from '../../subagent-view.js';
 import '../../../host.js';
 import { useChatScope } from '../../../scope.js';
 import { useCurrentItem } from '../../../state/chats.js';
-import { useHostTask } from '../../../host-hooks.js';
+import { useHostHidesToolCalls, useHostTask } from '../../../host-hooks.js';
 // The work of a long-running agent scrolls inside its row instead of pushing the thread away.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const CHILDREN_MAX_PX = 320;
@@ -204,7 +204,7 @@ function StatusPill(t0) {
 }
 /* What the sub-agent did, live: its own tool calls and the text it wrote, as ordinary rows. */
 function SubagentWork(t0) {
-  const $ = _c(21);
+  const $ = _c(24);
   const {
     chatId,
     item,
@@ -213,110 +213,130 @@ function SubagentWork(t0) {
   const {
     t
   } = useTranslation("agent-chat");
+  const {
+    id
+  } = useChatScope();
+  const hideTools = useHostHidesToolCalls(id, chatId);
   const scroller = useRef(null);
   const running = item.status === "running";
   let t1;
-  if ($[0] !== running) {
-    t1 = () => {
+  if ($[0] !== hideTools || $[1] !== work) {
+    t1 = hideTools ? work.filter(_temp) : work;
+    $[0] = hideTools;
+    $[1] = work;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const shown = t1;
+  let t2;
+  if ($[3] !== running) {
+    t2 = () => {
       if (running && scroller.current) {
         scroller.current.scrollTop = scroller.current.scrollHeight;
       }
     };
-    $[0] = running;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  let t2;
-  if ($[2] !== running || $[3] !== work.length) {
-    t2 = [work.length, running];
-    $[2] = running;
-    $[3] = work.length;
+    $[3] = running;
     $[4] = t2;
   } else {
     t2 = $[4];
   }
-  useLayoutEffect(t1, t2);
+  let t3;
+  if ($[5] !== running || $[6] !== shown.length) {
+    t3 = [shown.length, running];
+    $[5] = running;
+    $[6] = shown.length;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  useLayoutEffect(t2, t3);
   if (work.length === 0) {
-    let t3;
-    if ($[5] !== t) {
-      t3 = t("rows.subagent.nothingYet");
-      $[5] = t;
-      $[6] = t3;
+    let t4;
+    if ($[8] !== t) {
+      t4 = t("rows.subagent.nothingYet");
+      $[8] = t;
+      $[9] = t4;
     } else {
-      t3 = $[6];
+      t4 = $[9];
     }
-    let t4;
-    if ($[7] !== t3) {
-      t4 = /*#__PURE__*/_jsx("div", {
+    let t5;
+    if ($[10] !== t4) {
+      t5 = /*#__PURE__*/_jsx("div", {
         className: "ml-6 pb-1 text-xs text-text-faint",
-        children: t3
+        children: t4
       });
-      $[7] = t3;
-      $[8] = t4;
+      $[10] = t4;
+      $[11] = t5;
     } else {
-      t4 = $[8];
+      t5 = $[11];
     }
-    return t4;
+    return t5;
   }
-  let t3;
-  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = {
+  if (shown.length === 0) {
+    return null;
+  }
+  let t4;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = {
       maxHeight: CHILDREN_MAX_PX
     };
-    $[9] = t3;
+    $[12] = t4;
   } else {
-    t3 = $[9];
+    t4 = $[12];
   }
-  let t4;
-  if ($[10] !== item.itemsTruncated || $[11] !== t) {
-    t4 = item.itemsTruncated && /*#__PURE__*/_jsx("div", {
+  let t5;
+  if ($[13] !== item.itemsTruncated || $[14] !== t) {
+    t5 = item.itemsTruncated && /*#__PURE__*/_jsx("div", {
       className: "pb-1 text-xs text-text-faint",
       children: t("rows.subagent.truncated")
     });
-    $[10] = item.itemsTruncated;
-    $[11] = t;
-    $[12] = t4;
+    $[13] = item.itemsTruncated;
+    $[14] = t;
+    $[15] = t5;
   } else {
-    t4 = $[12];
+    t5 = $[15];
   }
-  let t5;
-  if ($[13] !== chatId || $[14] !== work) {
-    let t6;
-    if ($[16] !== chatId) {
-      t6 = child => /*#__PURE__*/_jsx(ChildRow, {
+  let t6;
+  if ($[16] !== chatId || $[17] !== shown) {
+    let t7;
+    if ($[19] !== chatId) {
+      t7 = child_0 => /*#__PURE__*/_jsx(ChildRow, {
         chatId: chatId,
-        item: child
-      }, child.id);
-      $[16] = chatId;
-      $[17] = t6;
+        item: child_0
+      }, child_0.id);
+      $[19] = chatId;
+      $[20] = t7;
     } else {
-      t6 = $[17];
+      t7 = $[20];
     }
-    t5 = work.map(t6);
-    $[13] = chatId;
-    $[14] = work;
-    $[15] = t5;
+    t6 = shown.map(t7);
+    $[16] = chatId;
+    $[17] = shown;
+    $[18] = t6;
   } else {
-    t5 = $[15];
+    t6 = $[18];
   }
-  let t6;
-  if ($[18] !== t4 || $[19] !== t5) {
-    t6 = /*#__PURE__*/_jsxs("div", {
+  let t7;
+  if ($[21] !== t5 || $[22] !== t6) {
+    t7 = /*#__PURE__*/_jsxs("div", {
       ref: scroller,
       className: "ml-6 overflow-y-auto",
-      style: t3,
-      children: [t4, t5]
+      style: t4,
+      children: [t5, t6]
     });
-    $[18] = t4;
-    $[19] = t5;
-    $[20] = t6;
+    $[21] = t5;
+    $[22] = t6;
+    $[23] = t7;
   } else {
-    t6 = $[20];
+    t7 = $[23];
   }
-  return t6;
+  return t7;
 }
 /* The report the sub-agent handed back, behind a fold: the row is about the work, this is the answer. */
+function _temp(child) {
+  return child.kind !== "tool" || isImageGeneration(child);
+}
 function SubagentResult(t0) {
   const $ = _c(17);
   const {
@@ -330,7 +350,7 @@ function SubagentResult(t0) {
   useOpenForFind(itemId, "output", setOpen);
   let t1;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = () => setOpen(_temp);
+    t1 = () => setOpen(_temp2);
     $[0] = t1;
   } else {
     t1 = $[0];
@@ -412,7 +432,7 @@ function SubagentResult(t0) {
  * opens the whole conversation in the thread's place, and where there is none to open it folds out
  * the work the thread kept and, once it settled, the report it wrote.
  */
-function _temp(o) {
+function _temp2(o) {
   return !o;
 }
 export function SubagentRow(t0) {

package/dist/chat/ui/rows/WorkRows.d.ts

@@ -49,11 +49,12 @@ export declare function WorkGroupRow({ tools, summary, look, expanded, onToggle
     expanded: boolean;
     onToggle(): void;
 }): import("react").JSX.Element;
-export declare function TurnFoldRow({ turn, label, work, expanded, onToggle }: {
+export declare function TurnFoldRow({ turn, label, work, expanded, expandable, onToggle }: {
     turn: ChatTurnItem;
     label: string;
     work: readonly string[];
     expanded: boolean;
+    expandable: boolean;
     onToggle(): void;
 }): import("react").JSX.Element;
 export declare function ChangedFilesRow({ tools, diff, checkpoint, baseMoved, chatId, turnId, heldBack }: {