@mast-ai/react-ui 0.1.1 → 0.1.2

package/dist/components/ToolCallBlock.d.ts

@@ -7,5 +7,16 @@ export interface ToolCallBlockProps {
     entry: ToolEventEntry;
     /** Optional class added to the root element. */
     className?: string;
+    /**
+     * Controls whether the block body (sub-output, nested events, args, result)
+     * is open by default. The header (status icon + tool name) is always
+     * visible.
+     *
+     * - `'streaming'` (default): open while `entry.isStreaming` is `true`, then
+     *   collapses on completion.
+     * - `true`: open by default, regardless of streaming state.
+     * - `false`: closed by default, regardless of streaming state.
+     */
+    defaultOpen?: boolean | 'streaming';
 }
-export declare function ToolCallBlock({ entry, className }: ToolCallBlockProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToolCallBlock({ entry, className, defaultOpen }: ToolCallBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -1,7 +1,7 @@
 import { useState as R, useRef as C, useEffect as Q, useCallback as _, createContext as nt, useMemo as J, useContext as st, lazy as pt, Fragment as rt, Suspense as ft, useId as gt } from "react";
-import { jsx as e, jsxs as k } from "react/jsx-runtime";
-import { AgentRunner as vt } from "@mast-ai/core";
-import { useVirtualizer as bt } from "@tanstack/react-virtual";
+import { jsx as e, jsxs as v } from "react/jsx-runtime";
+import { AgentRunner as bt } from "@mast-ai/core";
+import { useVirtualizer as vt } from "@tanstack/react-virtual";
 function tt(t, n, r) {
   return { id: crypto.randomUUID(), role: t, text: n, toolEvents: [], isStreaming: r };
 }
@@ -11,69 +11,69 @@ function F(t, n, r) {
 function W(t, n, r, s) {
   return F(t, n, (a) => {
     let i = !1;
-    const l = a.toolEvents.map((o) => !i && o.name === r && o.isStreaming ? (i = !0, s(o)) : o);
+    const l = a.toolEvents.map((c) => !i && c.name === r && c.isStreaming ? (i = !0, s(c)) : c);
     return { ...a, toolEvents: l };
   });
 }
 function kt(t, n, r, s, a) {
   return W(t, n, r, (i) => {
     let l = !1;
-    const o = (i.nestedToolEvents ?? []).map((u) => !l && u.name === s && u.isStreaming ? (l = !0, a(u)) : u);
-    return { ...i, nestedToolEvents: o };
+    const c = (i.nestedToolEvents ?? []).map((u) => !l && u.name === s && u.isStreaming ? (l = !0, a(u)) : u);
+    return { ...i, nestedToolEvents: c };
   });
 }
 function xt(t, n) {
-  const [r, s] = R(() => (n == null ? void 0 : n.initialEntries) ?? []), [a, i] = R(() => [...t.history]), [l, o] = R(!1), [u, m] = R(0), y = C(null), v = C(n == null ? void 0 : n.onTurnComplete);
-  v.current = n == null ? void 0 : n.onTurnComplete, Q(() => {
-    var g;
-    u !== 0 && ((g = v.current) == null || g.call(v, r, a));
+  const [r, s] = R(() => (n == null ? void 0 : n.initialEntries) ?? []), [a, i] = R(() => [...t.history]), [l, c] = R(!1), [u, m] = R(0), k = C(null), g = C(n == null ? void 0 : n.onTurnComplete);
+  g.current = n == null ? void 0 : n.onTurnComplete, Q(() => {
+    var b;
+    u !== 0 && ((b = g.current) == null || b.call(g, r, a));
   }, [u]);
-  const T = (g) => {
-    for (let A = g.length - 1; A >= 0; A--) {
-      const N = g[A];
+  const T = (b) => {
+    for (let A = b.length - 1; A >= 0; A--) {
+      const N = b[A];
       if (N.role === "assistant" && N.isStreaming) return N.id;
     }
-  }, M = _((g, A) => {
+  }, M = _((b, A) => {
     s((N) => {
       const E = T(N);
-      return E === void 0 ? N : W(N, E, g, (I) => ({
+      return E === void 0 ? N : W(N, E, b, (I) => ({
         ...I,
         awaitingApproval: A
       }));
     });
-  }, []), P = _((g, A) => {
+  }, []), P = _((b, A) => {
     s((N) => {
       const E = T(N);
-      return E === void 0 ? N : W(N, E, g, (I) => ({ ...I, status: A }));
+      return E === void 0 ? N : W(N, E, b, (I) => ({ ...I, status: A }));
     });
   }, []), S = _(
-    (g, A) => {
+    (b, A) => {
       if (l) return;
-      const N = tt("user", A ?? g, !1), E = tt("assistant", "", !0), I = E.id;
-      s((b) => [...b, N, E]), o(!0);
+      const N = tt("user", A ?? b, !1), E = tt("assistant", "", !0), I = E.id;
+      s((x) => [...x, N, E]), c(!0);
       const h = new AbortController();
-      y.current = h, (async () => {
+      k.current = h, (async () => {
         try {
-          const b = t.runStream(
-            g,
+          const x = t.runStream(
+            b,
             h.signal,
             (d, f) => {
               if (f.type === "thinking")
                 s(
-                  (c) => W(c, I, d, (x) => ({
-                    ...x,
-                    subThinking: (x.subThinking ?? "") + f.delta
+                  (o) => W(o, I, d, (y) => ({
+                    ...y,
+                    subThinking: (y.subThinking ?? "") + f.delta
                   }))
                 );
               else if (f.type === "text_delta")
                 s(
-                  (c) => W(c, I, d, (x) => ({
-                    ...x,
-                    subText: (x.subText ?? "") + f.delta
+                  (o) => W(o, I, d, (y) => ({
+                    ...y,
+                    subText: (y.subText ?? "") + f.delta
                   }))
                 );
               else if (f.type === "tool_call_started") {
-                const c = {
+                const o = {
                   id: crypto.randomUUID(),
                   type: "tool_call_started",
                   name: f.name,
@@ -81,38 +81,38 @@ function xt(t, n) {
                   isStreaming: !0
                 };
                 s(
-                  (x) => W(x, I, d, (V) => ({
+                  (y) => W(y, I, d, (V) => ({
                     ...V,
-                    nestedToolEvents: [...V.nestedToolEvents ?? [], c]
+                    nestedToolEvents: [...V.nestedToolEvents ?? [], o]
                   }))
                 );
               } else if (f.type === "tool_call_completed") {
-                const c = f;
+                const o = f;
                 s(
-                  (x) => kt(x, I, d, c.name, (V) => ({
+                  (y) => kt(y, I, d, o.name, (V) => ({
                     ...V,
                     type: "tool_call_completed",
-                    result: c.result,
+                    result: o.result,
                     isStreaming: !1,
-                    status: c.error ? "error" : "success"
+                    status: o.error ? "error" : "success"
                   }))
                 );
               }
             }
           );
-          for await (const d of b)
+          for await (const d of x)
             if (d.type === "text_delta")
               s(
-                (f) => F(f, I, (c) => ({
-                  ...c,
-                  text: c.text + d.delta
+                (f) => F(f, I, (o) => ({
+                  ...o,
+                  text: o.text + d.delta
                 }))
               );
             else if (d.type === "thinking")
               s(
-                (f) => F(f, I, (c) => ({
-                  ...c,
-                  thinking: (c.thinking ?? "") + d.delta
+                (f) => F(f, I, (o) => ({
+                  ...o,
+                  thinking: (o.thinking ?? "") + d.delta
                 }))
               );
             else if (d.type === "tool_call_started") {
@@ -124,49 +124,49 @@ function xt(t, n) {
                 isStreaming: !0
               };
               s(
-                (c) => F(c, I, (x) => ({
-                  ...x,
-                  toolEvents: [...x.toolEvents, f]
+                (o) => F(o, I, (y) => ({
+                  ...y,
+                  toolEvents: [...y.toolEvents, f]
                 }))
               );
             } else if (d.type === "tool_call_completed")
               s(
-                (f) => W(f, I, d.name, (c) => ({
-                  ...c,
+                (f) => W(f, I, d.name, (o) => ({
+                  ...o,
                   type: "tool_call_completed",
                   result: d.result,
                   isStreaming: !1,
                   // Preserve a status set by the proxy (e.g. 'cancelled'); only
                   // fall back to error/success based on the runner's flag.
-                  status: c.status ?? (d.error ? "error" : "success")
+                  status: o.status ?? (d.error ? "error" : "success")
                 }))
               );
             else if (d.type === "done") {
               const f = d.history;
               s(
-                (c) => F(c, I, (x) => ({
-                  ...x,
+                (o) => F(o, I, (y) => ({
+                  ...y,
                   text: d.output,
                   isStreaming: !1
                 }))
-              ), i(f), m((c) => c + 1);
+              ), i(f), m((o) => o + 1);
             }
         } catch {
           s(
-            (b) => F(b, I, (d) => ({ ...d, isStreaming: !1 }))
+            (x) => F(x, I, (d) => ({ ...d, isStreaming: !1 }))
           );
         } finally {
-          o(!1);
+          c(!1);
         }
       })();
     },
     [t, l]
   ), w = _(() => {
-    var g;
-    (g = y.current) == null || g.abort();
+    var b;
+    (b = k.current) == null || b.abort();
   }, []), B = _(() => {
-    var g;
-    (g = y.current) == null || g.abort(), y.current = null, s([]), i([]), o(!1);
+    var b;
+    (b = k.current) == null || b.abort(), k.current = null, s([]), i([]), c(!1);
   }, []);
   return {
     entries: r,
@@ -192,7 +192,7 @@ const K = {
   focusable: !1
 };
 function yt() {
-  return /* @__PURE__ */ k("svg", { ...K, children: [
+  return /* @__PURE__ */ v("svg", { ...K, children: [
     /* @__PURE__ */ e("path", { d: "M9 3a3 3 0 0 0-3 3v.5a3 3 0 0 0-2 5.2A3 3 0 0 0 6 17v.5a3 3 0 0 0 6 0V3a3 3 0 0 0-3 0Z" }),
     /* @__PURE__ */ e("path", { d: "M15 3a3 3 0 0 1 3 3v.5a3 3 0 0 1 2 5.2A3 3 0 0 1 18 17v.5a3 3 0 0 1-6 0V3a3 3 0 0 1 3 0Z" })
   ] });
@@ -201,20 +201,20 @@ function It() {
   return /* @__PURE__ */ e("svg", { ...K, children: /* @__PURE__ */ e("path", { d: "M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-2.4 2.6-2.6Z" }) });
 }
 function St() {
-  return /* @__PURE__ */ k("svg", { ...K, children: [
+  return /* @__PURE__ */ v("svg", { ...K, children: [
     /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "9" }),
     /* @__PURE__ */ e("path", { d: "m8 12 3 3 5-6" })
   ] });
 }
 function Nt() {
-  return /* @__PURE__ */ k("svg", { ...K, children: [
+  return /* @__PURE__ */ v("svg", { ...K, children: [
     /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "9" }),
     /* @__PURE__ */ e("path", { d: "m9 9 6 6" }),
     /* @__PURE__ */ e("path", { d: "m15 9-6 6" })
   ] });
 }
 function Tt() {
-  return /* @__PURE__ */ k("svg", { ...K, children: [
+  return /* @__PURE__ */ v("svg", { ...K, children: [
     /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "9" }),
     /* @__PURE__ */ e("path", { d: "M5.5 5.5 18.5 18.5" })
   ] });
@@ -270,23 +270,23 @@ class Rt {
     return this.inner.definition();
   }
   async call(n, r) {
-    var i, l, o, u, m, y;
+    var i, l, c, u, m, k;
     const s = this.inner.definition();
     (l = (i = this.hooks).notifyAwaiting) == null || l.call(i, s.name, !0);
     let a;
     try {
-      const v = await this.onApprovalRequired({
+      const g = await this.onApprovalRequired({
         id: "",
         type: "tool_call_started",
         name: s.name,
         args: n,
         isStreaming: !0
       });
-      v === Mt ? this.hooks.enqueueInline ? a = await this.hooks.enqueueInline(s.name, n) : a = !0 : a = v;
+      g === Mt ? this.hooks.enqueueInline ? a = await this.hooks.enqueueInline(s.name, n) : a = !0 : a = g;
     } finally {
-      (u = (o = this.hooks).notifyAwaiting) == null || u.call(o, s.name, !1);
+      (u = (c = this.hooks).notifyAwaiting) == null || u.call(c, s.name, !1);
     }
-    return a === !1 ? ((y = (m = this.hooks).setStatus) == null || y.call(m, s.name, "cancelled"), Pt) : typeof a == "string" ? a : this.inner.call(n, r);
+    return a === !1 ? ((k = (m = this.hooks).setStatus) == null || k.call(m, s.name, "cancelled"), Pt) : typeof a == "string" ? a : this.inner.call(n, r);
   }
 }
 function Dt(t, n, r, s = {}) {
@@ -297,13 +297,13 @@ function Dt(t, n, r, s = {}) {
       if (!i) return;
       const l = i.definition();
       if (!_t(l, r())) return i;
-      const o = n();
-      return o ? new Rt(i, o, s) : i;
+      const c = n();
+      return c ? new Rt(i, c, s) : i;
     }
   };
 }
 const it = nt(null);
-function re({
+function ae({
   runner: t,
   agent: n,
   children: r,
@@ -311,12 +311,12 @@ function re({
   onApprovalRequired: a,
   approvalOverride: i,
   initialHistory: l,
-  initialEntries: o,
+  initialEntries: c,
   onConversationChange: u
 }) {
   const m = C(u);
   m.current = u;
-  const y = C(l), v = C(o), T = C(a);
+  const k = C(l), g = C(c), T = C(a);
   T.current = a;
   const M = C(i);
   M.current = i;
@@ -342,10 +342,10 @@ function re({
       () => M.current,
       z
     );
-    return new vt(t.adapter, H);
-  }, [t, a, i]), [g, A] = R(() => {
+    return new bt(t.adapter, H);
+  }, [t, a, i]), [b, A] = R(() => {
     const $ = B.conversation(n);
-    return y.current && y.current.length > 0 && ($.history = [...y.current]), $;
+    return k.current && k.current.length > 0 && ($.history = [...k.current]), $;
   }), N = _(
     ($, O) => {
       var z;
@@ -357,17 +357,17 @@ function re({
     history: I,
     sendMessage: h,
     cancel: p,
-    isRunning: b,
+    isRunning: x,
     reset: d,
     setToolAwaitingApproval: f,
-    setToolStatus: c
-  } = xt(g, {
-    initialEntries: v.current,
+    setToolStatus: o
+  } = xt(b, {
+    initialEntries: g.current,
     onTurnComplete: N
   });
-  P.current = f, S.current = c;
-  const [x, V] = R([]), X = C(x);
-  X.current = x;
+  P.current = f, S.current = o;
+  const [y, V] = R([]), X = C(y);
+  X.current = y;
   const dt = _(($, O) => new Promise((z) => {
     const H = (D) => {
       V((j) => j.filter((ht) => ht !== U)), z(D);
@@ -389,11 +389,11 @@ function re({
       history: I,
       sendMessage: h,
       cancel: p,
-      isRunning: b,
+      isRunning: x,
       reset: Y,
-      pendingApprovals: x
+      pendingApprovals: y
     }),
-    [E, I, h, p, b, Y, x]
+    [E, I, h, p, x, Y, y]
   );
   return /* @__PURE__ */ e(it.Provider, { value: mt, children: /* @__PURE__ */ e(Ct, { icons: s, children: r }) });
 }
@@ -414,14 +414,14 @@ function $t(t) {
 }
 function jt({ entry: t, approve: n, reject: r, className: s }) {
   const a = q(), i = ["mast-inline-approval", s].filter(Boolean).join(" "), l = $t(t.args);
-  return /* @__PURE__ */ k("div", { "data-mast-inline-approval": !0, "data-tool-name": t.name, className: i, children: [
-    /* @__PURE__ */ k("div", { className: "mast-inline-approval-header", children: [
+  return /* @__PURE__ */ v("div", { "data-mast-inline-approval": !0, "data-tool-name": t.name, className: i, children: [
+    /* @__PURE__ */ v("div", { className: "mast-inline-approval-header", children: [
       /* @__PURE__ */ e("span", { className: "mast-inline-approval-icon", "aria-hidden": "true", children: a.wrench }),
       /* @__PURE__ */ e("span", { className: "mast-inline-approval-name", children: t.name }),
       /* @__PURE__ */ e("span", { className: "mast-inline-approval-label", children: "requires approval" })
     ] }),
     l ? /* @__PURE__ */ e("pre", { className: "mast-inline-approval-args", children: /* @__PURE__ */ e("code", { children: l }) }) : null,
-    /* @__PURE__ */ k("div", { className: "mast-inline-approval-actions", children: [
+    /* @__PURE__ */ v("div", { className: "mast-inline-approval-actions", children: [
       /* @__PURE__ */ e(
         "button",
         {
@@ -451,7 +451,7 @@ function lt({
   open: a
 }) {
   const i = q(), l = ["mast-thinking-block", r].filter(Boolean).join(" ");
-  return /* @__PURE__ */ k(
+  return /* @__PURE__ */ v(
     "details",
     {
       "data-mast-thinking-block": !0,
@@ -459,7 +459,7 @@ function lt({
       className: l,
       open: a,
       children: [
-        /* @__PURE__ */ k("summary", { className: "mast-thinking-block-summary", children: [
+        /* @__PURE__ */ v("summary", { className: "mast-thinking-block-summary", children: [
           /* @__PURE__ */ e("span", { className: "mast-thinking-block-icon", "aria-hidden": "true", children: i.brain }),
           /* @__PURE__ */ e("span", { className: "mast-thinking-block-label", children: s }),
           n ? /* @__PURE__ */ e(
@@ -496,60 +496,67 @@ function Lt(t, n) {
       return n.check;
   }
 }
-function ot({ entry: t, className: n }) {
-  const r = q(), s = ["mast-tool-call-block", n].filter(Boolean).join(" "), a = t.subThinking !== void 0 || t.subText !== void 0, i = t.nestedToolEvents ?? [], l = Lt(t, r), o = et(t.args), u = et(t.result);
-  return /* @__PURE__ */ k(
-    "div",
+function Bt(t, n) {
+  return t === "streaming" ? n ? !0 : void 0 : t;
+}
+function ot({ entry: t, className: n, defaultOpen: r = "streaming" }) {
+  const s = q(), a = ["mast-tool-call-block", n].filter(Boolean).join(" "), i = t.subThinking !== void 0 || t.subText !== void 0, l = t.nestedToolEvents ?? [], c = Lt(t, s), u = et(t.args), m = et(t.result), k = Bt(r, t.isStreaming);
+  return /* @__PURE__ */ v(
+    "details",
     {
       "data-mast-tool-call-block": !0,
       "data-streaming": t.isStreaming ? "true" : void 0,
       "data-status": t.status,
       "data-tool-name": t.name,
-      className: s,
+      className: a,
+      open: k,
       children: [
-        /* @__PURE__ */ k("div", { className: "mast-tool-call-block-header", children: [
+        /* @__PURE__ */ v("summary", { className: "mast-tool-call-block-header", children: [
+          /* @__PURE__ */ e("span", { className: "mast-tool-call-block-chevron", "aria-hidden": "true", children: "▸" }),
           /* @__PURE__ */ e(
             "span",
             {
               className: "mast-tool-call-block-status",
               "data-testid": "mast-tool-call-status",
               "aria-hidden": "true",
-              children: l
+              children: c
             }
           ),
-          /* @__PURE__ */ e("span", { className: "mast-tool-call-block-wrench", "aria-hidden": "true", children: r.wrench }),
+          /* @__PURE__ */ e("span", { className: "mast-tool-call-block-wrench", "aria-hidden": "true", children: s.wrench }),
           /* @__PURE__ */ e("span", { className: "mast-tool-call-block-name", children: t.name })
         ] }),
-        a ? /* @__PURE__ */ k("div", { className: "mast-tool-call-block-sub-output", children: [
-          t.subThinking !== void 0 ? /* @__PURE__ */ e(
-            lt,
-            {
-              content: t.subThinking,
-              isStreaming: t.isStreaming,
-              className: "mast-tool-call-block-sub-thinking",
-              open: t.isStreaming ? !0 : void 0
-            }
-          ) : null,
-          t.subText !== void 0 ? /* @__PURE__ */ e("div", { className: "mast-tool-call-block-sub-text", "data-testid": "mast-tool-call-sub-text", children: t.subText }) : null
-        ] }) : null,
-        i.length > 0 ? /* @__PURE__ */ e("div", { className: "mast-tool-call-block-nested", "data-testid": "mast-tool-call-nested", children: i.map((m) => /* @__PURE__ */ e(ot, { entry: m }, m.id)) }) : null,
-        o ? /* @__PURE__ */ k("details", { className: "mast-tool-call-block-args", children: [
-          /* @__PURE__ */ e("summary", { children: "Arguments" }),
-          /* @__PURE__ */ e("pre", { className: "mast-tool-call-block-pre", children: /* @__PURE__ */ e("code", { children: o }) })
-        ] }) : null,
-        !t.isStreaming && u ? /* @__PURE__ */ k("details", { className: "mast-tool-call-block-result", children: [
-          /* @__PURE__ */ e("summary", { children: "Result" }),
-          /* @__PURE__ */ e("pre", { className: "mast-tool-call-block-pre", children: /* @__PURE__ */ e("code", { children: u }) })
-        ] }) : null
+        /* @__PURE__ */ v("div", { className: "mast-tool-call-block-body", children: [
+          i ? /* @__PURE__ */ v("div", { className: "mast-tool-call-block-sub-output", children: [
+            t.subThinking !== void 0 ? /* @__PURE__ */ e(
+              lt,
+              {
+                content: t.subThinking,
+                isStreaming: t.isStreaming,
+                className: "mast-tool-call-block-sub-thinking",
+                open: t.isStreaming ? !0 : void 0
+              }
+            ) : null,
+            t.subText !== void 0 ? /* @__PURE__ */ e("div", { className: "mast-tool-call-block-sub-text", "data-testid": "mast-tool-call-sub-text", children: t.subText }) : null
+          ] }) : null,
+          l.length > 0 ? /* @__PURE__ */ e("div", { className: "mast-tool-call-block-nested", "data-testid": "mast-tool-call-nested", children: l.map((g) => /* @__PURE__ */ e(ot, { entry: g }, g.id)) }) : null,
+          u ? /* @__PURE__ */ v("details", { className: "mast-tool-call-block-args", children: [
+            /* @__PURE__ */ e("summary", { children: "Arguments" }),
+            /* @__PURE__ */ e("pre", { className: "mast-tool-call-block-pre", children: /* @__PURE__ */ e("code", { children: u }) })
+          ] }) : null,
+          !t.isStreaming && m ? /* @__PURE__ */ v("details", { className: "mast-tool-call-block-result", children: [
+            /* @__PURE__ */ e("summary", { children: "Result" }),
+            /* @__PURE__ */ e("pre", { className: "mast-tool-call-block-pre", children: /* @__PURE__ */ e("code", { children: m }) })
+          ] }) : null
+        ] })
       ]
     }
   );
 }
-function Bt({ entry: t, className: n }) {
+function Ut({ entry: t, className: n }) {
   const r = ["mast-user-message", n].filter(Boolean).join(" ");
   return /* @__PURE__ */ e("div", { "data-mast-user-message": !0, className: r, children: /* @__PURE__ */ e("div", { className: "mast-user-message-bubble", children: t.text }) });
 }
-const Ut = pt(async () => {
+const Kt = pt(async () => {
   try {
     const [{ default: t }, { default: n }, { default: r }] = await Promise.all([
       import("react-markdown"),
@@ -565,25 +572,25 @@ const Ut = pt(async () => {
     };
   }
 });
-function Kt({
+function Vt({
   entry: t,
   className: n,
   renderMessage: r,
   renderToolCall: s
 }) {
-  const a = ["mast-assistant-message", n].filter(Boolean).join(" "), { pendingApprovals: i } = G(), l = (o) => {
-    const u = o.awaitingApproval ? i.find((m) => m.toolName === o.name) : void 0;
-    return s ? s(o, u) : u ? /* @__PURE__ */ e(
+  const a = ["mast-assistant-message", n].filter(Boolean).join(" "), { pendingApprovals: i } = G(), l = (c) => {
+    const u = c.awaitingApproval ? i.find((m) => m.toolName === c.name) : void 0;
+    return s ? s(c, u) : u ? /* @__PURE__ */ e(
       jt,
       {
-        entry: o,
+        entry: c,
         approve: u.approve,
         reject: u.reject,
         respondWith: u.respondWith
       }
-    ) : /* @__PURE__ */ e(ot, { entry: o });
+    ) : /* @__PURE__ */ e(ot, { entry: c });
   };
-  return /* @__PURE__ */ k(
+  return /* @__PURE__ */ v(
     "div",
     {
       "data-mast-assistant-message": !0,
@@ -591,13 +598,13 @@ function Kt({
       className: a,
       children: [
         t.thinking ? /* @__PURE__ */ e(lt, { content: t.thinking, isStreaming: t.isStreaming }) : null,
-        t.toolEvents.map((o, u) => /* @__PURE__ */ e(rt, { children: l(o) }, `${o.id}-${u}`)),
-        t.text ? r ? r(t.text) : /* @__PURE__ */ e(ft, { fallback: /* @__PURE__ */ e("p", { className: "mast-assistant-message-text", children: t.text }), children: /* @__PURE__ */ e(Ut, { children: t.text }) }) : null
+        t.toolEvents.map((c, u) => /* @__PURE__ */ e(rt, { children: l(c) }, `${c.id}-${u}`)),
+        t.text ? r ? r(t.text) : /* @__PURE__ */ e(ft, { fallback: /* @__PURE__ */ e("p", { className: "mast-assistant-message-text", children: t.text }), children: /* @__PURE__ */ e(Kt, { children: t.text }) }) : null
       ]
     }
   );
 }
-function Vt({
+function Wt({
   items: t,
   activeIndex: n,
   onSelect: r,
@@ -612,18 +619,18 @@ function Vt({
       role: "listbox",
       "aria-label": "Mention picker",
       children: t.map((i, l) => {
-        const o = l === n, u = o ? "mast-mention-picker-item mast-mention-picker-active" : "mast-mention-picker-item";
+        const c = l === n, u = c ? "mast-mention-picker-item mast-mention-picker-active" : "mast-mention-picker-item";
         return /* @__PURE__ */ e(
           "li",
           {
             id: `${s}-${l}`,
             role: "option",
-            "aria-selected": o,
+            "aria-selected": c,
             className: u,
             onMouseDown: (m) => {
               m.preventDefault(), r(i);
             },
-            children: a ? a(i, o) : /* @__PURE__ */ k("div", { children: [
+            children: a ? a(i, c) : /* @__PURE__ */ v("div", { children: [
               /* @__PURE__ */ e("div", { className: "mast-mention-picker-item-label", children: i.label }),
               i.description && /* @__PURE__ */ e("div", { className: "mast-mention-picker-item-description", children: i.description })
             ] })
@@ -638,63 +645,63 @@ const Z = "@";
 function ct(t) {
   return t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
-function Wt(t, n = Z) {
+function zt(t, n = Z) {
   const r = ct(n), s = new RegExp(`${r}([^\\s${r}]*)$`), a = t.match(s);
   return a ? a[1] : null;
 }
-function zt(t, n = Z) {
+function Ft(t, n = Z) {
   const r = ct(n), s = new RegExp(`${r}[^\\s${r}]*$`);
   return t.replace(s, "");
 }
-function Ft(t, n) {
+function Ot(t, n) {
   return t.map((r) => `${r.text}${Z}${r.item.label}`).join("") + n;
 }
-function Ot(t) {
-  const n = t.trigger ?? "@", [r, s] = R([]), [a, i] = R(""), [l, o] = R(null), [u, m] = R(0), [y, v] = R([]), T = C(r);
+function Ht(t) {
+  const n = t.trigger ?? "@", [r, s] = R([]), [a, i] = R(""), [l, c] = R(null), [u, m] = R(0), [k, g] = R([]), T = C(r);
   T.current = r;
   const M = C(a);
   M.current = a;
   const P = C(0);
   Q(() => {
     if (l === null) {
-      v([]);
+      g([]);
       return;
     }
     const h = ++P.current;
     if (t.onSearch) {
       const p = t.onSearch(l);
-      p instanceof Promise ? p.then((b) => {
-        h === P.current && v(b);
-      }) : v(p);
+      p instanceof Promise ? p.then((x) => {
+        h === P.current && g(x);
+      }) : g(p);
     }
   }, [l, t.onSearch]);
   const S = new Set(r.map((h) => h.item.id)), w = (() => {
     if (l === null) return [];
     if (t.onSearch)
-      return y.filter((p) => !S.has(p.id));
+      return k.filter((p) => !S.has(p.id));
     const h = l.toLowerCase();
     return (t.items ?? []).filter(
       (p) => !S.has(p.id) && p.label.toLowerCase().includes(h)
     );
   })(), B = _(
     (h) => {
-      i(h), o(Wt(h, n)), m(0);
+      i(h), c(zt(h, n)), m(0);
     },
     [n]
-  ), g = _(
+  ), b = _(
     (h) => {
       const p = T.current;
       if (p.some((d) => d.item.id === h.id)) return;
-      const b = zt(M.current, n);
-      s([...p, { text: b, item: h }]), i(""), o(null), m(0);
+      const x = Ft(M.current, n);
+      s([...p, { text: x, item: h }]), i(""), c(null), m(0);
     },
     [n]
   ), A = _((h) => {
-    const p = T.current, b = p.findIndex((c) => c.item.id === h);
-    if (b === -1) return;
-    const d = p[b].text, f = [...p.slice(0, b), ...p.slice(b + 1)];
-    if (b < f.length) {
-      f[b] = { ...f[b], text: d + f[b].text }, s(f);
+    const p = T.current, x = p.findIndex((o) => o.item.id === h);
+    if (x === -1) return;
+    const d = p[x].text, f = [...p.slice(0, x), ...p.slice(x + 1)];
+    if (x < f.length) {
+      f[x] = { ...f[x], text: d + f[x].text }, s(f);
       return;
     }
     s(f), i(d + M.current);
@@ -707,19 +714,19 @@ function Ot(t) {
         case "ArrowUp":
           return h.preventDefault(), m((p) => p === 0 ? w.length - 1 : p - 1), !0;
         case "Enter":
-          return h.preventDefault(), g(w[u] ?? w[0]), !0;
+          return h.preventDefault(), b(w[u] ?? w[0]), !0;
         case "Escape":
-          return h.preventDefault(), o(null), !0;
+          return h.preventDefault(), c(null), !0;
         default:
           return !1;
       }
     },
-    [l, w, u, g]
+    [l, w, u, b]
   ), E = _(() => {
-    const h = Ft(r, a);
+    const h = Ot(r, a);
     return { prompt: t.buildPrompt ? t.buildPrompt(r, a) : h, displayText: h };
   }, [r, a, t.buildPrompt]), I = _(() => {
-    s([]), i(""), o(null), m(0);
+    s([]), i(""), c(null), m(0);
   }, []);
   return {
     segments: r,
@@ -729,19 +736,19 @@ function Ot(t) {
     pickerIndex: u,
     setTrailingInput: B,
     handleKeyDown: N,
-    selectItem: g,
+    selectItem: b,
     removeChip: A,
     buildSubmission: E,
     clear: I
   };
 }
-const Ht = 1, qt = 8;
+const qt = 1, Gt = 8;
 function ut(t) {
   const n = t.split(`
 `).length;
-  return Math.min(qt, Math.max(Ht, n));
+  return Math.min(Gt, Math.max(qt, n));
 }
-function Gt({
+function Jt({
   className: t,
   placeholder: n = "Type a message and press Enter.",
   sendLabel: r,
@@ -749,7 +756,7 @@ function Gt({
   mentions: a
 }) {
   return a ? /* @__PURE__ */ e(
-    Qt,
+    Zt,
     {
       className: t,
       placeholder: n,
@@ -758,7 +765,7 @@ function Gt({
       mentions: a
     }
   ) : /* @__PURE__ */ e(
-    Jt,
+    Qt,
     {
       className: t,
       placeholder: n,
@@ -767,17 +774,17 @@ function Gt({
     }
   );
 }
-function Jt({ className: t, placeholder: n, sendLabel: r, cancelLabel: s }) {
-  const { sendMessage: a, cancel: i, isRunning: l } = G(), o = q(), [u, m] = R(""), y = ["mast-chat-input", t].filter(Boolean).join(" "), v = u.trim(), T = !l && v.length > 0, M = () => {
-    T && (a(v), m(""));
+function Qt({ className: t, placeholder: n, sendLabel: r, cancelLabel: s }) {
+  const { sendMessage: a, cancel: i, isRunning: l } = G(), c = q(), [u, m] = R(""), k = ["mast-chat-input", t].filter(Boolean).join(" "), g = u.trim(), T = !l && g.length > 0, M = () => {
+    T && (a(g), m(""));
   }, P = (S) => {
     S.key === "Enter" && !S.shiftKey && (S.preventDefault(), M());
   };
-  return /* @__PURE__ */ k(
+  return /* @__PURE__ */ v(
     "form",
     {
       "data-mast-chat-input": !0,
-      className: y,
+      className: k,
       onSubmit: (S) => {
         S.preventDefault(), M();
       },
@@ -803,7 +810,7 @@ function Jt({ className: t, placeholder: n, sendLabel: r, cancelLabel: s }) {
             className: "mast-chat-input-cancel",
             "aria-label": "Cancel",
             onClick: i,
-            children: s ?? o.stop
+            children: s ?? c.stop
           }
         ) : /* @__PURE__ */ e(
           "button",
@@ -812,52 +819,52 @@ function Jt({ className: t, placeholder: n, sendLabel: r, cancelLabel: s }) {
             className: "mast-chat-input-send",
             "aria-label": "Send",
             disabled: !T,
-            children: r ?? o.send
+            children: r ?? c.send
           }
         )
       ]
     }
   );
 }
-function Qt({
+function Zt({
   className: t,
   placeholder: n,
   sendLabel: r,
   cancelLabel: s,
   mentions: a
 }) {
-  const { sendMessage: i, cancel: l, isRunning: o } = G(), u = q(), m = gt(), {
-    segments: y,
-    trailingInput: v,
+  const { sendMessage: i, cancel: l, isRunning: c } = G(), u = q(), m = gt(), {
+    segments: k,
+    trailingInput: g,
     mentionQuery: T,
     filteredItems: M,
     pickerIndex: P,
     setTrailingInput: S,
     handleKeyDown: w,
     selectItem: B,
-    removeChip: g,
+    removeChip: b,
     buildSubmission: A,
     clear: N
-  } = Ot(a), E = ["mast-chat-input", "mast-mention-input", t].filter(Boolean).join(" "), I = y.length > 0 || v.trim().length > 0, h = !o && I, p = T !== null && M.length > 0, b = p ? `${m}-${P}` : void 0, d = () => {
+  } = Ht(a), E = ["mast-chat-input", "mast-mention-input", t].filter(Boolean).join(" "), I = k.length > 0 || g.trim().length > 0, h = !c && I, p = T !== null && M.length > 0, x = p ? `${m}-${P}` : void 0, d = () => {
     if (!h) return;
-    const { prompt: c, displayText: x } = A();
-    x.trim() && (i(c, x), N());
-  }, f = (c) => {
-    w(c) || c.key === "Enter" && !c.shiftKey && (c.preventDefault(), d());
+    const { prompt: o, displayText: y } = A();
+    y.trim() && (i(o, y), N());
+  }, f = (o) => {
+    w(o) || o.key === "Enter" && !o.shiftKey && (o.preventDefault(), d());
   };
-  return /* @__PURE__ */ k(
+  return /* @__PURE__ */ v(
     "form",
     {
       "data-mast-chat-input": !0,
       className: E,
-      onSubmit: (c) => {
-        c.preventDefault(), d();
+      onSubmit: (o) => {
+        o.preventDefault(), d();
       },
       children: [
         /* @__PURE__ */ e("label", { className: "mast-chat-input-label mast-visually-hidden", htmlFor: "mast-chat-input-field", children: "Message" }),
-        /* @__PURE__ */ k("div", { className: "mast-mention-input-field", children: [
+        /* @__PURE__ */ v("div", { className: "mast-mention-input-field", children: [
           p && /* @__PURE__ */ e(
-            Vt,
+            Wt,
             {
               items: M,
               activeIndex: P,
@@ -866,45 +873,45 @@ function Qt({
               renderItem: a.renderItem
             }
           ),
-          /* @__PURE__ */ k("div", { className: "mast-mention-input-content", children: [
-            y.map((c) => /* @__PURE__ */ k(rt, { children: [
-              c.text && /* @__PURE__ */ e("span", { className: "mast-mention-segment-text", children: c.text }),
-              a.renderChip ? a.renderChip(c.item, () => g(c.item.id)) : /* @__PURE__ */ k("span", { className: "mast-mention-chip", children: [
+          /* @__PURE__ */ v("div", { className: "mast-mention-input-content", children: [
+            k.map((o) => /* @__PURE__ */ v(rt, { children: [
+              o.text && /* @__PURE__ */ e("span", { className: "mast-mention-segment-text", children: o.text }),
+              a.renderChip ? a.renderChip(o.item, () => b(o.item.id)) : /* @__PURE__ */ v("span", { className: "mast-mention-chip", children: [
                 "@",
-                c.item.label,
+                o.item.label,
                 /* @__PURE__ */ e(
                   "button",
                   {
                     type: "button",
                     className: "mast-mention-chip-remove",
-                    "aria-label": `Remove reference to ${c.item.label}`,
-                    onClick: () => g(c.item.id),
+                    "aria-label": `Remove reference to ${o.item.label}`,
+                    onClick: () => b(o.item.id),
                     children: "×"
                   }
                 )
               ] })
-            ] }, c.item.id)),
+            ] }, o.item.id)),
             /* @__PURE__ */ e(
               "textarea",
               {
                 id: "mast-chat-input-field",
                 className: "mast-chat-input-textarea mast-mention-input-textarea",
-                value: v,
-                placeholder: y.length === 0 ? n : "",
-                rows: ut(v),
-                disabled: o,
-                onChange: (c) => S(c.target.value),
+                value: g,
+                placeholder: k.length === 0 ? n : "",
+                rows: ut(g),
+                disabled: c,
+                onChange: (o) => S(o.target.value),
                 onKeyDown: f,
                 role: "combobox",
                 "aria-expanded": p,
                 "aria-controls": p ? `${m}-listbox` : void 0,
                 "aria-autocomplete": "list",
-                "aria-activedescendant": b
+                "aria-activedescendant": x
               }
             )
           ] })
         ] }),
-        o ? /* @__PURE__ */ e(
+        c ? /* @__PURE__ */ e(
           "button",
           {
             type: "button",
@@ -927,9 +934,9 @@ function Qt({
     }
   );
 }
-function Zt({ entry: t, className: n, renderToolCall: r, renderMessage: s }) {
-  return t.role === "user" ? /* @__PURE__ */ e(Bt, { entry: t, className: n }) : /* @__PURE__ */ e(
-    Kt,
+function Xt({ entry: t, className: n, renderToolCall: r, renderMessage: s }) {
+  return t.role === "user" ? /* @__PURE__ */ e(Ut, { entry: t, className: n }) : /* @__PURE__ */ e(
+    Vt,
     {
       entry: t,
       className: n,
@@ -938,34 +945,34 @@ function Zt({ entry: t, className: n, renderToolCall: r, renderMessage: s }) {
     }
   );
 }
-const Xt = 80;
-function Yt({ className: t, renderToolCall: n, renderMessage: r }) {
-  const { messages: s } = G(), a = C(null), i = bt({
+const Yt = 80;
+function te({ className: t, renderToolCall: n, renderMessage: r }) {
+  const { messages: s } = G(), a = C(null), i = vt({
     count: s.length,
     getScrollElement: () => a.current,
-    estimateSize: () => Xt,
+    estimateSize: () => Yt,
     overscan: 4
-  }), l = s.length > 0 ? s[s.length - 1] : void 0, o = (l == null ? void 0 : l.text.length) ?? 0;
+  }), l = s.length > 0 ? s[s.length - 1] : void 0, c = (l == null ? void 0 : l.text.length) ?? 0;
   Q(() => {
     s.length !== 0 && i.scrollToIndex(s.length - 1, { align: "end" });
-  }, [s.length, o, i]);
-  const u = i.getTotalSize(), m = i.getVirtualItems(), y = ["mast-message-list", t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("div", { ref: a, "data-mast-message-list": !0, className: y, role: "log", "aria-live": "polite", children: /* @__PURE__ */ e("div", { style: { height: `${u}px`, position: "relative", width: "100%" }, children: m.map((v) => {
-    const T = s[v.index];
+  }, [s.length, c, i]);
+  const u = i.getTotalSize(), m = i.getVirtualItems(), k = ["mast-message-list", t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("div", { ref: a, "data-mast-message-list": !0, className: k, role: "log", "aria-live": "polite", children: /* @__PURE__ */ e("div", { style: { height: `${u}px`, position: "relative", width: "100%" }, children: m.map((g) => {
+    const T = s[g.index];
     return /* @__PURE__ */ e(
       "div",
       {
-        "data-index": v.index,
+        "data-index": g.index,
         ref: i.measureElement,
         style: {
           position: "absolute",
           top: 0,
           left: 0,
           width: "100%",
-          transform: `translateY(${v.start}px)`
+          transform: `translateY(${g.start}px)`
         },
         children: /* @__PURE__ */ e(
-          Zt,
+          Xt,
           {
             entry: T,
             renderToolCall: n,
@@ -977,7 +984,7 @@ function Yt({ className: t, renderToolCall: n, renderMessage: r }) {
     );
   }) }) });
 }
-function ae({
+function ie({
   theme: t,
   className: n,
   renderToolCall: r,
@@ -986,27 +993,27 @@ function ae({
   mentions: i
 }) {
   const l = ["mast-conversation-panel", n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ k("div", { "data-mast-root": !0, "data-mast-theme": t, className: l, children: [
-    /* @__PURE__ */ e(Yt, { renderToolCall: r, renderMessage: s }),
-    /* @__PURE__ */ e(Gt, { placeholder: a, mentions: i })
+  return /* @__PURE__ */ v("div", { "data-mast-root": !0, "data-mast-theme": t, className: l, children: [
+    /* @__PURE__ */ e(te, { renderToolCall: r, renderMessage: s }),
+    /* @__PURE__ */ e(Jt, { placeholder: a, mentions: i })
   ] });
 }
 export {
-  re as AgentProvider,
-  Kt as AssistantMessage,
-  Gt as ChatInput,
-  ae as ConversationPanel,
+  ae as AgentProvider,
+  Vt as AssistantMessage,
+  Jt as ChatInput,
+  ie as ConversationPanel,
   Mt as INLINE_APPROVAL,
   jt as InlineApproval,
-  Zt as MessageItem,
-  Yt as MessageList,
+  Xt as MessageItem,
+  te as MessageList,
   lt as ThinkingBlock,
   ot as ToolCallBlock,
-  Bt as UserMessage,
-  Ft as buildInlineMentionPrompt,
-  Wt as extractMentionQuery,
-  zt as removeMentionTrigger,
+  Ut as UserMessage,
+  Ot as buildInlineMentionPrompt,
+  zt as extractMentionQuery,
+  Ft as removeMentionTrigger,
   G as useAgent,
   xt as useAgentStream,
-  Ot as useMentions
+  Ht as useMentions
 };

package/dist/styles.css

@@ -300,9 +300,6 @@
   border-radius: var(--mast-radius);
   padding: 0.5rem 0.75rem;
   font-size: var(--mast-text-sm);
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
 }
 
 .mast-tool-call-block[data-streaming='true'] .mast-tool-call-block-status {
@@ -331,6 +328,31 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+
+.mast-tool-call-block-header::-webkit-details-marker {
+  display: none;
+}
+
+.mast-tool-call-block-chevron {
+  display: inline-block;
+  width: 0.75rem;
+  color: var(--mast-fg-muted);
+  transition: transform 0.15s ease;
+}
+
+.mast-tool-call-block[open] > .mast-tool-call-block-header > .mast-tool-call-block-chevron {
+  transform: rotate(90deg);
+}
+
+.mast-tool-call-block-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
 }
 
 .mast-tool-call-block-status,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mast-ai/react-ui",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -34,7 +34,7 @@
     "format": "prettier --write src"
   },
   "peerDependencies": {
-    "@mast-ai/core": "^0.1.1",
+    "@mast-ai/core": "^0.1.2",
     "@tanstack/react-virtual": ">=3.0.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"