@meetsmore-oss/use-ai-client 1.13.0 → 1.14.0

package/dist/index.js

@@ -99,6 +99,11 @@ var defaultStrings = {
     /** Error for unknown/unexpected errors */
     UNKNOWN_ERROR: "An unexpected error occurred. Please try again."
   },
+  // Non-error notices shown as system-style bubbles
+  notices: {
+    /** Shown as a separate bubble after the user aborts generation */
+    aborted: "Generation stopped. You can continue the conversation."
+  },
   // Thinking/reasoning display
   thinking: {
     /** Label shown while thinking is in progress */
@@ -157,6 +162,8 @@ var defaultTheme = {
   activeBackground: "#f0f0ff",
   /** Disabled button background */
   buttonDisabledBackground: "#e5e7eb",
+  /** Stop (abort) button background — neutral so it doesn't read as a primary action */
+  stopButtonBackground: "#e5e7eb",
   // Text colors
   /** Primary text color */
   textColor: "#1f2937",
@@ -301,10 +308,29 @@ function mergeAssistantMessagesForDisplay(messages) {
   let pendingTexts = [];
   let pendingIds = [];
   let pendingReasoningParts = [];
+  const flushPending = () => {
+    if (pendingTexts.length > 0 || pendingReasoningParts.length > 0) {
+      result.push({
+        id: `merged-${pendingIds.join("-")}`,
+        role: "assistant",
+        content: pendingTexts.join("\n\n"),
+        createdAt: /* @__PURE__ */ new Date(),
+        ...pendingReasoningParts.length > 0 ? { reasoningParts: pendingReasoningParts } : {}
+      });
+      pendingTexts = [];
+      pendingIds = [];
+      pendingReasoningParts = [];
+    }
+  };
   for (const msg of messages) {
     if (msg.role === "tool") {
       continue;
     }
+    if (msg.displayMode === "info") {
+      flushPending();
+      result.push(msg);
+      continue;
+    }
     if (msg.role === "assistant") {
       const text = getTextFromContent(msg.content);
       if (msg.toolCalls && msg.toolCalls.length > 0) {
@@ -329,30 +355,11 @@ function mergeAssistantMessagesForDisplay(messages) {
         pendingReasoningParts = [];
       }
     } else {
-      if (pendingTexts.length > 0 || pendingReasoningParts.length > 0) {
-        result.push({
-          id: `merged-${pendingIds.join("-")}`,
-          role: "assistant",
-          content: pendingTexts.join("\n\n"),
-          createdAt: /* @__PURE__ */ new Date(),
-          ...pendingReasoningParts.length > 0 ? { reasoningParts: pendingReasoningParts } : {}
-        });
-        pendingTexts = [];
-        pendingIds = [];
-        pendingReasoningParts = [];
-      }
+      flushPending();
       result.push(msg);
     }
   }
-  if (pendingTexts.length > 0 || pendingReasoningParts.length > 0) {
-    result.push({
-      id: `merged-${pendingIds.join("-")}`,
-      role: "assistant",
-      content: pendingTexts.join("\n\n"),
-      createdAt: /* @__PURE__ */ new Date(),
-      ...pendingReasoningParts.length > 0 ? { reasoningParts: pendingReasoningParts } : {}
-    });
-  }
+  flushPending();
   return result;
 }
 
@@ -2161,6 +2168,7 @@ function hasFileContent(content) {
 }
 function UseAIChatPanel({
   onSendMessage,
+  onAbort,
   messages,
   loading,
   connected,
@@ -2718,177 +2726,207 @@ function UseAIChatPanel({
                   ]
                 }
               ),
-              displayMessages.map((message) => /* @__PURE__ */ jsxs9(
-                "div",
-                {
-                  "data-testid": `chat-message-${message.role}`,
-                  className: `chat-message chat-message-${message.role}`,
-                  style: {
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: message.role === "user" ? "flex-end" : "flex-start"
-                  },
-                  onMouseEnter: () => message.role === "user" && setHoveredMessageId(message.id),
-                  onMouseLeave: () => setHoveredMessageId(null),
-                  children: [
-                    /* @__PURE__ */ jsxs9(
-                      "div",
-                      {
-                        style: {
-                          position: "relative",
-                          maxWidth: "80%"
-                        },
-                        children: [
-                          message.role === "user" && hoveredMessageId === message.id && onSaveCommand && !slashCommands.isSavingCommand(message.id) && /* @__PURE__ */ jsx12(
-                            "button",
-                            {
-                              "data-testid": "save-command-button",
-                              onClick: (e) => {
-                                e.stopPropagation();
-                                const messageText = getDisplayTextFromContent(message.content);
-                                slashCommands.startSavingCommand(message.id, messageText);
-                              },
-                              title: "Save as slash command",
-                              style: {
-                                position: "absolute",
-                                top: "-8px",
-                                right: "-8px",
-                                width: "24px",
-                                height: "24px",
-                                borderRadius: "50%",
-                                border: "none",
-                                background: theme.backgroundColor,
-                                boxShadow: "0 2px 6px rgba(0, 0, 0, 0.15)",
-                                cursor: "pointer",
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                color: theme.primaryColor,
-                                transition: "all 0.15s",
-                                zIndex: 10
-                              },
-                              onMouseEnter: (e) => {
-                                e.currentTarget.style.transform = "scale(1.1)";
-                                e.currentTarget.style.boxShadow = "0 3px 8px rgba(0, 0, 0, 0.2)";
-                              },
-                              onMouseLeave: (e) => {
-                                e.currentTarget.style.transform = "scale(1)";
-                                e.currentTarget.style.boxShadow = "0 2px 6px rgba(0, 0, 0, 0.15)";
-                              },
-                              children: /* @__PURE__ */ jsxs9("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                                /* @__PURE__ */ jsx12("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }),
-                                /* @__PURE__ */ jsx12("polyline", { points: "17 21 17 13 7 13 7 21" }),
-                                /* @__PURE__ */ jsx12("polyline", { points: "7 3 7 8 15 8" })
-                              ] })
-                            }
-                          ),
-                          /* @__PURE__ */ jsxs9(
-                            "div",
-                            {
-                              "data-testid": "chat-message-content",
-                              className: `chat-message-content${message.role === "assistant" ? " markdown-content" : ""}`,
-                              style: {
-                                padding: "10px 14px",
-                                borderRadius: slashCommands.isSavingCommand(message.id) ? "12px 12px 0 0" : "12px",
-                                background: message.displayMode === "error" ? theme.errorBackground : message.role === "user" ? theme.primaryGradient : theme.assistantMessageBackground,
-                                color: message.displayMode === "error" ? theme.errorTextColor : message.role === "user" ? "white" : theme.textColor,
-                                fontSize: "14px",
-                                lineHeight: "1.5",
-                                wordWrap: "break-word"
-                              },
-                              children: [
-                                message.role === "user" && hasFileContent(message.content) && /* @__PURE__ */ jsx12("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px", marginBottom: "8px" }, children: message.content.filter((part) => part.type === "file").map((part, idx) => /* @__PURE__ */ jsx12(
-                                  FilePlaceholder,
-                                  {
-                                    name: part.file.name,
-                                    size: part.file.size
-                                  },
-                                  idx
-                                )) }),
-                                message.role === "assistant" ? /* @__PURE__ */ jsxs9(Fragment, { children: [
-                                  message.reasoningParts && message.reasoningParts.length > 0 && /* @__PURE__ */ jsx12(
-                                    Reasoning,
+              displayMessages.map((message) => {
+                if (message.displayMode === "info") {
+                  return /* @__PURE__ */ jsx12(
+                    "div",
+                    {
+                      "data-testid": "chat-message-info",
+                      className: "chat-message chat-message-info",
+                      style: { display: "flex", justifyContent: "center", padding: "2px 0" },
+                      children: /* @__PURE__ */ jsx12(
+                        "div",
+                        {
+                          style: {
+                            maxWidth: "80%",
+                            padding: "6px 12px",
+                            borderRadius: "12px",
+                            background: theme.assistantMessageBackground,
+                            color: theme.secondaryTextColor,
+                            fontSize: "12px",
+                            lineHeight: "1.4",
+                            textAlign: "center",
+                            wordWrap: "break-word"
+                          },
+                          children: getDisplayTextFromContent(message.content)
+                        }
+                      )
+                    },
+                    message.id
+                  );
+                }
+                return /* @__PURE__ */ jsxs9(
+                  "div",
+                  {
+                    "data-testid": `chat-message-${message.role}`,
+                    className: `chat-message chat-message-${message.role}`,
+                    style: {
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: message.role === "user" ? "flex-end" : "flex-start"
+                    },
+                    onMouseEnter: () => message.role === "user" && setHoveredMessageId(message.id),
+                    onMouseLeave: () => setHoveredMessageId(null),
+                    children: [
+                      /* @__PURE__ */ jsxs9(
+                        "div",
+                        {
+                          style: {
+                            position: "relative",
+                            maxWidth: "80%"
+                          },
+                          children: [
+                            message.role === "user" && hoveredMessageId === message.id && onSaveCommand && !slashCommands.isSavingCommand(message.id) && /* @__PURE__ */ jsx12(
+                              "button",
+                              {
+                                "data-testid": "save-command-button",
+                                onClick: (e) => {
+                                  e.stopPropagation();
+                                  const messageText = getDisplayTextFromContent(message.content);
+                                  slashCommands.startSavingCommand(message.id, messageText);
+                                },
+                                title: "Save as slash command",
+                                style: {
+                                  position: "absolute",
+                                  top: "-8px",
+                                  right: "-8px",
+                                  width: "24px",
+                                  height: "24px",
+                                  borderRadius: "50%",
+                                  border: "none",
+                                  background: theme.backgroundColor,
+                                  boxShadow: "0 2px 6px rgba(0, 0, 0, 0.15)",
+                                  cursor: "pointer",
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "center",
+                                  color: theme.primaryColor,
+                                  transition: "all 0.15s",
+                                  zIndex: 10
+                                },
+                                onMouseEnter: (e) => {
+                                  e.currentTarget.style.transform = "scale(1.1)";
+                                  e.currentTarget.style.boxShadow = "0 3px 8px rgba(0, 0, 0, 0.2)";
+                                },
+                                onMouseLeave: (e) => {
+                                  e.currentTarget.style.transform = "scale(1)";
+                                  e.currentTarget.style.boxShadow = "0 2px 6px rgba(0, 0, 0, 0.15)";
+                                },
+                                children: /* @__PURE__ */ jsxs9("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                                  /* @__PURE__ */ jsx12("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }),
+                                  /* @__PURE__ */ jsx12("polyline", { points: "17 21 17 13 7 13 7 21" }),
+                                  /* @__PURE__ */ jsx12("polyline", { points: "7 3 7 8 15 8" })
+                                ] })
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs9(
+                              "div",
+                              {
+                                "data-testid": "chat-message-content",
+                                className: `chat-message-content${message.role === "assistant" ? " markdown-content" : ""}`,
+                                style: {
+                                  padding: "10px 14px",
+                                  borderRadius: slashCommands.isSavingCommand(message.id) ? "12px 12px 0 0" : "12px",
+                                  background: message.displayMode === "error" ? theme.errorBackground : message.role === "user" ? theme.primaryGradient : theme.assistantMessageBackground,
+                                  color: message.displayMode === "error" ? theme.errorTextColor : message.role === "user" ? "white" : theme.textColor,
+                                  fontSize: "14px",
+                                  lineHeight: "1.5",
+                                  wordWrap: "break-word"
+                                },
+                                children: [
+                                  message.role === "user" && hasFileContent(message.content) && /* @__PURE__ */ jsx12("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px", marginBottom: "8px" }, children: message.content.filter((part) => part.type === "file").map((part, idx) => /* @__PURE__ */ jsx12(
+                                    FilePlaceholder,
                                     {
-                                      reasoningParts: message.reasoningParts,
-                                      theme,
-                                      strings
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsx12(MarkdownContent, { content: getTextFromContent(message.content) })
-                                ] }) : (
-                                  // User/tool bubbles: display-only text so transformed_file
-                                  // (e.g. OCR body) isn't dumped into the chat bubble.
-                                  getDisplayTextFromContent(message.content)
-                                )
-                              ]
-                            }
-                          ),
-                          slashCommands.renderInlineSaveUI({
-                            messageId: message.id,
-                            messageText: getDisplayTextFromContent(message.content)
+                                      name: part.file.name,
+                                      size: part.file.size
+                                    },
+                                    idx
+                                  )) }),
+                                  message.role === "assistant" ? /* @__PURE__ */ jsxs9(Fragment, { children: [
+                                    message.reasoningParts && message.reasoningParts.length > 0 && /* @__PURE__ */ jsx12(
+                                      Reasoning,
+                                      {
+                                        reasoningParts: message.reasoningParts,
+                                        theme,
+                                        strings
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx12(MarkdownContent, { content: getTextFromContent(message.content) })
+                                  ] }) : (
+                                    // User/tool bubbles: display-only text so transformed_file
+                                    // (e.g. OCR body) isn't dumped into the chat bubble.
+                                    getDisplayTextFromContent(message.content)
+                                  )
+                                ]
+                              }
+                            ),
+                            slashCommands.renderInlineSaveUI({
+                              messageId: message.id,
+                              messageText: getDisplayTextFromContent(message.content)
+                            })
+                          ]
+                        }
+                      ),
+                      message.role === "assistant" && message.traceId && feedbackEnabled && onFeedback && /* @__PURE__ */ jsxs9(
+                        "div",
+                        {
+                          "data-testid": "feedback-buttons",
+                          style: {
+                            display: "flex",
+                            gap: "4px",
+                            marginTop: "4px",
+                            padding: "0 4px"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx12(
+                              FeedbackButton,
+                              {
+                                type: "upvote",
+                                isSelected: message.feedback === "upvote",
+                                onClick: () => {
+                                  const newFeedback = message.feedback === "upvote" ? null : "upvote";
+                                  onFeedback(message.id, message.traceId, newFeedback);
+                                },
+                                selectedColor: theme.primaryColor,
+                                unselectedColor: theme.secondaryTextColor
+                              }
+                            ),
+                            /* @__PURE__ */ jsx12(
+                              FeedbackButton,
+                              {
+                                type: "downvote",
+                                isSelected: message.feedback === "downvote",
+                                onClick: () => {
+                                  const newFeedback = message.feedback === "downvote" ? null : "downvote";
+                                  onFeedback(message.id, message.traceId, newFeedback);
+                                },
+                                selectedColor: theme.errorTextColor,
+                                unselectedColor: theme.secondaryTextColor
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx12(
+                        "div",
+                        {
+                          style: {
+                            fontSize: "11px",
+                            color: theme.secondaryTextColor,
+                            marginTop: "4px",
+                            padding: "0 4px"
+                          },
+                          children: message.createdAt.toLocaleTimeString([], {
+                            hour: "2-digit",
+                            minute: "2-digit"
                           })
-                        ]
-                      }
-                    ),
-                    message.role === "assistant" && message.traceId && feedbackEnabled && onFeedback && /* @__PURE__ */ jsxs9(
-                      "div",
-                      {
-                        "data-testid": "feedback-buttons",
-                        style: {
-                          display: "flex",
-                          gap: "4px",
-                          marginTop: "4px",
-                          padding: "0 4px"
-                        },
-                        children: [
-                          /* @__PURE__ */ jsx12(
-                            FeedbackButton,
-                            {
-                              type: "upvote",
-                              isSelected: message.feedback === "upvote",
-                              onClick: () => {
-                                const newFeedback = message.feedback === "upvote" ? null : "upvote";
-                                onFeedback(message.id, message.traceId, newFeedback);
-                              },
-                              selectedColor: theme.primaryColor,
-                              unselectedColor: theme.secondaryTextColor
-                            }
-                          ),
-                          /* @__PURE__ */ jsx12(
-                            FeedbackButton,
-                            {
-                              type: "downvote",
-                              isSelected: message.feedback === "downvote",
-                              onClick: () => {
-                                const newFeedback = message.feedback === "downvote" ? null : "downvote";
-                                onFeedback(message.id, message.traceId, newFeedback);
-                              },
-                              selectedColor: theme.errorTextColor,
-                              unselectedColor: theme.secondaryTextColor
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsx12(
-                      "div",
-                      {
-                        style: {
-                          fontSize: "11px",
-                          color: theme.secondaryTextColor,
-                          marginTop: "4px",
-                          padding: "0 4px"
-                        },
-                        children: message.createdAt.toLocaleTimeString([], {
-                          hour: "2-digit",
-                          minute: "2-digit"
-                        })
-                      }
-                    )
-                  ]
-                },
-                message.id
-              )),
+                        }
+                      )
+                    ]
+                  },
+                  message.id
+                );
+              }),
               loading && /* @__PURE__ */ jsx12(
                 "div",
                 {
@@ -3113,33 +3151,65 @@ function UseAIChatPanel({
                                 ] })
                               }
                             ) }),
-                            /* @__PURE__ */ jsx12(
-                              "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__ */ jsxs9("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                                  /* @__PURE__ */ jsx12("line", { x1: "12", y1: "19", x2: "12", y2: "5" }),
-                                  /* @__PURE__ */ jsx12("polyline", { points: "5 12 12 5 19 12" })
-                                ] })
+                            (() => {
+                              const canAbort = loading && !!onAbort;
+                              const canSend = connected && !loading && pendingApprovals.length === 0 && (input.trim() || attachments.length > 0);
+                              if (loading && onAbort) {
+                                return /* @__PURE__ */ jsx12(
+                                  "button",
+                                  {
+                                    "data-testid": "chat-stop-button",
+                                    className: "chat-stop-button",
+                                    onClick: onAbort,
+                                    disabled: !canAbort,
+                                    title: canAbort ? "Stop generating" : "Cannot stop while a tool is running",
+                                    "aria-label": "Stop generating",
+                                    style: {
+                                      padding: "6px",
+                                      background: canAbort ? theme.stopButtonBackground : theme.buttonDisabledBackground,
+                                      color: theme.secondaryTextColor,
+                                      border: "none",
+                                      borderRadius: "50%",
+                                      cursor: canAbort ? "pointer" : "not-allowed",
+                                      display: "flex",
+                                      alignItems: "center",
+                                      justifyContent: "center",
+                                      width: "32px",
+                                      height: "32px",
+                                      transition: "all 0.2s"
+                                    },
+                                    children: /* @__PURE__ */ jsx12("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none", children: /* @__PURE__ */ jsx12("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) })
+                                  }
+                                );
                               }
-                            )
+                              return /* @__PURE__ */ jsx12(
+                                "button",
+                                {
+                                  "data-testid": "chat-send-button",
+                                  className: "chat-send-button",
+                                  onClick: handleSend,
+                                  disabled: !canSend,
+                                  style: {
+                                    padding: "6px",
+                                    background: canSend ? theme.primaryGradient : theme.buttonDisabledBackground,
+                                    color: canSend ? "white" : theme.secondaryTextColor,
+                                    border: "none",
+                                    borderRadius: "50%",
+                                    cursor: canSend ? "pointer" : "not-allowed",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    width: "32px",
+                                    height: "32px",
+                                    transition: "all 0.2s"
+                                  },
+                                  children: /* @__PURE__ */ jsxs9("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                                    /* @__PURE__ */ jsx12("line", { x1: "12", y1: "19", x2: "12", y2: "5" }),
+                                    /* @__PURE__ */ jsx12("polyline", { points: "5 12 12 5 19 12" })
+                                  ] })
+                                }
+                              );
+                            })()
                           ]
                         }
                       )
