@ai-me-chat/react 0.2.1 → 0.3.0

package/dist/index.cjs

@@ -25,6 +25,7 @@ __export(index_exports, {
   AIMeCommandPalette: () => AIMeCommandPalette,
   AIMeConfirm: () => AIMeConfirm,
   AIMeProvider: () => AIMeProvider,
+  cleanAssistantText: () => cleanAssistantText,
   renderMarkdown: () => renderMarkdown,
   useAIMe: () => useAIMe,
   useAIMeContext: () => useAIMeContext
@@ -44,20 +45,35 @@ function useAIMeContext() {
 
 // src/provider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function AIMeProvider({ endpoint, headers, onAction, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AIMeContext, { value: { endpoint, headers, onAction }, children });
+function AIMeProvider({ endpoint, headers, onAction, stuckTimeout, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AIMeContext, { value: { endpoint, headers, onAction, stuckTimeout }, children });
 }
 
 // src/chat.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/use-ai-me.ts
 var import_react2 = require("@ai-sdk/react");
 var import_ai = require("ai");
 var import_react3 = require("react");
 var STORAGE_KEY = "ai-me-messages";
+function cleanAssistantText(text) {
+  return text.replace(/<tools>[\s\S]*?<\/tools>/g, "").trim();
+}
+function trimIncompleteToolCalls(messages) {
+  if (messages.length === 0) return messages;
+  const last = messages[messages.length - 1];
+  if (last.role !== "assistant") return messages;
+  const hasToolCall = last.parts.some((p) => p.type === "tool-call");
+  const hasToolResult = last.parts.some((p) => p.type === "tool-result");
+  if (hasToolCall && !hasToolResult) {
+    return messages.slice(0, -1);
+  }
+  return messages;
+}
 function useAIMe() {
-  const { endpoint, headers } = useAIMeContext();
+  const { endpoint, headers, stuckTimeout: configuredTimeout } = useAIMeContext();
+  const stuckTimeout = configuredTimeout ?? 3e4;
   const [input, setInput] = (0, import_react3.useState)("");
   const initialized = (0, import_react3.useRef)(false);
   const chat = (0, import_react2.useChat)({
@@ -66,6 +82,24 @@ function useAIMe() {
       headers
     })
   });
+  const messages = (0, import_react3.useMemo)(() => {
+    return chat.messages.map((m) => {
+      if (m.role !== "assistant") return m;
+      let changed = false;
+      const cleanedParts = m.parts.map((p) => {
+        if (p.type !== "text") return p;
+        const cleaned = cleanAssistantText(p.text);
+        if (cleaned === p.text) return p;
+        changed = true;
+        return { ...p, text: cleaned };
+      });
+      if (!changed) return m;
+      const nonEmptyParts = cleanedParts.filter(
+        (p) => p.type !== "text" || p.text.length > 0
+      );
+      return { ...m, parts: nonEmptyParts };
+    });
+  }, [chat.messages]);
   (0, import_react3.useEffect)(() => {
     if (initialized.current) return;
     initialized.current = true;
@@ -74,7 +108,10 @@ function useAIMe() {
       if (stored) {
         const parsed = JSON.parse(stored);
         if (Array.isArray(parsed) && parsed.length > 0) {
-          chat.setMessages(parsed);
+          const cleaned = trimIncompleteToolCalls(parsed);
+          if (cleaned.length > 0) {
+            chat.setMessages(cleaned);
+          }
         }
       }
     } catch {
@@ -91,6 +128,14 @@ function useAIMe() {
     } catch {
     }
   }, [chat.messages]);
+  (0, import_react3.useEffect)(() => {
+    if (stuckTimeout <= 0) return;
+    if (chat.status !== "submitted") return;
+    const timer = setTimeout(() => {
+      chat.stop();
+    }, stuckTimeout);
+    return () => clearTimeout(timer);
+  }, [chat.status, stuckTimeout, chat.stop]);
   const handleInputChange = (0, import_react3.useCallback)(
     (e) => {
       setInput(e.target.value);
@@ -115,7 +160,7 @@ function useAIMe() {
   }, [chat]);
   return {
     /** Conversation messages */
-    messages: chat.messages,
+    messages,
     /** Current input value */
     input,
     /** Set input value */
@@ -135,7 +180,9 @@ function useAIMe() {
     /** Set messages */
     setMessages: chat.setMessages,
     /** Clear all messages and session storage */
-    clearMessages
+    clearMessages,
+    /** Approve or reject a pending tool call (for confirmation flow) */
+    addToolApprovalResponse: chat.addToolApprovalResponse
   };
 }
 
@@ -337,8 +384,197 @@ var linkStyle = {
   textUnderlineOffset: "2px"
 };
 
-// src/chat.tsx
+// src/confirm.tsx
+var import_react4 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
+function AIMeConfirm({
+  action,
+  description,
+  parameters,
+  onConfirm,
+  onReject
+}) {
+  const dialogRef = (0, import_react4.useRef)(null);
+  const cancelButtonRef = (0, import_react4.useRef)(null);
+  const titleId = (0, import_react4.useId)();
+  const descriptionId = (0, import_react4.useId)();
+  const handleKeyDown = (0, import_react4.useCallback)(
+    (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onReject();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const dialog = dialogRef.current;
+      if (!dialog) return;
+      const focusable = dialog.querySelectorAll(
+        'button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      );
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    },
+    [onReject]
+  );
+  (0, import_react4.useEffect)(() => {
+    const previousFocus = document.activeElement;
+    cancelButtonRef.current?.focus();
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      previousFocus?.focus();
+    };
+  }, [handleKeyDown]);
+  const overlayStyle = {
+    ...defaultThemeVars,
+    position: "fixed",
+    inset: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.4)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1e4,
+    fontFamily: "var(--ai-me-font)"
+  };
+  const dialogStyle = {
+    backgroundColor: "var(--ai-me-bg)",
+    borderRadius: "var(--ai-me-radius)",
+    padding: 24,
+    maxWidth: 420,
+    width: "90%",
+    boxShadow: "var(--ai-me-shadow)",
+    color: "var(--ai-me-text)"
+  };
+  const focusStyle = {
+    outline: "2px solid transparent",
+    outlineOffset: 2
+  };
+  function applyFocusRing(el) {
+    el.style.outline = "2px solid var(--ai-me-primary)";
+    el.style.outlineOffset = "2px";
+  }
+  function removeFocusRing(el) {
+    el.style.outline = "2px solid transparent";
+    el.style.outlineOffset = "2px";
+  }
+  return (
+    // Overlay is presentational — role and aria go on the inner dialog
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        style: overlayStyle,
+        onClick: (e) => {
+          if (e.target === e.currentTarget) onReject();
+        },
+        "aria-hidden": "false",
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            ref: dialogRef,
+            style: dialogStyle,
+            role: "alertdialog",
+            "aria-modal": "true",
+            "aria-labelledby": titleId,
+            "aria-describedby": descriptionId,
+            tabIndex: -1,
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { id: titleId, style: { margin: "0 0 8px", fontSize: 16 }, children: "Confirm Action" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { margin: "0 0 4px", fontSize: 14, fontWeight: 600 }, children: action }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "p",
+                {
+                  id: descriptionId,
+                  style: {
+                    margin: "0 0 16px",
+                    fontSize: 13,
+                    color: "var(--ai-me-text-secondary)"
+                  },
+                  children: description
+                }
+              ),
+              parameters && Object.keys(parameters).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "pre",
+                {
+                  style: {
+                    margin: "0 0 16px",
+                    padding: 12,
+                    backgroundColor: "var(--ai-me-bg-secondary)",
+                    borderRadius: 8,
+                    fontSize: 12,
+                    overflow: "auto",
+                    maxHeight: 200,
+                    border: "1px solid var(--ai-me-border)"
+                  },
+                  children: JSON.stringify(parameters, null, 2)
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "button",
+                  {
+                    ref: cancelButtonRef,
+                    type: "button",
+                    onClick: onReject,
+                    style: {
+                      padding: "8px 16px",
+                      border: "1px solid var(--ai-me-border)",
+                      borderRadius: 8,
+                      backgroundColor: "var(--ai-me-bg)",
+                      color: "var(--ai-me-text)",
+                      cursor: "pointer",
+                      fontSize: 14,
+                      ...focusStyle
+                    },
+                    onFocus: (e) => applyFocusRing(e.currentTarget),
+                    onBlur: (e) => removeFocusRing(e.currentTarget),
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onConfirm,
+                    style: {
+                      padding: "8px 16px",
+                      border: "none",
+                      borderRadius: 8,
+                      // #fff on var(--ai-me-primary) = #6366f1 → contrast ≈ 4.6:1 (passes AA)
+                      backgroundColor: "var(--ai-me-primary)",
+                      color: "#fff",
+                      cursor: "pointer",
+                      fontSize: 14,
+                      ...focusStyle
+                    },
+                    onFocus: (e) => applyFocusRing(e.currentTarget),
+                    onBlur: (e) => removeFocusRing(e.currentTarget),
+                    children: "Confirm"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  );
+}
+
+// src/chat.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var srOnly = {
   position: "absolute",
   width: 1,
@@ -350,6 +586,12 @@ var srOnly = {
   whiteSpace: "nowrap",
   borderWidth: 0
 };
+function DefaultAIIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M19 11l.75 2.25L22 14l-2.25.75L19 17l-.75-2.25L16 14l2.25-.75Z" })
+  ] });
+}
 function AIMeChat({
   position = "bottom-right",
   theme,
@@ -358,15 +600,17 @@ function AIMeChat({
   defaultOpen = false,
   onToggle,
   onToolComplete,
-  onMessageComplete
+  onMessageComplete,
+  triggerIcon,
+  renderConfirmation
 }) {
-  const [open, setOpen] = (0, import_react4.useState)(defaultOpen);
-  const messagesEndRef = (0, import_react4.useRef)(null);
-  const inputRef = (0, import_react4.useRef)(null);
-  const panelRef = (0, import_react4.useRef)(null);
-  const triggerRef = (0, import_react4.useRef)(null);
-  const firedToolResults = (0, import_react4.useRef)(/* @__PURE__ */ new Set());
-  const prevStatus = (0, import_react4.useRef)(null);
+  const [open, setOpen] = (0, import_react5.useState)(defaultOpen);
+  const messagesEndRef = (0, import_react5.useRef)(null);
+  const inputRef = (0, import_react5.useRef)(null);
+  const panelRef = (0, import_react5.useRef)(null);
+  const triggerRef = (0, import_react5.useRef)(null);
+  const firedToolResults = (0, import_react5.useRef)(/* @__PURE__ */ new Set());
+  const prevStatus = (0, import_react5.useRef)(null);
   const {
     messages,
     input,
@@ -374,17 +618,18 @@ function AIMeChat({
     handleSubmit,
     status,
     error,
-    setInput
+    setInput,
+    addToolApprovalResponse
   } = useAIMe();
-  const titleId = (0, import_react4.useId)();
-  const messagesId = (0, import_react4.useId)();
+  const titleId = (0, import_react5.useId)();
+  const messagesId = (0, import_react5.useId)();
   const isInline = position === "inline";
-  const toggleOpen = (0, import_react4.useCallback)(() => {
+  const toggleOpen = (0, import_react5.useCallback)(() => {
     const next = !open;
     setOpen(next);
     onToggle?.(next);
   }, [open, onToggle]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     function handleKeyDown(e) {
       if ((e.metaKey || e.ctrlKey) && e.key === ".") {
         e.preventDefault();
@@ -394,10 +639,10 @@ function AIMeChat({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleOpen]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!onToolComplete) return;
     for (const message of messages) {
       for (const part of message.parts) {
@@ -413,7 +658,7 @@ function AIMeChat({
       }
     }
   }, [messages, onToolComplete]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const prev = prevStatus.current;
     prevStatus.current = status;
     if (!onMessageComplete) return;
@@ -435,7 +680,7 @@ function AIMeChat({
       toolCalls: toolCalls.length > 0 ? toolCalls : void 0
     });
   }, [status, messages, onMessageComplete]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (open) {
       panelRef.current?.focus();
       setTimeout(() => inputRef.current?.focus(), 0);
@@ -443,7 +688,7 @@ function AIMeChat({
       triggerRef.current?.focus();
     }
   }, [open]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!open || isInline) return;
     function handleKeyDown(e) {
       if (e.key === "Escape") {
@@ -475,6 +720,20 @@ function AIMeChat({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [open, isInline, toggleOpen]);
+  const pendingToolCalls = (0, import_react5.useMemo)(() => {
+    const resultIds = /* @__PURE__ */ new Set();
+    const toolCalls = [];
+    for (const m of messages) {
+      for (const p of m.parts) {
+        if (p.type === "tool-result") {
+          resultIds.add(p.toolCallId);
+        } else if (p.type === "tool-call") {
+          toolCalls.push(p);
+        }
+      }
+    }
+    return toolCalls.filter((tc) => !resultIds.has(tc.toolCallId));
+  }, [messages]);
   const themeVars = {
     ...defaultThemeVars,
     ...themeToVars(theme)
@@ -530,8 +789,8 @@ function AIMeChat({
     zIndex: 9999
   };
   const isStreaming = status === "submitted" || status === "streaming";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "button",
       {
         ref: triggerRef,
@@ -541,10 +800,10 @@ function AIMeChat({
         "aria-expanded": open,
         "aria-controls": isInline ? void 0 : "ai-me-chat-panel",
         type: "button",
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": "true", children: "\u{1F4AC}" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", children: triggerIcon ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DefaultAIIcon, {}) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",
       {
         id: "ai-me-chat-panel",
@@ -556,7 +815,7 @@ function AIMeChat({
         "aria-busy": isStreaming,
         tabIndex: -1,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
             "div",
             {
               style: {
@@ -568,8 +827,8 @@ function AIMeChat({
                 backgroundColor: "var(--ai-me-bg-secondary)"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { id: titleId, style: { fontWeight: 600, fontSize: 14 }, children: "AI Assistant" }),
-                !isInline && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { id: titleId, style: { fontWeight: 600, fontSize: 14 }, children: "AI Assistant" }),
+                !isInline && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "button",
                   {
                     onClick: toggleOpen,
@@ -593,13 +852,13 @@ function AIMeChat({
                     },
                     "aria-label": "Close chat",
                     type: "button",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": "true", children: "\u2715" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", children: "\u2715" })
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "a",
             {
               href: "#ai-me-chat-input",
@@ -629,7 +888,7 @@ function AIMeChat({
               children: "Skip to message input"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
             "div",
             {
               id: messagesId,
@@ -645,9 +904,9 @@ function AIMeChat({
                 gap: 12
               },
               children: [
-                messages.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { color: "var(--ai-me-text-secondary)", fontSize: 14 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: welcomeMessage }),
-                  suggestedPrompts && suggestedPrompts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                messages.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { color: "var(--ai-me-text-secondary)", fontSize: 14 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: welcomeMessage }),
+                  suggestedPrompts && suggestedPrompts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                     "div",
                     {
                       style: {
@@ -657,8 +916,8 @@ function AIMeChat({
                         gap: 8
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { margin: "0 0 4px", fontSize: 12, fontWeight: 500 }, children: "Suggested questions:" }),
-                        suggestedPrompts.map((prompt) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: { margin: "0 0 4px", fontSize: 12, fontWeight: 500 }, children: "Suggested questions:" }),
+                        suggestedPrompts.map((prompt) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                           "button",
                           {
                             type: "button",
@@ -695,7 +954,7 @@ function AIMeChat({
                 messages.map((m) => {
                   const hasTextContent = m.parts.some((p) => p.type === "text");
                   if (!hasTextContent && m.role === "assistant") return null;
-                  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                     "div",
                     {
                       style: {
@@ -711,16 +970,16 @@ function AIMeChat({
                         wordBreak: "break-word"
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: srOnly, children: m.role === "user" ? "You: " : "Assistant: " }),
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: srOnly, children: m.role === "user" ? "You: " : "Assistant: " }),
                         m.parts.map(
-                          (p, i) => p.type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: m.role === "assistant" ? renderMarkdown(p.text) : p.text }, i) : null
+                          (p, i) => p.type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: m.role === "assistant" ? renderMarkdown(p.text) : p.text }, i) : null
                         )
                       ]
                     },
                     m.id
                   );
                 }),
-                status === "submitted" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                status === "submitted" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "div",
                   {
                     "aria-label": "Assistant is thinking",
@@ -729,10 +988,10 @@ function AIMeChat({
                       color: "var(--ai-me-text-secondary)",
                       fontSize: 13
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": "true", children: "Thinking\u2026" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", children: "Thinking\u2026" })
                   }
                 ),
-                error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "div",
                   {
                     role: "alert",
@@ -748,11 +1007,11 @@ function AIMeChat({
                     children: "Something went wrong. Please try again."
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: messagesEndRef, "aria-hidden": "true" })
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: messagesEndRef, "aria-hidden": "true" })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
             "form",
             {
               onSubmit: handleSubmit,
@@ -763,7 +1022,7 @@ function AIMeChat({
                 gap: 8
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "label",
                   {
                     htmlFor: "ai-me-chat-input",
@@ -771,7 +1030,7 @@ function AIMeChat({
                     children: "Message to AI Assistant"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "input",
                   {
                     id: "ai-me-chat-input",
@@ -802,7 +1061,7 @@ function AIMeChat({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "button",
                   {
                     type: "submit",
@@ -837,13 +1096,38 @@ function AIMeChat({
           )
         ]
       }
-    )
+    ),
+    pendingToolCalls.map((tc) => {
+      const onConfirm = () => addToolApprovalResponse({ id: tc.toolCallId, approved: true });
+      const onCancel = () => addToolApprovalResponse({ id: tc.toolCallId, approved: false, reason: "User cancelled" });
+      return renderConfirmation ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.Fragment, { children: renderConfirmation({
+        tool: {
+          name: tc.toolName,
+          httpMethod: "",
+          path: "",
+          description: tc.toolName
+        },
+        params: tc.args,
+        onConfirm,
+        onCancel
+      }) }, tc.toolCallId) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        AIMeConfirm,
+        {
+          action: tc.toolName,
+          description: `Execute ${tc.toolName}?`,
+          parameters: tc.args,
+          onConfirm,
+          onReject: onCancel
+        },
+        tc.toolCallId
+      );
+    })
   ] });
 }
 
 // src/command-palette.tsx
-var import_react5 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var defaultCommands = [
   {
     id: "help",
@@ -887,17 +1171,17 @@ function AIMeCommandPalette({
   shortcut = { key: "k", meta: true },
   onToggle
 }) {
-  const [open, setOpen] = (0, import_react5.useState)(false);
-  const [query, setQuery] = (0, import_react5.useState)("");
-  const [selectedIndex, setSelectedIndex] = (0, import_react5.useState)(0);
-  const inputRef = (0, import_react5.useRef)(null);
-  const listRef = (0, import_react5.useRef)(null);
-  const dialogRef = (0, import_react5.useRef)(null);
-  const previousFocusRef = (0, import_react5.useRef)(null);
+  const [open, setOpen] = (0, import_react6.useState)(false);
+  const [query, setQuery] = (0, import_react6.useState)("");
+  const [selectedIndex, setSelectedIndex] = (0, import_react6.useState)(0);
+  const inputRef = (0, import_react6.useRef)(null);
+  const listRef = (0, import_react6.useRef)(null);
+  const dialogRef = (0, import_react6.useRef)(null);
+  const previousFocusRef = (0, import_react6.useRef)(null);
   const { sendMessage } = useAIMe();
-  const titleId = (0, import_react5.useId)();
-  const inputId = (0, import_react5.useId)();
-  const toggle = (0, import_react5.useCallback)(
+  const titleId = (0, import_react6.useId)();
+  const inputId = (0, import_react6.useId)();
+  const toggle = (0, import_react6.useCallback)(
     (next) => {
       setOpen(next);
       setQuery("");
@@ -906,7 +1190,7 @@ function AIMeCommandPalette({
     },
     [onToggle]
   );
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     function handleKeyDown2(e) {
       const metaMatch = shortcut.meta ? e.metaKey : true;
       const ctrlMatch = shortcut.ctrl ? e.ctrlKey : !shortcut.meta ? e.ctrlKey : true;
@@ -921,7 +1205,7 @@ function AIMeCommandPalette({
     window.addEventListener("keydown", handleKeyDown2);
     return () => window.removeEventListener("keydown", handleKeyDown2);
   }, [open, shortcut, toggle]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (open) {
       setTimeout(() => inputRef.current?.focus(), 0);
     } else {
@@ -931,7 +1215,7 @@ function AIMeCommandPalette({
       }
     }
   }, [open]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!open) return;
     function handleFocusTrap(e) {
       if (e.key !== "Tab") return;
@@ -961,12 +1245,12 @@ function AIMeCommandPalette({
   const filtered = query.trim() ? commands.filter(
     (cmd) => cmd.label.toLowerCase().includes(query.toLowerCase()) || cmd.description?.toLowerCase().includes(query.toLowerCase()) || cmd.category?.toLowerCase().includes(query.toLowerCase())
   ) : commands;
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (selectedIndex >= filtered.length) {
       setSelectedIndex(Math.max(0, filtered.length - 1));
     }
   }, [filtered.length, selectedIndex]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const list = listRef.current;
     if (!list) return;
     const selected = list.children[selectedIndex];
@@ -1011,8 +1295,8 @@ function AIMeCommandPalette({
     grouped.get(cat).push(cmd);
   }
   let flatIndex = 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "div",
       {
         onClick: () => toggle(false),
@@ -1025,7 +1309,7 @@ function AIMeCommandPalette({
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       {
         ref: dialogRef,
@@ -1053,10 +1337,10 @@ function AIMeCommandPalette({
         "aria-labelledby": titleId,
         tabIndex: -1,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { id: titleId, style: srOnly2, children: "Command Palette" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { padding: "12px 16px", borderBottom: "1px solid var(--ai-me-border)" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { htmlFor: inputId, style: srOnly2, children: "Search commands or ask AI" }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { id: titleId, style: srOnly2, children: "Command Palette" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { padding: "12px 16px", borderBottom: "1px solid var(--ai-me-border)" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: inputId, style: srOnly2, children: "Search commands or ask AI" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "input",
               {
                 id: inputId,
@@ -1094,7 +1378,7 @@ function AIMeCommandPalette({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
             "div",
             {
               id: "ai-me-cmd-listbox",
@@ -1103,7 +1387,7 @@ function AIMeCommandPalette({
               role: "listbox",
               "aria-label": "Commands",
               children: [
-                filtered.length === 0 && query.trim() && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                filtered.length === 0 && query.trim() && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                   "div",
                   {
                     role: "option",
@@ -1123,8 +1407,8 @@ function AIMeCommandPalette({
                 ),
                 Array.from(grouped.entries()).map(([category, items]) => (
                   // role="group" with aria-label for the category heading
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { role: "group", "aria-label": category, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { role: "group", "aria-label": category, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                       "div",
                       {
                         "aria-hidden": "true",
@@ -1142,7 +1426,7 @@ function AIMeCommandPalette({
                     items.map((cmd) => {
                       const idx = flatIndex++;
                       const isSelected = idx === selectedIndex;
-                      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                         "div",
                         {
                           id: `cmd-${cmd.id}`,
@@ -1175,10 +1459,10 @@ function AIMeCommandPalette({
                           },
                           children: [
                             cmd.icon && // Icon is decorative — label comes from cmd.label
-                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", style: { fontSize: 16, flexShrink: 0 }, children: cmd.icon }),
-                            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: 14, fontWeight: 500 }, children: cmd.label }),
-                              cmd.description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "aria-hidden": "true", style: { fontSize: 16, flexShrink: 0 }, children: cmd.icon }),
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: 14, fontWeight: 500 }, children: cmd.label }),
+                              cmd.description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                 "div",
                                 {
                                   style: {
@@ -1202,7 +1486,7 @@ function AIMeCommandPalette({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
             "div",
             {
               "aria-hidden": "true",
@@ -1215,9 +1499,9 @@ function AIMeCommandPalette({
                 gap: 16
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "\u2191\u2193 Navigate" }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "\u21B5 Select" }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Esc Close" })
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "\u2191\u2193 Navigate" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "\u21B5 Select" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Esc Close" })
               ]
             }
           )
@@ -1226,201 +1510,13 @@ function AIMeCommandPalette({
     )
   ] });
 }
-
-// src/confirm.tsx
-var import_react6 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function AIMeConfirm({
-  action,
-  description,
-  parameters,
-  onConfirm,
-  onReject
-}) {
-  const dialogRef = (0, import_react6.useRef)(null);
-  const cancelButtonRef = (0, import_react6.useRef)(null);
-  const titleId = (0, import_react6.useId)();
-  const descriptionId = (0, import_react6.useId)();
-  const handleKeyDown = (0, import_react6.useCallback)(
-    (e) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        onReject();
-        return;
-      }
-      if (e.key !== "Tab") return;
-      const dialog = dialogRef.current;
-      if (!dialog) return;
-      const focusable = dialog.querySelectorAll(
-        'button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
-      );
-      if (focusable.length === 0) return;
-      const first = focusable[0];
-      const last = focusable[focusable.length - 1];
-      if (e.shiftKey) {
-        if (document.activeElement === first) {
-          e.preventDefault();
-          last.focus();
-        }
-      } else {
-        if (document.activeElement === last) {
-          e.preventDefault();
-          first.focus();
-        }
-      }
-    },
-    [onReject]
-  );
-  (0, import_react6.useEffect)(() => {
-    const previousFocus = document.activeElement;
-    cancelButtonRef.current?.focus();
-    window.addEventListener("keydown", handleKeyDown);
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-      previousFocus?.focus();
-    };
-  }, [handleKeyDown]);
-  const overlayStyle = {
-    ...defaultThemeVars,
-    position: "fixed",
-    inset: 0,
-    backgroundColor: "rgba(0, 0, 0, 0.4)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 1e4,
-    fontFamily: "var(--ai-me-font)"
-  };
-  const dialogStyle = {
-    backgroundColor: "var(--ai-me-bg)",
-    borderRadius: "var(--ai-me-radius)",
-    padding: 24,
-    maxWidth: 420,
-    width: "90%",
-    boxShadow: "var(--ai-me-shadow)",
-    color: "var(--ai-me-text)"
-  };
-  const focusStyle = {
-    outline: "2px solid transparent",
-    outlineOffset: 2
-  };
-  function applyFocusRing(el) {
-    el.style.outline = "2px solid var(--ai-me-primary)";
-    el.style.outlineOffset = "2px";
-  }
-  function removeFocusRing(el) {
-    el.style.outline = "2px solid transparent";
-    el.style.outlineOffset = "2px";
-  }
-  return (
-    // Overlay is presentational — role and aria go on the inner dialog
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      "div",
-      {
-        style: overlayStyle,
-        onClick: (e) => {
-          if (e.target === e.currentTarget) onReject();
-        },
-        "aria-hidden": "false",
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-          "div",
-          {
-            ref: dialogRef,
-            style: dialogStyle,
-            role: "alertdialog",
-            "aria-modal": "true",
-            "aria-labelledby": titleId,
-            "aria-describedby": descriptionId,
-            tabIndex: -1,
-            onClick: (e) => e.stopPropagation(),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { id: titleId, style: { margin: "0 0 8px", fontSize: 16 }, children: "Confirm Action" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { style: { margin: "0 0 4px", fontSize: 14, fontWeight: 600 }, children: action }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                "p",
-                {
-                  id: descriptionId,
-                  style: {
-                    margin: "0 0 16px",
-                    fontSize: 13,
-                    color: "var(--ai-me-text-secondary)"
-                  },
-                  children: description
-                }
-              ),
-              parameters && Object.keys(parameters).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                "pre",
-                {
-                  style: {
-                    margin: "0 0 16px",
-                    padding: 12,
-                    backgroundColor: "var(--ai-me-bg-secondary)",
-                    borderRadius: 8,
-                    fontSize: 12,
-                    overflow: "auto",
-                    maxHeight: 200,
-                    border: "1px solid var(--ai-me-border)"
-                  },
-                  children: JSON.stringify(parameters, null, 2)
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                  "button",
-                  {
-                    ref: cancelButtonRef,
-                    type: "button",
-                    onClick: onReject,
-                    style: {
-                      padding: "8px 16px",
-                      border: "1px solid var(--ai-me-border)",
-                      borderRadius: 8,
-                      backgroundColor: "var(--ai-me-bg)",
-                      color: "var(--ai-me-text)",
-                      cursor: "pointer",
-                      fontSize: 14,
-                      ...focusStyle
-                    },
-                    onFocus: (e) => applyFocusRing(e.currentTarget),
-                    onBlur: (e) => removeFocusRing(e.currentTarget),
-                    children: "Cancel"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: onConfirm,
-                    style: {
-                      padding: "8px 16px",
-                      border: "none",
-                      borderRadius: 8,
-                      // #fff on var(--ai-me-primary) = #6366f1 → contrast ≈ 4.6:1 (passes AA)
-                      backgroundColor: "var(--ai-me-primary)",
-                      color: "#fff",
-                      cursor: "pointer",
-                      fontSize: 14,
-                      ...focusStyle
-                    },
-                    onFocus: (e) => applyFocusRing(e.currentTarget),
-                    onBlur: (e) => removeFocusRing(e.currentTarget),
-                    children: "Confirm"
-                  }
-                )
-              ] })
-            ]
-          }
-        )
-      }
-    )
-  );
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AIMeChat,
   AIMeCommandPalette,
   AIMeConfirm,
   AIMeProvider,
+  cleanAssistantText,
   renderMarkdown,
   useAIMe,
   useAIMeContext