@meetsmore-oss/use-ai-client 1.5.0 → 1.6.0

package/dist/index.js

@@ -4,13 +4,13 @@ import {
 } from "./chunk-STF3H6F5.js";
 
 // src/useAI.ts
-import { useState as useState12, useEffect as useEffect11, useRef as useRef12, useCallback as useCallback11, useMemo as useMemo6 } from "react";
+import { useState as useState14, useEffect as useEffect11, useRef as useRef13, useCallback as useCallback12, useMemo as useMemo6 } from "react";
 
 // src/providers/useAIProvider.tsx
-import { createContext as createContext4, useContext as useContext4, useState as useState11, useEffect as useEffect10, useCallback as useCallback10, useRef as useRef10 } from "react";
+import { createContext as createContext4, useContext as useContext4, useState as useState13, useEffect as useEffect10, useCallback as useCallback11, useRef as useRef11 } from "react";
 
 // src/types.ts
-import { EventType, ErrorCode } from "@meetsmore-oss/use-ai-core";
+import { EventType, ErrorCode, TOOL_APPROVAL_REQUEST } from "@meetsmore-oss/use-ai-core";
 
 // src/theme/strings.ts
 import { createContext, useContext } from "react";
@@ -109,6 +109,25 @@ var defaultStrings = {
   toolExecution: {
     /** Fallback messages when no tool title is provided (one randomly selected) */
     fallbackMessages: ["Working", "Processing", "Thinking"]
+  },
+  // Tool approval dialog
+  toolApproval: {
+    /** Title shown in the approval dialog */
+    title: "Confirmation Required",
+    /** Message shown in the approval dialog. {toolName} is replaced with tool name. */
+    message: '"{toolName}" is waiting for your approval.',
+    /** Message shown when multiple tools are awaiting approval. {count} is replaced with number. */
+    batchMessage: "{count} actions are waiting for your approval.",
+    /** Label for approve button */
+    approve: "Allow",
+    /** Label for approve all button (batch mode) */
+    approveAll: "Allow All",
+    /** Label for reject button */
+    reject: "Deny",
+    /** Label for reject all button (batch mode) */
+    rejectAll: "Deny All",
+    /** Label for showing tool arguments */
+    showDetails: "Show details"
   }
 };
 var StringsContext = createContext(defaultStrings);
