@blade-hq/agent-kit 0.5.2 → 0.5.3

package/dist/{chunk-EV225FLR.js → chunk-RTBAPZIO.js}

@@ -8,13 +8,13 @@ import {
   getCodeLanguageFromFilename,
   parseAskUserQuestion,
   useHighlightedCodeHtml
-} from "./chunk-LVLGDM76.js";
+} from "./chunk-ZQQNSKQS.js";
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
   resolveSessionFilePreviewTarget
-} from "./chunk-4ZEOWH6U.js";
+} from "./chunk-IRCXJHXT.js";
 import {
   buildMessageContent,
   buildToolPreviewKey,
@@ -57,7 +57,7 @@ import {
   useUiBridgeStore,
   useUiStore,
   writeFile
-} from "./chunk-PTMCGZFG.js";
+} from "./chunk-UQEXX57F.js";
 import {
   registerBridgeIframe,
   tapBridgeEvent
@@ -66,7 +66,7 @@ import {
   ModelOption,
   ModelsConfig,
   ModelsResource
-} from "./chunk-7JX26TWV.js";
+} from "./chunk-Q6CSM5DE.js";
 import {
   cn,
   copyToClipboard
@@ -80,13 +80,15 @@ import { Eye } from "lucide-react";
 import { useCallback as useCallback13 } from "react";
 
 // src/react/hooks/use-chat.ts
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 var EMPTY_MESSAGES = [];
 function useChat(sessionId) {
   const messages = useChatStore((s) => s.messages[sessionId] ?? EMPTY_MESSAGES);
   const isStreaming = useChatStore((s) => s.isStreaming[sessionId] ?? false);
   const mode = useSessionStore((s) => s.modes[sessionId] ?? "executing");
   const setAnswerCallback = useAnswerCallbackStore((s) => s.setAnswerCallback);
+  const [isStopping, setIsStopping] = useState(false);
+  const previousSessionIdRef = useRef(sessionId);
   const send = useCallback(
     (msg, mode2, askuserAnswer, options) => {
       const synthesizedAnswer = askuserAnswer ?? buildPendingAskUserAnswer(sessionId, msg);
@@ -94,9 +96,27 @@ function useChat(sessionId) {
     },
     [sessionId]
   );
-  const stop = useCallback(() => {
-    getSocket().stop(sessionId);
-  }, [sessionId]);
+  const stop = useCallback(async () => {
+    if (isStopping) return;
+    setIsStopping(true);
+    try {
+      await getSocket().stop(sessionId);
+    } catch (error) {
+      console.error("[chat] stop request failed", error);
+    } finally {
+      setIsStopping(false);
+    }
+  }, [isStopping, sessionId]);
+  useEffect(() => {
+    if (previousSessionIdRef.current !== sessionId) {
+      previousSessionIdRef.current = sessionId;
+      setIsStopping(false);
+      return;
+    }
+    if (!isStreaming) {
+      setIsStopping(false);
+    }
+  }, [isStreaming, sessionId]);
   const answer = useCallback(
     (msg, toolCallId, answerData) => {
       send(msg, mode, { tool_call_id: toolCallId, ...answerData });
@@ -107,7 +127,7 @@ function useChat(sessionId) {
     setAnswerCallback(sessionId, answer);
     return () => setAnswerCallback(sessionId, void 0);
   }, [answer, sessionId, setAnswerCallback]);
-  return { messages, isStreaming, send, stop };
+  return { messages, isStreaming, isStopping, send, stop };
 }
 function buildPendingAskUserAnswer(sessionId, message) {
   const session = useSessionStore.getState().sessions.find((item) => item.id === sessionId);
@@ -180,17 +200,17 @@ import {
   useEffect as useEffect7,
   useEffectEvent as useEffectEvent2,
   useMemo as useMemo7,
-  useRef as useRef4,
-  useState as useState7
+  useRef as useRef5,
+  useState as useState8
 } from "react";
 import { createRoot } from "react-dom/client";
 import { toast } from "sonner";
 
 // src/react/asr/use-tiptap-voice-input.ts
-import { useCallback as useCallback3, useEffect as useEffect3, useEffectEvent, useRef as useRef2 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect3, useEffectEvent, useRef as useRef3 } from "react";
 
 // src/react/asr/use-voice-input.ts
-import { useCallback as useCallback2, useEffect as useEffect2, useRef, useState } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 
 // src/react/asr/voice-input-support.ts
 function isIpHost(hostname) {
@@ -237,14 +257,14 @@ function matchesRequest(data, requestId) {
   return !rid || rid === requestId;
 }
 function useVoiceInput(options) {
-  const [status, setStatus] = useState("idle");
-  const [error, setError] = useState(null);
-  const [level, setLevel] = useState(0);
-  const sessionRef = useRef(null);
-  const startingRef = useRef(false);
-  const stoppingRef = useRef(false);
-  const unmountedRef = useRef(false);
-  const optionsRef = useRef(options);
+  const [status, setStatus] = useState2("idle");
+  const [error, setError] = useState2(null);
+  const [level, setLevel] = useState2(0);
+  const sessionRef = useRef2(null);
+  const startingRef = useRef2(false);
+  const stoppingRef = useRef2(false);
+  const unmountedRef = useRef2(false);
+  const optionsRef = useRef2(options);
   optionsRef.current = options;
   const reportError = useCallback2((err) => {
     const payload = typeof err === "string" ? { title: err } : err;
@@ -499,8 +519,8 @@ function useVoiceInput(options) {
 // src/react/asr/use-tiptap-voice-input.ts
 function useTiptapVoiceInput(options) {
   const { editorRef, workletUrl, onError } = options;
-  const partialRangeRef = useRef2(null);
-  const lastPartialLenRef = useRef2(0);
+  const partialRangeRef = useRef3(null);
+  const lastPartialLenRef = useRef3(0);
   const handlePartial = useEffectEvent((text) => {
     const ed = editorRef.current;
     if (!ed) return;
@@ -619,7 +639,7 @@ function VoiceWaveform({ level, color = "currentColor", size = 16 }) {
 
 // src/react/components/model/ModelSelector.tsx
 import { Loader2, Sparkles } from "lucide-react";
-import { useEffect as useEffect4, useMemo, useRef as useRef3, useState as useState2 } from "react";
+import { useEffect as useEffect4, useMemo, useRef as useRef4, useState as useState3 } from "react";
 
 // src/react/hooks/use-model-preferences.ts
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
@@ -727,9 +747,9 @@ function ModelSelector({
   placement = "bottom"
 }) {
   const { models, defaultModel, isLoading } = useModelConfig();
-  const [isOpen, setIsOpen] = useState2(false);
-  const [query, setQuery] = useState2("");
-  const rootRef = useRef3(null);
+  const [isOpen, setIsOpen] = useState3(false);
+  const [query, setQuery] = useState3("");
+  const rootRef = useRef4(null);
   useEffect4(() => {
     if (!isOpen) return;
     const closeOnPointerDown = (event) => {
@@ -838,7 +858,7 @@ function ModelSelector({
 }
 
 // src/react/hooks/use-input-history.ts
-import { useCallback as useCallback4, useEffect as useEffect5, useMemo as useMemo2, useState as useState3 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect5, useMemo as useMemo2, useState as useState4 } from "react";
 var MAX_HISTORY_ENTRIES = 50;
 function getStorageKey(sessionId) {
   return sessionId ? `input-history:${sessionId}` : null;
@@ -863,9 +883,9 @@ function readEntries(storageKey) {
 }
 function useInputHistory(sessionId) {
   const storageKey = useMemo2(() => getStorageKey(sessionId), [sessionId]);
-  const [entries, setEntries] = useState3([]);
-  const [cursor, setCursor] = useState3(null);
-  const [draft, setDraft] = useState3("");
+  const [entries, setEntries] = useState4([]);
+  const [cursor, setCursor] = useState4(null);
+  const [draft, setDraft] = useState4("");
   useEffect5(() => {
     setEntries(readEntries(storageKey));
     setCursor(null);
@@ -1004,7 +1024,7 @@ function skillDisplayName(skill) {
 
 // src/react/components/chat/FileCompletionMenu.tsx
 import { ChevronRight, File, Folder } from "lucide-react";
-import { forwardRef, useCallback as useCallback5, useImperativeHandle, useMemo as useMemo4, useState as useState4 } from "react";
+import { forwardRef, useCallback as useCallback5, useImperativeHandle, useMemo as useMemo4, useState as useState5 } from "react";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var ROOT_DIR = ".";
 function isVisibleEntry(entry) {
@@ -1108,7 +1128,7 @@ var FileCompletionMenu = forwardRef(
   }
 );
 var FileCompletionMenuContent = forwardRef(function FileCompletionMenuContent2({ command, editor, filterQuery, items, onExit, range, sessionId }, ref) {
-  const [rawSelectedIndex, setRawSelectedIndex] = useState4(0);
+  const [rawSelectedIndex, setRawSelectedIndex] = useState5(0);
   const filteredEntries = useMemo4(() => filterEntries(items, filterQuery), [filterQuery, items]);
   const selectedIndex = filteredEntries.length === 0 ? 0 : Math.min(rawSelectedIndex, filteredEntries.length - 1);
   const handleSelect = useCallback5(
@@ -1189,11 +1209,11 @@ var FileCompletionMenuContent = forwardRef(function FileCompletionMenuContent2({
 });
 
 // src/react/components/chat/SkillCompletionMenu.tsx
-import { forwardRef as forwardRef2, useCallback as useCallback6, useImperativeHandle as useImperativeHandle2, useState as useState5 } from "react";
+import { forwardRef as forwardRef2, useCallback as useCallback6, useImperativeHandle as useImperativeHandle2, useState as useState6 } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var SkillCompletionMenu = forwardRef2(
   function SkillCompletionMenu2({ command, items }, ref) {
-    const [rawSelectedIndex, setRawSelectedIndex] = useState5(0);
+    const [rawSelectedIndex, setRawSelectedIndex] = useState6(0);
     const selectedIndex = items.length === 0 ? 0 : Math.min(rawSelectedIndex, items.length - 1);
     const handleSelect = useCallback6(
       (item) => {
@@ -1298,7 +1318,7 @@ var SkillCompletionMenu = forwardRef2(
 
 // src/react/components/chat/BackgroundTasksPill.tsx
 import { FileText, Square, Terminal } from "lucide-react";
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 
 // src/react/hooks/use-background-tasks.ts
 import { useQuery as useQuery2 } from "@tanstack/react-query";
@@ -1347,8 +1367,8 @@ function statusClass(status) {
 }
 function BackgroundTasksPill({ sessionId }) {
   const { data: tasks } = useBackgroundTasks(sessionId);
-  const [open, setOpen] = useState6(false);
-  const [logTask, setLogTask] = useState6(null);
+  const [open, setOpen] = useState7(false);
+  const [logTask, setLogTask] = useState7(null);
   if (tasks.length === 0) return null;
   const runningCount = tasks.filter((task) => task.status === "running").length;
   const openTaskLog = async (task) => {
@@ -2131,20 +2151,38 @@ function ComposerFilePill({
   const isFile = attachment.kind === "file";
   const isFailed = isFile && attachment.status === "failed";
   const isUploading = isFile && attachment.status === "uploading";
+  const uploadPercent = isUploading && typeof attachment.uploadProgress === "number" ? Math.max(0, Math.min(100, Math.round(attachment.uploadProgress * 100))) : null;
   return /* @__PURE__ */ jsxs8(
     "div",
     {
-      className: `flex shrink-0 items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] ${isFailed ? "border-red-500/30 bg-red-500/5 text-red-400" : "border-[hsl(var(--border))] bg-[hsl(var(--card))] text-[hsl(var(--foreground))]"}`,
+      className: `relative flex shrink-0 items-center gap-1.5 overflow-hidden rounded-full border px-2.5 py-1 text-[11px] ${isFailed ? "border-red-500/30 bg-red-500/5 text-red-400" : "border-[hsl(var(--border))] bg-[hsl(var(--card))] text-[hsl(var(--foreground))]"}`,
       children: [
-        isUploading ? /* @__PURE__ */ jsx9(Loader22, { size: 12, className: "shrink-0 animate-spin text-[hsl(var(--muted-foreground))]" }) : /* @__PURE__ */ jsx9(Icon, { size: 12, className: "shrink-0 text-[hsl(var(--muted-foreground))]" }),
-        /* @__PURE__ */ jsx9("span", { className: "max-w-32 truncate", children: attachment.name }),
+        uploadPercent !== null ? /* @__PURE__ */ jsx9(
+          "span",
+          {
+            className: "absolute inset-y-0 left-0 bg-[hsl(var(--primary))]/10 transition-[width]",
+            style: { width: `${uploadPercent}%` }
+          }
+        ) : null,
+        isUploading ? /* @__PURE__ */ jsx9(
+          Loader22,
+          {
+            size: 12,
+            className: "relative z-10 shrink-0 animate-spin text-[hsl(var(--muted-foreground))]"
+          }
+        ) : /* @__PURE__ */ jsx9(Icon, { size: 12, className: "relative z-10 shrink-0 text-[hsl(var(--muted-foreground))]" }),
+        /* @__PURE__ */ jsx9("span", { className: "relative z-10 max-w-32 truncate", children: attachment.name }),
+        uploadPercent !== null ? /* @__PURE__ */ jsxs8("span", { className: "relative z-10 font-mono text-[10px] tabular-nums text-[hsl(var(--muted-foreground))]", children: [
+          uploadPercent,
+          "%"
+        ] }) : null,
         /* @__PURE__ */ jsx9(
           "button",
           {
             type: "button",
             onClick: () => onRemove(attachment.id),
             "aria-label": `\u79FB\u9664 ${attachment.name}`,
-            className: "ml-0.5 inline-flex shrink-0 items-center justify-center rounded-full text-[hsl(var(--muted-foreground))] transition hover:text-rose-400",
+            className: "relative z-10 ml-0.5 inline-flex shrink-0 items-center justify-center rounded-full text-[hsl(var(--muted-foreground))] transition hover:text-rose-400",
             children: /* @__PURE__ */ jsx9(X2, { size: 10 })
           }
         )
@@ -2158,13 +2196,13 @@ function AddContextDialog({
   onAdd
 }) {
   const CONTEXT_INLINE_THRESHOLD = 200;
-  const [label, setLabel] = useState7("");
-  const [content, setContent] = useState7("");
-  const [showSessionPicker, setShowSessionPicker] = useState7(false);
-  const [sessions, setSessions] = useState7([]);
-  const [loadingSessions, setLoadingSessions] = useState7(false);
-  const [importingId, setImportingId] = useState7(null);
-  const [isImportProcessing, setIsImportProcessing] = useState7(false);
+  const [label, setLabel] = useState8("");
+  const [content, setContent] = useState8("");
+  const [showSessionPicker, setShowSessionPicker] = useState8(false);
+  const [sessions, setSessions] = useState8([]);
+  const [loadingSessions, setLoadingSessions] = useState8(false);
+  const [importingId, setImportingId] = useState8(null);
+  const [isImportProcessing, setIsImportProcessing] = useState8(false);
   const sanitizeContextFolderName = (raw) => {
     const normalized = raw.trim().toLowerCase();
     const safe = normalized.replace(/[^\w\-.\u4e00-\u9fa5]+/g, "_").replace(/^_+|_+$/g, "");
@@ -2394,7 +2432,7 @@ function ComposerContextPill({
   content,
   onRemove
 }) {
-  const [showDetail, setShowDetail] = useState7(false);
+  const [showDetail, setShowDetail] = useState8(false);
   const tokenK = formatTokenK(content);
   return /* @__PURE__ */ jsxs8(Fragment2, { children: [
     /* @__PURE__ */ jsxs8("div", { className: "flex shrink-0 items-center gap-1.5 rounded-full border border-[hsl(var(--border))] bg-[hsl(var(--accent))] px-2.5 py-1 text-[11px] text-[hsl(var(--foreground))]", children: [
@@ -2589,6 +2627,7 @@ function ChatInput({
   onSend,
   onStop,
   isStreaming,
+  isStopping = false,
   mode = "executing",
   onToggleMode,
   renderAttachments,
@@ -2608,13 +2647,13 @@ function ChatInput({
   onResyncSkills,
   isResyncingSkills = false
 }) {
-  const [input, setInputInternal] = useState7(externalDraft?.value ?? "");
+  const [input, setInputInternal] = useState8(externalDraft?.value ?? "");
   const setInput = useEffectEvent2((value) => {
     setInputInternal(value);
     externalDraft?.setValue(value);
   });
   const externalDraftValue = externalDraft?.value;
-  const inputRef = useRef4(input);
+  const inputRef = useRef5(input);
   inputRef.current = input;
   useEffect7(() => {
     if (externalDraftValue == null) return;
@@ -2624,7 +2663,7 @@ function ChatInput({
     }
     setInputInternal(externalDraftValue);
   }, [externalDraftValue]);
-  const [composerAttachments, setComposerAttachmentsInternal] = useState7(
+  const [composerAttachments, setComposerAttachmentsInternal] = useState8(
     externalAttachments?.value ?? []
   );
   const setComposerAttachments = useEffectEvent2(
@@ -2637,24 +2676,24 @@ function ChatInput({
     }
   );
   const externalAttachmentsValue = externalAttachments?.value;
-  const composerAttachmentsRef = useRef4(composerAttachments);
+  const composerAttachmentsRef = useRef5(composerAttachments);
   composerAttachmentsRef.current = composerAttachments;
   useEffect7(() => {
     if (externalAttachmentsValue == null) return;
     if (composerAttachmentsRef.current === externalAttachmentsValue) return;
     setComposerAttachmentsInternal(externalAttachmentsValue);
   }, [externalAttachmentsValue]);
-  const [dragging, setDragging] = useState7(false);
-  const [isEditorFocused, setIsEditorFocused] = useState7(false);
-  const [oversizedFiles, setOversizedFiles] = useState7([]);
-  const [selectedModel, setSelectedModel] = useState7("");
+  const [dragging, setDragging] = useState8(false);
+  const [isEditorFocused, setIsEditorFocused] = useState8(false);
+  const [oversizedFiles, setOversizedFiles] = useState8([]);
+  const [selectedModel, setSelectedModel] = useState8("");
   const { setPreferredModel } = usePreferredModel();
   const queryClient = useQueryClient2();
-  const actionMenuRef = useRef4(null);
-  const fileInputRef = useRef4(null);
-  const folderInputRef = useRef4(null);
-  const editorRef = useRef4(null);
-  const localImageUrlsRef = useRef4(/* @__PURE__ */ new Map());
+  const actionMenuRef = useRef5(null);
+  const fileInputRef = useRef5(null);
+  const folderInputRef = useRef5(null);
+  const editorRef = useRef5(null);
+  const localImageUrlsRef = useRef5(/* @__PURE__ */ new Map());
   const activeSessionId = useSessionStore((state) => state.activeSessionId);
   const sessions = useSessionStore((state) => state.sessions);
   const activeSessionModel = useMemo7(
@@ -2687,7 +2726,7 @@ function ChatInput({
   const inputHistory = useInputHistory(activeSessionId);
   const getSessionId = useEffectEvent2(() => activeSessionId);
   const handleSlashCommand = useEffectEvent2((commandId) => onCommand?.(commandId));
-  const [localImageUrls, setLocalImageUrls] = useState7({});
+  const [localImageUrls, setLocalImageUrls] = useState8({});
   useEffect7(() => {
     const closeActionMenu = (event) => {
       const menu = actionMenuRef.current;
@@ -3016,7 +3055,7 @@ function ChatInput({
     editor.commands.focus("end");
     setRewindDraft(activeSessionId, null);
   }, [activeSessionId, editor, rewindDraft, setRewindDraft]);
-  const submittingRef = useRef4(false);
+  const submittingRef = useRef5(false);
   useEffect7(() => {
     let changed = false;
     const nextLocalIds = /* @__PURE__ */ new Set();
@@ -3095,14 +3134,14 @@ function ChatInput({
   });
   const { isRecording, level: voiceLevel } = voice;
   const handleMicDisabledClick = () => toast.info("\u8BED\u97F3\u8F93\u5165\u529F\u80FD\u672A\u5F00\u542F\uFF0C\u8BF7\u5728\u540E\u7AEF .env \u914D\u7F6E ASR_API_KEY");
-  const voiceStopRef = useRef4(voice.stop);
+  const voiceStopRef = useRef5(voice.stop);
   voiceStopRef.current = voice.stop;
   useEffect7(() => {
     if (isStreaming && isRecording) {
       void voiceStopRef.current();
     }
   }, [isStreaming, isRecording]);
-  const prevSessionIdRef = useRef4(activeSessionId);
+  const prevSessionIdRef = useRef5(activeSessionId);
   useEffect7(() => {
     if (prevSessionIdRef.current !== activeSessionId) {
       prevSessionIdRef.current = activeSessionId;
@@ -3153,14 +3192,24 @@ function ChatInput({
           if (pendingFiles.length > 0) {
             setComposerAttachments(
               (prev) => prev.map(
-                (a) => a.kind === "file" && a.status === "pending" ? { ...a, status: "uploading" } : a
+                (a) => a.kind === "file" && a.status === "pending" ? { ...a, status: "uploading", uploadProgress: 0 } : a
               )
             );
             try {
               const result = await uploadFiles(
                 uploadSessionId,
                 ".",
-                pendingFiles.map((a) => ({ file: a.file, name: a.name }))
+                pendingFiles.map((a) => ({ file: a.file, name: a.name })),
+                {
+                  onProgress: (progress) => {
+                    if (typeof progress.percent !== "number") return;
+                    setComposerAttachments(
+                      (prev) => prev.map(
+                        (a) => pendingFiles.some((pending) => pending.id === a.id) && a.kind === "file" && a.status === "uploading" ? { ...a, uploadProgress: progress.percent } : a
+                      )
+                    );
+                  }
+                }
               );
               const uploadResultById = /* @__PURE__ */ new Map();
               const failedSet = new Set(result.failed);
@@ -3176,9 +3225,15 @@ function ChatInput({
               updatedAttachments = composerAttachments.map((a) => {
                 if (!uploadResultById.has(a.id)) return a;
                 const uploadedPath = uploadResultById.get(a.id);
-                if (!uploadedPath) return { ...a, status: "failed" };
+                if (!uploadedPath) return { ...a, status: "failed", uploadProgress: null };
                 const actualName = uploadedPath.split("/").pop() || a.name;
-                return { ...a, name: actualName, status: "uploaded", uploadedPath };
+                return {
+                  ...a,
+                  name: actualName,
+                  status: "uploaded",
+                  uploadedPath,
+                  uploadProgress: null
+                };
               });
               setComposerAttachments(updatedAttachments);
               if (result.uploaded.length > 0) {
@@ -3220,7 +3275,7 @@ function ChatInput({
   const removeAttachment = (id) => {
     setComposerAttachments((prev) => prev.filter((attachment) => attachment.id !== id));
   };
-  const [showAddContext, setShowAddContext] = useState7(false);
+  const [showAddContext, setShowAddContext] = useState8(false);
   const isPlanning = mode === "planning";
   const placeholder = isPlanning ? "\u89C4\u5212\u8FDB\u884C\u4E2D\u2026 \u53EF\u8F93\u5165\u8865\u5145\u9700\u6C42\u6216\u7B49\u5F85\u5B8C\u6210" : "\u8F93\u5165\u6D88\u606F\u2026";
   const attachments = renderAttachments?.() ?? null;
@@ -3596,10 +3651,11 @@ function ChatInput({
                       "button",
                       {
                         type: "button",
-                        onClick: onStop,
-                        "aria-label": "\u505C\u6B62\u751F\u6210",
-                        className: "flex h-7 w-7 items-center justify-center rounded-lg bg-[hsl(var(--destructive))] text-[hsl(var(--destructive-foreground))] transition-opacity hover:opacity-80",
-                        children: /* @__PURE__ */ jsx9(Square2, { size: 13 })
+                        onClick: () => void onStop(),
+                        disabled: isStopping,
+                        "aria-label": isStopping ? "\u6B63\u5728\u505C\u6B62" : "\u505C\u6B62\u751F\u6210",
+                        className: "flex h-7 w-7 items-center justify-center rounded-lg bg-[hsl(var(--destructive))] text-[hsl(var(--destructive-foreground))] transition-opacity hover:opacity-80 disabled:cursor-wait disabled:opacity-70",
+                        children: isStopping ? /* @__PURE__ */ jsx9(Loader22, { size: 13, className: "animate-spin" }) : /* @__PURE__ */ jsx9(Square2, { size: 13 })
                       }
                     ) : /* @__PURE__ */ jsx9(
                       "button",
@@ -3689,12 +3745,12 @@ import {
   useEffect as useEffect16,
   useEffectEvent as useEffectEvent4,
   useMemo as useMemo17,
-  useRef as useRef11,
-  useState as useState20
+  useRef as useRef12,
+  useState as useState21
 } from "react";
 
 // ../../node_modules/.pnpm/use-stick-to-bottom@1.1.3_react@19.2.4/node_modules/use-stick-to-bottom/dist/useStickToBottom.js
-import { useCallback as useCallback7, useMemo as useMemo8, useRef as useRef5, useState as useState8 } from "react";
+import { useCallback as useCallback7, useMemo as useMemo8, useRef as useRef6, useState as useState9 } from "react";
 var DEFAULT_SPRING_ANIMATION = {
   /**
    * A value from 0 to 1, on how much to damp the animation.
@@ -3731,10 +3787,10 @@ globalThis.document?.addEventListener("click", () => {
   mouseDown = false;
 });
 var useStickToBottom = (options = {}) => {
-  const [escapedFromLock, updateEscapedFromLock] = useState8(false);
-  const [isAtBottom, updateIsAtBottom] = useState8(options.initial !== false);
-  const [isNearBottom, setIsNearBottom] = useState8(false);
-  const optionsRef = useRef5(null);
+  const [escapedFromLock, updateEscapedFromLock] = useState9(false);
+  const [isAtBottom, updateIsAtBottom] = useState9(options.initial !== false);
+  const [isNearBottom, setIsNearBottom] = useState9(false);
+  const optionsRef = useRef6(null);
   optionsRef.current = options;
   const isSelecting = useCallback7(() => {
     if (!mouseDown) {
@@ -4038,11 +4094,11 @@ function mergeAnimations(...animations) {
 
 // ../../node_modules/.pnpm/use-stick-to-bottom@1.1.3_react@19.2.4/node_modules/use-stick-to-bottom/dist/StickToBottom.js
 import * as React from "react";
-import { createContext, useContext, useEffect as useEffect8, useImperativeHandle as useImperativeHandle3, useLayoutEffect, useMemo as useMemo9, useRef as useRef6 } from "react";
+import { createContext, useContext, useEffect as useEffect8, useImperativeHandle as useImperativeHandle3, useLayoutEffect, useMemo as useMemo9, useRef as useRef7 } from "react";
 var StickToBottomContext = createContext(null);
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect8;
 function StickToBottom({ instance, children, resize, initial, mass, damping, stiffness, targetScrollTop: currentTargetScrollTop, contextRef, ...props }) {
-  const customTargetScrollTop = useRef6(null);
+  const customTargetScrollTop = useRef7(null);
   const targetScrollTop = React.useCallback((target, elements) => {
     const get = context?.targetScrollTop ?? currentTargetScrollTop;
     return get?.(target, elements) ?? target;
@@ -4119,7 +4175,7 @@ function useStickToBottomContext() {
 
 // src/react/components/chat/AssistantTurnBlock.tsx
 import { AlertCircle, BookOpen, Check as Check4, ChevronRight as ChevronRight5 } from "lucide-react";
-import { useCallback as useCallback11, useEffect as useEffect14, useMemo as useMemo15, useRef as useRef10, useState as useState17 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect14, useMemo as useMemo15, useRef as useRef11, useState as useState18 } from "react";
 
 // src/react/routes.ts
 var MEMORIES_ROUTE = "/memories";
@@ -4137,8 +4193,8 @@ import {
   useContext as useContext2,
   useEffect as useEffect9,
   useMemo as useMemo11,
-  useRef as useRef7,
-  useState as useState9
+  useRef as useRef8,
+  useState as useState10
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { Streamdown } from "streamdown";
@@ -4205,7 +4261,6 @@ var useReasoning = () => {
   }
   return context;
 };
-var AUTO_CLOSE_DELAY = 3e3;
 var MS_IN_S = 1e3;
 var Reasoning = memo2(
   ({
@@ -4218,10 +4273,8 @@ var Reasoning = memo2(
     children,
     ...props
   }) => {
-    const resolvedDefaultOpen = defaultOpen ?? isStreaming;
-    const isExplicitlyClosed = defaultOpen === false;
     const [isOpen, setIsOpen] = useControllableState({
-      defaultProp: resolvedDefaultOpen,
+      defaultProp: defaultOpen ?? false,
       onChange: onOpenChange,
       prop: open
     });
@@ -4229,12 +4282,9 @@ var Reasoning = memo2(
       defaultProp: void 0,
       prop: durationProp
     });
-    const hasEverStreamedRef = useRef7(isStreaming);
-    const [hasAutoClosed, setHasAutoClosed] = useState9(false);
-    const startTimeRef = useRef7(null);
+    const startTimeRef = useRef8(null);
     useEffect9(() => {
       if (isStreaming) {
-        hasEverStreamedRef.current = true;
         if (startTimeRef.current === null) {
           startTimeRef.current = Date.now();
         }
@@ -4243,20 +4293,6 @@ var Reasoning = memo2(
         startTimeRef.current = null;
       }
     }, [isStreaming, setDuration]);
-    useEffect9(() => {
-      if (isStreaming && !isOpen && !isExplicitlyClosed) {
-        setIsOpen(true);
-      }
-    }, [isStreaming, isOpen, setIsOpen, isExplicitlyClosed]);
-    useEffect9(() => {
-      if (hasEverStreamedRef.current && !isStreaming && isOpen && !hasAutoClosed) {
-        const timer = setTimeout(() => {
-          setIsOpen(false);
-          setHasAutoClosed(true);
-        }, AUTO_CLOSE_DELAY);
-        return () => clearTimeout(timer);
-      }
-    }, [isStreaming, isOpen, setIsOpen, hasAutoClosed]);
     const handleOpenChange = useCallback9(
       (newOpen) => {
         setIsOpen(newOpen);
@@ -4270,7 +4306,7 @@ var Reasoning = memo2(
     return /* @__PURE__ */ jsx12(ReasoningContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx12(
       Collapsible,
       {
-        className: cn("not-prose mb-4", className),
+        className: cn("not-prose", className),
         onOpenChange: handleOpenChange,
         open: isOpen,
         ...props,
@@ -4279,38 +4315,36 @@ var Reasoning = memo2(
     ) });
   }
 );
-var defaultGetThinkingMessage = (isStreaming, duration) => {
-  if (isStreaming || duration === 0) {
-    return /* @__PURE__ */ jsx12(Shimmer, { duration: 1, children: "\u6DF1\u5EA6\u601D\u8003\u4E2D..." });
-  }
-  if (duration === void 0) {
-    return /* @__PURE__ */ jsx12("p", { children: "\u5DF2\u6DF1\u5EA6\u601D\u8003" });
-  }
-  return /* @__PURE__ */ jsxs10("p", { children: [
-    "\u5DF2\u6DF1\u5EA6\u601D\u8003 ",
-    duration,
-    " \u79D2"
-  ] });
-};
+function formatWordCount(value) {
+  return new Intl.NumberFormat("zh-CN").format(value);
+}
 var ReasoningTrigger = memo2(
   ({
     className,
     children,
-    getThinkingMessage = defaultGetThinkingMessage,
+    wordCount,
     ...props
   }) => {
     const { isStreaming, isOpen, duration } = useReasoning();
+    const status = isStreaming || duration === 0 ? "\u6B63\u5728\u601D\u8003" : "\u5DF2\u601D\u8003";
+    const detail = `${formatWordCount(wordCount)} \u5B57`;
     return /* @__PURE__ */ jsx12(
       CollapsibleTrigger,
       {
         className: cn(
-          "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
+          "flex w-fit items-center gap-2 rounded-full px-1 py-0.5 text-muted-foreground text-sm transition-colors hover:text-foreground",
           className
         ),
         ...props,
         children: children ?? /* @__PURE__ */ jsxs10(Fragment3, { children: [
           /* @__PURE__ */ jsx12(BrainIcon, { className: "size-4" }),
-          getThinkingMessage(isStreaming, duration),
+          /* @__PURE__ */ jsxs10("span", { className: "inline-flex items-center gap-1.5", children: [
+            isStreaming || duration === 0 ? /* @__PURE__ */ jsx12(Shimmer, { duration: 1, children: status }) : /* @__PURE__ */ jsx12("span", { children: status }),
+            /* @__PURE__ */ jsxs10("span", { className: "text-[hsl(var(--muted-foreground))]/70", children: [
+              "\xB7 ",
+              detail
+            ] })
+          ] }),
           /* @__PURE__ */ jsx12(
             ChevronDownIcon,
             {
@@ -4332,7 +4366,7 @@ var ReasoningContent = memo2(
     CollapsibleContent,
     {
       className: cn(
-        "mt-4 text-sm",
+        "mt-2 max-h-60 overflow-auto rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--muted))]/20 px-3 py-2 text-sm",
         "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
         className
       ),
@@ -4346,7 +4380,7 @@ function compactReasoningText(text) {
 }
 function ThinkingBadge({ reasoning, variant = "inline", onClick }) {
   const compactReasoning = compactReasoningText(reasoning);
-  const [open, setOpen] = useState9(false);
+  const [open, setOpen] = useState10(false);
   return /* @__PURE__ */ jsxs10(
     "span",
     {
@@ -4423,10 +4457,10 @@ ReasoningContent.displayName = "ReasoningContent";
 
 // src/react/components/chat/AgentLoopBlock.tsx
 import { Bot, Check as Check3, ChevronRight as ChevronRight4, FileText as FileText6, Loader2 as Loader24, MessageSquareMore as MessageSquareMore2 } from "lucide-react";
-import { useEffect as useEffect13, useMemo as useMemo14, useState as useState16 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo14, useState as useState17 } from "react";
 
 // src/react/components/chat/ResourceIframe.tsx
-import { useEffect as useEffect10, useEffectEvent as useEffectEvent3, useRef as useRef8, useState as useState10 } from "react";
+import { useEffect as useEffect10, useEffectEvent as useEffectEvent3, useRef as useRef9, useState as useState11 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 function isResourceBridgeMessage(value) {
   return typeof value === "object" && value !== null && value.__resourceBridge === true && typeof value.action === "string";
@@ -4435,8 +4469,8 @@ var INLINE_HEIGHT_MIN = 80;
 var INLINE_HEIGHT_MAX = 6e3;
 var INLINE_HEIGHT_PADDING = 8;
 function ResourceIframe({ ui, sessionId }) {
-  const iframeRef = useRef8(null);
-  const iframeKeyRef = useRef8(
+  const iframeRef = useRef9(null);
+  const iframeKeyRef = useRef9(
     `iframe-${Math.random().toString(36).slice(2, 10)}`
   );
   const activeSessionId = useSessionStore((state) => state.activeSessionId);
@@ -4444,7 +4478,7 @@ function ResourceIframe({ ui, sessionId }) {
   const theme = useUiStore((state) => state.theme);
   const resourceUri = ui.resourceUri ?? ui.resourceURI;
   const iframeLabel = ui.title ?? resourceUri ?? "\u5DE5\u5177\u754C\u9762";
-  const [autoHeight, setAutoHeight] = useState10(null);
+  const [autoHeight, setAutoHeight] = useState11(null);
   useEffect10(() => {
     setAutoHeight(null);
   }, [ui.resourceHTML, resourceUri]);
@@ -4555,7 +4589,7 @@ function ResourceIframe({ ui, sessionId }) {
 
 // src/react/components/chat/ToolCallBlock.tsx
 import { Check, ChevronRight as ChevronRight3, Loader2 as Loader23, MessageSquareMore, PanelRightOpen, X as X4 } from "lucide-react";
-import { useMemo as useMemo12, useState as useState13 } from "react";
+import { useMemo as useMemo12, useState as useState14 } from "react";
 
 // src/react/components/chat/tool-renderers/shared.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
@@ -4882,21 +4916,21 @@ function FileEditRenderer({ toolCall }) {
 }
 
 // src/react/components/chat/tool-renderers/FileReadRenderer.tsx
-import { useState as useState12 } from "react";
+import { useState as useState13 } from "react";
 
 // src/react/components/chat/ImageLightbox.tsx
 import { ChevronLeft, ChevronRight as ChevronRight2, Download as Download2, ExternalLink, Minus, Plus as Plus2, RotateCcw, X as X3 } from "lucide-react";
-import { useCallback as useCallback10, useEffect as useEffect11, useRef as useRef9, useState as useState11 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect11, useRef as useRef10, useState as useState12 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 function ImageLightbox({ open, onOpenChange, images, initialIndex = 0 }) {
-  const [currentIndex, setCurrentIndex] = useState11(initialIndex);
-  const [scale, setScale] = useState11(1);
-  const [translate, setTranslate] = useState11({ x: 0, y: 0 });
-  const dragging = useRef9(false);
-  const dragStart = useRef9({ x: 0, y: 0 });
-  const translateStart = useRef9({ x: 0, y: 0 });
-  const imgRef = useRef9(null);
+  const [currentIndex, setCurrentIndex] = useState12(initialIndex);
+  const [scale, setScale] = useState12(1);
+  const [translate, setTranslate] = useState12({ x: 0, y: 0 });
+  const dragging = useRef10(false);
+  const dragStart = useRef10({ x: 0, y: 0 });
+  const translateStart = useRef10({ x: 0, y: 0 });
+  const imgRef = useRef10(null);
   const reset = useCallback10(() => {
     setScale(1);
     setTranslate({ x: 0, y: 0 });
@@ -4915,7 +4949,7 @@ function ImageLightbox({ open, onOpenChange, images, initialIndex = 0 }) {
     setCurrentIndex((i) => Math.min(images.length - 1, i + 1));
     reset();
   }, [images.length, reset]);
-  const prevOpenRef = useRef9(false);
+  const prevOpenRef = useRef10(false);
   useEffect11(() => {
     if (open && !prevOpenRef.current) {
       setCurrentIndex(initialIndex);
@@ -5205,7 +5239,7 @@ function formatLineRange(startLine, endLine) {
   return startLine === endLine ? `\u7B2C ${startLine} \u884C` : `\u7B2C ${startLine}-${endLine} \u884C`;
 }
 function FileReadRenderer({ toolCall }) {
-  const [lightboxIndex, setLightboxIndex] = useState12(null);
+  const [lightboxIndex, setLightboxIndex] = useState13(null);
   const argsValue = parseJsonValue(toolCall.arguments);
   const args = isPlainObject(argsValue) ? argsValue : null;
   const filePath = extractToolFilePath(toolCall);
@@ -5503,7 +5537,7 @@ function ToolCallBlock({
   reasoning,
   customization
 }) {
-  const [expanded, setExpanded] = useState13(false);
+  const [expanded, setExpanded] = useState14(false);
   const activeSessionId = useSessionStore((s) => s.activeSessionId);
   const sessions = useSessionStore((s) => s.sessions);
   const pushArtifact = useUiStore((s) => s.pushArtifact);
@@ -5707,7 +5741,7 @@ function buildAskUserPayload(argumentsJson) {
 }
 
 // src/react/components/chat/UserMessageBubble.tsx
-import { useState as useState15 } from "react";
+import { useState as useState16 } from "react";
 
 // src/react/lib/preview-dispatch.ts
 var IMAGE_EXTS = [
@@ -6040,10 +6074,10 @@ function MessageFileAttachmentList({
 
 // src/react/components/chat/MessageActions.tsx
 import { Check as Check2, Copy } from "lucide-react";
-import { useState as useState14 } from "react";
+import { useState as useState15 } from "react";
 import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 function MessageActions({ content, className }) {
-  const [copied, setCopied] = useState14(false);
+  const [copied, setCopied] = useState15(false);
   const handleCopy = async () => {
     const ok = await copyToClipboard(content);
     if (ok) {
@@ -6233,8 +6267,8 @@ function UserMessageBubble({ message, className }) {
       alt: attachment.name || "\u7528\u6237\u4E0A\u4F20\u7684\u56FE\u7247"
     }))
   ];
-  const [lightboxIndex, setLightboxIndex] = useState15(null);
-  const [preview, setPreview] = useState15(null);
+  const [lightboxIndex, setLightboxIndex] = useState16(null);
+  const [preview, setPreview] = useState16(null);
   const handleTextAttachmentPreview = (attachment) => {
     if (!activeSessionId) return;
     const pathForUrl = attachment.uploadedPath ?? attachment.name;
@@ -6401,7 +6435,7 @@ function AgentLoopBlock({ toolCall, sessionId, reasoning }) {
     () => visibleLoopToolCalls.some((childToolCall) => childToolCall.status === "awaiting_answer"),
     [visibleLoopToolCalls]
   );
-  const [expanded, setExpanded] = useState16(hasAwaitingAnswer);
+  const [expanded, setExpanded] = useState17(hasAwaitingAnswer);
   const completedToolLabels = useMemo14(
     () => visibleLoopToolCalls.flatMap((childToolCall) => {
       const isCompleted = childToolCall.status === "done" || childToolCall.status !== "pending" && childToolCall.status !== "awaiting_answer" && childToolCall.status !== "error" && childToolCall.status !== "cancelled";
@@ -6653,12 +6687,9 @@ function ExpandedChildAssistantMessage({
   const text = typeof message.content === "string" ? message.content.trim() : message.content.filter((part) => part.type === "text").map((part) => part.text).join("").trim();
   const toolCalls = message.tool_calls ?? [];
   const hasToolCalls = toolCalls.length > 0;
-  const firstToolCallId = toolCalls[0]?.id;
-  const toolReasoning = !isStreaming && !text && hasToolCalls ? message.reasoning : void 0;
-  const standaloneReasoning = !isStreaming && !text && !hasToolCalls ? message.reasoning : void 0;
   return /* @__PURE__ */ jsxs24("div", { className: "flex flex-col gap-2", children: [
-    message.reasoning && isStreaming && /* @__PURE__ */ jsxs24(Reasoning, { isStreaming, children: [
-      /* @__PURE__ */ jsx29(ReasoningTrigger, {}),
+    message.reasoning && /* @__PURE__ */ jsxs24(Reasoning, { isStreaming, children: [
+      /* @__PURE__ */ jsx29(ReasoningTrigger, { wordCount: message.reasoning.length }),
       /* @__PURE__ */ jsx29(ReasoningContent, { children: message.reasoning })
     ] }),
     text ? /* @__PURE__ */ jsx29(
@@ -6667,18 +6698,17 @@ function ExpandedChildAssistantMessage({
         text,
         isStreaming,
         sessionId,
-        reasoning: !isStreaming ? message.reasoning : void 0
+        reasoning: void 0
       }
     ) : null,
     !text && isStreaming && /* @__PURE__ */ jsx29("span", { className: "pl-8 text-[12px] text-[hsl(var(--muted-foreground))]", children: "\u6B63\u5728\u751F\u6210..." }),
-    standaloneReasoning ? /* @__PURE__ */ jsx29("div", { className: "pl-8", children: /* @__PURE__ */ jsx29(ThinkingBadge, { reasoning: standaloneReasoning, variant: "block" }) }) : null,
     hasToolCalls && /* @__PURE__ */ jsx29("div", { className: "flex flex-col gap-2", children: toolCalls.map(
-      (toolCall, index) => formatToolName(toolCall.name) === "Agent" ? /* @__PURE__ */ jsx29(
+      (toolCall) => formatToolName(toolCall.name) === "Agent" ? /* @__PURE__ */ jsx29(
         AgentLoopBlock,
         {
           toolCall,
           sessionId,
-          reasoning: toolCall.id === firstToolCallId ? toolReasoning : void 0
+          reasoning: void 0
         },
         toolCall.id
       ) : /* @__PURE__ */ jsx29(
@@ -6688,7 +6718,7 @@ function ExpandedChildAssistantMessage({
           sessionId,
           level: 2,
           turnBlocks: message.blocks,
-          reasoning: index === 0 ? toolReasoning : void 0
+          reasoning: void 0
         },
         toolCall.id
       )
@@ -6910,10 +6940,10 @@ function AssistantTurnBlock({
     ),
     [allToolCalls]
   );
-  const [displayMode, setDisplayMode] = useState17(
+  const [displayMode, setDisplayMode] = useState18(
     defaultTurnDisplayMode({ forceExpanded, hasActionableToolCall })
   );
-  const wasStreamingRef = useRef10(isStreaming);
+  const wasStreamingRef = useRef11(isStreaming);
   useEffect14(() => {
     if (wasStreamingRef.current && !isStreaming && !forceExpanded) {
       setDisplayMode(defaultTurnDisplayMode({ forceExpanded, hasActionableToolCall }));
@@ -7012,23 +7042,18 @@ function AssistantMessages({
   return messages.map(
     (message, index) => isRenderableAssistantMessage(message, isStreaming && index === messages.length - 1) ? (() => {
       const isStreamingLastMessage = isStreaming && index === messages.length - 1;
-      const hasText = !!getMessageText(message);
       const reasoning = message.reasoning;
       const hasReasoning = !!reasoning;
-      const hasAttachments = getImageParts(message.content).length > 0 || getFileParts(message.content).length > 0;
       const toolCalls = message.tool_calls ?? [];
       const hasToolCalls = toolCalls.length > 0;
-      const firstToolCallId = toolCalls[0]?.id;
       const toolRenderItems = groupDetailedToolCalls(toolCalls);
-      const toolReasoning = hasReasoning && !hasText && !hasAttachments && hasToolCalls && !isStreamingLastMessage ? reasoning : void 0;
-      const contentReasoning = hasReasoning && !isStreamingLastMessage && (hasText || hasAttachments || !hasToolCalls) ? reasoning : void 0;
       return /* @__PURE__ */ jsxs25(
         "div",
         {
           className: "flex flex-col gap-3",
           children: [
-            hasReasoning && isStreamingLastMessage && /* @__PURE__ */ jsxs25(Reasoning, { isStreaming: isStreamingLastMessage, children: [
-              /* @__PURE__ */ jsx30(ReasoningTrigger, {}),
+            hasReasoning && /* @__PURE__ */ jsxs25(Reasoning, { isStreaming: isStreamingLastMessage, children: [
+              /* @__PURE__ */ jsx30(ReasoningTrigger, { wordCount: reasoning.length }),
               /* @__PURE__ */ jsx30(ReasoningContent, { children: reasoning })
             ] }),
             /* @__PURE__ */ jsx30(
@@ -7037,7 +7062,7 @@ function AssistantMessages({
                 message,
                 isStreaming: isStreamingLastMessage,
                 sessionId,
-                reasoning: contentReasoning,
+                reasoning: void 0,
                 className: customization?.classNames?.assistantText
               }
             ),
@@ -7048,7 +7073,7 @@ function AssistantMessages({
                   {
                     toolCalls: item.toolCalls,
                     kind: item.kind,
-                    reasoning: item.toolCalls[0]?.id === firstToolCallId ? toolReasoning : void 0,
+                    reasoning: void 0,
                     sessionId,
                     sessionStatus,
                     askAnswers,
@@ -7066,7 +7091,7 @@ function AssistantMessages({
                 {
                   toolCall,
                   sessionId,
-                  reasoning: toolCall.id === firstToolCallId ? toolReasoning : void 0
+                  reasoning: void 0
                 },
                 toolCall.id
               ) : customization?.components?.ToolCall ? /* @__PURE__ */ jsx30(
@@ -7080,7 +7105,7 @@ function AssistantMessages({
                   sessionStatus,
                   level,
                   turnBlocks: message.blocks,
-                  reasoning: toolCall.id === firstToolCallId ? toolReasoning : void 0,
+                  reasoning: void 0,
                   customization
                 },
                 toolCall.id
@@ -7095,7 +7120,7 @@ function AssistantMessages({
                   sessionStatus,
                   level,
                   turnBlocks: message.blocks,
-                  reasoning: toolCall.id === firstToolCallId ? toolReasoning : void 0,
+                  reasoning: void 0,
                   customization
                 },
                 toolCall.id
@@ -7137,7 +7162,7 @@ function CompactToolGroupBlock({
   level,
   customization
 }) {
-  const [expanded, setExpanded] = useState17(false);
+  const [expanded, setExpanded] = useState18(false);
   const indentClass = level === 2 ? "ml-3" : "ml-4";
   const hasError = toolCalls.some(
     (tc) => tc.status === "error" || tc.status === "cancelled"
@@ -7303,7 +7328,7 @@ function AssistantText({
 }
 function MemoryRefsHint({ refs: rawRefs }) {
   const refs = Array.isArray(rawRefs) ? rawRefs : [];
-  const [expanded, setExpanded] = useState17(false);
+  const [expanded, setExpanded] = useState18(false);
   const hasSkill = refs.some((r3) => r3.skill_name);
   const label = hasSkill ? "\u53C2\u8003\u4E86\u8BE5\u6280\u80FD\u7684\u5386\u53F2\u7ECF\u9A8C" : "\u53C2\u8003\u4E86\u5386\u53F2\u7ECF\u9A8C";
   return /* @__PURE__ */ jsxs25("div", { className: "ml-4", children: [
@@ -7351,7 +7376,7 @@ function MemoryRefsHint({ refs: rawRefs }) {
 
 // src/react/components/chat/CompactionCard.tsx
 import { ChevronDown as ChevronDown2, ChevronRight as ChevronRight6, Loader2 as Loader25, Square as Square3, XCircle } from "lucide-react";
-import { useState as useState18 } from "react";
+import { useState as useState19 } from "react";
 import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
 var PERCENT_FORMATTER = new Intl.NumberFormat("zh-CN", {
   style: "percent",
@@ -7411,7 +7436,7 @@ function CompactionCard({
     ...compaction,
     status: status ?? "completed"
   } : activeCompaction;
-  const [expanded, setExpanded] = useState18(false);
+  const [expanded, setExpanded] = useState19(false);
   if (!source || !source.compaction_id) {
     return null;
   }
@@ -7453,7 +7478,7 @@ function CompactionCard({
         "button",
         {
           type: "button",
-          onClick: () => getSocket().stop(sessionId),
+          onClick: () => void getSocket().stop(sessionId),
           className: "shrink-0 rounded-md border border-current/15 px-2 py-0.5 text-[11px] transition-opacity hover:opacity-80",
           children: "\u53D6\u6D88\u6574\u7406"
         }
@@ -7572,7 +7597,7 @@ import {
   TerminalSquare,
   WandSparkles
 } from "lucide-react";
-import { useEffect as useEffect15, useMemo as useMemo16, useState as useState19 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo16, useState as useState20 } from "react";
 import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
 var EMPTY_EVENTS = [];
 function formatElapsedDuration(durationMs) {
@@ -7651,7 +7676,7 @@ function getTurnStartedAt(events) {
   return null;
 }
 function useElapsedDuration(startedAt, active) {
-  const [now, setNow] = useState19(() => Date.now());
+  const [now, setNow] = useState20(() => Date.now());
   useEffect15(() => {
     if (!active || startedAt == null) {
       return;
@@ -7943,10 +7968,10 @@ function MessageList({
     ) ?? null,
     [lastTurnId, renderBlocks]
   );
-  const containerRef = useRef11(null);
-  const scrollContainerRef = useRef11(null);
-  const frameRef = useRef11(null);
-  const [activeTurnId, setActiveTurnId] = useState20(lastTurnId);
+  const containerRef = useRef12(null);
+  const scrollContainerRef = useRef12(null);
+  const frameRef = useRef12(null);
+  const [activeTurnId, setActiveTurnId] = useState21(lastTurnId);
   const layoutSignature = useMemo17(
     () => getMessagesMeasureSignature(messages),
     [messages]
@@ -8244,6 +8269,7 @@ function ChatView({
   const {
     messages,
     isStreaming,
+    isStopping,
     send,
     stop
   } = useChat(sessionId);
@@ -8291,6 +8317,7 @@ function ChatView({
         onSend: (msg, _targetSessionId, model) => send(msg, mode, void 0, { model: model || void 0 }),
         onStop: stop,
         isStreaming,
+        isStopping,
         mode,
         onToggleMode: toggleMode,
         renderAttachments,
@@ -8360,4 +8387,4 @@ use-stick-to-bottom/dist/StickToBottom.js:
    *  Licensed under the MIT License. See License.txt in the project root for license information.
    *--------------------------------------------------------------------------------------------*)
 */
-//# sourceMappingURL=chunk-EV225FLR.js.map
+//# sourceMappingURL=chunk-RTBAPZIO.js.map