@blade-hq/agent-react 2610.0.0-beta.17 → 2610.0.0-beta.19

package/dist/index.js

@@ -245,6 +245,8 @@ function useLlmChat(options) {
   const [error, setError] = useState3(null);
   const [isStreaming, setIsStreaming] = useState3(false);
   const abortRef = useRef2(null);
+  const activeStartedAtRef = useRef2(null);
+  const assistantTimingsRef = useRef2(/* @__PURE__ */ new WeakMap());
   const generationRef = useRef2(0);
   const historyRef = useRef2([]);
   const optionsRef = useRef2(options);
@@ -263,16 +265,31 @@ function useLlmChat(options) {
     setFailedToolIds([]);
     setError(null);
     setIsStreaming(false);
+    activeStartedAtRef.current = null;
+    assistantTimingsRef.current = /* @__PURE__ */ new WeakMap();
   }, [stop]);
   const send = useCallback2(async (text) => {
     const content = text.trim();
     if (!content || abortRef.current) return false;
     const opts = optionsRef.current;
     const maxRounds = opts.maxToolRounds ?? DEFAULT_MAX_TOOL_ROUNDS;
+    const startedAt = Date.now();
+    activeStartedAtRef.current = startedAt;
     const commit = (message) => {
       historyRef.current = [...historyRef.current, message];
       setHistory(historyRef.current);
     };
+    const latestAssistantTiming = { current: null };
+    const commitAssistant = (message) => {
+      const timing = { startedAt };
+      assistantTimingsRef.current.set(message, timing);
+      latestAssistantTiming.current = timing;
+      commit(message);
+      return timing;
+    };
+    const finishTiming = (timing) => {
+      timing.durationMs = Math.max(0, Date.now() - timing.startedAt);
+    };
     setError(null);
     setIsStreaming(true);
     setStreamingText("");
@@ -298,8 +315,11 @@ function useLlmChat(options) {
         };
         setStreamingText(null);
         setStreamingCalls([]);
-        commit(assistant);
-        if (!result.toolCalls.length) return true;
+        const assistantTiming = commitAssistant(assistant);
+        if (!result.toolCalls.length) {
+          finishTiming(assistantTiming);
+          return true;
+        }
         const bail = (reason) => {
           for (const call of result.toolCalls) {
             commit({ role: "tool", tool_call_id: call.id, content: JSON.stringify({ error: reason }) });
@@ -308,11 +328,13 @@ function useLlmChat(options) {
         };
         if (!opts.onToolCall) {
           bail("\u8FD9\u4E2A\u5E94\u7528\u6CA1\u6709\u63D0\u4F9B\u5DE5\u5177\u6267\u884C\u5165\u53E3");
+          finishTiming(assistantTiming);
           return true;
         }
         if (round >= maxRounds) {
           bail(`\u5DE5\u5177\u8C03\u7528\u5DF2\u8FBE\u4E0A\u9650 ${maxRounds} \u8F6E\uFF0C\u6CA1\u6709\u6267\u884C`);
           setError(`\u5DE5\u5177\u8C03\u7528\u8D85\u8FC7 ${maxRounds} \u8F6E\u4ECD\u672A\u7ED9\u51FA\u7ED3\u8BBA\uFF0C\u5DF2\u505C\u4E0B\u3002`);
+          finishTiming(assistantTiming);
           return false;
         }
         for (const call of result.toolCalls) {
@@ -337,21 +359,39 @@ function useLlmChat(options) {
       setStreamingCalls([]);
       if (controller.signal.aborted) {
         if (generation !== generationRef.current) return false;
-        commit({ role: "assistant", content: partial ? `${partial}\uFF08\u5DF2\u505C\u6B62\uFF09` : "\uFF08\u5DF2\u505C\u6B62\uFF09" });
+        const timing = commitAssistant({
+          role: "assistant",
+          content: partial ? `${partial}\uFF08\u5DF2\u505C\u6B62\uFF09` : "\uFF08\u5DF2\u505C\u6B62\uFF09"
+        });
+        timing.status = "interrupted";
+        finishTiming(timing);
         return false;
       }
       if (partial && generation === generationRef.current) {
-        commit({ role: "assistant", content: partial });
+        const timing = commitAssistant({ role: "assistant", content: partial });
+        timing.status = "failed";
+        finishTiming(timing);
+      } else if (latestAssistantTiming.current) {
+        latestAssistantTiming.current.status = "failed";
+        finishTiming(latestAssistantTiming.current);
       }
       setError(err instanceof Error && err.message ? err.message : "\u5BF9\u8BDD\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5");
       return false;
     } finally {
       if (abortRef.current === controller) abortRef.current = null;
+      activeStartedAtRef.current = null;
       setIsStreaming(false);
     }
   }, []);
   const messages = useMemo2(
-    () => toChatMessages(history, streamingText, streamingCalls, failedToolIds),
+    () => toChatMessages(
+      history,
+      streamingText,
+      streamingCalls,
+      failedToolIds,
+      assistantTimingsRef.current,
+      activeStartedAtRef.current
+    ),
     [history, streamingText, streamingCalls, failedToolIds]
   );
   return { messages, isStreaming, error, send, stop, reset };
@@ -503,7 +543,7 @@ function parseSse(raw) {
   if (!delta) return null;
   return { text: delta.content, toolCallDeltas: delta.tool_calls };
 }
-function toChatMessages(history, streamingText, streamingCalls, failedToolIds) {
+function toChatMessages(history, streamingText, streamingCalls, failedToolIds, assistantTimings, activeStartedAt) {
   const results = /* @__PURE__ */ new Map();
   for (const msg of history) {
     if (msg.role === "tool") results.set(msg.tool_call_id, msg.content);
@@ -515,10 +555,13 @@ function toChatMessages(history, streamingText, streamingCalls, failedToolIds) {
       messages.push({ role: "user", content: msg.content, status: "completed" });
       continue;
     }
+    const timing = assistantTimings.get(msg);
     messages.push({
       role: "assistant",
       content: msg.content,
-      status: "completed",
+      status: timing?.status ?? "completed",
+      ...timing ? { timestamp: new Date(timing.startedAt).toISOString() } : {},
+      ...timing?.durationMs === void 0 ? {} : { duration_ms: timing.durationMs },
       ...msg.tool_calls?.length ? { tool_calls: msg.tool_calls.map((call) => toToolCallInfo(call, results, failedToolIds)) } : {}
     });
   }
@@ -527,6 +570,7 @@ function toChatMessages(history, streamingText, streamingCalls, failedToolIds) {
       role: "assistant",
       content: streamingText,
       status: "streaming",
+      ...activeStartedAt === null ? {} : { timestamp: new Date(activeStartedAt).toISOString() },
       ...streamingCalls.length ? { tool_calls: streamingCalls.map((call) => toToolCallInfo(call, results, failedToolIds)) } : {}
     });
   }
@@ -544,6 +588,184 @@ function toToolCallInfo(call, results, failedToolIds) {
   };
 }
 
+// src/hooks/use-message-pin.ts
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef3 } from "react";
+var DEFAULT_MARGIN_PX = 24;
+var MANUAL_SCROLL_TOLERANCE_PX = 2;
+function useMessagePin({
+  targetKey,
+  pinTarget,
+  layoutKey,
+  getScrollElement,
+  getContentElement,
+  getTargetElement,
+  getTargetScrollTop,
+  getSpacerHeight,
+  setSpacerHeight,
+  stopAutoScroll,
+  scrollToBottom,
+  margin = DEFAULT_MARGIN_PX
+}) {
+  const pinActiveRef = useRef3(false);
+  const frameRef = useRef3(null);
+  const retryTimeoutRef = useRef3(null);
+  const manualScrollCheckTimeoutRef = useRef3(null);
+  const repositionPendingRef = useRef3(false);
+  const pinnedTargetScrollTopRef = useRef3(null);
+  const appliedTargetKeyRef = useRef3(null);
+  const initialObservedTargetKeyRef = useRef3(pinTarget ? null : targetKey);
+  const observedTargetKeyRef = useRef3(initialObservedTargetKeyRef.current);
+  const setSpacerHeightRef = useRef3(setSpacerHeight);
+  setSpacerHeightRef.current = setSpacerHeight;
+  const release = useCallback3(() => {
+    if (!pinActiveRef.current) return;
+    pinActiveRef.current = false;
+    repositionPendingRef.current = false;
+    pinnedTargetScrollTopRef.current = null;
+    if (frameRef.current != null) cancelAnimationFrame(frameRef.current);
+    frameRef.current = null;
+    if (manualScrollCheckTimeoutRef.current != null) {
+      clearTimeout(manualScrollCheckTimeoutRef.current);
+      manualScrollCheckTimeoutRef.current = null;
+    }
+    setSpacerHeightRef.current(0);
+  }, []);
+  const reposition = useCallback3(
+    () => {
+      const scroll = getScrollElement();
+      const target = getTargetElement();
+      if (!scroll || !pinActiveRef.current) return;
+      const targetScrollTop = target ? Math.max(
+        0,
+        scroll.scrollTop + target.getBoundingClientRect().top - scroll.getBoundingClientRect().top - margin
+      ) : getTargetScrollTop?.(scroll);
+      if (targetScrollTop == null) return;
+      const previousSpacerHeight = getSpacerHeight();
+      const baseScrollHeight = scroll.scrollHeight - previousSpacerHeight;
+      const nextSpacerHeight = Math.max(
+        0,
+        targetScrollTop + scroll.clientHeight - baseScrollHeight
+      );
+      setSpacerHeightRef.current(nextSpacerHeight);
+      pinnedTargetScrollTopRef.current = targetScrollTop;
+      stopAutoScroll();
+      scroll.scrollTop = targetScrollTop;
+      if (nextSpacerHeight === 0 && previousSpacerHeight > 0) {
+        pinActiveRef.current = false;
+        scrollToBottom();
+      }
+    },
+    [
+      getScrollElement,
+      getSpacerHeight,
+      getTargetElement,
+      getTargetScrollTop,
+      margin,
+      scrollToBottom,
+      stopAutoScroll
+    ]
+  );
+  const scheduleReposition = useCallback3(
+    () => {
+      if (!pinActiveRef.current) return;
+      repositionPendingRef.current = true;
+      if (frameRef.current != null) return;
+      frameRef.current = requestAnimationFrame(() => {
+        frameRef.current = null;
+        const shouldReposition = repositionPendingRef.current;
+        repositionPendingRef.current = false;
+        if (shouldReposition) reposition();
+      });
+    },
+    [reposition]
+  );
+  useEffect3(() => {
+    if (!targetKey) {
+      release();
+      appliedTargetKeyRef.current = null;
+      observedTargetKeyRef.current = null;
+      return;
+    }
+    if (!pinTarget) {
+      if (pinActiveRef.current && appliedTargetKeyRef.current != null && appliedTargetKeyRef.current !== targetKey) {
+        release();
+      }
+      observedTargetKeyRef.current = targetKey;
+      return;
+    }
+    if (appliedTargetKeyRef.current === targetKey) {
+      observedTargetKeyRef.current = targetKey;
+      return;
+    }
+    if (observedTargetKeyRef.current === targetKey) return;
+    appliedTargetKeyRef.current = targetKey;
+    observedTargetKeyRef.current = targetKey;
+    pinActiveRef.current = true;
+    stopAutoScroll();
+    scheduleReposition();
+    if (retryTimeoutRef.current != null) clearTimeout(retryTimeoutRef.current);
+    retryTimeoutRef.current = window.setTimeout(() => {
+      retryTimeoutRef.current = null;
+      scheduleReposition();
+    }, 80);
+  }, [pinTarget, release, scheduleReposition, stopAutoScroll, targetKey]);
+  useEffect3(() => {
+    if (layoutKey !== void 0) scheduleReposition();
+  }, [layoutKey, scheduleReposition]);
+  useEffect3(() => {
+    const scroll = getScrollElement();
+    if (!scroll) return;
+    const content = getContentElement?.();
+    const observer = new ResizeObserver(scheduleReposition);
+    observer.observe(scroll);
+    if (content && content !== scroll) observer.observe(content);
+    window.addEventListener("resize", scheduleReposition);
+    window.visualViewport?.addEventListener("resize", scheduleReposition);
+    const handleScroll = () => {
+      if (!pinActiveRef.current) return;
+      if (manualScrollCheckTimeoutRef.current != null) {
+        clearTimeout(manualScrollCheckTimeoutRef.current);
+      }
+      manualScrollCheckTimeoutRef.current = window.setTimeout(() => {
+        manualScrollCheckTimeoutRef.current = null;
+        if (!pinActiveRef.current || repositionPendingRef.current) return;
+        const targetScrollTop = pinnedTargetScrollTopRef.current;
+        if (targetScrollTop != null && Math.abs(scroll.scrollTop - targetScrollTop) > MANUAL_SCROLL_TOLERANCE_PX) {
+          release();
+        }
+      }, 0);
+    };
+    scroll.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", scheduleReposition);
+      window.visualViewport?.removeEventListener("resize", scheduleReposition);
+      scroll.removeEventListener("scroll", handleScroll);
+    };
+  }, [getContentElement, getScrollElement, release, scheduleReposition]);
+  useEffect3(
+    () => () => {
+      if (frameRef.current != null) cancelAnimationFrame(frameRef.current);
+      frameRef.current = null;
+      if (retryTimeoutRef.current != null) clearTimeout(retryTimeoutRef.current);
+      retryTimeoutRef.current = null;
+      if (manualScrollCheckTimeoutRef.current != null) {
+        clearTimeout(manualScrollCheckTimeoutRef.current);
+      }
+      manualScrollCheckTimeoutRef.current = null;
+      repositionPendingRef.current = false;
+      pinnedTargetScrollTopRef.current = null;
+      appliedTargetKeyRef.current = null;
+      observedTargetKeyRef.current = initialObservedTargetKeyRef.current;
+      pinActiveRef.current = false;
+      setSpacerHeightRef.current(0);
+    },
+    []
+  );
+  const isActive = useCallback3(() => pinActiveRef.current, []);
+  return { release, isActive };
+}
+
 // src/components/AgentChat.tsx
 import { BladeApiError, latestPostChatFollowup } from "@blade-hq/agent-client";
 