@@ -3317,7 +3387,8 @@ function UseAIChat({ floating = false, submitMode }) {
     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
+    onRejectToolCall: ctx.tools.pending.tools.length > 0 ? ctx.tools.pending.rejectAll : void 0,
+    onAbort: ctx.abortRun
   };
   if (floating) {
     return /* @__PURE__ */ jsx14(
@@ -3364,6 +3435,9 @@ var UseAIClient = class {
   _tools = [];
   _messages = [];
   _state = null;
+  // Tracks the in-flight run so abortRun() can target it. Set by sendPrompt
+  // and cleared at RUN_FINISHED / RUN_ERROR.
+  _currentRunId = null;
   // Agent selection
   _availableAgents = [];
   _defaultAgent = null;
@@ -3453,6 +3527,7 @@ var UseAIClient = class {
       this._pendingToolResults = [];
       this._currentReasoningBlocks = [];
       this._currentReasoningBlockText = "";
+      this._currentMessageContent = "";
     }
     if (event.type === EventType.TEXT_MESSAGE_START) {
       const e = event;
@@ -3543,37 +3618,10 @@ var UseAIClient = class {
         this._currentReasoningBlocks = [];
       }
     } else if (event.type === EventType.RUN_FINISHED) {
-      if (this._currentAssistantMessage) {
-        const reasoningParts = this._currentReasoningBlocks.length > 0 ? [...this._currentReasoningBlocks] : void 0;
-        if (this._currentAssistantToolCalls.length > 0) {
-          const toolCallMessage = {
-            id: uuidv42(),
-            role: "assistant",
-            content: "",
-            toolCalls: this._currentAssistantToolCalls,
-            ...reasoningParts ? { reasoningParts } : {}
-          };
-          this._messages.push(toolCallMessage);
-          this._messages.push(...this._pendingToolResults);
-          const textMessage = {
-            id: this._currentAssistantMessage.id,
-            role: "assistant",
-            content: this._currentAssistantMessage.content || ""
-          };
-          this._messages.push(textMessage);
-        } else {
-          const assistantMessage = {
-            id: this._currentAssistantMessage.id,
-            role: "assistant",
-            content: this._currentAssistantMessage.content || "",
-            ...reasoningParts ? { reasoningParts } : {}
-          };
-          this._messages.push(assistantMessage);
-        }
-        this._currentAssistantMessage = null;
-        this._currentAssistantToolCalls = [];
-        this._pendingToolResults = [];
-      }
+      this.finalizeRun({ aborted: false });
+    }
+    if (event.type === EventType.RUN_FINISHED || event.type === EventType.RUN_ERROR) {
+      this._currentRunId = null;
     }
     this.eventHandlers.forEach((handler) => handler(event));
   }
@@ -3637,10 +3685,12 @@ var UseAIClient = class {
       // Type cast needed for Message type compatibility
     };
     this._messages.push(userMessage);
+    const runId = uuidv42();
+    this._currentRunId = runId;
     const runInput = {
       threadId: this.threadId,
       // Use getter to ensure non-null
-      runId: uuidv42(),
+      runId,
       messages: this._messages,
       tools: this._tools.map((t) => ({
         name: t.name,
@@ -3695,6 +3745,115 @@ var UseAIClient = class {
     this._pendingToolResults.push(toolResultMsg);
     this.send(toolResultMessage);
   }
+  /**
+   * Aborts the in-flight run, if any.
+   * Sends an `abort_run` message to the server which cancels the AI stream
+   * and rejects any pending tool/approval waits. The server then emits
+   * `RUN_ERROR` with `ErrorCode.ABORTED`, which the client handles by
+   * persisting the partial response.
+   *
+   * No-op when no run is in flight.
+   */
+  abortRun() {
+    const runId = this._currentRunId;
+    if (!runId) return;
+    this.send({
+      type: "abort_run",
+      data: { runId }
+    });
+  }
+  /**
+   * Flushes the final in-progress step into `_messages` when a run terminates.
+   *
+   * Only two terminations reach here. Truncation (maxOutputTokens / finish
+   * reason 'length') and tool-execution errors never do — the server absorbs
+   * them: truncation continues via a fallback step and ends as a normal
+   * RUN_FINISHED, and tool errors come back as tool_results that keep the run
+   * going. So the dispatch is binary:
+   *  - `aborted: false` (RUN_FINISHED): every tool-call step was already flushed
+   *    at STEP_FINISHED, so the in-progress step is always text-only.
+   *  - `aborted: true` (RUN_ERROR / ABORTED): the run may have been cut
+   *    mid-tool-call or mid-reasoning, so extra repair is needed.
+   *
+   * After this returns, `currentMessageContent` and `currentReasoningBlocks`
+   * remain readable for the persistence helper. The next RUN_STARTED clears them.
+   */
+  finalizeRun(opts) {
+    if (opts.aborted) {
+      this.finalizeAbortedRun();
+    } else {
+      this.finalizeCompletedRun();
+    }
+  }
+  /**
+   * Normal completion (RUN_FINISHED). The in-progress step is text-only —
+   * tool-call steps were already flushed at STEP_FINISHED — so just push the
+   * trailing assistant text with its reasoning.
+   */
+  finalizeCompletedRun() {
+    this._currentReasoningBlockText = "";
+    if (!this._currentAssistantMessage) return;
+    if (this._currentMessageContent) {
+      const stepReasoning = this._currentReasoningBlocks.length > 0 ? [...this._currentReasoningBlocks] : void 0;
+      this._messages.push({
+        id: this._currentAssistantMessage.id || uuidv42(),
+        role: "assistant",
+        content: this._currentMessageContent,
+        ...stepReasoning ? { reasoningParts: stepReasoning } : {}
+      });
+    }
+    this._currentAssistantMessage = null;
+    this._currentAssistantToolCalls = [];
+    this._pendingToolResults = [];
+  }
+  /**
+   * User-initiated abort (RUN_ERROR / ABORTED).
+   *
+   * Drops the in-progress step's reasoning blocks. A block gets its encrypted
+   * signature on REASONING_ENCRYPTED_VALUE, which arrives after
+   * REASONING_MESSAGE_END — so a mid-stream abort can leave signature-less
+   * blocks. Persisting those would corrupt the next turn. Reasoning from
+   * already-completed prior steps lives on STEP_FINISHED-flushed assistant
+   * messages and is untouched. Aborted-step messages therefore never carry
+   * reasoningParts.
+   */
+  finalizeAbortedRun() {
+    this._currentReasoningBlocks = [];
+    this._currentReasoningBlockText = "";
+    if (!this._currentAssistantMessage) return;
+    if (this._currentAssistantToolCalls.length > 0) {
+      this._messages.push({
+        id: this._currentAssistantMessage.id || uuidv42(),
+        role: "assistant",
+        content: this._currentMessageContent || "",
+        toolCalls: [...this._currentAssistantToolCalls]
+      });
+      this._messages.push(...this._pendingToolResults);
+      const respondedIds = new Set(
+        this._pendingToolResults.map((m) => "toolCallId" in m ? m.toolCallId : void 0).filter((id) => typeof id === "string")
+      );
+      for (const tc of this._currentAssistantToolCalls) {
+        if (!respondedIds.has(tc.id)) {
+          this._messages.push({
+            id: uuidv42(),
+            role: "tool",
+            content: JSON.stringify({ aborted: true, reason: "Cancelled by user before tool finished" }),
+            toolCallId: tc.id
+          });
+        }
+      }
+      this._currentMessageContent = "";
+    } else if (this._currentMessageContent) {
+      this._messages.push({
+        id: this._currentAssistantMessage.id || uuidv42(),
+        role: "assistant",
+        content: this._currentMessageContent
+      });
+    }
+    this._currentAssistantMessage = null;
+    this._currentAssistantToolCalls = [];
+    this._pendingToolResults = [];
+  }
   /**
    * Sends a tool approval response back to the server.
    *
@@ -3789,6 +3948,12 @@ var UseAIClient = class {
   get currentMessageContent() {
     return this._currentMessageContent;
   }
+  /**
+   * Gets the runId of the in-flight run, or null when no run is active.
+   */
+  get currentRunId() {
+    return this._currentRunId;
+  }
   /**
    * Gets the current reasoning blocks collected during the current run.
    */
@@ -4254,7 +4419,7 @@ import { useState as useState7, useCallback as useCallback5, useRef as useRef5,
 
 // src/utils/messageConversion.ts
 function transformMessagesToClientFormat(persistedMessages) {
-  return persistedMessages.map((msg) => {
+  return persistedMessages.filter((msg) => msg.displayMode !== "info").map((msg) => {
     switch (msg.role) {
       case "tool":
         return {
@@ -5232,6 +5397,7 @@ function useServerEvents({
   const loadingRef = useRef10(loading);
   loadingRef.current = loading;
   const messageCountAtRunStartRef = useRef10(0);
+  const runIdAtRunStartRef = useRef10(void 0);
   const hasTextFromPriorStepRef = useRef10(false);
   const [executingToolRaw, setExecutingTool] = useState13(null);
   const executingToolFallbackRef = useRef10(null);
@@ -5244,11 +5410,37 @@ function useServerEvents({
   saveAIResponseRef.current = saveAIResponse;
   const stringsRef = useRef10(strings);
   stringsRef.current = strings;
+  const persistFinalResponse = useCallback11(async (client, opts) => {
+    const content = client.currentMessageContent;
+    const reasoningParts = client.currentReasoningBlocks.length > 0 ? [...client.currentReasoningBlocks] : void 0;
+    const turnMessages = extractTurnMessages(client.messages, messageCountAtRunStartRef.current);
+    if (opts.aborted) {
+      const notice = stringsRef.current.notices.aborted;
+      if (content) {
+        await saveAIResponseRef.current(content, void 0, opts.traceId, turnMessages, reasoningParts);
+        await saveAIResponseRef.current(notice, "info");
+      } else {
+        await saveAIResponseRef.current(notice, "info", opts.traceId, turnMessages);
+      }
+      return;
+    }
+    if (content) {
+      await saveAIResponseRef.current(content, void 0, opts.traceId, turnMessages, reasoningParts);
+    }
+  }, []);
+  const resetRunUiState = useCallback11(() => {
+    setStreamingText("");
+    setStreamingReasoning("");
+    streamingChatIdRef.current = null;
+    setExecutingTool(null);
+    setLoading(false);
+  }, []);
   const handleServerEvent = useCallback11(async (client, event) => {
     const ts = toolSystemRef.current;
     const strs = stringsRef.current;
     if (event.type === EventType2.RUN_STARTED) {
       messageCountAtRunStartRef.current = client.messages.length;
+      runIdAtRunStartRef.current = client.currentRunId ?? void 0;
       hasTextFromPriorStepRef.current = false;
       setStreamingReasoning("");
     } else if (event.type === EventType2.REASONING_MESSAGE_START) {
@@ -5300,30 +5492,21 @@ function useServerEvents({
       setStreamingText((prev) => prev + contentEvent.delta);
     } else if (event.type === EventType2.TEXT_MESSAGE_END) {
     } else if (event.type === EventType2.RUN_FINISHED) {
-      const content = client.currentMessageContent;
-      if (content) {
-        const finishedEvent = event;
-        const traceId = finishedEvent.runId;
-        const turnMessages = extractTurnMessages(client.messages, messageCountAtRunStartRef.current);
-        const reasoningParts = client.currentReasoningBlocks.length > 0 ? [...client.currentReasoningBlocks] : void 0;
-        saveAIResponseRef.current(content, void 0, traceId, turnMessages, reasoningParts);
-      }
-      setStreamingText("");
-      setStreamingReasoning("");
-      streamingChatIdRef.current = null;
-      setExecutingTool(null);
-      setLoading(false);
+      const finishedEvent = event;
+      await persistFinalResponse(client, { aborted: false, traceId: finishedEvent.runId });
+      resetRunUiState();
     } else if (event.type === EventType2.RUN_ERROR) {
       const errorEvent = event;
       const errorCode = errorEvent.message;
-      console.error("[ServerEvents] Run error:", errorCode);
-      const userMessage = strs.errors[errorCode] || errorEvent.message || strs.errors[ErrorCode.UNKNOWN_ERROR];
-      saveAIResponseRef.current(userMessage, "error");
-      setStreamingText("");
-      setStreamingReasoning("");
-      streamingChatIdRef.current = null;
-      setExecutingTool(null);
-      setLoading(false);
+      if (errorCode === ErrorCode.ABORTED) {
+        client.finalizeRun({ aborted: true });
+        await persistFinalResponse(client, { aborted: true, traceId: runIdAtRunStartRef.current });
+      } else {
+        console.error("[ServerEvents] Run error:", errorCode);
+        const userMessage = strs.errors[errorCode] || errorEvent.message || strs.errors[ErrorCode.UNKNOWN_ERROR];
+        saveAIResponseRef.current(userMessage, "error");
+      }
+      resetRunUiState();
     }
   }, []);
   const handleDisconnect = useCallback11(() => {
@@ -5493,6 +5676,8 @@ var noOpContextValue = {
     },
     delete: async () => {
     }
+  },
+  abortRun: () => {
   }
 };
 var DEFAULT_FILE_UPLOAD_CONFIG = {
@@ -5626,6 +5811,9 @@ function UseAIProvider({
       console.error("Failed to register tools:", err);
     }
   }, [toolSystem.hasTools, toolSystem.aggregatedTools, connected]);
+  const abortRun = useCallback13(() => {
+    clientRef.current?.abortRun();
+  }, []);
   const handleSendMessage = useCallback13(async (message, attachments, messageForwardedProps) => {
     if (!clientRef.current) return;
     serverEvents.clearStreamingText();
@@ -5724,7 +5912,8 @@ function UseAIProvider({
       save: saveCommand,
       rename: renameCommand,
       delete: deleteCommand
-    }
+    },
+    abortRun
   };
   const effectiveStreamingText = serverEvents.streamingChatIdRef.current === chatManagement.displayedChatId ? serverEvents.streamingText : "";
   const effectiveStreamingReasoning = serverEvents.streamingChatIdRef.current === chatManagement.displayedChatId ? serverEvents.streamingReasoning : "";
@@ -5732,6 +5921,7 @@ function UseAIProvider({
     connected,
     loading: serverEvents.loading,
     sendMessage: handleSendMessage,
+    abortRun,
     messages,
     streamingText: effectiveStreamingText,
     streamingReasoning: effectiveStreamingReasoning,
@@ -5781,6 +5971,7 @@ function UseAIProvider({
   const hasCustomChat = CustomChat !== void 0 && CustomChat !== null;
   const chatPanelProps = {
     onSendMessage: handleSendMessage,
+    onAbort: abortRun,
     messages,
     loading: serverEvents.loading,
     connected,
@@ -5828,6 +6019,7 @@ function UseAIProvider({
         isOpen: isChatOpen,
         onClose: () => handleSetChatOpen(false),
         onSendMessage: handleSendMessage,
+        onAbort: abortRun,
         messages,
         loading: serverEvents.loading,
         connected,