@@ -255,7 +274,7 @@ function UseAIFloatingButton({
 }
 
 // src/components/UseAIChatPanel.tsx
-import { useState as useState4, useRef as useRef4, useEffect as useEffect4 } from "react";
+import { useState as useState5, useRef as useRef4, useEffect as useEffect4 } from "react";
 
 // src/components/MarkdownContent.tsx
 import ReactMarkdown from "react-markdown";
@@ -1177,30 +1196,30 @@ function matchesMimeType(mimeType, pattern) {
   const regex = new RegExp(`^${regexPattern}$`);
   return regex.test(mimeType);
 }
-function findTransformer(mimeType, transformers) {
+function findTransformerPattern(mimeType, transformers) {
   if (!transformers) {
     return void 0;
   }
-  let bestMatch;
+  let bestKey;
   let bestIsExact = false;
   let bestLength = -1;
-  for (const [pattern, transformer] of Object.entries(transformers)) {
+  for (const pattern of Object.keys(transformers)) {
     if (!matchesMimeType(mimeType, pattern)) {
       continue;
     }
     const isExact = !pattern.includes("*");
     if (isExact && !bestIsExact) {
-      bestMatch = transformer;
+      bestKey = pattern;
       bestIsExact = true;
       bestLength = pattern.length;
       continue;
     }
     if (isExact === bestIsExact && pattern.length > bestLength) {
-      bestMatch = transformer;
+      bestKey = pattern;
       bestLength = pattern.length;
     }
   }
-  return bestMatch;
+  return bestKey;
 }
 
 // src/fileUpload/EmbedFileUploadBackend.ts
@@ -1231,75 +1250,104 @@ var EmbedFileUploadBackend = class {
 };
 
 // src/fileUpload/processAttachments.ts
+function groupBy(items, keyFn) {
+  const map = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const key = keyFn(item);
+    const list = map.get(key);
+    list ? list.push(item) : map.set(key, [item]);
+  }
+  return map;
+}
 var transformationCache = /* @__PURE__ */ new Map();
 function getFileCacheKey(file) {
   return `${file.name}:${file.size}:${file.lastModified}`;
 }
-async function getTransformedContent(file, transformer, context, onProgress) {
-  const cacheKey = getFileCacheKey(file);
+async function hashGroupCacheKey(files) {
+  const raw = files.map(getFileCacheKey).join(", ");
+  const data = new TextEncoder().encode(raw);
+  const hash = await crypto.subtle.digest("SHA-256", data);
+  return Array.from(new Uint8Array(hash)).map((b) => b.toString(16).padStart(2, "0")).join("");
+}
+async function getTransformedContent(files, transformer, context, onProgress) {
+  if (files.length === 0) {
+    return [];
+  }
+  const cacheKey = await hashGroupCacheKey(files);
   const cached = transformationCache.get(cacheKey);
-  if (cached !== void 0) {
+  if (cached) {
     return cached;
   }
-  const result = await transformer.transform(file, context, onProgress);
-  transformationCache.set(cacheKey, result);
-  return result;
+  const results = await transformer.transform(files, context, onProgress);
+  transformationCache.set(cacheKey, results);
+  return results;
+}
+async function toContentPart(attachment, backend) {
+  if (attachment.transformedContent !== void 0) {
+    return {
+      type: "transformed_file",
+      text: attachment.transformedContent,
+      originalFile: {
+        name: attachment.file.name,
+        mimeType: attachment.file.type,
+        size: attachment.file.size
+      }
+    };
+  }
+  const url = await backend.prepareForSend(attachment.file);
+  if (attachment.file.type.startsWith("image/")) {
+    return { type: "image", url };
+  }
+  return {
+    type: "file",
+    url,
+    mimeType: attachment.file.type,
+    name: attachment.file.name
+  };
 }
 async function processAttachments(attachments, config) {
   const { getCurrentChat, backend = new EmbedFileUploadBackend(), transformers = {}, onFileProgress } = config;
   const contentParts = [];
   const chat = await getCurrentChat();
   const context = { chat };
-  for (const attachment of attachments) {
+  const groups = groupBy(
+    attachments,
+    (attachment) => attachment.transformedContent !== void 0 ? null : findTransformerPattern(attachment.file.type, transformers) ?? null
+  );
+  for (const [key, groupAttachments] of groups) {
+    if (key === null) {
+      const parts = await Promise.all(
+        groupAttachments.map((a) => toContentPart(a, backend))
+      );
+      contentParts.push(...parts);
+      continue;
+    }
+    const transformer = transformers[key];
+    const files = groupAttachments.map((a) => a.file);
+    groupAttachments.forEach((a) => onFileProgress?.(a.id, { status: "processing" }));
     try {
-      if (attachment.transformedContent !== void 0) {
+      const results = await getTransformedContent(
+        files,
+        transformer,
+        context,
+        (progress) => {
+          groupAttachments.forEach((a) => onFileProgress?.(a.id, { status: "processing", progress }));
+        }
+      );
+      results.forEach((text, i) => {
         contentParts.push({
           type: "transformed_file",
-          text: attachment.transformedContent,
+          text,
           originalFile: {
-            name: attachment.file.name,
-            mimeType: attachment.file.type,
-            size: attachment.file.size
+            name: files[i].name,
+            mimeType: files[i].type,
+            size: files[i].size
           }
         });
-        continue;
-      }
-      const transformer = findTransformer(attachment.file.type, transformers);
-      if (transformer) {
-        onFileProgress?.(attachment.id, { status: "processing" });
-        const transformedText = await getTransformedContent(
-          attachment.file,
-          transformer,
-          context,
-          (progress) => {
-            onFileProgress?.(attachment.id, { status: "processing", progress });
-          }
-        );
-        contentParts.push({
-          type: "transformed_file",
-          text: transformedText,
-          originalFile: {
-            name: attachment.file.name,
-            mimeType: attachment.file.type,
-            size: attachment.file.size
-          }
-        });
-        onFileProgress?.(attachment.id, { status: "done" });
-      } else {
-        const url = await backend.prepareForSend(attachment.file);
-        if (attachment.file.type.startsWith("image/")) {
-          contentParts.push({ type: "image", url });
-        } else {
-          contentParts.push({
-            type: "file",
-            url,
-            mimeType: attachment.file.type,
-            name: attachment.file.name
-          });
-        }
-      }
+        onFileProgress?.(groupAttachments[i].id, { status: "done" });
+      });
     } catch (error) {
-      onFileProgress?.(attachment.id, { status: "error" });
+      groupAttachments.forEach((a) => onFileProgress?.(a.id, { status: "error" }));
       throw error;
     }
   }
@@ -1370,12 +1418,14 @@ function useFileUpload({
     setFileError(null);
     setProcessingState(/* @__PURE__ */ new Map());
   }, [resetDependency]);
-  const runTransformer = useCallback2(async (attachmentId, file, transformer) => {
+  const runTransformer = useCallback2(async (attachmentId, file, transformerKey) => {
+    const transformer = transformers?.[transformerKey];
+    if (!transformer) return;
     setProcessingState((prev) => new Map(prev).set(attachmentId, { status: "processing" }));
     try {
       const chat = await getCurrentChat();
       const context = { chat };
-      const transformedContent = await getTransformedContent(file, transformer, context, (progress) => {
+      const [transformedContent] = await getTransformedContent([file], transformer, context, (progress) => {
         setProcessingState((prev) => new Map(prev).set(attachmentId, {
           status: "processing",
           progress
@@ -1389,7 +1439,7 @@ function useFileUpload({
       console.error(`[useFileUpload] Transformation failed for ${file.name}:`, error);
       setProcessingState((prev) => new Map(prev).set(attachmentId, { status: "error" }));
     }
-  }, [getCurrentChat]);
+  }, [getCurrentChat, transformers]);
   const handleFiles = useCallback2(async (files) => {
     const fileArray = Array.from(files);
     for (const file of fileArray) {
@@ -1411,9 +1461,9 @@ function useFileUpload({
         preview
       };
       setAttachments((prev) => [...prev, attachment]);
-      const transformer = findTransformer(file.type, transformers);
-      if (transformer) {
-        runTransformer(attachmentId, file, transformer);
+      const transformerKey = findTransformerPattern(file.type, transformers);
+      if (transformerKey) {
+        runTransformer(attachmentId, file, transformerKey);
       }
     }
   }, [maxFileSize, acceptedTypes, strings, transformers, runTransformer]);
@@ -1574,8 +1624,210 @@ function useDropdownState(options = {}) {
   };
 }
 
+// src/components/ToolApprovalDialog.tsx
+import { useState as useState4 } from "react";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function ToolApprovalDialog({
+  toolCallName,
+  toolCallArgs,
+  annotations,
+  toolCount = 1,
+  pendingTools = [],
+  onApprove,
+  onReject,
+  theme,
+  strings
+}) {
+  const [showDetails, setShowDetails] = useState4(false);
+  const displayName = annotations?.title || toolCallName;
+  const isBatch = toolCount > 1;
+  const message = isBatch ? strings.toolApproval.batchMessage?.replace("{count}", String(toolCount)) ?? `${toolCount} actions are waiting for your approval` : strings.toolApproval.message.replace("{toolName}", displayName);
+  const getToolDisplayName = (tool) => tool.annotations?.title || tool.toolCallName;
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      "data-testid": "tool-approval-dialog",
+      style: {
+        border: `2px solid ${theme.primaryColor}`,
+        borderRadius: "12px",
+        background: theme.backgroundColor,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            style: {
+              padding: "12px 14px",
+              borderBottom: `1px solid ${theme.borderColor}`,
+              background: theme.assistantMessageBackground
+            },
+            children: [
+              /* @__PURE__ */ jsxs7("div", { style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                marginBottom: "4px"
+              }, children: [
+                /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: theme.primaryColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx10("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+                  /* @__PURE__ */ jsx10("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+                  /* @__PURE__ */ jsx10("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+                ] }),
+                /* @__PURE__ */ jsx10("span", { style: {
+                  fontWeight: 600,
+                  fontSize: "14px",
+                  color: theme.textColor
+                }, children: strings.toolApproval.title })
+              ] }),
+              /* @__PURE__ */ jsx10("div", { style: {
+                fontSize: "13px",
+                color: theme.secondaryTextColor,
+                paddingLeft: "24px"
+              }, children: message })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs7("div", { style: { padding: "8px 14px" }, children: [
+          /* @__PURE__ */ jsxs7(
+            "button",
+            {
+              onClick: () => setShowDetails(!showDetails),
+              style: {
+                background: "transparent",
+                border: "none",
+                padding: 0,
+                cursor: "pointer",
+                fontSize: "12px",
+                color: theme.secondaryTextColor,
+                display: "flex",
+                alignItems: "center",
+                gap: "4px"
+              },
+              children: [
+                /* @__PURE__ */ jsx10(
+                  "svg",
+                  {
+                    width: "10",
+                    height: "10",
+                    viewBox: "0 0 12 12",
+                    fill: "none",
+                    style: {
+                      transform: showDetails ? "rotate(90deg)" : "rotate(0deg)",
+                      transition: "transform 0.15s"
+                    },
+                    children: /* @__PURE__ */ jsx10("path", { d: "M4 2L8 6L4 10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+                  }
+                ),
+                strings.toolApproval.showDetails
+              ]
+            }
+          ),
+          showDetails && /* @__PURE__ */ jsx10("div", { style: {
+            marginTop: "6px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "8px",
+            maxHeight: "200px",
+            overflow: "auto"
+          }, children: (pendingTools.length > 0 ? pendingTools : [{
+            toolCallId: "single",
+            toolCallName,
+            toolCallArgs,
+            annotations
+          }]).map((tool, index) => /* @__PURE__ */ jsxs7(
+            "div",
+            {
+              style: {
+                padding: "8px",
+                background: theme.hoverBackground,
+                borderRadius: "6px"
+              },
+              children: [
+                /* @__PURE__ */ jsx10("div", { style: {
+                  fontSize: "12px",
+                  fontWeight: 500,
+                  color: theme.textColor,
+                  marginBottom: "4px"
+                }, children: getToolDisplayName(tool) }),
+                /* @__PURE__ */ jsx10("pre", { style: {
+                  margin: 0,
+                  fontSize: "11px",
+                  overflow: "auto",
+                  color: theme.secondaryTextColor,
+                  whiteSpace: "pre-wrap",
+                  wordBreak: "break-word"
+                }, children: JSON.stringify(tool.toolCallArgs, null, 2) })
+              ]
+            },
+            tool.toolCallId
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs7("div", { style: {
+          display: "flex",
+          gap: "8px",
+          padding: "8px 14px 12px"
+        }, children: [
+          /* @__PURE__ */ jsx10(
+            "button",
+            {
+              "data-testid": "approve-tool-button",
+              onClick: onApprove,
+              style: {
+                flex: 1,
+                padding: "8px 16px",
+                borderRadius: "8px",
+                border: "none",
+                background: theme.primaryGradient,
+                color: "white",
+                fontWeight: 500,
+                cursor: "pointer",
+                fontSize: "13px",
+                transition: "opacity 0.15s"
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.opacity = "0.9";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.opacity = "1";
+              },
+              children: isBatch ? strings.toolApproval.approveAll ?? "Approve All" : strings.toolApproval.approve
+            }
+          ),
+          /* @__PURE__ */ jsx10(
+            "button",
+            {
+              "data-testid": "reject-tool-button",
+              onClick: () => onReject(),
+              style: {
+                flex: 1,
+                padding: "8px 16px",
+                borderRadius: "8px",
+                border: `1px solid ${theme.borderColor}`,
+                background: "transparent",
+                color: theme.textColor,
+                fontWeight: 500,
+                cursor: "pointer",
+                fontSize: "13px",
+                transition: "all 0.15s"
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.background = theme.hoverBackground;
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.background = "transparent";
+              },
+              children: isBatch ? strings.toolApproval.rejectAll ?? "Reject All" : strings.toolApproval.reject
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
 // src/components/UseAIChatPanel.tsx
-import { Fragment, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function FeedbackButton({ type, isSelected, onClick, selectedColor, unselectedColor }) {
   const buttonRef = useRef4(null);
   const handleClick = () => {
@@ -1591,7 +1843,7 @@ function FeedbackButton({ type, isSelected, onClick, selectedColor, unselectedCo
   };
   const thumbsUpPath = "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3";
   const thumbsDownPath = "M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17";
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     "button",
     {
       ref: buttonRef,
@@ -1624,7 +1876,7 @@ function FeedbackButton({ type, isSelected, onClick, selectedColor, unselectedCo
           e.currentTarget.style.color = unselectedColor;
         }
       },
-      children: /* @__PURE__ */ jsx10(
+      children: /* @__PURE__ */ jsx11(
         "svg",
         {
           width: "14",
@@ -1635,7 +1887,7 @@ function FeedbackButton({ type, isSelected, onClick, selectedColor, unselectedCo
           strokeWidth: "2",
           strokeLinecap: "round",
           strokeLinejoin: "round",
-          children: /* @__PURE__ */ jsx10("path", { d: type === "upvote" ? thumbsUpPath : thumbsDownPath })
+          children: /* @__PURE__ */ jsx11("path", { d: type === "upvote" ? thumbsUpPath : thumbsDownPath })
         }
       )
     }
@@ -1676,18 +1928,21 @@ function UseAIChatPanel({
   closeButton,
   executingTool,
   feedbackEnabled,
-  onFeedback
+  onFeedback,
+  pendingApprovals = [],
+  onApproveToolCall,
+  onRejectToolCall
 }) {
   const strings = useStrings();
   const theme = useTheme();
-  const [input, setInput] = useState4("");
+  const [input, setInput] = useState5("");
   const chatHistoryDropdown = useDropdownState();
   const agentDropdown = useDropdownState();
-  const [chatHistory, setChatHistory] = useState4([]);
+  const [chatHistory, setChatHistory] = useState5([]);
   const messagesEndRef = useRef4(null);
-  const [displayedSuggestions, setDisplayedSuggestions] = useState4([]);
+  const [displayedSuggestions, setDisplayedSuggestions] = useState5([]);
   const textareaRef = useRef4(null);
-  const [hoveredMessageId, setHoveredMessageId] = useState4(null);
+  const [hoveredMessageId, setHoveredMessageId] = useState5(null);
   const {
     attachments,
     fileError,
@@ -1774,7 +2029,7 @@ function UseAIChatPanel({
       chatHistoryDropdown.close();
     }
   };
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       onClick: () => {
@@ -1792,7 +2047,7 @@ function UseAIChatPanel({
       },
       children: [
         DropZoneOverlay,
-        /* @__PURE__ */ jsxs7(
+        /* @__PURE__ */ jsxs8(
           "div",
           {
             style: {
@@ -1805,7 +2060,7 @@ function UseAIChatPanel({
               gap: "12px"
             },
             children: [
-              /* @__PURE__ */ jsx10("div", { style: { flex: 1, minWidth: 0, position: "relative" }, children: onListChats ? /* @__PURE__ */ jsxs7(
+              /* @__PURE__ */ jsx11("div", { style: { flex: 1, minWidth: 0, position: "relative" }, children: onListChats ? /* @__PURE__ */ jsxs8(
                 "button",
                 {
                   "data-testid": "chat-history-dropdown-button",
@@ -1838,7 +2093,7 @@ function UseAIChatPanel({
                     e.currentTarget.style.background = "transparent";
                   },
                   children: [
-                    /* @__PURE__ */ jsx10("span", { style: {
+                    /* @__PURE__ */ jsx11("span", { style: {
                       overflow: "hidden",
                       textOverflow: "ellipsis",
                       whiteSpace: "nowrap",
@@ -1855,13 +2110,13 @@ function UseAIChatPanel({
                       }
                       return strings.header.newChat;
                     })() }),
-                    /* @__PURE__ */ jsx10("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx10("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                    /* @__PURE__ */ jsx11("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx11("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
                   ]
                 }
-              ) : /* @__PURE__ */ jsx10("div", { style: { fontSize: "14px", fontWeight: "600", color: theme.textColor, padding: "6px 8px" }, children: strings.header.aiAssistant }) }),
-              /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
-                availableAgents && availableAgents.length > 1 && onAgentChange && /* @__PURE__ */ jsxs7("div", { style: { position: "relative" }, children: [
-                  /* @__PURE__ */ jsxs7(
+              ) : /* @__PURE__ */ jsx11("div", { style: { fontSize: "14px", fontWeight: "600", color: theme.textColor, padding: "6px 8px" }, children: strings.header.aiAssistant }) }),
+              /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+                availableAgents && availableAgents.length > 1 && onAgentChange && /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, children: [
+                  /* @__PURE__ */ jsxs8(
                     "button",
                     {
                       "data-testid": "agent-selector",
@@ -1890,7 +2145,7 @@ function UseAIChatPanel({
                       },
                       title: "Select AI model",
                       children: [
-                        /* @__PURE__ */ jsx10("span", { style: {
+                        /* @__PURE__ */ jsx11("span", { style: {
                           overflow: "hidden",
                           textOverflow: "ellipsis",
                           whiteSpace: "nowrap",
@@ -1899,11 +2154,11 @@ function UseAIChatPanel({
                           const agent = availableAgents.find((a) => a.id === (selectedAgent ?? defaultAgent));
                           return agent?.name || "AI";
                         })() }),
-                        /* @__PURE__ */ jsx10("svg", { width: "10", height: "10", viewBox: "0 0 12 12", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx10("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                        /* @__PURE__ */ jsx11("svg", { width: "10", height: "10", viewBox: "0 0 12 12", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx11("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
                       ]
                     }
                   ),
-                  agentDropdown.isOpen && /* @__PURE__ */ jsx10(
+                  agentDropdown.isOpen && /* @__PURE__ */ jsx11(
                     "div",
                     {
                       style: {
@@ -1923,7 +2178,7 @@ function UseAIChatPanel({
                       },
                       children: availableAgents.map((agent) => {
                         const isSelected = agent.id === (selectedAgent ?? defaultAgent);
-                        return /* @__PURE__ */ jsxs7(
+                        return /* @__PURE__ */ jsxs8(
                           "div",
                           {
                             "data-testid": "agent-option",
@@ -1953,13 +2208,13 @@ function UseAIChatPanel({
                               }
                             },
                             children: [
-                              /* @__PURE__ */ jsxs7("div", { style: { flex: 1, minWidth: 0 }, children: [
-                                /* @__PURE__ */ jsx10("div", { style: {
+                              /* @__PURE__ */ jsxs8("div", { style: { flex: 1, minWidth: 0 }, children: [
+                                /* @__PURE__ */ jsx11("div", { style: {
                                   fontSize: "13px",
                                   fontWeight: isSelected ? "600" : "500",
                                   color: isSelected ? theme.primaryColor : theme.textColor
                                 }, children: agent.name }),
-                                agent.annotation && /* @__PURE__ */ jsx10("div", { style: {
+                                agent.annotation && /* @__PURE__ */ jsx11("div", { style: {
                                   fontSize: "11px",
                                   color: theme.secondaryTextColor,
                                   marginTop: "2px",
@@ -1968,7 +2223,7 @@ function UseAIChatPanel({
                                   whiteSpace: "nowrap"
                                 }, children: agent.annotation })
                               ] }),
-                              isSelected && /* @__PURE__ */ jsx10("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx10("path", { d: "M2 7L5.5 10.5L12 4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                              isSelected && /* @__PURE__ */ jsx11("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx11("path", { d: "M2 7L5.5 10.5L12 4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
                             ]
                           },
                           agent.id
@@ -1977,7 +2232,7 @@ function UseAIChatPanel({
                     }
                   )
                 ] }),
-                onNewChat && /* @__PURE__ */ jsx10(
+                onNewChat && /* @__PURE__ */ jsx11(
                   "button",
                   {
                     "data-testid": "new-chat-button",
@@ -2004,10 +2259,10 @@ function UseAIChatPanel({
                       e.currentTarget.style.color = theme.secondaryTextColor;
                     },
                     title: strings.header.newChat,
-                    children: /* @__PURE__ */ jsx10("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx10("path", { d: "M8 3.5V12.5M3.5 8H12.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+                    children: /* @__PURE__ */ jsx11("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx11("path", { d: "M8 3.5V12.5M3.5 8H12.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
                   }
                 ),
-                onDeleteChat && messages.length > 0 && /* @__PURE__ */ jsx10(
+                onDeleteChat && messages.length > 0 && /* @__PURE__ */ jsx11(
                   "button",
                   {
                     "data-testid": "delete-chat-button",
@@ -2031,7 +2286,7 @@ function UseAIChatPanel({
                       e.currentTarget.style.color = theme.secondaryTextColor;
                     },
                     title: strings.header.deleteChat,
-                    children: /* @__PURE__ */ jsx10("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx10("path", { d: "M2 4H14M6.5 7V11M9.5 7V11M3 4L4 13C4 13.5304 4.21071 14.0391 4.58579 14.4142C4.96086 14.7893 5.46957 15 6 15H10C10.5304 15 11.0391 14.7893 11.4142 14.4142C11.7893 14.0391 12 13.5304 12 13L13 4M5.5 4V2.5C5.5 2.23478 5.60536 1.98043 5.79289 1.79289C5.98043 1.60536 6.23478 1.5 6.5 1.5H9.5C9.76522 1.5 10.0196 1.60536 10.2071 1.79289C10.3946 1.98043 10.5 2.23478 10.5 2.5V4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                    children: /* @__PURE__ */ jsx11("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx11("path", { d: "M2 4H14M6.5 7V11M9.5 7V11M3 4L4 13C4 13.5304 4.21071 14.0391 4.58579 14.4142C4.96086 14.7893 5.46957 15 6 15H10C10.5304 15 11.0391 14.7893 11.4142 14.4142C11.7893 14.0391 12 13.5304 12 13L13 4M5.5 4V2.5C5.5 2.23478 5.60536 1.98043 5.79289 1.79289C5.98043 1.60536 6.23478 1.5 6.5 1.5H9.5C9.76522 1.5 10.0196 1.60536 10.2071 1.79289C10.3946 1.98043 10.5 2.23478 10.5 2.5V4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
                   }
                 ),
                 closeButton
@@ -2039,7 +2294,7 @@ function UseAIChatPanel({
             ]
           }
         ),
-        chatHistoryDropdown.isOpen && onListChats && /* @__PURE__ */ jsx10(
+        chatHistoryDropdown.isOpen && onListChats && /* @__PURE__ */ jsx11(
           "div",
           {
             style: {
@@ -2056,7 +2311,7 @@ function UseAIChatPanel({
               flexDirection: "column",
               overflow: "hidden"
             },
-            children: /* @__PURE__ */ jsx10(
+            children: /* @__PURE__ */ jsx11(
               "div",
               {
                 style: {
@@ -2064,7 +2319,7 @@ function UseAIChatPanel({
                   overflowY: "auto",
                   padding: "8px"
                 },
-                children: chatHistory.length === 0 ? /* @__PURE__ */ jsx10(
+                children: chatHistory.length === 0 ? /* @__PURE__ */ jsx11(
                   "div",
                   {
                     style: {
@@ -2073,9 +2328,9 @@ function UseAIChatPanel({
                       padding: "32px 16px",
                       fontSize: "13px"
                     },
-                    children: /* @__PURE__ */ jsx10("p", { style: { margin: 0 }, children: strings.chatHistory.noChatHistory })
+                    children: /* @__PURE__ */ jsx11("p", { style: { margin: 0 }, children: strings.chatHistory.noChatHistory })
                   }
-                ) : chatHistory.map((chat) => /* @__PURE__ */ jsxs7(
+                ) : chatHistory.map((chat) => /* @__PURE__ */ jsxs8(
                   "div",
                   {
                     "data-testid": "chat-history-item",
@@ -2099,10 +2354,10 @@ function UseAIChatPanel({
                       }
                     },
                     children: [
-                      /* @__PURE__ */ jsx10("div", { style: { fontSize: "13px", fontWeight: "500", color: theme.textColor, marginBottom: "4px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: chat.title || strings.header.newChat }),
-                      /* @__PURE__ */ jsxs7("div", { style: { fontSize: "11px", color: theme.secondaryTextColor }, children: [
+                      /* @__PURE__ */ jsx11("div", { style: { fontSize: "13px", fontWeight: "500", color: theme.textColor, marginBottom: "4px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: chat.title || strings.header.newChat }),
+                      /* @__PURE__ */ jsxs8("div", { style: { fontSize: "11px", color: theme.secondaryTextColor }, children: [
                         new Date(chat.updatedAt).toLocaleDateString([], { month: "short", day: "numeric" }),
-                        currentChatId === chat.id && /* @__PURE__ */ jsxs7("span", { style: {
+                        currentChatId === chat.id && /* @__PURE__ */ jsxs8("span", { style: {
                           marginLeft: "8px",
                           color: theme.primaryColor,
                           fontWeight: "600"
@@ -2121,7 +2376,7 @@ function UseAIChatPanel({
         ),
         chatHistoryDropdown.Backdrop,
         agentDropdown.Backdrop,
-        /* @__PURE__ */ jsxs7(
+        /* @__PURE__ */ jsxs8(
           "div",
           {
             style: {
@@ -2133,7 +2388,7 @@ function UseAIChatPanel({
               gap: "12px"
             },
             children: [
-              messages.length === 0 && /* @__PURE__ */ jsxs7(
+              messages.length === 0 && /* @__PURE__ */ jsxs8(
                 "div",
                 {
                   style: {
@@ -2144,12 +2399,12 @@ function UseAIChatPanel({
                     gap: "20px"
                   },
                   children: [
-                    /* @__PURE__ */ jsxs7("div", { style: { textAlign: "center", color: theme.secondaryTextColor, fontSize: "14px" }, children: [
-                      /* @__PURE__ */ jsx10("p", { style: { margin: 0, fontSize: "32px", marginBottom: "12px" }, children: "\u{1F4AC}" }),
-                      /* @__PURE__ */ jsx10("p", { style: { margin: 0 }, children: strings.emptyChat.startConversation }),
-                      /* @__PURE__ */ jsx10("p", { style: { margin: "8px 0 0", fontSize: "12px" }, children: strings.emptyChat.askMeToHelp })
+                    /* @__PURE__ */ jsxs8("div", { style: { textAlign: "center", color: theme.secondaryTextColor, fontSize: "14px" }, children: [
+                      /* @__PURE__ */ jsx11("p", { style: { margin: 0, fontSize: "32px", marginBottom: "12px" }, children: "\u{1F4AC}" }),
+                      /* @__PURE__ */ jsx11("p", { style: { margin: 0 }, children: strings.emptyChat.startConversation }),
+                      /* @__PURE__ */ jsx11("p", { style: { margin: "8px 0 0", fontSize: "12px" }, children: strings.emptyChat.askMeToHelp })
                     ] }),
-                    displayedSuggestions.length > 0 && /* @__PURE__ */ jsx10(
+                    displayedSuggestions.length > 0 && /* @__PURE__ */ jsx11(
                       "div",
                       {
                         style: {
@@ -2159,7 +2414,7 @@ function UseAIChatPanel({
                           width: "100%",
                           maxWidth: "320px"
                         },
-                        children: displayedSuggestions.map((suggestion, index) => /* @__PURE__ */ jsx10(
+                        children: displayedSuggestions.map((suggestion, index) => /* @__PURE__ */ jsx11(
                           "button",
                           {
                             "data-testid": "chat-suggestion-button",
@@ -2203,7 +2458,7 @@ function UseAIChatPanel({
                   ]
                 }
               ),
-              messages.map((message) => /* @__PURE__ */ jsxs7(
+              messages.map((message) => /* @__PURE__ */ jsxs8(
                 "div",
                 {
                   "data-testid": `chat-message-${message.role}`,
@@ -2216,7 +2471,7 @@ function UseAIChatPanel({
                   onMouseEnter: () => message.role === "user" && setHoveredMessageId(message.id),
                   onMouseLeave: () => setHoveredMessageId(null),
                   children: [
-                    /* @__PURE__ */ jsxs7(
+                    /* @__PURE__ */ jsxs8(
                       "div",
                       {
                         style: {
@@ -2224,7 +2479,7 @@ function UseAIChatPanel({
                           maxWidth: "80%"
                         },
                         children: [
-                          message.role === "user" && hoveredMessageId === message.id && onSaveCommand && !slashCommands.isSavingCommand(message.id) && /* @__PURE__ */ jsx10(
+                          message.role === "user" && hoveredMessageId === message.id && onSaveCommand && !slashCommands.isSavingCommand(message.id) && /* @__PURE__ */ jsx11(
                             "button",
                             {
                               "data-testid": "save-command-button",
@@ -2260,14 +2515,14 @@ function UseAIChatPanel({
                                 e.currentTarget.style.transform = "scale(1)";
                                 e.currentTarget.style.boxShadow = "0 2px 6px rgba(0, 0, 0, 0.15)";
                               },
-                              children: /* @__PURE__ */ jsxs7("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                                /* @__PURE__ */ jsx10("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }),
-                                /* @__PURE__ */ jsx10("polyline", { points: "17 21 17 13 7 13 7 21" }),
-                                /* @__PURE__ */ jsx10("polyline", { points: "7 3 7 8 15 8" })
+                              children: /* @__PURE__ */ jsxs8("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                                /* @__PURE__ */ jsx11("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }),
+                                /* @__PURE__ */ jsx11("polyline", { points: "17 21 17 13 7 13 7 21" }),
+                                /* @__PURE__ */ jsx11("polyline", { points: "7 3 7 8 15 8" })
                               ] })
                             }
                           ),
-                          /* @__PURE__ */ jsxs7(
+                          /* @__PURE__ */ jsxs8(
                             "div",
                             {
                               "data-testid": "chat-message-content",
@@ -2282,7 +2537,7 @@ function UseAIChatPanel({
                                 wordWrap: "break-word"
                               },
                               children: [
-                                message.role === "user" && hasFileContent(message.content) && /* @__PURE__ */ jsx10("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px", marginBottom: "8px" }, children: message.content.filter((part) => part.type === "file").map((part, idx) => /* @__PURE__ */ jsx10(
+                                message.role === "user" && hasFileContent(message.content) && /* @__PURE__ */ jsx11("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px", marginBottom: "8px" }, children: message.content.filter((part) => part.type === "file").map((part, idx) => /* @__PURE__ */ jsx11(
                                   FilePlaceholder,
                                   {
                                     name: part.file.name,
@@ -2290,7 +2545,7 @@ function UseAIChatPanel({
                                   },
                                   idx
                                 )) }),
-                                message.role === "assistant" ? /* @__PURE__ */ jsx10(MarkdownContent, { content: getTextContent(message.content) }) : getTextContent(message.content)
+                                message.role === "assistant" ? /* @__PURE__ */ jsx11(MarkdownContent, { content: getTextContent(message.content) }) : getTextContent(message.content)
                               ]
                             }
                           ),
@@ -2301,7 +2556,7 @@ function UseAIChatPanel({
                         ]
                       }
                     ),
-                    message.role === "assistant" && message.traceId && feedbackEnabled && onFeedback && /* @__PURE__ */ jsxs7(
+                    message.role === "assistant" && message.traceId && feedbackEnabled && onFeedback && /* @__PURE__ */ jsxs8(
                       "div",
                       {
                         "data-testid": "feedback-buttons",
@@ -2312,7 +2567,7 @@ function UseAIChatPanel({
                           padding: "0 4px"
                         },
                         children: [
-                          /* @__PURE__ */ jsx10(
+                          /* @__PURE__ */ jsx11(
                             FeedbackButton,
                             {
                               type: "upvote",
@@ -2325,7 +2580,7 @@ function UseAIChatPanel({
                               unselectedColor: theme.secondaryTextColor
                             }
                           ),
-                          /* @__PURE__ */ jsx10(
+                          /* @__PURE__ */ jsx11(
                             FeedbackButton,
                             {
                               type: "downvote",
@@ -2341,7 +2596,7 @@ function UseAIChatPanel({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsx10(
+                    /* @__PURE__ */ jsx11(
                       "div",
                       {
                         style: {
@@ -2360,14 +2615,14 @@ function UseAIChatPanel({
                 },
                 message.id
               )),
-              loading && /* @__PURE__ */ jsx10(
+              loading && /* @__PURE__ */ jsx11(
                 "div",
                 {
                   style: {
                     display: "flex",
                     alignItems: "flex-start"
                   },
-                  children: /* @__PURE__ */ jsx10(
+                  children: /* @__PURE__ */ jsx11(
                     "div",
                     {
                       className: "markdown-content",
@@ -2380,20 +2635,20 @@ function UseAIChatPanel({
                         color: theme.textColor,
                         maxWidth: "80%"
                       },
-                      children: streamingText ? /* @__PURE__ */ jsx10(MarkdownContent, { content: streamingText }) : fileProcessing && fileProcessing.status === "processing" ? /* @__PURE__ */ jsxs7("div", { children: [
-                        /* @__PURE__ */ jsx10("span", { style: { opacity: 0.6 }, children: strings.input.processingFile }),
-                        fileProcessing.progress != null && /* @__PURE__ */ jsxs7(Fragment, { children: [
-                          /* @__PURE__ */ jsxs7("span", { style: { opacity: 0.6, marginLeft: "4px" }, children: [
+                      children: streamingText ? /* @__PURE__ */ jsx11(MarkdownContent, { content: streamingText }) : fileProcessing && fileProcessing.status === "processing" ? /* @__PURE__ */ jsxs8("div", { children: [
+                        /* @__PURE__ */ jsx11("span", { style: { opacity: 0.6 }, children: strings.input.processingFile }),
+                        fileProcessing.progress != null && /* @__PURE__ */ jsxs8(Fragment, { children: [
+                          /* @__PURE__ */ jsxs8("span", { style: { opacity: 0.6, marginLeft: "4px" }, children: [
                             Math.round(fileProcessing.progress),
                             "%"
                           ] }),
-                          /* @__PURE__ */ jsx10("div", { style: {
+                          /* @__PURE__ */ jsx11("div", { style: {
                             marginTop: "6px",
                             height: "4px",
                             borderRadius: "2px",
                             background: theme.borderColor,
                             overflow: "hidden"
-                          }, children: /* @__PURE__ */ jsx10("div", { style: {
+                          }, children: /* @__PURE__ */ jsx11("div", { style: {
                             height: "100%",
                             width: `${fileProcessing.progress}%`,
                             borderRadius: "2px",
@@ -2401,17 +2656,17 @@ function UseAIChatPanel({
                             transition: "width 0.3s ease"
                           } }) })
                         ] }),
-                        fileProcessing.progress == null && /* @__PURE__ */ jsx10("span", { className: "dots", style: { marginLeft: "4px" }, children: "..." })
-                      ] }) : /* @__PURE__ */ jsx10("span", { className: "dots", style: { opacity: 0.6 }, children: "..." })
+                        fileProcessing.progress == null && /* @__PURE__ */ jsx11("span", { className: "dots", style: { marginLeft: "4px" }, children: "..." })
+                      ] }) : /* @__PURE__ */ jsx11("span", { className: "dots", style: { opacity: 0.6 }, children: "..." })
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ jsx10("div", { ref: messagesEndRef })
+              /* @__PURE__ */ jsx11("div", { ref: messagesEndRef })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs7(
+        /* @__PURE__ */ jsxs8(
           "div",
           {
             style: {
@@ -2419,7 +2674,7 @@ function UseAIChatPanel({
               borderTop: `1px solid ${theme.borderColor}`
             },
             children: [
-              fileError && /* @__PURE__ */ jsx10(
+              fileError && /* @__PURE__ */ jsx11(
                 "div",
                 {
                   "data-testid": "file-error",
@@ -2434,7 +2689,7 @@ function UseAIChatPanel({
                   children: fileError
                 }
               ),
-              attachments.length > 0 && /* @__PURE__ */ jsx10(
+              attachments.length > 0 && /* @__PURE__ */ jsx11(
                 "div",
                 {
                   "data-testid": "file-attachments",
@@ -2444,7 +2699,7 @@ function UseAIChatPanel({
                     gap: "8px",
                     marginBottom: "8px"
                   },
-                  children: attachments.map((attachment) => /* @__PURE__ */ jsx10(
+                  children: attachments.map((attachment) => /* @__PURE__ */ jsx11(
                     FileChip,
                     {
                       attachment,
@@ -2456,143 +2711,159 @@ function UseAIChatPanel({
                   ))
                 }
               ),
-              /* @__PURE__ */ jsxs7(
-                "div",
+              /* @__PURE__ */ jsx11(
+                "input",
                 {
-                  style: {
-                    border: `1px solid ${theme.borderColor}`,
-                    borderRadius: "12px",
-                    background: theme.backgroundColor,
-                    overflow: "hidden",
-                    position: "relative"
-                  },
-                  children: [
-                    slashCommands.AutocompleteComponent,
-                    /* @__PURE__ */ jsx10(
-                      "input",
-                      {
-                        ref: fileInputRef,
-                        type: "file",
-                        multiple: true,
-                        "data-testid": "file-input",
-                        style: { display: "none" },
-                        onChange: handleFileInputChange,
-                        accept: acceptedTypes?.join(",")
-                      }
-                    ),
-                    /* @__PURE__ */ jsx10(
-                      "textarea",
-                      {
-                        ref: textareaRef,
-                        "data-testid": "chat-input",
-                        className: "chat-input",
-                        value: input,
-                        onChange: handleInputChange,
-                        onKeyDown: handleKeyDown,
-                        placeholder: !connected ? strings.input.connectingPlaceholder : loading ? `${executingTool?.displayText ?? strings.input.thinking}...` : strings.input.placeholder,
-                        disabled: !connected || loading,
-                        rows: 1,
-                        style: {
-                          width: "100%",
-                          padding: "10px 14px 6px",
-                          border: "none",
-                          fontSize: "14px",
-                          lineHeight: "1.4",
-                          resize: "none",
-                          maxHeight: `${maxTextareaHeight}px`,
-                          fontFamily: "inherit",
-                          outline: "none",
-                          background: "transparent",
-                          overflowY: "auto",
-                          boxSizing: "border-box"
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs7(
-                      "div",
-                      {
-                        style: {
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "space-between",
-                          padding: "4px 8px"
-                        },
-                        children: [
-                          /* @__PURE__ */ jsx10("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: fileUploadEnabled && /* @__PURE__ */ jsx10(
-                            "button",
-                            {
-                              "data-testid": "file-picker-button",
-                              onClick: openFilePicker,
-                              disabled: !connected || loading,
-                              style: {
-                                padding: "4px",
-                                background: "transparent",
-                                border: `1px solid ${theme.borderColor}`,
-                                borderRadius: "50%",
-                                cursor: connected && !loading ? "pointer" : "not-allowed",
-                                color: theme.secondaryTextColor,
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                width: "28px",
-                                height: "28px",
-                                transition: "all 0.15s",
-                                opacity: connected && !loading ? 1 : 0.5
-                              },
-                              onMouseEnter: (e) => {
-                                if (connected && !loading) {
-                                  e.currentTarget.style.color = theme.primaryColor;
-                                  e.currentTarget.style.borderColor = theme.primaryColor;
-                                }
-                              },
-                              onMouseLeave: (e) => {
-                                e.currentTarget.style.color = theme.secondaryTextColor;
-                                e.currentTarget.style.borderColor = theme.borderColor;
-                              },
-                              title: strings.fileUpload.attachFiles,
-                              children: /* @__PURE__ */ jsxs7("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                                /* @__PURE__ */ jsx10("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-                                /* @__PURE__ */ jsx10("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
-                              ] })
-                            }
-                          ) }),
-                          /* @__PURE__ */ jsx10(
-                            "button",
-                            {
-                              "data-testid": "chat-send-button",
-                              className: "chat-send-button",
-                              onClick: handleSend,
-                              disabled: !connected || loading || !input.trim() && attachments.length === 0,
-                              style: {
-                                padding: "6px",
-                                background: connected && !loading && (input.trim() || attachments.length > 0) ? theme.primaryGradient : theme.buttonDisabledBackground,
-                                color: connected && !loading && (input.trim() || attachments.length > 0) ? "white" : theme.secondaryTextColor,
-                                border: "none",
-                                borderRadius: "50%",
-                                cursor: connected && !loading && (input.trim() || attachments.length > 0) ? "pointer" : "not-allowed",
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                width: "32px",
-                                height: "32px",
-                                transition: "all 0.2s"
-                              },
-                              children: /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                                /* @__PURE__ */ jsx10("line", { x1: "12", y1: "19", x2: "12", y2: "5" }),
-                                /* @__PURE__ */ jsx10("polyline", { points: "5 12 12 5 19 12" })
-                              ] })
-                            }
-                          )
-                        ]
-                      }
-                    )
-                  ]
+                  ref: fileInputRef,
+                  type: "file",
+                  multiple: true,
+                  "data-testid": "file-input",
+                  style: { display: "none" },
+                  onChange: handleFileInputChange,
+                  accept: acceptedTypes?.join(",")
                 }
+              ),
+              pendingApprovals.length > 0 && onApproveToolCall && onRejectToolCall ? /* @__PURE__ */ jsx11(
+                ToolApprovalDialog,
+                {
+                  toolCallName: pendingApprovals[0].toolCallName,
+                  toolCallArgs: pendingApprovals[0].toolCallArgs,
+                  annotations: pendingApprovals[0].annotations,
+                  toolCount: pendingApprovals.length,
+                  pendingTools: pendingApprovals,
+                  onApprove: onApproveToolCall,
+                  onReject: onRejectToolCall,
+                  theme,
+                  strings
+                }
+              ) : (
+                /* Input container - single border around everything */
+                /* @__PURE__ */ jsxs8(
+                  "div",
+                  {
+                    style: {
+                      border: `1px solid ${theme.borderColor}`,
+                      borderRadius: "12px",
+                      background: theme.backgroundColor,
+                      overflow: "hidden",
+                      position: "relative"
+                    },
+                    children: [
+                      slashCommands.AutocompleteComponent,
+                      /* @__PURE__ */ jsx11(
+                        "textarea",
+                        {
+                          ref: textareaRef,
+                          "data-testid": "chat-input",
+                          className: "chat-input",
+                          value: input,
+                          onChange: handleInputChange,
+                          onKeyDown: handleKeyDown,
+                          placeholder: !connected ? strings.input.connectingPlaceholder : loading ? `${executingTool?.displayText ?? strings.input.thinking}...` : strings.input.placeholder,
+                          disabled: !connected || loading || pendingApprovals.length > 0,
+                          rows: 1,
+                          style: {
+                            width: "100%",
+                            padding: "10px 14px 6px",
+                            border: "none",
+                            fontSize: "14px",
+                            lineHeight: "1.4",
+                            resize: "none",
+                            maxHeight: `${maxTextareaHeight}px`,
+                            fontFamily: "inherit",
+                            outline: "none",
+                            background: "transparent",
+                            overflowY: "auto",
+                            boxSizing: "border-box"
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs8(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                            padding: "4px 8px"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx11("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: fileUploadEnabled && /* @__PURE__ */ jsx11(
+                              "button",
+                              {
+                                "data-testid": "file-picker-button",
+                                onClick: openFilePicker,
+                                disabled: !connected || loading || pendingApprovals.length > 0,
+                                style: {
+                                  padding: "4px",
+                                  background: "transparent",
+                                  border: `1px solid ${theme.borderColor}`,
+                                  borderRadius: "50%",
+                                  cursor: connected && !loading && pendingApprovals.length === 0 ? "pointer" : "not-allowed",
+                                  color: theme.secondaryTextColor,
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "center",
+                                  width: "28px",
+                                  height: "28px",
+                                  transition: "all 0.15s",
+                                  opacity: connected && !loading && pendingApprovals.length === 0 ? 1 : 0.5
+                                },
+                                onMouseEnter: (e) => {
+                                  if (connected && !loading && pendingApprovals.length === 0) {
+                                    e.currentTarget.style.color = theme.primaryColor;
+                                    e.currentTarget.style.borderColor = theme.primaryColor;
+                                  }
+                                },
+                                onMouseLeave: (e) => {
+                                  e.currentTarget.style.color = theme.secondaryTextColor;
+                                  e.currentTarget.style.borderColor = theme.borderColor;
+                                },
+                                title: strings.fileUpload.attachFiles,
+                                children: /* @__PURE__ */ jsxs8("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                                  /* @__PURE__ */ jsx11("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+                                  /* @__PURE__ */ jsx11("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+                                ] })
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsx11(
+                              "button",
+                              {
+                                "data-testid": "chat-send-button",
+                                className: "chat-send-button",
+                                onClick: handleSend,
+                                disabled: !connected || loading || pendingApprovals.length > 0 || !input.trim() && attachments.length === 0,
+                                style: {
+                                  padding: "6px",
+                                  background: connected && !loading && pendingApprovals.length === 0 && (input.trim() || attachments.length > 0) ? theme.primaryGradient : theme.buttonDisabledBackground,
+                                  color: connected && !loading && pendingApprovals.length === 0 && (input.trim() || attachments.length > 0) ? "white" : theme.secondaryTextColor,
+                                  border: "none",
+                                  borderRadius: "50%",
+                                  cursor: connected && !loading && pendingApprovals.length === 0 && (input.trim() || attachments.length > 0) ? "pointer" : "not-allowed",
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "center",
+                                  width: "32px",
+                                  height: "32px",
+                                  transition: "all 0.2s"
+                                },
+                                children: /* @__PURE__ */ jsxs8("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                                  /* @__PURE__ */ jsx11("line", { x1: "12", y1: "19", x2: "12", y2: "5" }),
+                                  /* @__PURE__ */ jsx11("polyline", { points: "5 12 12 5 19 12" })
+                                ] })
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsx10("style", { children: `
+        /* @__PURE__ */ jsx11("style", { children: `
         /* Markdown content styles */
         .markdown-content > :first-child {
           margin-top: 0 !important;
@@ -2617,7 +2888,7 @@ function UseAIChatPanel({
 }
 
 // src/components/UseAIFloatingChatWrapper.tsx
-import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function UseAIFloatingChatWrapper({
   isOpen,
   onClose,
@@ -2625,8 +2896,8 @@ function UseAIFloatingChatWrapper({
 }) {
   const theme = useTheme();
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
-    /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
+    /* @__PURE__ */ jsx12(
       "div",
       {
         style: {
@@ -2642,7 +2913,7 @@ function UseAIFloatingChatWrapper({
         onClick: onClose
       }
     ),
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12(
       "div",
       {
         style: {
@@ -2661,7 +2932,7 @@ function UseAIFloatingChatWrapper({
         children
       }
     ),
-    /* @__PURE__ */ jsx11("style", { children: `
+    /* @__PURE__ */ jsx12("style", { children: `
         @keyframes fadeIn {
           from { opacity: 0; }
           to { opacity: 1; }
@@ -2681,7 +2952,7 @@ function UseAIFloatingChatWrapper({
 }
 function CloseButton({ onClick }) {
   const theme = useTheme();
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "button",
     {
       "data-testid": "chat-close-button",
@@ -2716,7 +2987,7 @@ function CloseButton({ onClick }) {
 
 // src/components/UseAIChat.tsx
 import { createContext as createContext3, useContext as useContext3 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var __UseAIChatContext = createContext3(null);
 function useChatUIContext() {
   const context = useContext3(__UseAIChatContext);
@@ -2752,27 +3023,30 @@ function UseAIChat({ floating = false }) {
     onSaveCommand: ctx.commands.save,
     onRenameCommand: ctx.commands.rename,
     onDeleteCommand: ctx.commands.delete,
-    executingTool: ctx.executingTool,
+    executingTool: ctx.tools.executing,
     feedbackEnabled: ctx.feedback?.enabled,
-    onFeedback: ctx.feedback?.submit
+    onFeedback: ctx.feedback?.submit,
+    pendingApprovals: ctx.tools.pending.tools,
+    onApproveToolCall: ctx.tools.pending.tools.length > 0 ? ctx.tools.pending.approveAll : void 0,
+    onRejectToolCall: ctx.tools.pending.tools.length > 0 ? ctx.tools.pending.rejectAll : void 0
   };
   if (floating) {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       UseAIFloatingChatWrapper,
       {
         isOpen: ctx.ui.isOpen,
         onClose: () => ctx.ui.setOpen(false),
-        children: /* @__PURE__ */ jsx12(
+        children: /* @__PURE__ */ jsx13(
           UseAIChatPanel,
           {
             ...chatPanelProps,
-            closeButton: /* @__PURE__ */ jsx12(CloseButton, { onClick: () => ctx.ui.setOpen(false) })
+            closeButton: /* @__PURE__ */ jsx13(CloseButton, { onClick: () => ctx.ui.setOpen(false) })
           }
         )
       }
     );
   }
-  return /* @__PURE__ */ jsx12(UseAIChatPanel, { ...chatPanelProps });
+  return /* @__PURE__ */ jsx13(UseAIChatPanel, { ...chatPanelProps });
 }
 
 // src/client.ts
@@ -3019,7 +3293,8 @@ var UseAIClient = class {
       tools: this._tools.map((t) => ({
         name: t.name,
         description: t.description,
-        parameters: t.parameters
+        parameters: t.parameters,
+        annotations: t.annotations
       })),
       state: this._state,
       context: [],
@@ -3062,6 +3337,24 @@ var UseAIClient = class {
     this._messages.push(toolResultMsg);
     this.send(toolResultMessage);
   }
+  /**
+   * Sends a tool approval response back to the server.
+   *
+   * @param toolCallId - The ID of the tool call being approved/rejected
+   * @param approved - Whether the tool execution is approved
+   * @param reason - Optional reason for rejection (shown to AI)
+   */
+  sendToolApprovalResponse(toolCallId, approved, reason) {
+    const message = {
+      type: "tool_approval_response",
+      data: {
+        toolCallId,
+        approved,
+        reason
+      }
+    };
+    this.send(message);
+  }
   /**
    * Retrieves accumulated tool call data for a specific tool call ID.
    * Used to get the complete tool name and arguments after they've been streamed
@@ -3534,7 +3827,7 @@ var LocalStorageChatRepository = class {
 };
 
 // src/hooks/useChatManagement.ts
-import { useState as useState5, useCallback as useCallback4, useRef as useRef5, useEffect as useEffect5 } from "react";
+import { useState as useState6, useCallback as useCallback4, useRef as useRef5, useEffect as useEffect5 } from "react";
 var CHAT_TITLE_MAX_LENGTH = 50;
 function deepEquals(a, b) {
   return JSON.stringify(a) === JSON.stringify(b);
@@ -3577,10 +3870,11 @@ function useChatManagement({
   onSendMessage,
   setOpen,
   connected,
-  loading
+  loading,
+  hasPendingApproval
 }) {
-  const [currentChatId, setCurrentChatId] = useState5(null);
-  const [pendingChatId, setPendingChatId] = useState5(null);
+  const [currentChatId, setCurrentChatId] = useState6(null);
+  const [pendingChatId, setPendingChatId] = useState6(null);
   const currentChatIdSnapshot = useRef5(null);
   const pendingChatIdSnapshot = useRef5(null);
   useEffect5(() => {
@@ -3799,6 +4093,10 @@ function useChatManagement({
   useEffect5(() => {
     loadingRef.current = loading;
   }, [loading]);
+  const hasPendingApprovalRef = useRef5(hasPendingApproval);
+  useEffect5(() => {
+    hasPendingApprovalRef.current = hasPendingApproval;
+  }, [hasPendingApproval]);
   const processMessageQueue = useCallback4(async () => {
     if (isProcessingQueueRef.current || pendingMessagesRef.current.length === 0 || !onSendMessage) {
       return;
@@ -3833,16 +4131,16 @@ function useChatManagement({
         setOpen(true);
       }
       await new Promise((resolve) => {
-        const checkLoading = () => {
+        const checkReady = () => {
           setTimeout(() => {
-            if (!loadingRef.current) {
+            if (!loadingRef.current && !hasPendingApprovalRef.current) {
               resolve();
             } else {
-              checkLoading();
+              checkReady();
             }
           }, 100);
         };
-        checkLoading();
+        checkReady();
       });
     }
     isProcessingQueueRef.current = false;
@@ -3879,7 +4177,7 @@ function useChatManagement({
 }
 
 // src/hooks/useAgentSelection.ts
-import { useState as useState6, useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo3 } from "react";
+import { useState as useState7, useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo3 } from "react";
 function filterAgents(serverAgents, defaultAgentId, visibleAgentIds) {
   const getDefaultAgentFallback = () => {
     const defaultAgentInfo = serverAgents.find((a) => a.id === defaultAgentId);
@@ -3905,9 +4203,9 @@ function useAgentSelection({
   connected,
   visibleAgentIds
 }) {
-  const [serverAgents, setServerAgents] = useState6([]);
-  const [defaultAgent, setDefaultAgent] = useState6(null);
-  const [selectedAgent, setSelectedAgent] = useState6(null);
+  const [serverAgents, setServerAgents] = useState7([]);
+  const [defaultAgent, setDefaultAgent] = useState7(null);
+  const [selectedAgent, setSelectedAgent] = useState7(null);
   const availableAgents = useMemo3(
     () => filterAgents(serverAgents, defaultAgent, visibleAgentIds),
     [serverAgents, defaultAgent, visibleAgentIds]
@@ -3944,7 +4242,7 @@ function useAgentSelection({
 }
 
 // src/hooks/useCommandManagement.ts
-import { useState as useState7, useCallback as useCallback6, useRef as useRef6, useEffect as useEffect7 } from "react";
+import { useState as useState8, useCallback as useCallback6, useRef as useRef6, useEffect as useEffect7 } from "react";
 
 // src/commands/LocalStorageCommandRepository.ts
 var STORAGE_KEY_PREFIX2 = "use-ai:command:";
@@ -4077,7 +4375,7 @@ function useCommandManagement({
   const repositoryRef = useRef6(
     repository || new LocalStorageCommandRepository()
   );
-  const [commands, setCommands] = useState7([]);
+  const [commands, setCommands] = useState8([]);
   const refreshCommands = useCallback6(async () => {
     try {
       const cmdList = await repositoryRef.current.listCommands();
@@ -4119,10 +4417,10 @@ function useCommandManagement({
 }
 
 // src/hooks/useToolRegistry.ts
-import { useState as useState8, useCallback as useCallback7, useRef as useRef7, useMemo as useMemo4 } from "react";
+import { useState as useState9, useCallback as useCallback7, useRef as useRef7, useMemo as useMemo4 } from "react";
 function useToolRegistry() {
   const toolRegistryRef = useRef7(/* @__PURE__ */ new Map());
-  const [toolRegistryVersion, setToolRegistryVersion] = useState8(0);
+  const [toolRegistryVersion, setToolRegistryVersion] = useState9(0);
   const toolOwnershipRef = useRef7(/* @__PURE__ */ new Map());
   const invisibleRef = useRef7(/* @__PURE__ */ new Set());
   const registerTools = useCallback7((id, tools, options) => {
@@ -4182,7 +4480,7 @@ function useToolRegistry() {
 }
 
 // src/hooks/usePromptState.ts
-import { useState as useState9, useCallback as useCallback8, useRef as useRef8, useMemo as useMemo5, useEffect as useEffect8 } from "react";
+import { useState as useState10, useCallback as useCallback8, useRef as useRef8, useMemo as useMemo5, useEffect as useEffect8 } from "react";
 function usePromptState({
   systemPrompt,
   clientRef,
@@ -4191,7 +4489,7 @@ function usePromptState({
   const promptsRef = useRef8(/* @__PURE__ */ new Map());
   const suggestionsRef = useRef8(/* @__PURE__ */ new Map());
   const waitersRef = useRef8(/* @__PURE__ */ new Map());
-  const [suggestionsVersion, setSuggestionsVersion] = useState9(0);
+  const [suggestionsVersion, setSuggestionsVersion] = useState10(0);
   const buildStateFromPrompts = useCallback8(() => {
     const promptParts = [];
     if (systemPrompt) {
@@ -4254,14 +4552,14 @@ function usePromptState({
 }
 
 // src/hooks/useFeedback.ts
-import { useState as useState10, useEffect as useEffect9, useRef as useRef9, useCallback as useCallback9 } from "react";
+import { useState as useState11, useEffect as useEffect9, useRef as useRef9, useCallback as useCallback9 } from "react";
 function useFeedback({
   clientRef,
   repository,
   getDisplayedChatId,
   setMessages
 }) {
-  const [enabled, setEnabled] = useState10(false);
+  const [enabled, setEnabled] = useState11(false);
   const enabledRef = useRef9(false);
   useEffect9(() => {
     enabledRef.current = enabled;
@@ -4315,8 +4613,120 @@ function useFeedback({
   };
 }
 
+// src/hooks/useToolExecution.ts
+import { useState as useState12, useCallback as useCallback10, useRef as useRef10 } from "react";
+function useToolExecution({
+  clientRef,
+  aggregatedToolsRef,
+  toolOwnershipRef,
+  promptsRef,
+  isInvisible,
+  getWaiter
+}) {
+  const [pendingApprovals, setPendingApprovals] = useState12([]);
+  const pendingApprovalToolCallsRef = useRef10(/* @__PURE__ */ new Map());
+  const handleApprovalRequest = useCallback10((event) => {
+    console.log("[useToolExecution] Tool approval requested:", event.toolCallName, event.toolCallId);
+    setPendingApprovals((prev) => [
+      ...prev,
+      {
+        toolCallId: event.toolCallId,
+        toolCallName: event.toolCallName,
+        toolCallArgs: event.toolCallArgs,
+        annotations: event.annotations
+      }
+    ]);
+  }, []);
+  const executeToolCall = useCallback10(async (toolCallId, name, input) => {
+    const client = clientRef.current;
+    if (!client) {
+      console.error("[useToolExecution] No client available for tool execution");
+      return;
+    }
+    try {
+      const ownerId = toolOwnershipRef.current.get(name);
+      console.log(`[useToolExecution] Tool "${name}" owned by component:`, ownerId);
+      console.log("[useToolExecution] Executing tool...");
+      const result = await executeDefinedTool(aggregatedToolsRef.current, name, input);
+      const isErrorResult = result && typeof result === "object" && ("error" in result || result.success === false);
+      const ownerIsInvisible = ownerId ? isInvisible(ownerId) : false;
+      if (ownerId && !isErrorResult && !ownerIsInvisible) {
+        const waiter = getWaiter(ownerId);
+        if (waiter) {
+          console.log(`[useToolExecution] Waiting for prompt change from ${ownerId}...`);
+          await waiter();
+          console.log("[useToolExecution] Prompt change wait complete");
+        }
+      } else if (isErrorResult) {
+        console.log("[useToolExecution] Tool returned error, skipping prompt wait");
+      } else if (ownerIsInvisible) {
+        console.log("[useToolExecution] Component is invisible, skipping prompt wait");
+      }
+      let updatedState = null;
+      if (ownerId) {
+        const prompt = promptsRef.current.get(ownerId);
+        if (prompt) {
+          updatedState = { context: prompt };
+          console.log(`[useToolExecution] Updated state from ${ownerId}`);
+        }
+      }
+      client.sendToolResponse(toolCallId, result, updatedState);
+    } catch (err) {
+      console.error("Tool execution error:", err);
+      client.sendToolResponse(toolCallId, {
+        error: err instanceof Error ? err.message : "Unknown error"
+      });
+    }
+  }, [clientRef, aggregatedToolsRef, toolOwnershipRef, promptsRef, isInvisible, getWaiter]);
+  const storePendingToolCall = useCallback10((toolCallId, name, input, toolCallData) => {
+    console.log(`[useToolExecution] Storing pending tool call "${name}" for approval`);
+    pendingApprovalToolCallsRef.current.set(toolCallId, { name, input, toolCallData });
+  }, []);
+  const executePendingToolAfterApproval = useCallback10(async (toolCallId) => {
+    const pendingTool = pendingApprovalToolCallsRef.current.get(toolCallId);
+    if (!pendingTool) {
+      console.warn(`[useToolExecution] No pending tool found for ${toolCallId}`);
+      return;
+    }
+    pendingApprovalToolCallsRef.current.delete(toolCallId);
+    await executeToolCall(toolCallId, pendingTool.name, pendingTool.input);
+  }, [executeToolCall]);
+  const approveAll = useCallback10(async () => {
+    if (!clientRef.current) return;
+    console.log("[useToolExecution] Approving all tool calls:", pendingApprovals.length);
+    const pendingTools = [...pendingApprovals];
+    for (const pending of pendingTools) {
+      clientRef.current.sendToolApprovalResponse(pending.toolCallId, true);
+    }
+    setPendingApprovals([]);
+    for (const tool of pendingTools) {
+      await executePendingToolAfterApproval(tool.toolCallId);
+    }
+  }, [clientRef, pendingApprovals, executePendingToolAfterApproval]);
+  const rejectAll = useCallback10((reason) => {
+    if (!clientRef.current) return;
+    console.log("[useToolExecution] Rejecting all tool calls:", pendingApprovals.length, reason);
+    const pendingTools = [...pendingApprovals];
+    for (const pending of pendingTools) {
+      clientRef.current.sendToolApprovalResponse(pending.toolCallId, false, reason);
+    }
+    setPendingApprovals([]);
+    for (const tool of pendingTools) {
+      pendingApprovalToolCallsRef.current.delete(tool.toolCallId);
+    }
+  }, [clientRef, pendingApprovals]);
+  return {
+    pendingApprovals,
+    handleApprovalRequest,
+    executeToolCall,
+    storePendingToolCall,
+    approveAll,
+    rejectAll
+  };
+}
+
 // src/providers/useAIProvider.tsx
-import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 var __UseAIContext = createContext4(null);
 var hasWarnedAboutMissingProvider = false;
 var noOpContextValue = {
@@ -4396,24 +4806,24 @@ function UseAIProvider({
   const fileUploadConfig = fileUploadConfigProp === false ? void 0 : fileUploadConfigProp ?? DEFAULT_FILE_UPLOAD_CONFIG;
   const theme = { ...defaultTheme, ...customTheme };
   const strings = { ...defaultStrings, ...customStrings };
-  const [connected, setConnected] = useState11(false);
-  const [isChatOpen, setIsChatOpen] = useState11(false);
-  const [loading, setLoading] = useState11(false);
-  const [messages, setMessages] = useState11([]);
-  const [fileProcessingState, setFileProcessingState] = useState11(null);
-  const handleSetChatOpen = useCallback10((open) => {
+  const [connected, setConnected] = useState13(false);
+  const [isChatOpen, setIsChatOpen] = useState13(false);
+  const [loading, setLoading] = useState13(false);
+  const [messages, setMessages] = useState13([]);
+  const [fileProcessingState, setFileProcessingState] = useState13(null);
+  const handleSetChatOpen = useCallback11((open) => {
     setIsChatOpen(open);
     onOpenChange?.(open);
   }, [onOpenChange]);
-  const [streamingText, setStreamingText] = useState11("");
-  const streamingChatIdRef = useRef10(null);
-  const [executingTool, setExecutingTool] = useState11(null);
-  const executingToolFallbackRef = useRef10(null);
-  const clientRef = useRef10(null);
-  const repositoryRef = useRef10(
+  const [streamingText, setStreamingText] = useState13("");
+  const streamingChatIdRef = useRef11(null);
+  const [executingTool, setExecutingTool] = useState13(null);
+  const executingToolFallbackRef = useRef11(null);
+  const clientRef = useRef11(null);
+  const repositoryRef = useRef11(
     chatRepository || new LocalStorageChatRepository()
   );
-  const handleSendMessageRef = useRef10(null);
+  const handleSendMessageRef = useRef11(null);
   const {
     registerTools,
     unregisterTools,
@@ -4435,11 +4845,19 @@ function UseAIProvider({
     clientRef,
     connected
   });
-  const stableSendMessage = useCallback10(async (message, attachments) => {
+  const stableSendMessage = useCallback11(async (message, attachments) => {
     if (handleSendMessageRef.current) {
       await handleSendMessageRef.current(message, attachments);
     }
   }, []);
+  const toolExecution = useToolExecution({
+    clientRef,
+    aggregatedToolsRef,
+    toolOwnershipRef,
+    promptsRef,
+    isInvisible,
+    getWaiter
+  });
   const chatManagement = useChatManagement({
     repository: repositoryRef.current,
     clientRef,
@@ -4448,7 +4866,8 @@ function UseAIProvider({
     onSendMessage: stableSendMessage,
     setOpen: handleSetChatOpen,
     connected,
-    loading
+    loading,
+    hasPendingApproval: toolExecution.pendingApprovals.length > 0
   });
   const {
     currentChatId,
@@ -4518,44 +4937,20 @@ function UseAIProvider({
         }
         const name = toolCallData.name;
         const input = JSON.parse(toolCallData.args);
-        if (!aggregatedToolsRef.current[name]) {
+        const tool = aggregatedToolsRef.current[name];
+        if (!tool) {
           console.log(`[Provider] Tool "${name}" not found in useAI tools, skipping (likely a workflow tool)`);
           return;
         }
-        try {
-          const ownerId = toolOwnershipRef.current.get(name);
-          console.log(`[useAI] Tool "${name}" owned by component:`, ownerId);
-          console.log("[useAI] Executing tool...");
-          const result = await executeDefinedTool(aggregatedToolsRef.current, name, input);
-          const isErrorResult = result && typeof result === "object" && ("error" in result || result.success === false);
-          const ownerIsInvisible = ownerId ? isInvisible(ownerId) : false;
-          if (ownerId && !isErrorResult && !ownerIsInvisible) {
-            const waiter = getWaiter(ownerId);
-            if (waiter) {
-              console.log(`[useAI] Waiting for prompt change from ${ownerId}...`);
-              await waiter();
-              console.log("[useAI] Prompt change wait complete");
-            }
-          } else if (isErrorResult) {
-            console.log("[useAI] Tool returned error, skipping prompt wait");
-          } else if (ownerIsInvisible) {
-            console.log("[useAI] Component is invisible, skipping prompt wait");
-          }
-          let updatedState = null;
-          if (ownerId) {
-            const prompt = promptsRef.current.get(ownerId);
-            if (prompt) {
-              updatedState = { context: prompt };
-              console.log(`[useAI] Updated state from ${ownerId}`);
-            }
-          }
-          client.sendToolResponse(toolCallId, result, updatedState);
-        } catch (err) {
-          console.error("Tool execution error:", err);
-          client.sendToolResponse(toolCallId, {
-            error: err instanceof Error ? err.message : "Unknown error"
-          });
+        if (tool._options?.annotations?.destructiveHint === true) {
+          console.log(`[Provider] Tool "${name}" requires approval, deferring execution`);
+          toolExecution.storePendingToolCall(toolCallId, name, input, toolCallData);
+          return;
         }
+        await toolExecution.executeToolCall(toolCallId, name, input);
+      } else if (event.type === TOOL_APPROVAL_REQUEST) {
+        const e = event;
+        toolExecution.handleApprovalRequest(e);
       } else if (event.type === EventType.TEXT_MESSAGE_CONTENT) {
         const contentEvent = event;
         setStreamingText((prev) => prev + contentEvent.delta);
@@ -4595,7 +4990,7 @@ function UseAIProvider({
       client.setMcpHeadersProvider(mcpHeadersProvider);
     }
   }, [mcpHeadersProvider]);
-  const lastRegisteredToolsRef = useRef10("");
+  const lastRegisteredToolsRef = useRef11("");
   useEffect10(() => {
     const client = clientRef.current;
     if (!client || !client.isConnected() || !hasTools) return;
@@ -4614,7 +5009,7 @@ function UseAIProvider({
       console.error("Failed to register tools:", err);
     }
   }, [hasTools, aggregatedTools, connected]);
-  const handleSendMessage = useCallback10(async (message, attachments) => {
+  const handleSendMessage = useCallback11(async (message, attachments) => {
     if (!clientRef.current) return;
     setStreamingText("");
     const activatedChatId = activatePendingChat();
@@ -4746,7 +5141,14 @@ function UseAIProvider({
       isOpen: isChatOpen,
       setOpen: handleSetChatOpen
     },
-    executingTool: executingToolDisplay,
+    tools: {
+      executing: executingToolDisplay,
+      pending: {
+        tools: toolExecution.pendingApprovals,
+        approveAll: toolExecution.approveAll,
+        rejectAll: toolExecution.rejectAll
+      }
+    },
     feedback: {
       enabled: feedback.enabled,
       submit: feedback.submitFeedback
@@ -4779,21 +5181,24 @@ function UseAIProvider({
     onDeleteCommand: deleteCommand,
     executingTool: executingToolDisplay,
     feedbackEnabled: feedback.enabled,
-    onFeedback: feedback.submitFeedback
+    onFeedback: feedback.submitFeedback,
+    pendingApprovals: toolExecution.pendingApprovals,
+    onApproveToolCall: toolExecution.pendingApprovals.length > 0 ? toolExecution.approveAll : void 0,
+    onRejectToolCall: toolExecution.pendingApprovals.length > 0 ? toolExecution.rejectAll : void 0
   };
   const renderDefaultChat = () => {
     if (isUIDisabled) return null;
-    return /* @__PURE__ */ jsx13(UseAIFloatingChatWrapper, { isOpen: isChatOpen, onClose: () => handleSetChatOpen(false), children: /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(UseAIFloatingChatWrapper, { isOpen: isChatOpen, onClose: () => handleSetChatOpen(false), children: /* @__PURE__ */ jsx14(
       UseAIChatPanel,
       {
         ...chatPanelProps,
-        closeButton: /* @__PURE__ */ jsx13(CloseButton, { onClick: () => handleSetChatOpen(false) })
+        closeButton: /* @__PURE__ */ jsx14(CloseButton, { onClick: () => handleSetChatOpen(false) })
       }
     ) });
   };
   const renderCustomChat = () => {
     if (!CustomChat) return null;
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       CustomChat,
       {
         isOpen: isChatOpen,
@@ -4812,8 +5217,8 @@ function UseAIProvider({
   };
   const renderBuiltInChat = () => {
     if (!renderChat) return null;
-    return /* @__PURE__ */ jsxs9(Fragment3, { children: [
-      ButtonComponent && /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsxs10(Fragment3, { children: [
+      ButtonComponent && /* @__PURE__ */ jsx14(
         ButtonComponent,
         {
           onClick: () => handleSetChatOpen(true),
@@ -4823,7 +5228,7 @@ function UseAIProvider({
       hasCustomChat ? renderCustomChat() : renderDefaultChat()
     ] });
   };
-  return /* @__PURE__ */ jsx13(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx13(StringsContext.Provider, { value: strings, children: /* @__PURE__ */ jsx13(__UseAIContext.Provider, { value, children: /* @__PURE__ */ jsxs9(__UseAIChatContext.Provider, { value: chatUIContextValue, children: [
+  return /* @__PURE__ */ jsx14(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx14(StringsContext.Provider, { value: strings, children: /* @__PURE__ */ jsx14(__UseAIContext.Provider, { value, children: /* @__PURE__ */ jsxs10(__UseAIChatContext.Provider, { value: chatUIContextValue, children: [
     children,
     renderBuiltInChat()
   ] }) }) }) });
@@ -4843,11 +5248,11 @@ function useAIContext() {
 }
 
 // src/hooks/useStableTools.ts
-import { useRef as useRef11 } from "react";
+import { useRef as useRef12 } from "react";
 function useStableTools(tools) {
-  const latestToolsRef = useRef11({});
-  const stableToolsRef = useRef11({});
-  const prevToolNamesRef = useRef11("");
+  const latestToolsRef = useRef12({});
+  const stableToolsRef = useRef12({});
+  const prevToolNamesRef = useRef12("");
   if (!tools) {
     latestToolsRef.current = {};
     return void 0;
@@ -4917,13 +5322,13 @@ function useAI(options = {}) {
   const { connected, tools, client, prompts } = useAIContext();
   const { register: registerTools, unregister: unregisterTools } = tools;
   const { update: updatePrompt, registerWaiter, unregisterWaiter } = prompts;
-  const [response, setResponse] = useState12(null);
-  const [loading, setLoading] = useState12(false);
-  const [error, setError] = useState12(null);
-  const hookId = useRef12(`useAI-${Math.random().toString(36).substr(2, 9)}`);
-  const toolsRef = useRef12({});
-  const componentRef = useRef12(null);
-  const promptChangeResolvers = useRef12([]);
+  const [response, setResponse] = useState14(null);
+  const [loading, setLoading] = useState14(false);
+  const [error, setError] = useState14(null);
+  const hookId = useRef13(`useAI-${Math.random().toString(36).substr(2, 9)}`);
+  const toolsRef = useRef13({});
+  const componentRef = useRef13(null);
+  const promptChangeResolvers = useRef13([]);
   const stableTools = useStableTools(options.tools);
   const toolsKey = useMemo6(() => {
     if (!options.tools) return "";
@@ -4935,7 +5340,7 @@ function useAI(options = {}) {
       componentRef.current.setAttribute("data-useai-context", "true");
     }
   }, []);
-  const waitForPromptChange = useCallback11(() => {
+  const waitForPromptChange = useCallback12(() => {
     return new Promise((resolve) => {
       const timeoutMs = 100;
       const timeoutId = setTimeout(() => {
@@ -4967,7 +5372,7 @@ function useAI(options = {}) {
       promptChangeResolvers.current = [];
     }
   }, [enabled, options.prompt, memoizedSuggestions, updatePrompt]);
-  const updatePromptRef = useRef12(updatePrompt);
+  const updatePromptRef = useRef13(updatePrompt);
   updatePromptRef.current = updatePrompt;
   useEffect11(() => {
     const id = hookId.current;
@@ -4998,7 +5403,7 @@ function useAI(options = {}) {
       unsubscribe();
     };
   }, [enabled, client]);
-  const handleAGUIEvent = useCallback11(async (event) => {
+  const handleAGUIEvent = useCallback12(async (event) => {
     switch (event.type) {
       case EventType.TEXT_MESSAGE_END: {
         const content = client?.currentMessageContent;
@@ -5018,7 +5423,7 @@ function useAI(options = {}) {
       }
     }
   }, [client, options.onError]);
-  const generate = useCallback11(async (prompt) => {
+  const generate = useCallback12(async (prompt) => {
     if (!enabled) {
       const error2 = new Error("AI features are disabled");
       setError(error2);
@@ -5054,17 +5459,17 @@ function useAI(options = {}) {
 }
 
 // src/useAIWorkflow.ts
-import { useState as useState13, useCallback as useCallback12, useRef as useRef13, useEffect as useEffect12 } from "react";
+import { useState as useState15, useCallback as useCallback13, useRef as useRef14, useEffect as useEffect12 } from "react";
 import { EventType as EventType3 } from "@meetsmore-oss/use-ai-core";
 import { v4 as uuidv43 } from "uuid";
 function useAIWorkflow(runner, workflowId) {
   const { connected, client } = useAIContext();
-  const [status, setStatus] = useState13("idle");
-  const [text, setText] = useState13(null);
-  const [error, setError] = useState13(null);
-  const currentWorkflowRef = useRef13(null);
-  const eventListenerIdRef = useRef13(`useAIWorkflow-${Math.random().toString(36).substr(2, 9)}`);
-  const handleWorkflowEvent = useCallback12(async (event) => {
+  const [status, setStatus] = useState15("idle");
+  const [text, setText] = useState15(null);
+  const [error, setError] = useState15(null);
+  const currentWorkflowRef = useRef14(null);
+  const eventListenerIdRef = useRef14(`useAIWorkflow-${Math.random().toString(36).substr(2, 9)}`);
+  const handleWorkflowEvent = useCallback13(async (event) => {
     const currentWorkflow = currentWorkflowRef.current;
     if (!currentWorkflow) return;
     if (event.type === EventType3.RUN_STARTED) {
@@ -5156,7 +5561,7 @@ function useAIWorkflow(runner, workflowId) {
       unsubscribe();
     };
   }, [client, handleWorkflowEvent]);
-  const trigger = useCallback12(async (options) => {
+  const trigger = useCallback13(async (options) => {
     if (!client?.isConnected()) {
       const err = new Error("Not connected to server");
       setError(err);
@@ -5232,7 +5637,7 @@ export {
   defaultTheme,
   defineTool,
   executeDefinedTool,
-  findTransformer,
+  findTransformerPattern,
   generateChatId,
   generateCommandId,
   generateMessageId,