@@ -636,6 +858,18 @@ var ArrowUp = createLucideIcon("ArrowUp", [
   ["path", { d: "M12 19V5", key: "x0mq9r" }]
 ]);
 
+// ../../node_modules/.pnpm/lucide-react@0.468.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/book-open.js
+var BookOpen = createLucideIcon("BookOpen", [
+  ["path", { d: "M12 7v14", key: "1akyts" }],
+  [
+    "path",
+    {
+      d: "M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z",
+      key: "ruj8y"
+    }
+  ]
+]);
+
 // ../../node_modules/.pnpm/lucide-react@0.468.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/bot.js
 var Bot = createLucideIcon("Bot", [
   ["path", { d: "M12 8V4H8", key: "hb8ula" }],
@@ -646,31 +880,6 @@ var Bot = createLucideIcon("Bot", [
   ["path", { d: "M9 13v2", key: "rq6x2g" }]
 ]);
 
-// ../../node_modules/.pnpm/lucide-react@0.468.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/brain.js
-var Brain = createLucideIcon("Brain", [
-  [
-    "path",
-    {
-      d: "M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z",
-      key: "l5xja"
-    }
-  ],
-  [
-    "path",
-    {
-      d: "M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z",
-      key: "ep3f8r"
-    }
-  ],
-  ["path", { d: "M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4", key: "1p4c4q" }],
-  ["path", { d: "M17.599 6.5a3 3 0 0 0 .399-1.375", key: "tmeiqw" }],
-  ["path", { d: "M6.003 5.125A3 3 0 0 0 6.401 6.5", key: "105sqy" }],
-  ["path", { d: "M3.477 10.896a4 4 0 0 1 .585-.396", key: "ql3yin" }],
-  ["path", { d: "M19.938 10.5a4 4 0 0 1 .585.396", key: "1qfode" }],
-  ["path", { d: "M6 18a4 4 0 0 1-1.967-.516", key: "2e4loj" }],
-  ["path", { d: "M19.967 17.484A4 4 0 0 1 18 18", key: "159ez6" }]
-]);
-
 // ../../node_modules/.pnpm/lucide-react@0.468.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/check.js
 var Check = createLucideIcon("Check", [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]]);
 
@@ -697,6 +906,39 @@ var Copy = createLucideIcon("Copy", [
   ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
 ]);
 
+// ../../node_modules/.pnpm/lucide-react@0.468.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/earth.js
+var Earth = createLucideIcon("Earth", [
+  ["path", { d: "M21.54 15H17a2 2 0 0 0-2 2v4.54", key: "1djwo0" }],
+  [
+    "path",
+    {
+      d: "M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17",
+      key: "1tzkfa"
+    }
+  ],
+  ["path", { d: "M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05", key: "14pb5j" }],
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]
+]);
+
+// ../../node_modules/.pnpm/lucide-react@0.468.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/file-pen-line.js
+var FilePenLine = createLucideIcon("FilePenLine", [
+  [
+    "path",
+    {
+      d: "m18 5-2.414-2.414A2 2 0 0 0 14.172 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2",
+      key: "142zxg"
+    }
+  ],
+  [
+    "path",
+    {
+      d: "M21.378 12.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z",
+      key: "2t3380"
+    }
+  ],
+  ["path", { d: "M8 18h1", key: "13wk12" }]
+]);
+
 // ../../node_modules/.pnpm/lucide-react@0.468.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/file-text.js
 var FileText = createLucideIcon("FileText", [
   ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
@@ -781,6 +1023,12 @@ var Play = createLucideIcon("Play", [
   ["polygon", { points: "6 3 20 12 6 21 6 3", key: "1oa8hb" }]
 ]);
 
+// ../../node_modules/.pnpm/lucide-react@0.468.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/search.js
+var Search = createLucideIcon("Search", [
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
+  ["path", { d: "m21 21-4.3-4.3", key: "1qie3q" }]
+]);
+
 // ../../node_modules/.pnpm/lucide-react@0.468.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/settings-2.js
 var Settings2 = createLucideIcon("Settings2", [
   ["path", { d: "M20 7h-9", key: "3s1dr2" }],
@@ -809,6 +1057,12 @@ var Square = createLucideIcon("Square", [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }]
 ]);
 
+// ../../node_modules/.pnpm/lucide-react@0.468.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/terminal.js
+var Terminal = createLucideIcon("Terminal", [
+  ["polyline", { points: "4 17 10 11 4 5", key: "akl6gq" }],
+  ["line", { x1: "12", x2: "20", y1: "19", y2: "19", key: "q2wloq" }]
+]);
+
 // ../../node_modules/.pnpm/lucide-react@0.468.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/triangle-alert.js
 var TriangleAlert = createLucideIcon("TriangleAlert", [
   [
@@ -822,6 +1076,17 @@ var TriangleAlert = createLucideIcon("TriangleAlert", [
   ["path", { d: "M12 17h.01", key: "p32p05" }]
 ]);
 
+// ../../node_modules/.pnpm/lucide-react@0.468.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/wrench.js
+var Wrench = createLucideIcon("Wrench", [
+  [
+    "path",
+    {
+      d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z",
+      key: "cbrjhi"
+    }
+  ]
+]);
+
 // ../../node_modules/.pnpm/lucide-react@0.468.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/x.js
 var X = createLucideIcon("X", [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
@@ -829,7 +1094,7 @@ var X = createLucideIcon("X", [
 ]);
 
 // src/components/AgentChat.tsx
-import { useCallback as useCallback7, useEffect as useEffect9, useMemo as useMemo8, useState as useState13 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect11, useMemo as useMemo8, useState as useState13 } from "react";
 
 // src/lib/utils.ts
 function cn(...inputs) {
@@ -958,6 +1223,12 @@ function ReplayMismatchPrompt({ mismatch, className }) {
 
 // src/components/ChatInput.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function isImeCompositionKey(event) {
+  return event.isComposing || event.keyCode === 229;
+}
+function shouldSubmitChatInput(event, menuOpen) {
+  return event.key === "Enter" && !event.shiftKey && !menuOpen && !isImeCompositionKey(event);
+}
 function ChatInput({
   value,
   onValueChange,
@@ -977,7 +1248,12 @@ function ChatInput({
     onValueChange("");
   };
   const handleKeyDown = (event) => {
-    if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+    if (shouldSubmitChatInput({
+      key: event.key,
+      shiftKey: event.shiftKey,
+      isComposing: event.nativeEvent.isComposing,
+      keyCode: event.nativeEvent.keyCode
+    }, false)) {
       event.preventDefault();
       void handleSend();
     }
@@ -1027,16 +1303,16 @@ function ChatInput({
 }
 
 // src/components/ConnectionBanner.tsx
-import { useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
+import { useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var CONNECTION_NOTICE_DELAY_MS = 3e3;
 var CONNECTION_ERROR_DELAY_MS = 15e3;
 function useConnectionNoticePhase(connected) {
   const [phase, setPhase] = useState4("hidden");
-  const connectedRef = useRef3(connected);
-  const timersRef = useRef3([]);
+  const connectedRef = useRef4(connected);
+  const timersRef = useRef4([]);
   connectedRef.current = connected;
-  useEffect3(() => {
+  useEffect4(() => {
     const clearTimers = () => {
       for (const timer of timersRef.current) clearTimeout(timer);
       timersRef.current = [];
@@ -1076,7 +1352,7 @@ function useConnectionNoticePhase(connected) {
   return phase;
 }
 function ConnectionBanner({ connection, className }) {
-  const hasConnectedRef = useRef3(connection === "connected" || connection === "reconnecting");
+  const hasConnectedRef = useRef4(connection === "connected" || connection === "reconnecting");
   if (connection === "connected") hasConnectedRef.current = true;
   const connected = connection === "connected";
   const phase = useConnectionNoticePhase(connected);
@@ -1103,10 +1379,10 @@ function ConnectionBanner({ connection, className }) {
 
 // src/components/MessageList.tsx
 import { isHiddenInternalMessage } from "@blade-hq/agent-client";
-import { useCallback as useCallback6, useEffect as useEffect8, useMemo as useMemo7, useRef as useRef9, useState as useState12 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect10, useMemo as useMemo7, useRef as useRef11, useState as useState12 } 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 useCallback3, useMemo as useMemo3, useRef as useRef4, useState as useState5 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo3, useRef as useRef5, useState as useState5 } from "react";
 var DEFAULT_SPRING_ANIMATION = {
   /**
    * A value from 0 to 1, on how much to damp the animation.
@@ -1146,9 +1422,9 @@ var useStickToBottom = (options = {}) => {
   const [escapedFromLock, updateEscapedFromLock] = useState5(false);
   const [isAtBottom, updateIsAtBottom] = useState5(options.initial !== false);
   const [isNearBottom, setIsNearBottom] = useState5(false);
-  const optionsRef = useRef4(null);
+  const optionsRef = useRef5(null);
   optionsRef.current = options;
-  const isSelecting = useCallback3(() => {
+  const isSelecting = useCallback4(() => {
     if (!mouseDown) {
       return false;
     }
@@ -1159,11 +1435,11 @@ var useStickToBottom = (options = {}) => {
     const range = selection.getRangeAt(0);
     return range.commonAncestorContainer.contains(scrollRef.current) || scrollRef.current?.contains(range.commonAncestorContainer);
   }, []);
-  const setIsAtBottom = useCallback3((isAtBottom2) => {
+  const setIsAtBottom = useCallback4((isAtBottom2) => {
     state.isAtBottom = isAtBottom2;
     updateIsAtBottom(isAtBottom2);
   }, []);
-  const setEscapedFromLock = useCallback3((escapedFromLock2) => {
+  const setEscapedFromLock = useCallback4((escapedFromLock2) => {
     state.escapedFromLock = escapedFromLock2;
     updateEscapedFromLock(escapedFromLock2);
   }, []);
@@ -1220,7 +1496,7 @@ var useStickToBottom = (options = {}) => {
       }
     };
   }, []);
-  const scrollToBottom = useCallback3((scrollOptions = {}) => {
+  const scrollToBottom = useCallback4((scrollOptions = {}) => {
     if (typeof scrollOptions === "string") {
       scrollOptions = { animation: scrollOptions };
     }
@@ -1305,11 +1581,11 @@ var useStickToBottom = (options = {}) => {
     }
     return next();
   }, [setIsAtBottom, isSelecting, state]);
-  const stopScroll = useCallback3(() => {
+  const stopScroll = useCallback4(() => {
     setEscapedFromLock(true);
     setIsAtBottom(false);
   }, [setEscapedFromLock, setIsAtBottom]);
-  const handleScroll = useCallback3(({ target }) => {
+  const handleScroll = useCallback4(({ target }) => {
     if (target !== scrollRef.current) {
       return;
     }
@@ -1348,7 +1624,7 @@ var useStickToBottom = (options = {}) => {
       }
     }, 1);
   }, [setEscapedFromLock, setIsAtBottom, isSelecting, state]);
-  const handleWheel = useCallback3(({ target, deltaY }) => {
+  const handleWheel = useCallback4(({ target, deltaY }) => {
     let element = target;
     while (!["scroll", "auto"].includes(getComputedStyle(element).overflow)) {
       if (!element.parentElement) {
@@ -1418,7 +1694,7 @@ var useStickToBottom = (options = {}) => {
   };
 };
 function useRefCallback(callback, deps) {
-  const result = useCallback3((ref) => {
+  const result = useCallback4((ref) => {
     result.current = ref;
     return callback(ref);
   }, deps);
@@ -1450,11 +1726,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 as createContext2, useContext as useContext2, useEffect as useEffect4, useImperativeHandle, useLayoutEffect, useMemo as useMemo4, useRef as useRef5 } from "react";
+import { createContext as createContext2, useContext as useContext2, useEffect as useEffect5, useImperativeHandle, useLayoutEffect, useMemo as useMemo4, useRef as useRef6 } from "react";
 var StickToBottomContext = createContext2(null);
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect4;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect5;
 function StickToBottom({ instance, children, resize, initial, mass, damping, stiffness, targetScrollTop: currentTargetScrollTop, contextRef, ...props }) {
-  const customTargetScrollTop = useRef5(null);
+  const customTargetScrollTop = useRef6(null);
   const targetScrollTop = React.useCallback((target, elements) => {
     const get = context?.targetScrollTop ?? currentTargetScrollTop;
     return get?.(target, elements) ?? target;
@@ -1530,8 +1806,13 @@ function useStickToBottomContext() {
 }
 
 // src/components/AssistantTurnBlock.tsx
-import { getTextContent, normalizeMessageContent } from "@blade-hq/agent-client";
-import { useState as useState10 } from "react";
+import {
+  getFileParts,
+  getImageParts,
+  getTextContent,
+  normalizeMessageContent
+} from "@blade-hq/agent-client";
+import { useEffect as useEffect8, useRef as useRef9, useState as useState10 } from "react";
 
 // src/components/AgentLoopBlock.tsx
 import { useState as useState6 } from "react";
@@ -1551,6 +1832,7 @@ var TOOL_NAME_ALIASES = {
   glob: "Glob",
   grep: "Grep",
   ls: "Ls",
+  multi_edit: "MultiEdit",
   read: "Read",
   read_skill: "ReadSkill",
   web_fetch: "WebFetch",
@@ -1563,6 +1845,7 @@ var TOOL_DISPLAY_LABELS = {
   Read: "\u8BFB\u53D6\u6587\u4EF6",
   Write: "\u5199\u5165\u6587\u4EF6",
   Edit: "\u7F16\u8F91\u6587\u4EF6",
+  MultiEdit: "\u7F16\u8F91\u6587\u4EF6",
   Ls: "\u5217\u51FA\u76EE\u5F55",
   Glob: "\u5339\u914D\u6587\u4EF6",
   Grep: "\u641C\u7D22\u6587\u672C",
@@ -1576,6 +1859,16 @@ var TOOL_DISPLAY_LABELS = {
   ListSessions: "\u5217\u51FA\u5386\u53F2\u4F1A\u8BDD",
   GetSessionHistory: "\u8BFB\u53D6\u4F1A\u8BDD\u5386\u53F2"
 };
+var PRIORITY_FILE_KEYS = [
+  "file_path",
+  "output_file",
+  "output_path",
+  "path",
+  "filepath",
+  "target_file",
+  "destination",
+  "filename"
+];
 function safeParseJson(value) {
   if (!value) return null;
   try {
@@ -1584,6 +1877,38 @@ function safeParseJson(value) {
     return null;
   }
 }
+function isPlainObject(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function findFileLikeValue(value, depth = 0, allowPlainString = false) {
+  if (depth > 3) return null;
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (!trimmed) return null;
+    if (allowPlainString || trimmed.includes("/") || /\.[a-z0-9]{1,8}$/i.test(trimmed)) {
+      return trimmed;
+    }
+    return null;
+  }
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      const found = findFileLikeValue(item, depth + 1, allowPlainString);
+      if (found) return found;
+    }
+    return null;
+  }
+  if (isPlainObject(value)) {
+    for (const key of PRIORITY_FILE_KEYS) {
+      const direct = findFileLikeValue(value[key], depth + 1, true);
+      if (direct) return direct;
+    }
+    for (const nested of Object.values(value)) {
+      const found = findFileLikeValue(nested, depth + 1, allowPlainString);
+      if (found) return found;
+    }
+  }
+  return null;
+}
 function getStringArgValue(args, key) {
   const value = args?.[key];
   return typeof value === "string" ? value.trim() : "";
@@ -1606,6 +1931,15 @@ function formatToolName(name) {
   const normalized = stripped.replace(/([a-z0-9])([A-Z])/g, "$1_$2").replace(/[^a-zA-Z0-9]+/g, "_").replace(/^_+|_+$/g, "").toLowerCase();
   return TOOL_NAME_ALIASES[normalized] ?? stripped;
 }
+function extractToolFilePath(toolCall) {
+  const formattedName = formatToolName(toolCall.name);
+  if (formattedName !== "Read" && formattedName !== "Write" && formattedName !== "Edit" && formattedName !== "MultiEdit") {
+    return null;
+  }
+  const filePath = findFileLikeValue(safeParseJson(toolCall.arguments));
+  if (!filePath || filePath.split("/").pop()?.toLowerCase() === "phase.json") return null;
+  return filePath;
+}
 function getToolDisplayLabel(toolCall) {
   const normalized = formatToolName(toolCall.name);
   const args = safeParseJson(toolCall.arguments);
@@ -1687,79 +2021,64 @@ function AgentLoopBlock({ toolCall }) {
   const description = parseAgentDescription(toolCall.arguments);
   const running = toolCall.status === "pending" || toolCall.status === "awaiting_answer";
   const failed = toolCall.status === "error" || toolCall.status === "cancelled";
-  return /* @__PURE__ */ jsxs5("div", { className: "blade-chat-agent-loop ml-4 text-xs", children: [
+  const hasResult = toolCall.result != null;
+  const iconClass = cn(
+    "size-3.5 shrink-0",
+    failed ? "text-red-500" : "text-[hsl(var(--muted-foreground))]"
+  );
+  return /* @__PURE__ */ jsxs5("div", { className: "blade-chat-agent-loop text-xs leading-[22px]", children: [
     /* @__PURE__ */ jsxs5(
-      "div",
+      "button",
       {
+        type: "button",
+        onClick: () => hasResult && setExpanded(!expanded),
+        disabled: !hasResult,
+        "aria-expanded": hasResult ? expanded : void 0,
+        "data-testid": "execution-tool-intent",
         className: cn(
-          "border-l-[3px] flex items-center gap-2 px-3 py-2",
-          failed ? "border-l-[hsl(var(--muted-foreground)/0.5)]" : running ? "border-l-blue-500" : "border-l-[hsl(var(--primary))]"
+          "flex min-w-0 items-center gap-1 py-1.5 text-left",
+          hasResult && "cursor-pointer hover:text-[hsl(var(--foreground))]",
+          failed ? "text-red-500" : "text-[hsl(var(--muted-foreground))]"
         ),
+        title: `\u5B50\u4EFB\u52A1\uFF1A${description}`,
         children: [
-          /* @__PURE__ */ jsxs5(
-            "button",
+          running ? /* @__PURE__ */ jsx6(LoaderCircle, { className: cn(iconClass, "animate-spin"), "aria-hidden": "true" }) : toolCall.status === "error" ? /* @__PURE__ */ jsx6(CircleAlert, { className: iconClass, "aria-hidden": "true" }) : toolCall.status === "cancelled" ? /* @__PURE__ */ jsx6(X, { className: iconClass, "aria-hidden": "true" }) : /* @__PURE__ */ jsx6(Bot, { className: iconClass, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs5("span", { className: "min-w-0 truncate", children: [
+            "\u5B50\u4EFB\u52A1\uFF1A",
+            description
+          ] }),
+          hasResult ? /* @__PURE__ */ jsx6(
+            ChevronRight,
             {
-              type: "button",
-              onClick: () => setExpanded(!expanded),
-              className: "flex min-w-0 flex-1 items-center gap-2 text-left transition-colors hover:bg-white/3 focus-visible:ring-1 focus-visible:ring-[hsl(var(--ring))] focus:outline-none",
-              "aria-expanded": expanded,
-              children: [
-                /* @__PURE__ */ jsx6(
-                  ChevronRight,
-                  {
-                    size: 11,
-                    className: cn(
-                      "shrink-0 text-[hsl(var(--muted-foreground))] transition-transform",
-                      expanded && "rotate-90"
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsx6(Bot, { size: 12, className: "shrink-0 text-[hsl(var(--muted-foreground))]" }),
-                /* @__PURE__ */ jsxs5(
-                  "span",
-                  {
-                    className: cn(
-                      "flex shrink-0 items-center gap-1 text-[10px]",
-                      failed ? "text-[hsl(var(--muted-foreground))]" : running ? "text-blue-300" : "text-[hsl(var(--primary))]"
-                    ),
-                    children: [
-                      running ? /* @__PURE__ */ jsx6(LoaderCircle, { size: 11, className: "animate-spin" }) : failed ? /* @__PURE__ */ jsx6(X, { size: 11 }) : /* @__PURE__ */ jsx6(Check, { size: 11 }),
-                      /* @__PURE__ */ jsx6("span", { children: running ? "\u6267\u884C\u4E2D" : failed ? "\u5DF2\u7EC8\u6B62" : "\u5B8C\u6210" })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs5("span", { className: "min-w-0 flex-1 truncate font-medium text-[hsl(var(--foreground))]", children: [
-                  "\u5B50\u667A\u80FD\u4F53\uFF1A",
-                  description
-                ] })
-              ]
+              size: 14,
+              className: cn(
+                "shrink-0 transition-transform duration-300",
+                expanded && "rotate-90"
+              ),
+              "aria-hidden": "true"
             }
-          ),
-          typeof toolCall.duration_ms === "number" && toolCall.duration_ms > 0 && /* @__PURE__ */ jsx6("span", { className: "shrink-0 font-mono text-[10px] text-[hsl(var(--muted-foreground))]", children: formatToolDuration(toolCall.duration_ms) })
+          ) : null
         ]
       }
     ),
-    expanded && toolCall.result != null && /* @__PURE__ */ jsxs5("div", { className: "ml-4 mt-1 rounded-xl bg-[hsl(var(--card))] px-3 py-3", children: [
-      /* @__PURE__ */ jsx6("div", { className: "mb-1 text-[10px] uppercase tracking-wider text-[hsl(var(--muted-foreground))]", children: "\u7ED3\u679C" }),
-      /* @__PURE__ */ jsx6("pre", { className: "max-h-[400px] overflow-auto whitespace-pre-wrap rounded-md bg-[hsl(var(--muted))] p-2 font-mono text-[11px] text-[hsl(var(--foreground))]", children: formatToolResult(toolCall.result) })
-    ] })
+    expanded && hasResult ? /* @__PURE__ */ jsx6("div", { className: "ml-[18px] mt-1.5 max-h-[400px] overflow-auto whitespace-pre-wrap text-xs leading-[22px] text-[hsl(var(--muted-foreground))]", children: formatToolResult(toolCall.result) }) : null
   ] });
 }
 
 // src/components/MarkdownContent.tsx
 import {
-  useEffect as useEffect5,
+  useEffect as useEffect6,
   useMemo as useMemo5,
-  useRef as useRef6,
+  useRef as useRef7,
   useState as useState7
 } from "react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var SYSTEM_REMINDER_RE = /<system-reminder>[\s\S]*?<\/system-reminder>/gi;
 function CodeBlockPre({ children, node: _node, ...props }) {
-  const preRef = useRef6(null);
+  const preRef = useRef7(null);
   const [copied, setCopied] = useState7(false);
   const [language, setLanguage] = useState7("");
-  useEffect5(() => {
+  useEffect6(() => {
     const codeEl = preRef.current?.querySelector("code");
     setLanguage(codeEl?.className.match(/language-(\S+)/)?.[1] ?? "");
   }, []);
@@ -1833,7 +2152,7 @@ function Shimmer({ children = "\u6B63\u5728\u601D\u8003...", className }) {
 import { useState as useState9 } from "react";
 
 // src/components/AskUserQuestionBlock.tsx
-import { useEffect as useEffect6, useMemo as useMemo6, useRef as useRef7, useState as useState8 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo6, useRef as useRef8, useState as useState8 } from "react";
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var CUSTOM_TEXTAREA_MAX_HEIGHT = 160;
 function resizeCustomTextarea(textarea) {
@@ -1842,12 +2161,12 @@ function resizeCustomTextarea(textarea) {
   textarea.style.overflowY = textarea.scrollHeight > CUSTOM_TEXTAREA_MAX_HEIGHT ? "auto" : "hidden";
 }
 function useAutoResizeTextarea(value) {
-  const textareaRef = useRef7(null);
-  useEffect6(() => {
+  const textareaRef = useRef8(null);
+  useEffect7(() => {
     const textarea = textareaRef.current;
     if (textarea?.value === value) resizeCustomTextarea(textarea);
   }, [value]);
-  useEffect6(() => {
+  useEffect7(() => {
     const textarea = textareaRef.current;
     if (!textarea || typeof ResizeObserver === "undefined") return;
     let previousWidth = textarea.clientWidth;
@@ -1877,7 +2196,7 @@ function AskUserQuestionBlock({
   const [usingCustom, setUsingCustom] = useState8(/* @__PURE__ */ new Set());
   const [note, setNote] = useState8("");
   const [submitted, setSubmitted] = useState8(false);
-  useEffect6(() => {
+  useEffect7(() => {
     if (sessionStatus === "failed" || sessionStatus === "interrupted") {
       setSubmitted(false);
     }
@@ -2369,44 +2688,239 @@ function buildAskUserPayload(argumentsJson) {
 import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 function ThinkingBlock({ reasoning, isStreaming }) {
   const [open, setOpen] = useState10(false);
-  return /* @__PURE__ */ jsxs9("div", { className: "blade-chat-thinking ml-4 text-sm", children: [
+  return /* @__PURE__ */ jsxs9("div", { className: "blade-chat-thinking text-xs", children: [
     /* @__PURE__ */ jsxs9(
       "button",
       {
         type: "button",
         onClick: () => setOpen(!open),
         "aria-expanded": open,
-        className: "inline-flex items-center gap-1.5 text-[hsl(var(--muted-foreground))] transition-colors hover:text-[hsl(var(--foreground))]",
+        className: "group/thinking inline-flex items-center gap-1 text-[hsl(var(--muted-foreground))] transition-colors hover:text-[hsl(var(--foreground))]",
         children: [
-          /* @__PURE__ */ jsx11(Brain, { size: 12, className: "shrink-0" }),
-          isStreaming ? /* @__PURE__ */ jsx11(Shimmer, { className: "text-xs", children: "\u6B63\u5728\u601D\u8003" }) : /* @__PURE__ */ jsx11("span", { children: "\u601D\u8003\u8FC7\u7A0B" }),
-          /* @__PURE__ */ jsxs9("span", { className: "text-[hsl(var(--muted-foreground))]/70", children: [
-            "\xB7 ",
-            new Intl.NumberFormat("zh-CN").format(reasoning.length),
-            " \u5B57"
-          ] }),
+          isStreaming ? /* @__PURE__ */ jsx11(Shimmer, { className: "text-xs", children: "\u6B63\u5728\u601D\u8003" }) : /* @__PURE__ */ jsx11("span", { children: "\u5DF2\u601D\u8003" }),
           /* @__PURE__ */ jsx11(
-            ChevronDown,
+            ChevronRight,
             {
-              size: 12,
-              className: cn("shrink-0 transition-transform", open && "rotate-180")
+              size: 14,
+              className: cn(
+                "shrink-0 opacity-0 transition-[opacity,transform] group-hover/thinking:opacity-100",
+                open && "rotate-90 opacity-100"
+              )
             }
           )
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx11("div", { className: "mt-1.5 whitespace-pre-wrap border-l-2 border-[hsl(var(--border))] pl-3 text-[11px] leading-5 text-[hsl(var(--muted-foreground))]", children: reasoning })
+    open && /* @__PURE__ */ jsx11("div", { className: "mt-1.5 whitespace-pre-wrap text-xs leading-[22px] text-[hsl(var(--muted-foreground))]", children: reasoning })
   ] });
 }
 function getMessageText(message) {
   return getTextContent(normalizeMessageContent(message.content)).trim();
 }
+function hasRenderableMessageContent(message) {
+  return Boolean(getMessageText(message)) || getImageParts(message.content).length > 0 || getFileParts(message.content).length > 0;
+}
+function getLastContentMessage(messages) {
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    if (hasRenderableMessageContent(messages[index])) return messages[index];
+  }
+  return null;
+}
 function findLatestReasoningMessageIndex(messages) {
   for (let index = messages.length - 1; index >= 0; index -= 1) {
     if (messages[index].reasoning) return index;
   }
   return -1;
 }
+function resolveTurnDisplayMode({
+  isStreaming: _isStreaming,
+  displayMode
+}) {
+  return displayMode;
+}
+function formatExecutionDuration(durationMs) {
+  const totalSeconds = Math.max(0, Math.round(durationMs / 1e3));
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return minutes > 0 ? `${minutes}\u5206${seconds}\u79D2` : `${seconds}\u79D2`;
+}
+function getExecutionDurationMs({
+  messages,
+  isStreaming,
+  now = Date.now()
+}) {
+  const knownDuration = messages.reduce(
+    (total, message) => {
+      if (typeof message.duration_ms === "number" && message.duration_ms > 0) {
+        return total + message.duration_ms;
+      }
+      return total + (message.tool_calls ?? []).reduce(
+        (toolTotal, toolCall) => toolTotal + (typeof toolCall.duration_ms === "number" && toolCall.duration_ms > 0 ? toolCall.duration_ms : 0),
+        0
+      );
+    },
+    0
+  );
+  if (!isStreaming) return knownDuration;
+  const startedAt = messages.map((message) => message.timestamp ? Date.parse(message.timestamp) : Number.NaN).filter((value) => Number.isFinite(value)).sort((a, b) => a - b)[0];
+  if (startedAt === void 0) return knownDuration;
+  return Math.max(knownDuration, now - startedAt);
+}
+function findLastExceptionalEvent(messages) {
+  for (let messageIndex = messages.length - 1; messageIndex >= 0; messageIndex -= 1) {
+    const messageStatus = messages[messageIndex].status;
+    if (messageStatus === "failed") return { messageIndex, status: "error" };
+    if (messageStatus === "interrupted") return { messageIndex, status: "cancelled" };
+    const toolCalls = messages[messageIndex].tool_calls ?? [];
+    for (let toolIndex = toolCalls.length - 1; toolIndex >= 0; toolIndex -= 1) {
+      const status = toolCalls[toolIndex].status;
+      if (status === "error" || status === "cancelled") {
+        return { messageIndex, status };
+      }
+    }
+  }
+  return null;
+}
+function executionSummaryLabel({
+  messages,
+  isStreaming,
+  durationMs,
+  sessionStatus,
+  askAnswers
+}) {
+  if (isStreaming) {
+    return durationMs > 0 ? `\u6B63\u5728\u6267\u884C ${formatExecutionDuration(durationMs)}` : "\u6B63\u5728\u6267\u884C";
+  }
+  if (sessionStatus === "waiting_for_input" && messages.some(
+    (message) => (message.tool_calls ?? []).some(
+      (toolCall) => formatToolName(toolCall.name) === "AskUserQuestion" && toolCall.status === "awaiting_answer" && !askAnswers?.[toolCall.id]
+    )
+  )) {
+    return "\u7B49\u5F85\u8F93\u5165";
+  }
+  const completedLabel = durationMs > 0 ? `\u6267\u884C\u5B8C\u6210 ${formatExecutionDuration(durationMs)}` : "\u6267\u884C\u5B8C\u6210";
+  const lastExceptionalEvent = findLastExceptionalEvent(messages);
+  if (lastExceptionalEvent) {
+    const recovered = messages.slice(lastExceptionalEvent.messageIndex + 1).some(hasRenderableMessageContent);
+    if (lastExceptionalEvent.status === "error") {
+      return recovered ? `${completedLabel} \xB7 \u90E8\u5206\u6B65\u9AA4\u5931\u8D25` : "\u6267\u884C\u5931\u8D25";
+    }
+    return recovered ? `${completedLabel} \xB7 \u90E8\u5206\u6B65\u9AA4\u672A\u5B8C\u6210` : "\u6267\u884C\u5DF2\u4E2D\u65AD";
+  }
+  return completedLabel;
+}
+function executionToolTypeLabel(toolCall) {
+  switch (formatToolName(toolCall.name)) {
+    case "WebSearch":
+    case "WebFetch":
+      return "\u7F51\u7EDC\u68C0\u7D22";
+    case "Bash":
+    case "BgBash":
+      return "\u547D\u4EE4\u6267\u884C";
+    case "Read":
+    case "ReadSkill":
+      return "\u5185\u5BB9\u8BFB\u53D6";
+    case "Write":
+    case "Edit":
+    case "MultiEdit":
+      return "\u6587\u4EF6\u5904\u7406";
+    case "Grep":
+    case "Glob":
+      return "\u5185\u5BB9\u641C\u7D22";
+    case "Agent":
+      return "\u5B50\u4EFB\u52A1";
+    case "search_skills":
+      return "\u6280\u80FD\u68C0\u7D22";
+    case "get_skill_content":
+      return "\u8BFB\u53D6\u6280\u80FD";
+    case "run_skill_tool":
+      return "\u6267\u884C\u6280\u80FD";
+    default:
+      return toolCall.display_name?.trim() || "\u6267\u884C\u6B65\u9AA4";
+  }
+}
+function executionToolIntent(toolCall) {
+  const normalizedName = formatToolName(toolCall.name);
+  let args = null;
+  try {
+    const parsed = JSON.parse(toolCall.arguments);
+    args = parsed && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : null;
+  } catch {
+    args = null;
+  }
+  const getString = (key) => {
+    const value = args?.[key];
+    return typeof value === "string" ? value.trim() : "";
+  };
+  const explicitIntent = getString("description") || getString("_meta_display_name") || getString("display_name") || toolCall.display_name?.trim() || "";
+  if (explicitIntent) return explicitIntent;
+  if (normalizedName === "search_skills") return getString("query");
+  if (normalizedName === "get_skill_content" || normalizedName === "ReadSkill") {
+    return getString("skill_name") || getString("skill");
+  }
+  if (normalizedName === "FinishTask") return getString("title");
+  return "";
+}
+function ExecutionToolRow({ toolCall }) {
+  const normalizedName = formatToolName(toolCall.name);
+  const typeLabel = executionToolTypeLabel(toolCall);
+  const intent = executionToolIntent(toolCall);
+  const label = intent ? `${typeLabel}\uFF1A${intent}` : typeLabel;
+  const failed = toolCall.status === "error" || toolCall.status === "cancelled";
+  const filePath = toolCall.status === "done" && (normalizedName === "Write" || normalizedName === "Edit" || normalizedName === "MultiEdit") ? extractToolFilePath(toolCall) : null;
+  const [fileOpen, setFileOpen] = useState10(false);
+  const iconClass = cn(
+    "size-3.5 shrink-0",
+    failed ? "text-red-500" : "text-[hsl(var(--muted-foreground))]"
+  );
+  const icon = toolCall.status === "pending" ? /* @__PURE__ */ jsx11(LoaderCircle, { className: cn(iconClass, "animate-spin"), "aria-hidden": "true" }) : toolCall.status === "error" ? /* @__PURE__ */ jsx11(CircleAlert, { className: iconClass, "aria-hidden": "true" }) : toolCall.status === "cancelled" ? /* @__PURE__ */ jsx11(X, { className: iconClass, "aria-hidden": "true" }) : normalizedName === "WebSearch" || normalizedName === "WebFetch" ? /* @__PURE__ */ jsx11(Earth, { className: iconClass, "aria-hidden": "true" }) : normalizedName === "Bash" || normalizedName === "BgBash" ? /* @__PURE__ */ jsx11(Terminal, { className: iconClass, "aria-hidden": "true" }) : normalizedName === "Write" || normalizedName === "Edit" || normalizedName === "MultiEdit" ? /* @__PURE__ */ jsx11(FilePenLine, { className: iconClass, "aria-hidden": "true" }) : normalizedName === "Read" || normalizedName === "ReadSkill" ? /* @__PURE__ */ jsx11(BookOpen, { className: iconClass, "aria-hidden": "true" }) : normalizedName === "Grep" || normalizedName === "Glob" || normalizedName === "search_skills" ? /* @__PURE__ */ jsx11(Search, { className: iconClass, "aria-hidden": "true" }) : normalizedName === "get_skill_content" ? /* @__PURE__ */ jsx11(BookOpen, { className: iconClass, "aria-hidden": "true" }) : normalizedName === "Agent" ? /* @__PURE__ */ jsx11(Bot, { className: iconClass, "aria-hidden": "true" }) : /* @__PURE__ */ jsx11(Wrench, { className: iconClass, "aria-hidden": "true" });
+  const rowClassName = cn(
+    "flex min-w-0 items-center gap-1 py-1.5 text-xs leading-[22px]",
+    failed ? "text-red-500" : "text-[hsl(var(--muted-foreground))]"
+  );
+  if (!filePath) {
+    return /* @__PURE__ */ jsxs9("div", { "data-testid": "execution-tool-intent", className: rowClassName, title: label, children: [
+      icon,
+      /* @__PURE__ */ jsx11("span", { className: "min-w-0 truncate", children: label })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs9("div", { className: "min-w-0", children: [
+    /* @__PURE__ */ jsxs9(
+      "button",
+      {
+        type: "button",
+        "data-testid": "execution-tool-intent",
+        className: cn(rowClassName, "w-full text-left"),
+        title: label,
+        "aria-expanded": fileOpen,
+        onClick: () => setFileOpen((open) => !open),
+        children: [
+          icon,
+          /* @__PURE__ */ jsx11("span", { className: "min-w-0 truncate", children: label }),
+          /* @__PURE__ */ jsx11(
+            ChevronRight,
+            {
+              size: 14,
+              className: cn("shrink-0 transition-transform", fileOpen && "rotate-90"),
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    ),
+    fileOpen ? /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        className: "ml-[18px] truncate text-xs leading-[22px] text-[hsl(var(--muted-foreground))]",
+        title: filePath,
+        children: [
+          "\u6587\u4EF6\uFF1A",
+          filePath
+        ]
+      }
+    ) : null
+  ] });
+}
 function AssistantTurnBlock({
   messages,
   isStreaming = false,
@@ -2417,53 +2931,235 @@ function AssistantTurnBlock({
   sessionId
 }) {
   const hasInterrupted = messages.some((message) => message.status === "interrupted");
-  const hasAnyContent = messages.some(
-    (message) => getMessageText(message) || message.reasoning || (message.tool_calls?.length ?? 0) > 0
+  const hasFailedWithoutContent = messages.some(
+    (message) => message.status === "failed" && !hasRenderableMessageContent(message)
+  );
+  const finalMessage = getLastContentMessage(messages);
+  const hasExecutionProcess = messages.some(
+    (message) => message.reasoning || (message.tool_calls?.length ?? 0) > 0
   );
   const latestReasoningIndex = isStreaming ? findLatestReasoningMessageIndex(messages) : -1;
+  const hasActionableToolCall = messages.some(
+    (message) => message.status === "failed" || message.status === "interrupted" || (message.tool_calls ?? []).some(
+      (toolCall) => toolCall.status === "error" || toolCall.status === "cancelled"
+    )
+  );
+  const questionToolCalls = messages.flatMap(
+    (message) => (message.tool_calls ?? []).filter(
+      (toolCall) => formatToolName(toolCall.name) === "AskUserQuestion"
+    )
+  );
+  const [displayMode, setDisplayMode] = useState10(
+    () => isStreaming || hasActionableToolCall ? "detail" : "compact"
+  );
+  const userSelectedDisplayModeRef = useRef9(false);
+  const wasStreamingRef = useRef9(isStreaming);
+  useEffect8(() => {
+    if (wasStreamingRef.current && !isStreaming && !userSelectedDisplayModeRef.current) {
+      setDisplayMode(hasActionableToolCall ? "detail" : "compact");
+    }
+    wasStreamingRef.current = isStreaming;
+  }, [hasActionableToolCall, isStreaming]);
+  const effectiveMode = resolveTurnDisplayMode({ isStreaming, displayMode });
+  const executionDurationMs = getExecutionDurationMs({ messages, isStreaming });
+  const [clock, setClock] = useState10(() => Date.now());
+  const hasLiveStartTime = messages.some(
+    (message) => message.timestamp != null && Number.isFinite(Date.parse(message.timestamp))
+  );
+  useEffect8(() => {
+    if (!isStreaming || !hasLiveStartTime) return;
+    const timer = window.setInterval(() => setClock(Date.now()), 1e3);
+    return () => window.clearInterval(timer);
+  }, [hasLiveStartTime, isStreaming]);
+  const liveExecutionDurationMs = isStreaming ? getExecutionDurationMs({ messages, isStreaming, now: clock }) : executionDurationMs;
+  if (!hasExecutionProcess) {
+    return /* @__PURE__ */ jsxs9("div", { className: "blade-chat-assistant-turn flex flex-col gap-3", children: [
+      hasInterrupted && /* @__PURE__ */ jsx11("div", { className: "ml-4 w-fit rounded-full border border-amber-500/30 bg-amber-500/10 px-2.5 py-1 text-[10px] font-medium uppercase tracking-[0.12em] text-amber-300", children: "\u5DF2\u4E2D\u65AD" }),
+      hasFailedWithoutContent && /* @__PURE__ */ jsx11("div", { className: "ml-4 w-fit rounded-full border border-red-500/30 bg-red-500/10 px-2.5 py-1 text-[10px] font-medium text-red-400", children: "\u751F\u6210\u5931\u8D25" }),
+      messages.map((message, index) => {
+        return hasRenderableMessageContent(message) ? /* @__PURE__ */ jsx11(
+          "div",
+          {
+            className: "flex flex-col gap-3",
+            children: /* @__PURE__ */ jsx11(
+              AssistantMessageContent,
+              {
+                message,
+                sessionId,
+                streaming: isStreaming && index === messages.length - 1
+              }
+            )
+          },
+          message.entry_id ?? `${message.timestamp ?? "assistant"}-${index}`
+        ) : null;
+      }),
+      isStreaming && !finalMessage ? /* @__PURE__ */ jsx11(Shimmer, { className: "ml-4", children: "\u6B63\u5728\u751F\u6210..." }) : null
+    ] });
+  }
   return /* @__PURE__ */ jsxs9("div", { className: "blade-chat-assistant-turn flex flex-col gap-3", children: [
     hasInterrupted && /* @__PURE__ */ jsx11("div", { className: "ml-4 w-fit rounded-full border border-amber-500/30 bg-amber-500/10 px-2.5 py-1 text-[10px] font-medium uppercase tracking-[0.12em] text-amber-300", children: "\u5DF2\u4E2D\u65AD" }),
-    messages.map((message, index) => {
+    hasFailedWithoutContent && /* @__PURE__ */ jsx11("div", { className: "ml-4 w-fit rounded-full border border-red-500/30 bg-red-500/10 px-2.5 py-1 text-[10px] font-medium text-red-400", children: "\u751F\u6210\u5931\u8D25" }),
+    /* @__PURE__ */ jsxs9("div", { className: "flex w-full items-start gap-2.5", children: [
+      /* @__PURE__ */ jsx11(
+        "span",
+        {
+          className: "grid size-[30px] shrink-0 place-items-center rounded-full bg-[hsl(var(--muted)/0.55)] text-[hsl(var(--foreground))]",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx11(Bot, { size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsxs9("div", { className: "min-w-0 flex-1 pt-0.5", children: [
+        /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              userSelectedDisplayModeRef.current = true;
+              setDisplayMode(displayMode === "detail" ? "compact" : "detail");
+            },
+            "aria-expanded": effectiveMode === "detail",
+            "aria-label": effectiveMode === "detail" ? "\u6536\u8D77\u6267\u884C\u8FC7\u7A0B" : "\u5C55\u5F00\u6267\u884C\u8FC7\u7A0B",
+            "data-testid": "assistant-execution-summary",
+            className: "inline-flex min-w-0 max-w-full select-none items-center gap-1 bg-transparent p-0 text-left text-xs leading-[22px] text-[hsl(var(--muted-foreground))] transition-colors hover:text-[hsl(var(--foreground))] focus-visible:ring-1 focus-visible:ring-[hsl(var(--ring))] focus:outline-none",
+            children: [
+              /* @__PURE__ */ jsx11("span", { className: "min-w-0 truncate", children: executionSummaryLabel({
+                messages,
+                isStreaming,
+                durationMs: liveExecutionDurationMs,
+                sessionStatus,
+                askAnswers
+              }) }),
+              /* @__PURE__ */ jsx11(
+                ChevronRight,
+                {
+                  size: 14,
+                  className: cn(
+                    "shrink-0 transition-transform duration-300",
+                    effectiveMode === "detail" && "rotate-90"
+                  ),
+                  "aria-hidden": "true"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx11("div", { className: "mt-3 h-px w-full bg-[hsl(var(--border)/0.75)]" })
+      ] })
+    ] }),
+    effectiveMode === "detail" ? /* @__PURE__ */ jsx11("div", { className: "ml-10 flex flex-col gap-3 pt-1", children: messages.map((message, index) => {
       const isLast = index === messages.length - 1;
       const streamingThis = isStreaming && isLast;
       const text = getMessageText(message);
-      const toolCalls = message.tool_calls ?? [];
+      const toolCalls = (message.tool_calls ?? []).filter(
+        (toolCall) => formatToolName(toolCall.name) !== "AskUserQuestion"
+      );
       const showReasoning = !!message.reasoning && (!isStreaming || index === latestReasoningIndex);
       return /* @__PURE__ */ jsxs9(
         "div",
         {
           className: "flex flex-col gap-3",
           children: [
-            showReasoning && message.reasoning && /* @__PURE__ */ jsx11(ThinkingBlock, { reasoning: message.reasoning, isStreaming: streamingThis && !text }),
-            text && /* @__PURE__ */ jsx11("div", { className: "blade-chat-assistant-text text-[15px] leading-8 text-[hsl(var(--foreground))]", children: /* @__PURE__ */ jsx11(
-              MarkdownContent,
+            showReasoning && message.reasoning ? /* @__PURE__ */ jsx11(ThinkingBlock, { reasoning: message.reasoning, isStreaming: streamingThis && !text }) : null,
+            hasRenderableMessageContent(message) && message !== finalMessage ? /* @__PURE__ */ jsx11(
+              AssistantMessageContent,
               {
-                mode: streamingThis ? "streaming" : "static",
-                className: "blade-chat-prose",
+                message,
                 sessionId,
-                children: text
+                streaming: streamingThis,
+                compact: true
               }
-            ) }),
-            toolCalls.length > 0 && /* @__PURE__ */ jsx11("div", { className: "flex flex-col gap-2", children: toolCalls.map(
-              (toolCall) => formatToolName(toolCall.name) === "Agent" ? /* @__PURE__ */ jsx11(AgentLoopBlock, { toolCall }, toolCall.id) : /* @__PURE__ */ jsx11(
-                ToolCallBlock,
-                {
-                  toolCall,
-                  answerData: askAnswers?.[toolCall.id],
-                  onAnswer,
-                  answered: sessionStatus !== "waiting_for_input",
-                  sessionStatus,
-                  renderer: toolCallRenderer
-                },
-                toolCall.id
-              )
-            ) })
+            ) : null,
+            toolCalls.length > 0 ? /* @__PURE__ */ jsx11("div", { className: "flex flex-col gap-0.5", children: toolCalls.map((toolCall) => {
+              const custom = toolCallRenderer?.(toolCall);
+              return custom !== null && custom !== void 0 ? /* @__PURE__ */ jsx11("div", { children: custom }, toolCall.id) : formatToolName(toolCall.name) === "Agent" ? /* @__PURE__ */ jsx11(AgentLoopBlock, { toolCall }, toolCall.id) : /* @__PURE__ */ jsx11(ExecutionToolRow, { toolCall }, toolCall.id);
+            }) }) : null
           ]
         },
         message.entry_id ?? `${message.timestamp ?? "assistant"}-${index}`
       );
-    }),
-    isStreaming && !hasAnyContent && /* @__PURE__ */ jsx11(Shimmer, { className: "ml-4", children: "\u6B63\u5728\u751F\u6210..." })
+    }) }) : null,
+    finalMessage ? /* @__PURE__ */ jsx11("div", { className: "ml-10", children: /* @__PURE__ */ jsx11(
+      AssistantMessageContent,
+      {
+        message: finalMessage,
+        sessionId,
+        streaming: isStreaming && finalMessage === messages[messages.length - 1]
+      }
+    ) }) : null,
+    questionToolCalls.map((toolCall) => /* @__PURE__ */ jsx11(
+      ToolCallBlock,
+      {
+        toolCall,
+        answerData: askAnswers?.[toolCall.id],
+        onAnswer,
+        answered: sessionStatus !== "waiting_for_input",
+        sessionStatus,
+        renderer: toolCallRenderer
+      },
+      toolCall.id
+    ))
+  ] });
+}
+function AssistantMessageContent({
+  message,
+  sessionId,
+  streaming,
+  compact = false
+}) {
+  const text = getMessageText(message);
+  const imageParts = getImageParts(message.content);
+  const fileParts = getFileParts(message.content);
+  const failed = message.status === "failed";
+  const failedBadge = failed ? /* @__PURE__ */ jsx11("div", { className: "w-fit rounded-full border border-red-500/30 bg-red-500/10 px-2.5 py-1 text-[10px] font-medium text-red-400", children: "\u751F\u6210\u5931\u8D25" }) : null;
+  const textContent = text ? /* @__PURE__ */ jsx11(
+    "div",
+    {
+      className: cn(
+        "blade-chat-assistant-text",
+        compact ? "text-xs leading-[22px] text-[hsl(var(--foreground))]" : "text-[15px] leading-8 text-[hsl(var(--foreground))]"
+      ),
+      children: /* @__PURE__ */ jsx11(
+        MarkdownContent,
+        {
+          mode: streaming ? "streaming" : "static",
+          className: "blade-chat-prose",
+          sessionId,
+          children: text
+        }
+      )
+    }
+  ) : null;
+  if (imageParts.length === 0 && fileParts.length === 0) {
+    if (!failed) return textContent;
+    return failedBadge || textContent ? /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-2", children: [
+      failedBadge,
+      textContent
+    ] }) : null;
+  }
+  return /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-3", children: [
+    failedBadge,
+    imageParts.length > 0 ? /* @__PURE__ */ jsx11("div", { className: "grid gap-2", children: imageParts.map((part) => /* @__PURE__ */ jsx11(
+      "img",
+      {
+        src: part.image_url.url,
+        alt: "\u6D88\u606F\u9644\u4EF6",
+        className: "max-h-72 rounded-xl border border-[hsl(var(--border))] object-cover"
+      },
+      part.image_url.url
+    )) }) : null,
+    fileParts.length > 0 ? /* @__PURE__ */ jsx11("div", { className: "flex flex-wrap gap-1.5", children: fileParts.map((part) => /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        className: "flex min-w-0 items-center gap-1.5 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--muted)/0.3)] px-2.5 py-1.5 text-xs text-[hsl(var(--muted-foreground))]",
+        title: part.name,
+        children: [
+          /* @__PURE__ */ jsx11(FileText, { size: 12, className: "shrink-0" }),
+          /* @__PURE__ */ jsx11("span", { className: "max-w-56 truncate", children: part.name })
+        ]
+      },
+      `${part.name}-${part.data.slice(0, 32)}`
+    )) }) : null,
+    textContent
   ] });
 }
 
@@ -2560,7 +3256,7 @@ var RenderErrorBoundary = class extends Component {
 };
 
 // src/components/PostChatFollowupBlock.tsx
-import { useCallback as useCallback5, useEffect as useEffect7, useRef as useRef8, useState as useState11 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect9, useRef as useRef10, useState as useState11 } from "react";
 import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function emitInteraction(callback, event) {
   try {
@@ -2691,10 +3387,10 @@ function ResultFeedback({
   const [reason, setReason] = useState11(savedFeedback?.reason ?? null);
   const [saving, setSaving] = useState11(false);
   const [saveError, setSaveError] = useState11(false);
-  const reportedShown = useRef8(false);
-  const latestChoice = useRef8(null);
+  const reportedShown = useRef10(false);
+  const latestChoice = useRef10(null);
   const eligible = followup.feedback_eligible === true && Boolean(sessionId) && !isViewer;
-  useEffect7(() => {
+  useEffect9(() => {
     if (!eligible || reportedShown.current) return;
     reportedShown.current = true;
     emitInteraction(onInteraction, {
@@ -2703,13 +3399,13 @@ function ResultFeedback({
       assistantEntryId: followup.assistant_entry_id
     });
   }, [eligible, followup.assistant_entry_id, onInteraction, sessionId]);
-  useEffect7(() => {
+  useEffect9(() => {
     if (!savedFeedback || latestChoice.current) return;
     setSaved(savedFeedback);
     setHelpful(savedFeedback.helpful);
     setReason(savedFeedback.reason);
   }, [savedFeedback]);
-  const submit = useCallback5(
+  const submit = useCallback6(
     async (nextHelpful, nextReason) => {
       if (!sessionId) return;
       const choice = { helpful: nextHelpful, reason: nextReason };
@@ -2816,13 +3512,13 @@ function PostChatFollowupBlock({
   onFeedbackSaved
 }) {
   const [expanded, setExpanded] = useState11(false);
-  const adopted = useRef8(/* @__PURE__ */ new Set());
-  const reportedSuggestions = useRef8(false);
-  const reportedArtifacts = useRef8(/* @__PURE__ */ new Set());
-  const openedArtifacts = useRef8(/* @__PURE__ */ new Set());
+  const adopted = useRef10(/* @__PURE__ */ new Set());
+  const reportedSuggestions = useRef10(false);
+  const reportedArtifacts = useRef10(/* @__PURE__ */ new Set());
+  const openedArtifacts = useRef10(/* @__PURE__ */ new Set());
   const artifacts = followup.final_artifacts ?? [];
   const visibleArtifacts = expanded ? artifacts : artifacts.slice(0, 3);
-  useEffect7(() => {
+  useEffect9(() => {
     if (!reportedSuggestions.current && followup.suggestions.length > 0) {
       reportedSuggestions.current = true;
       emitInteraction(onInteraction, {
@@ -2852,7 +3548,7 @@ function PostChatFollowupBlock({
     sessionId,
     visibleArtifacts
   ]);
-  const reportArtifactOpened = useCallback5(
+  const reportArtifactOpened = useCallback6(
     (artifactIndex, artifactKind) => {
       if (openedArtifacts.current.has(artifactIndex)) return;
       openedArtifacts.current.add(artifactIndex);
@@ -2946,7 +3642,7 @@ function PostChatFollowupBlock({
 }
 
 // src/components/UserMessageBubble.tsx
-import { getFileParts, getImageParts, getTextContent as getTextContent2 } from "@blade-hq/agent-client";
+import { getFileParts as getFileParts2, getImageParts as getImageParts2, getTextContent as getTextContent2 } from "@blade-hq/agent-client";
 import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 function isUserMessage(message) {
   return message.role === "user";
@@ -2957,8 +3653,8 @@ function isErrorMessage(message) {
 var isSending = (message) => message.status === "streaming";
 function UserMessageBubble({ message, className }) {
   const text = getTextContent2(message.content).trim();
-  const fileParts = getFileParts(message.content);
-  const imageParts = getImageParts(message.content);
+  const fileParts = getFileParts2(message.content);
+  const imageParts = getImageParts2(message.content);
   return /* @__PURE__ */ jsx15("div", { className: cn("blade-chat-user-row flex justify-end", className), children: /* @__PURE__ */ jsxs13("div", { className: "blade-chat-user-col flex max-w-[72%] flex-col items-end gap-3", children: [
     imageParts.length > 0 && /* @__PURE__ */ jsx15("div", { className: "grid gap-2", children: imageParts.map((part) => /* @__PURE__ */ jsx15(
       "img",
@@ -3045,6 +3741,9 @@ function MessageList({
   resultFeedbackByEntry = /* @__PURE__ */ new Map(),
   onResultFeedbackSaved
 }) {
+  const userMessages = messages.filter((message) => isUserMessage(message));
+  const latestUserMessage = userMessages.at(-1);
+  const shouldPinLatestUser = latestUserMessage != null && (latestUserMessage.entry_id == null || latestUserMessage.entry_id.startsWith("local-user-"));
   const renderBlocks = useMemo7(() => {
     const visible = messages.filter((message) => {
       if ((message.loop_name ?? "root") !== "root") return false;
@@ -3128,101 +3827,151 @@ function MessageList({
     }
     return blocks;
   }, [messages, isStreaming]);
-  return /* @__PURE__ */ jsx16("div", { className: cn("blade-chat-messages relative min-h-0 flex-1", className), children: /* @__PURE__ */ jsxs14(StickToBottom, { className: "h-full overflow-y-hidden", initial: "instant", resize: "instant", children: [
-    /* @__PURE__ */ jsx16(StickToBottom.Content, { className: "blade-chat-messages-scroll", children: /* @__PURE__ */ jsx16("div", { className: "blade-chat-messages-content mx-auto max-w-[748px]", children: /* @__PURE__ */ jsxs14("div", { className: "flex min-w-0 flex-col", children: [
-      renderBlocks.length === 0 ? emptyState ?? /* @__PURE__ */ jsxs14("div", { className: "blade-chat-empty", children: [
-        /* @__PURE__ */ jsx16(MessageSquare, { size: 40, strokeWidth: 1.5 }),
-        /* @__PURE__ */ jsx16("span", { className: "text-base font-medium", children: "\u5F00\u59CB\u5BF9\u8BDD" }),
-        /* @__PURE__ */ jsx16("span", { className: "text-sm opacity-60", children: "\u5728\u4E0B\u65B9\u8F93\u5165\u6D88\u606F\u5F00\u59CB\u804A\u5929" })
-      ] }) : renderBlocks.map((block) => {
-        if (block.type === "message") {
-          return /* @__PURE__ */ jsx16("div", { "data-entry-id": block.message.entry_id, children: isUserMessage(block.message) ? /* @__PURE__ */ jsx16(UserMessageBubble, { message: block.message }) : isErrorMessage(block.message) ? /* @__PURE__ */ jsx16(ErrorMessageBlock, { message: block.message }) : null }, block.key);
-        }
-        if (block.type === "assistant_turn") {
-          const blockFeedback = block.messages.map(
-            (message) => message.entry_id ? resultFeedbackByEntry.get(message.entry_id) : void 0
-          ).find((feedback) => feedback != null);
-          const hasActiveFollowup = Boolean(
-            postChatFollowup && block.messages.some(
-              (message) => message.entry_id === postChatFollowup.assistant_entry_id
-            )
-          );
-          return /* @__PURE__ */ jsx16("div", { "data-entry-id": block.messages[0]?.entry_id, children: /* @__PURE__ */ jsxs14(
-            RenderErrorBoundary,
-            {
-              label: "\u52A9\u624B\u6D88\u606F",
-              details: block.key,
-              resetKey: getMessageResetSignature(block.messages),
-              children: [
-                /* @__PURE__ */ jsx16(
-                  AssistantTurnBlock,
-                  {
-                    messages: block.messages,
-                    isStreaming: block.isStreaming,
-                    askAnswers,
-                    onAnswer,
-                    sessionStatus,
-                    toolCallRenderer,
-                    sessionId
-                  }
-                ),
-                blockFeedback && !hasActiveFollowup ? /* @__PURE__ */ jsx16(HistoricalResultFeedback, { feedback: blockFeedback }) : null,
-                hasActiveFollowup && postChatFollowup ? /* @__PURE__ */ jsx16(
-                  PostChatFollowupBlock,
-                  {
-                    followup: postChatFollowup,
-                    sessionId,
-                    onSuggestion,
-                    isViewer,
-                    onInteraction: onFollowupInteraction,
-                    savedFeedback: blockFeedback,
-                    onFeedbackSaved: onResultFeedbackSaved
-                  }
-                ) : null
-              ]
+  return /* @__PURE__ */ jsx16("div", { className: cn("blade-chat-messages relative min-h-0 flex-1", className), children: /* @__PURE__ */ jsxs14(
+    StickToBottom,
+    {
+      className: "h-full overflow-y-hidden",
+      initial: "instant",
+      resize: "instant",
+      children: [
+        /* @__PURE__ */ jsx16(StickToBottom.Content, { className: "blade-chat-messages-scroll", children: /* @__PURE__ */ jsx16("div", { className: "blade-chat-messages-content mx-auto max-w-[748px]", children: /* @__PURE__ */ jsxs14("div", { className: "flex min-w-0 flex-col", children: [
+          renderBlocks.length === 0 ? emptyState ?? /* @__PURE__ */ jsxs14("div", { className: "blade-chat-empty", children: [
+            /* @__PURE__ */ jsx16(MessageSquare, { size: 40, strokeWidth: 1.5 }),
+            /* @__PURE__ */ jsx16("span", { className: "text-base font-medium", children: "\u5F00\u59CB\u5BF9\u8BDD" }),
+            /* @__PURE__ */ jsx16("span", { className: "text-sm opacity-60", children: "\u5728\u4E0B\u65B9\u8F93\u5165\u6D88\u606F\u5F00\u59CB\u804A\u5929" })
+          ] }) : renderBlocks.map((block) => {
+            if (block.type === "message") {
+              return /* @__PURE__ */ jsx16("div", { "data-entry-id": block.message.entry_id, children: isUserMessage(block.message) ? /* @__PURE__ */ jsx16(UserMessageBubble, { message: block.message }) : isErrorMessage(block.message) ? /* @__PURE__ */ jsx16(ErrorMessageBlock, { message: block.message }) : null }, block.key);
             }
-          ) }, block.key);
-        }
-        if (block.type === "context") {
-          return /* @__PURE__ */ jsx16("div", { "data-entry-id": block.message.entry_id, children: /* @__PURE__ */ jsx16(ContextCard, { context: block.message.context }) }, block.key);
-        }
-        if (block.type === "compaction") {
-          return /* @__PURE__ */ jsxs14(
-            "div",
-            {
-              className: "flex items-center gap-2 text-xs text-[hsl(var(--muted-foreground))]",
-              children: [
-                /* @__PURE__ */ jsx16(Layers, { size: 12 }),
-                /* @__PURE__ */ jsx16("span", { children: "\u4E0A\u4E0B\u6587\u5DF2\u538B\u7F29" })
-              ]
-            },
-            block.key
-          );
-        }
-        return /* @__PURE__ */ jsx16(PlanningDivider, { kind: block.kind }, block.key);
-      }),
-      sessionStatus === "interrupted" && !isStreaming ? /* @__PURE__ */ jsx16("div", { className: "flex", children: /* @__PURE__ */ jsx16("div", { className: "rounded-full border border-amber-500/30 bg-amber-500/10 px-2.5 py-1 text-[10px] font-medium uppercase tracking-[0.12em] text-amber-300", children: "\u5DF2\u4E2D\u65AD" }) }) : null
-    ] }) }) }),
-    /* @__PURE__ */ jsx16(AutoScrollOnUserSend, { userMessageCount: messages.filter((m) => isUserMessage(m)).length }),
-    /* @__PURE__ */ jsx16(ScrollToBottomButton, {})
-  ] }) });
+            if (block.type === "assistant_turn") {
+              const blockFeedback = block.messages.map(
+                (message) => message.entry_id ? resultFeedbackByEntry.get(message.entry_id) : void 0
+              ).find((feedback) => feedback != null);
+              const hasActiveFollowup = Boolean(
+                postChatFollowup && block.messages.some(
+                  (message) => message.entry_id === postChatFollowup.assistant_entry_id
+                )
+              );
+              return /* @__PURE__ */ jsx16("div", { "data-entry-id": block.messages[0]?.entry_id, children: /* @__PURE__ */ jsxs14(
+                RenderErrorBoundary,
+                {
+                  label: "\u52A9\u624B\u6D88\u606F",
+                  details: block.key,
+                  resetKey: getMessageResetSignature(block.messages),
+                  children: [
+                    /* @__PURE__ */ jsx16(
+                      AssistantTurnBlock,
+                      {
+                        messages: block.messages,
+                        isStreaming: block.isStreaming,
+                        askAnswers,
+                        onAnswer,
+                        sessionStatus,
+                        toolCallRenderer,
+                        sessionId
+                      }
+                    ),
+                    blockFeedback && !hasActiveFollowup ? /* @__PURE__ */ jsx16(HistoricalResultFeedback, { feedback: blockFeedback }) : null,
+                    hasActiveFollowup && postChatFollowup ? /* @__PURE__ */ jsx16(
+                      PostChatFollowupBlock,
+                      {
+                        followup: postChatFollowup,
+                        sessionId,
+                        onSuggestion,
+                        isViewer,
+                        onInteraction: onFollowupInteraction,
+                        savedFeedback: blockFeedback,
+                        onFeedbackSaved: onResultFeedbackSaved
+                      }
+                    ) : null
+                  ]
+                }
+              ) }, block.key);
+            }
+            if (block.type === "context") {
+              return /* @__PURE__ */ jsx16("div", { "data-entry-id": block.message.entry_id, children: /* @__PURE__ */ jsx16(ContextCard, { context: block.message.context }) }, block.key);
+            }
+            if (block.type === "compaction") {
+              return /* @__PURE__ */ jsxs14(
+                "div",
+                {
+                  className: "flex items-center gap-2 text-xs text-[hsl(var(--muted-foreground))]",
+                  children: [
+                    /* @__PURE__ */ jsx16(Layers, { size: 12 }),
+                    /* @__PURE__ */ jsx16("span", { children: "\u4E0A\u4E0B\u6587\u5DF2\u538B\u7F29" })
+                  ]
+                },
+                block.key
+              );
+            }
+            return /* @__PURE__ */ jsx16(PlanningDivider, { kind: block.kind }, block.key);
+          }),
+          sessionStatus === "interrupted" && !isStreaming ? /* @__PURE__ */ jsx16("div", { className: "flex", children: /* @__PURE__ */ jsx16("div", { className: "rounded-full border border-amber-500/30 bg-amber-500/10 px-2.5 py-1 text-[10px] font-medium uppercase tracking-[0.12em] text-amber-300", children: "\u5DF2\u4E2D\u65AD" }) }) : null
+        ] }) }) }),
+        /* @__PURE__ */ jsx16(
+          PinLatestUserMessage,
+          {
+            userMessageCount: userMessages.length,
+            shouldPinLatestUser,
+            targetKey: latestUserMessage?.render_id ?? latestUserMessage?.entry_id ?? (latestUserMessage ? `user:${userMessages.length}` : null)
+          },
+          sessionId ?? "no-session"
+        ),
+        /* @__PURE__ */ jsx16(ScrollToBottomButton, {})
+      ]
+    },
+    sessionId ?? "no-session"
+  ) });
 }
-function AutoScrollOnUserSend({ userMessageCount }) {
-  const { scrollToBottom } = useStickToBottomContext();
-  const previousCountRef = useRef9(userMessageCount);
-  useEffect8(() => {
-    if (userMessageCount > previousCountRef.current) {
+function PinLatestUserMessage({
+  userMessageCount,
+  shouldPinLatestUser,
+  targetKey
+}) {
+  const { contentRef, scrollRef, scrollToBottom, stopScroll } = useStickToBottomContext();
+  const previousCountRef = useRef11(userMessageCount);
+  const spacerHeightRef = useRef11(0);
+  const getScrollElement = useCallback7(() => scrollRef.current, [scrollRef]);
+  const getContentElement = useCallback7(() => contentRef.current, [contentRef]);
+  const getTargetElement = useCallback7(() => {
+    const rows = contentRef.current?.querySelectorAll(".blade-chat-user-row");
+    return rows?.item((rows?.length ?? 0) - 1) ?? null;
+  }, [contentRef]);
+  const getSpacerHeight = useCallback7(() => spacerHeightRef.current, []);
+  const setSpacerHeight = useCallback7(
+    (height) => {
+      spacerHeightRef.current = height;
+      const content = contentRef.current;
+      if (!content) return;
+      if (height > 0) content.style.setProperty("--blade-chat-pin-spacer", `${height}px`);
+      else content.style.removeProperty("--blade-chat-pin-spacer");
+    },
+    [contentRef]
+  );
+  useMessagePin({
+    targetKey,
+    pinTarget: shouldPinLatestUser,
+    getScrollElement,
+    getContentElement,
+    getTargetElement,
+    getSpacerHeight,
+    setSpacerHeight,
+    stopAutoScroll: stopScroll,
+    scrollToBottom
+  });
+  useEffect10(() => {
+    if (userMessageCount > previousCountRef.current && !shouldPinLatestUser) {
       scrollToBottom("instant");
     }
     previousCountRef.current = userMessageCount;
-  }, [userMessageCount, scrollToBottom]);
+  }, [scrollToBottom, shouldPinLatestUser, userMessageCount]);
   return null;
 }
 function ScrollToBottomButton() {
   const { isAtBottom, scrollToBottom } = useStickToBottomContext();
   const [visible, setVisible] = useState12(false);
-  const hideTimerRef = useRef9(null);
-  useEffect8(() => {
+  const hideTimerRef = useRef11(null);
+  useEffect10(() => {
     if (isAtBottom) {
       if (!hideTimerRef.current) {
         hideTimerRef.current = setTimeout(() => {
@@ -3244,7 +3993,7 @@ function ScrollToBottomButton() {
       }
     };
   }, [isAtBottom]);
-  const handleClick = useCallback6(() => {
+  const handleClick = useCallback7(() => {
     if (hideTimerRef.current) {
       clearTimeout(hideTimerRef.current);
       hideTimerRef.current = null;
@@ -3454,7 +4203,7 @@ function ChatSessionView({
   const [resultFeedback, setResultFeedback] = useState13([]);
   const resolvedSessionId = session?.sessionId;
   const isViewer = state?.viewerRole === "viewer";
-  useEffect9(() => {
+  useEffect11(() => {
     setResultFeedback([]);
     if (!resolvedSessionId || isViewer) return;
     let cancelled = false;
@@ -3483,18 +4232,18 @@ function ChatSessionView({
     () => new Map(resultFeedback.map((item) => [item.assistant_entry_id, item])),
     [resultFeedback]
   );
-  const handleResultFeedbackSaved = useCallback7((saved) => {
+  const handleResultFeedbackSaved = useCallback8((saved) => {
     setResultFeedback((current) => [
       ...current.filter((item) => item.assistant_entry_id !== saved.assistant_entry_id),
       saved
     ]);
   }, []);
-  useEffect9(() => {
+  useEffect11(() => {
     if (session) {
       onSessionReady?.(session);
     }
   }, [session, onSessionReady]);
-  useEffect9(() => {
+  useEffect11(() => {
     if (!session) return;
     const offAttach = session.on("attachRequested", ({ label, content }) => {
       setInputText((prev) => `${prev ? `${prev}
@@ -3510,12 +4259,12 @@ ${content}`);
       offInsert();
     };
   }, [session]);
-  useEffect9(() => {
+  useEffect11(() => {
     if (isUnauthorizedError(error)) {
       onUnauthorized();
     }
   }, [error, onUnauthorized]);
-  useEffect9(() => {
+  useEffect11(() => {
     if (!session || !commands) return;
     const unsubscribes = Object.entries(commands).map(
       ([action, handler]) => session.onCommand(action, (payload) => handler(payload))
@@ -3586,7 +4335,7 @@ ${content}`);
 }
 
 // src/components/LlmChat.tsx
-import { useEffect as useEffect10, useMemo as useMemo9, useState as useState15 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo9, useState as useState15 } from "react";
 
 // src/components/LlmAdvancedSettings.tsx
 import { useState as useState14 } from "react";
@@ -3734,7 +4483,7 @@ ${text}` : text),
     }),
     [send, reset]
   );
-  useEffect10(() => {
+  useEffect12(() => {
     onReady?.(handle);
   }, [handle, onReady]);
   return /* @__PURE__ */ jsx20(
@@ -3817,6 +4566,7 @@ export {
   useAgentSession,
   useBladeClient,
   useLlmChat,
+  useMessagePin,
   useReplay
 };
 /*! Bundled license information:
@@ -3828,13 +4578,15 @@ lucide-react/dist/esm/createLucideIcon.js:
 lucide-react/dist/esm/icons/arrow-right.js:
 lucide-react/dist/esm/icons/arrow-up-right.js:
 lucide-react/dist/esm/icons/arrow-up.js:
+lucide-react/dist/esm/icons/book-open.js:
 lucide-react/dist/esm/icons/bot.js:
-lucide-react/dist/esm/icons/brain.js:
 lucide-react/dist/esm/icons/check.js:
 lucide-react/dist/esm/icons/chevron-down.js:
 lucide-react/dist/esm/icons/chevron-right.js:
 lucide-react/dist/esm/icons/circle-alert.js:
 lucide-react/dist/esm/icons/copy.js:
+lucide-react/dist/esm/icons/earth.js:
+lucide-react/dist/esm/icons/file-pen-line.js:
 lucide-react/dist/esm/icons/file-text.js:
 lucide-react/dist/esm/icons/globe.js:
 lucide-react/dist/esm/icons/layers.js:
@@ -3844,10 +4596,13 @@ lucide-react/dist/esm/icons/lock-keyhole.js:
 lucide-react/dist/esm/icons/message-square-more.js:
 lucide-react/dist/esm/icons/message-square.js:
 lucide-react/dist/esm/icons/play.js:
+lucide-react/dist/esm/icons/search.js:
 lucide-react/dist/esm/icons/settings-2.js:
 lucide-react/dist/esm/icons/sparkles.js:
 lucide-react/dist/esm/icons/square.js:
+lucide-react/dist/esm/icons/terminal.js:
 lucide-react/dist/esm/icons/triangle-alert.js:
+lucide-react/dist/esm/icons/wrench.js:
 lucide-react/dist/esm/icons/x.js:
 lucide-react/dist/esm/lucide-react.js:
   (**