feat(vscode-ide-companion): 改进消息排序和显示逻辑

- 添加时间戳支持，确保消息按时间顺序排列 - 更新工具调用处理逻辑，自动添加和保留时间戳 - 修改消息渲染逻辑，将所有类型的消息合并排序后统一渲染 - 优化完成的工具调用显示，修复显示顺序问题 - 调整进行中的工具调用显示，统一到消息流中展示 - 移除重复的计划展示逻辑，避免最新块重复出现 - 重构消息处理和渲染代码，提高可维护性
2025-12-19 09:33:53 +00:00 · 2025-11-28 09:55:06 +08:00
parent dc340daf8b
commit 9cc48f12da
44 changed files with 2445 additions and 767 deletions
--- a/packages/vscode-ide-companion/src/webview/App.scss
+++ b/packages/vscode-ide-companion/src/webview/App.scss
@@ -118,6 +118,17 @@ body {
  padding: 0;
 }

+/* Ensure tool call containers keep a consistent left indent even if Tailwind utilities are purged */
+.toolcall-container {
+  /* Consistent indent for tool call blocks */
+  padding-left: 30px;
+}
+
+.toolcall-card {
+  /* Consistent indent for card-style tool calls */
+  padding-left: 30px;
+}
+
 button {
  color: var(--app-primary-foreground);
  font-family: var(--vscode-chat-font-family);
@@ -233,92 +244,16 @@ button {
  cursor: not-allowed;
 }

-/* ===========================
-   In-Progress Tool Call Styles (Claude Code style)
-   =========================== */
-.in-progress-tool-call {
-  display: flex;
-  flex-direction: column;
-  gap: var(--app-spacing-small);
-  padding: var(--app-spacing-medium);
-  margin: var(--app-spacing-small) 0;
-  background: var(--app-input-background);
-  border: 1px solid var(--app-input-border);
-  border-radius: var(--corner-radius-small);
-  animation: fadeIn 0.2s ease-in;
-}
-
-.in-progress-tool-call-header {
-  display: flex;
-  align-items: center;
-  gap: var(--app-spacing-medium);
-}
-
-.in-progress-tool-call-kind {
-  font-weight: 600;
-  font-size: 13px;
-  color: var(--app-primary-foreground);
-}
-
-.in-progress-tool-call-status {
-  display: inline-flex;
-  align-items: center;
-  font-size: 12px;
-  color: var(--app-secondary-foreground);
-  position: relative;
-  padding-left: 14px;
-}
-
-.in-progress-tool-call-status::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  margin-right: 6px;
-}
-
-.in-progress-tool-call-status.pending::before {
-  background: #ffc107;
-}
-
-.in-progress-tool-call-status.in_progress::before {
-  background: #2196f3;
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
-.in-progress-tool-call-status.completed::before {
-  background: #4caf50;
-}
-
-.in-progress-tool-call-status.failed::before {
-  background: #f44336;
-}
-
+/* Animation for in-progress status (used by pseudo bullets and spinners) */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
-    opacity: 0.4;
+    opacity: 0.5;
  }
 }

-.in-progress-tool-call-title {
-  font-size: 12px;
-  color: var(--app-secondary-foreground);
-  font-family: var(--app-monospace-font-family);
-  padding-left: 2px;
-}
-
-.in-progress-tool-call-locations {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding-left: 2px;
-}
-
 .code-block {
  font-family: var(--app-monospace-font-family);
  font-size: var(--app-monospace-font-size);
@@ -658,4 +593,3 @@ button {
  color: #4caf50;
  font-size: 13px;
 }
-
--- a/packages/vscode-ide-companion/src/webview/App.tsx
+++ b/packages/vscode-ide-companion/src/webview/App.tsx
@@ -4,7 +4,7 @@
 * SPDX-License-Identifier: Apache-2.0
 */

-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useVSCode } from './hooks/useVSCode.js';
 import { useSessionManagement } from './hooks/session/useSessionManagement.js';
 import { useFileContext } from './hooks/file/useFileContext.js';
@@ -16,16 +16,15 @@ import type {
  PermissionOption,
  ToolCall as PermissionToolCall,
 } from './components/PermissionRequest.js';
+import type { TextMessage } from './hooks/message/useMessageHandling.js';
+import type { ToolCallData } from './components/ToolCall.js';
 import { PermissionDrawer } from './components/PermissionDrawer.js';
 import { ToolCall } from './components/ToolCall.js';
 import { hasToolCallOutput } from './components/toolcalls/shared/utils.js';
 import { InProgressToolCall } from './components/InProgressToolCall.js';
 import { EmptyState } from './components/EmptyState.js';
-import { PlanDisplay, type PlanEntry } from './components/PlanDisplay.js';
-import {
-  CompletionMenu,
-  type CompletionItem,
-} from './components/CompletionMenu.js';
+import type { PlanEntry } from './components/PlanDisplay.js';
+import { type CompletionItem } from './components/CompletionMenu.js';
 import { useCompletionTrigger } from './hooks/useCompletionTrigger.js';
 import { SaveSessionDialog } from './components/SaveSessionDialog.js';
 import { InfoBanner } from './components/InfoBanner.js';
@@ -34,7 +33,6 @@ import {
  UserMessage,
  AssistantMessage,
  ThinkingMessage,
-  StreamingMessage,
  WaitingMessage,
 } from './components/messages/index.js';
 import { InputForm } from './components/InputForm.js';
@@ -87,7 +85,9 @@ export const App: React.FC = () => {
            description: file.description,
            type: 'file' as const,
            icon: fileIcon,
-            value: file.path,
+            // Insert filename after @, keep path for mapping
+            value: file.label,
+            path: file.path,
          }),
        );

@@ -102,8 +102,21 @@ export const App: React.FC = () => {
          );
        }

+        // If first time and still loading, show a placeholder
+        if (allItems.length === 0) {
+          return [
+            {
+              id: 'loading-files',
+              label: 'Searching files…',
+              description: 'Type to filter, or wait a moment…',
+              type: 'info' as const,
+            },
+          ];
+        }
+
        return allItems;
      } else {
+        // Handle slash commands
        const commands: CompletionItem[] = [
          {
            id: 'login',
@@ -124,18 +137,25 @@ export const App: React.FC = () => {

  const completion = useCompletionTrigger(inputFieldRef, getCompletionItems);

+  // When workspace files update while menu open for @, refresh items so the first @ shows the list
+  useEffect(() => {
+    if (completion.isOpen && completion.triggerChar === '@') {
+      completion.refreshCompletion();
+    }
+  }, [fileContext.workspaceFiles, completion]);
+
  // Message submission
-  const { handleSubmit } = useMessageSubmit({
-    vscode,
+  const handleSubmit = useMessageSubmit({
    inputText,
    setInputText,
+    messageHandling,
+    fileContext,
+    vscode,
    inputFieldRef,
    isStreaming: messageHandling.isStreaming,
-    fileContext,
-    messageHandling,
  });

-  // WebView messages
+  // Message handling
  useWebViewMessages({
    sessionManagement,
    fileContext,
@@ -143,22 +163,16 @@ export const App: React.FC = () => {
    handleToolCallUpdate,
    clearToolCalls,
    setPlanEntries,
-    handlePermissionRequest: React.useCallback(
-      (request: {
-        options: PermissionOption[];
-        toolCall: PermissionToolCall;
-      }) => {
-        setPermissionRequest(request);
-      },
-      [],
-    ),
+    handlePermissionRequest: setPermissionRequest,
    inputFieldRef,
    setInputText,
  });

-  // Permission handling
-  const handlePermissionResponse = React.useCallback(
+  // Handle permission response
+  const handlePermissionResponse = useCallback(
    (optionId: string) => {
+      // Forward the selected optionId directly to extension as ACP permission response
+      // Expected values include: 'proceed_once', 'proceed_always', 'cancel', 'proceed_always_server', etc.
      vscode.postMessage({
        type: 'permissionResponse',
        data: { optionId },
@@ -168,182 +182,153 @@ export const App: React.FC = () => {
    [vscode],
  );

-  // Completion selection
-  const handleCompletionSelect = React.useCallback(
+  // Handle completion selection
+  const handleCompletionSelect = useCallback(
    (item: CompletionItem) => {
-      if (!inputFieldRef.current) {
+      // Handle completion selection by inserting the value into the input field
+      const inputElement = inputFieldRef.current;
+      if (!inputElement) {
        return;
      }

-      const inputElement = inputFieldRef.current;
-      const currentText = inputElement.textContent || '';
+      // Ignore info items (placeholders like "Searching files…")
+      if (item.type === 'info') {
+        completion.closeCompletion();
+        return;
+      }

+      // Slash commands can execute immediately
      if (item.type === 'command') {
-        if (item.label === '/login') {
-          inputElement.textContent = '';
-          setInputText('');
+        const command = (item.label || '').trim();
+        if (command === '/login') {
+          vscode.postMessage({ type: 'login', data: {} });
          completion.closeCompletion();
-          vscode.postMessage({
-            type: 'login',
-            data: {},
-          });
          return;
        }
-
-        inputElement.textContent = item.label + ' ';
-        setInputText(item.label + ' ');
-
-        setTimeout(() => {
-          const range = document.createRange();
-          const sel = window.getSelection();
-          if (inputElement.firstChild) {
-            range.setStart(inputElement.firstChild, (item.label + ' ').length);
-            range.collapse(true);
-          } else {
-            range.selectNodeContents(inputElement);
-            range.collapse(false);
-          }
-          sel?.removeAllRanges();
-          sel?.addRange(range);
-          inputElement.focus();
-        }, 10);
-      } else if (item.type === 'file') {
-        const filePath = (item.value as string) || item.label;
-        fileContext.addFileReference(item.label, filePath);
-
-        const atPos = currentText.lastIndexOf('@');
-
-        if (atPos !== -1) {
-          const textAfterAt = currentText.substring(atPos + 1);
-          const spaceIndex = textAfterAt.search(/[\s\n]/);
-          const queryEnd =
-            spaceIndex === -1 ? currentText.length : atPos + 1 + spaceIndex;
-
-          const textBefore = currentText.substring(0, atPos);
-          const textAfter = currentText.substring(queryEnd);
-          const newText = `${textBefore}@${item.label} ${textAfter}`;
-
-          inputElement.textContent = newText;
-          setInputText(newText);
-
-          const newCursorPos = atPos + item.label.length + 2;
-
-          setTimeout(() => {
-            const textNode = inputElement.firstChild;
-            if (textNode && textNode.nodeType === Node.TEXT_NODE) {
-              const selection = window.getSelection();
-              if (selection) {
-                const range = document.createRange();
-                try {
-                  range.setStart(
-                    textNode,
-                    Math.min(newCursorPos, newText.length),
-                  );
-                  range.collapse(true);
-                  selection.removeAllRanges();
-                  selection.addRange(range);
-                } catch (e) {
-                  console.error('[handleCompletionSelect] Error:', e);
-                  range.selectNodeContents(inputElement);
-                  range.collapse(false);
-                  selection.removeAllRanges();
-                  selection.addRange(range);
-                }
-              }
-            }
-            inputElement.focus();
-          }, 10);
-        }
      }

+      // If selecting a file, add @filename -> fullpath mapping
+      if (item.type === 'file' && item.value && item.path) {
+        try {
+          fileContext.addFileReference(item.value, item.path);
+        } catch (err) {
+          console.warn('[App] addFileReference failed:', err);
+        }
+      }
+
+      const selection = window.getSelection();
+      if (!selection || selection.rangeCount === 0) {
+        return;
+      }
+
+      // Current text and cursor
+      const text = inputElement.textContent || '';
+      const range = selection.getRangeAt(0);
+
+      // Compute total text offset for contentEditable
+      let cursorPos = text.length;
+      if (range.startContainer === inputElement) {
+        const childIndex = range.startOffset;
+        let offset = 0;
+        for (
+          let i = 0;
+          i < childIndex && i < inputElement.childNodes.length;
+          i++
+        ) {
+          offset += inputElement.childNodes[i].textContent?.length || 0;
+        }
+        cursorPos = offset || text.length;
+      } else if (range.startContainer.nodeType === Node.TEXT_NODE) {
+        const walker = document.createTreeWalker(
+          inputElement,
+          NodeFilter.SHOW_TEXT,
+          null,
+        );
+        let offset = 0;
+        let found = false;
+        let node: Node | null = walker.nextNode();
+        while (node) {
+          if (node === range.startContainer) {
+            offset += range.startOffset;
+            found = true;
+            break;
+          }
+          offset += node.textContent?.length || 0;
+          node = walker.nextNode();
+        }
+        cursorPos = found ? offset : text.length;
+      }
+
+      // Replace from trigger to cursor with selected value
+      const textBeforeCursor = text.substring(0, cursorPos);
+      const atPos = textBeforeCursor.lastIndexOf('@');
+      const slashPos = textBeforeCursor.lastIndexOf('/');
+      const triggerPos = Math.max(atPos, slashPos);
+
+      if (triggerPos >= 0) {
+        const insertValue =
+          typeof item.value === 'string' ? item.value : String(item.label);
+        const newText =
+          text.substring(0, triggerPos + 1) + // keep the trigger symbol
+          insertValue +
+          ' ' +
+          text.substring(cursorPos);
+
+        // Update DOM and state, and move caret to end
+        inputElement.textContent = newText;
+        setInputText(newText);
+
+        const newRange = document.createRange();
+        const sel = window.getSelection();
+        newRange.selectNodeContents(inputElement);
+        newRange.collapse(false);
+        sel?.removeAllRanges();
+        sel?.addRange(newRange);
+      }
+
+      // Close the completion menu
      completion.closeCompletion();
    },
-    [completion, vscode, fileContext],
+    [completion, inputFieldRef, setInputText, fileContext, vscode],
  );

-  // Attach context (Cmd/Ctrl + /)
-  const handleAttachContextClick = React.useCallback(async () => {
-    if (inputFieldRef.current) {
-      inputFieldRef.current.focus();
-
-      const currentText = inputFieldRef.current.textContent || '';
-      const newText = currentText ? `${currentText} @` : '@';
-      inputFieldRef.current.textContent = newText;
-      setInputText(newText);
-
-      const range = document.createRange();
-      const sel = window.getSelection();
-      range.selectNodeContents(inputFieldRef.current);
-      range.collapse(false);
-      sel?.removeAllRanges();
-      sel?.addRange(range);
-
-      requestAnimationFrame(async () => {
-        if (!inputFieldRef.current) {
-          return;
-        }
-
-        let position = { top: 0, left: 0 };
-        const selection = window.getSelection();
-
-        if (selection && selection.rangeCount > 0) {
-          try {
-            const currentRange = selection.getRangeAt(0);
-            const rangeRect = currentRange.getBoundingClientRect();
-            if (rangeRect.top > 0 && rangeRect.left > 0) {
-              position = {
-                top: rangeRect.top,
-                left: rangeRect.left,
-              };
-            } else {
-              const inputRect = inputFieldRef.current.getBoundingClientRect();
-              position = { top: inputRect.top, left: inputRect.left };
-            }
-          } catch (error) {
-            console.error('[App] Error getting cursor position:', error);
-            const inputRect = inputFieldRef.current.getBoundingClientRect();
-            position = { top: inputRect.top, left: inputRect.left };
-          }
-        } else {
-          const inputRect = inputFieldRef.current.getBoundingClientRect();
-          position = { top: inputRect.top, left: inputRect.left };
-        }
-
-        await completion.openCompletion('@', '', position);
-      });
-    }
-  }, [completion]);
-
-  // Keyboard shortcut for attach context
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === '/') {
-        e.preventDefault();
-        handleAttachContextClick();
+  // Handle save session
+  const handleSaveSession = useCallback(
+    async (tag: string) => {
+      if (!sessionManagement.currentSessionId) {
+        return;
      }
-    };

-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [handleAttachContextClick]);
+      try {
+        vscode.postMessage({
+          type: 'saveSession',
+          data: {
+            sessionId: sessionManagement.currentSessionId,
+            tag,
+          },
+        });

-  // Auto-scroll to latest message
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messageHandling.messages, messageHandling.currentStreamContent]);
+        // Assume success for now, as we don't get a response
+        sessionManagement.setSavedSessionTags((prev) => [...prev, tag]);
+        setShowSaveDialog(false);
+      } catch (error) {
+        console.error('[App] Error saving session:', error);
+      }
+    },
+    [sessionManagement, vscode],
+  );

-  // Load sessions on mount
-  useEffect(() => {
-    vscode.postMessage({ type: 'getQwenSessions', data: {} });
+  // Handle attach context click
+  const handleAttachContextClick = useCallback(() => {
+    // Open native file picker (different from '@' completion which searches workspace files)
+    vscode.postMessage({
+      type: 'attachFile',
+      data: {},
+    });
  }, [vscode]);

-  // Request active editor on mount
-  useEffect(() => {
-    fileContext.requestActiveEditor();
-  }, [fileContext]);
-
-  // Toggle edit mode
-  const handleToggleEditMode = () => {
+  // Handle toggle edit mode
+  const handleToggleEditMode = useCallback(() => {
    setEditMode((prev) => {
      if (prev === 'ask') {
        return 'auto';
@@ -353,8 +338,9 @@ export const App: React.FC = () => {
      }
      return 'ask';
    });
-  };
+  }, []);

+  // Handle toggle thinking
  const handleToggleThinking = () => {
    setThinkingEnabled((prev) => !prev);
  };
@@ -389,66 +375,119 @@ export const App: React.FC = () => {
      />

      <div
-        className="flex-1 overflow-y-auto overflow-x-hidden pt-5 pr-5 pl-5 pb-[120px] flex flex-col relative min-w-0 focus:outline-none [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-white/20 [&::-webkit-scrollbar-thumb]:rounded-sm [&::-webkit-scrollbar-thumb:hover]:bg-white/30 [&>*]:flex [&>*]:gap-0 [&>*]:items-start [&>*]:text-left [&>*]:py-2 [&>*]:px-0 [&>*]:flex-col [&>*]:relative [&>*]:animate-[fadeIn_0.2s_ease-in]"
+        className="flex-1 overflow-y-auto overflow-x-hidden pt-5 pr-5 pl-5 pb-[120px] flex flex-col relative min-w-0 focus:outline-none [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-white/20 [&::-webkit-scrollbar-thumb]:rounded-sm [&::-webkit-scrollbar-thumb:hover]:bg-white/30 [&>*]:flex [&>*]:gap-0 [&>*]:items-start [&>*]:text-left [&>*]:py-2 [&>.message-item]:px-0 [&>*]:flex-col [&>*]:relative [&>*]:animate-[fadeIn_0.2s_ease-in]"
        style={{ backgroundColor: 'var(--app-primary-background)' }}
      >
        {!hasContent ? (
          <EmptyState />
        ) : (
          <>
-            {messageHandling.messages.map((msg, index) => {
-              const handleFileClick = (path: string) => {
-                vscode.postMessage({
-                  type: 'openFile',
-                  data: { path },
-                });
-              };
+            {/* 创建统一的消息数组，包含所有类型的消息和工具调用 */}
+            {(() => {
+              // 普通消息
+              const regularMessages = messageHandling.messages.map((msg) => ({
+                type: 'message' as const,
+                data: msg,
+                timestamp: msg.timestamp,
+              }));

-              if (msg.role === 'thinking') {
-                return (
-                  <ThinkingMessage
-                    key={index}
-                    content={msg.content}
-                    timestamp={msg.timestamp}
-                    onFileClick={handleFileClick}
-                  />
-                );
-              }
+              // 进行中的工具调用
+              const inProgressTools = inProgressToolCalls.map((toolCall) => ({
+                type: 'in-progress-tool-call' as const,
+                data: toolCall,
+                timestamp: toolCall.timestamp || Date.now(),
+              }));

-              if (msg.role === 'user') {
-                return (
-                  <UserMessage
-                    key={index}
-                    content={msg.content}
-                    timestamp={msg.timestamp}
-                    onFileClick={handleFileClick}
-                    fileContext={msg.fileContext}
-                  />
-                );
-              }
+              // 完成的工具调用
+              const completedTools = completedToolCalls
+                .filter(hasToolCallOutput)
+                .map((toolCall) => ({
+                  type: 'completed-tool-call' as const,
+                  data: toolCall,
+                  timestamp: toolCall.timestamp || Date.now(),
+                }));

-              return (
-                <AssistantMessage
-                  key={index}
-                  content={msg.content}
-                  timestamp={msg.timestamp}
-                  onFileClick={handleFileClick}
-                />
-              );
-            })}
+              // 合并并按时间戳排序，确保消息与工具调用穿插显示
+              const allMessages = [
+                ...regularMessages,
+                ...inProgressTools,
+                ...completedTools,
+              ].sort((a, b) => (a.timestamp || 0) - (b.timestamp || 0));

-            {inProgressToolCalls.map((toolCall) => (
-              <InProgressToolCall
-                key={toolCall.toolCallId}
-                toolCall={toolCall}
-              />
-            ))}
+              console.log('[App] allMessages:', allMessages);

-            {completedToolCalls.filter(hasToolCallOutput).map((toolCall) => (
-              <ToolCall key={toolCall.toolCallId} toolCall={toolCall} />
-            ))}
+              return allMessages.map((item, index) => {
+                switch (item.type) {
+                  case 'message': {
+                    const msg = item.data as TextMessage;
+                    const handleFileClick = (path: string) => {
+                      vscode.postMessage({
+                        type: 'openFile',
+                        data: { path },
+                      });
+                    };

-            {planEntries.length > 0 && <PlanDisplay entries={planEntries} />}
+                    if (msg.role === 'thinking') {
+                      return (
+                        <div key={`message-${index}`} className="message-item">
+                          <ThinkingMessage
+                            content={msg.content || ''}
+                            timestamp={msg.timestamp || 0}
+                            onFileClick={handleFileClick}
+                          />
+                        </div>
+                      );
+                    }
+
+                    if (msg.role === 'user') {
+                      return (
+                        <div key={`message-${index}`} className="message-item">
+                          <UserMessage
+                            content={msg.content || ''}
+                            timestamp={msg.timestamp || 0}
+                            onFileClick={handleFileClick}
+                            fileContext={msg.fileContext}
+                          />
+                        </div>
+                      );
+                    }
+
+                    return (
+                      <div key={`message-${index}`} className="message-item">
+                        <AssistantMessage
+                          content={msg.content || ''}
+                          timestamp={msg.timestamp || 0}
+                          onFileClick={handleFileClick}
+                        />
+                      </div>
+                    );
+                  }
+
+                  case 'in-progress-tool-call':
+                    return (
+                      <InProgressToolCall
+                        key={`in-progress-${(item.data as ToolCallData).toolCallId}`}
+                        toolCall={item.data as ToolCallData}
+                        // onFileClick={handleFileClick}
+                      />
+                    );
+
+                  case 'completed-tool-call':
+                    return (
+                      <ToolCall
+                        key={`completed-${(item.data as ToolCallData).toolCallId}`}
+                        toolCall={item.data as ToolCallData}
+                        // onFileClick={handleFileClick}
+                      />
+                    );
+
+                  default:
+                    return null;
+                }
+              });
+            })()}
+
+            {/* 已改为在 useWebViewMessages 中将每次 plan 推送为历史 toolcall，避免重复展示最新块 */}

            {messageHandling.isWaitingForResponse &&
              messageHandling.loadingMessage && (
@@ -457,19 +496,6 @@ export const App: React.FC = () => {
                />
              )}

-            {messageHandling.isStreaming &&
-              messageHandling.currentStreamContent && (
-                <StreamingMessage
-                  content={messageHandling.currentStreamContent}
-                  onFileClick={(path) => {
-                    vscode.postMessage({
-                      type: 'openFile',
-                      data: { path },
-                    });
-                  }}
-                />
-              )}
-
            <div ref={messagesEndRef} />
          </>
        )}
@@ -497,7 +523,7 @@ export const App: React.FC = () => {
        onCompositionStart={() => setIsComposing(true)}
        onCompositionEnd={() => setIsComposing(false)}
        onKeyDown={() => {}}
-        onSubmit={handleSubmit}
+        onSubmit={handleSubmit.handleSubmit}
        onToggleEditMode={handleToggleEditMode}
        onToggleThinking={handleToggleThinking}
        onFocusActiveEditor={fileContext.focusActiveEditor}
@@ -537,12 +563,15 @@ export const App: React.FC = () => {
        }}
        onAttachContext={handleAttachContextClick}
        completionIsOpen={completion.isOpen}
+        completionItems={completion.items}
+        onCompletionSelect={handleCompletionSelect}
+        onCompletionClose={completion.closeCompletion}
      />

      <SaveSessionDialog
        isOpen={showSaveDialog}
        onClose={() => setShowSaveDialog(false)}
-        onSave={sessionManagement.handleSaveSession}
+        onSave={handleSaveSession}
        existingTags={sessionManagement.savedSessionTags}
      />

@@ -556,14 +585,7 @@ export const App: React.FC = () => {
        />
      )}

-      {completion.isOpen && completion.items.length > 0 && (
-        <CompletionMenu
-          items={completion.items}
-          position={completion.position}
-          onSelect={handleCompletionSelect}
-          onClose={completion.closeCompletion}
-        />
-      )}
+      {/* Claude-style dropdown is rendered inside InputForm for proper anchoring */}
    </div>
  );
 };
--- a/packages/vscode-ide-companion/src/webview/ClaudeCodeStyles.css
+++ b/packages/vscode-ide-companion/src/webview/ClaudeCodeStyles.css
@@ -10,11 +10,9 @@
 /* Import component styles */
@import './components/SaveSessionDialog.css';
@import './components/SessionManager.css';
-@import './components/MessageContent.css';
@import './components/EmptyState.css';
@import './components/CompletionMenu.css';
@import './components/ContextPills.css';
-@import './components/PermissionDrawer.css';
@import './components/PlanDisplay.css';
@import './components/Timeline.css';
@import './components/shared/FileLink.css';
--- a/packages/vscode-ide-companion/src/webview/WebViewProvider.ts
+++ b/packages/vscode-ide-companion/src/webview/WebViewProvider.ts
@@ -10,9 +10,9 @@ import { ConversationStore } from '../storage/conversationStore.js';
 import type { AcpPermissionRequest } from '../constants/acpTypes.js';
 import { CliDetector } from '../cli/cliDetector.js';
 import { AuthStateManager } from '../auth/authStateManager.js';
-import { PanelManager } from './PanelManager.js';
-import { MessageHandler } from './MessageHandler.js';
-import { WebViewContent } from './WebViewContent.js';
+import { PanelManager } from '../webview/PanelManager.js';
+import { MessageHandler } from '../webview/MessageHandler.js';
+import { WebViewContent } from '../webview/WebViewContent.js';
 import { CliInstaller } from '../cli/CliInstaller.js';
 import { getFileName } from './utils/webviewUtils.js';

@@ -82,6 +82,15 @@ export class WebViewProvider {
      });
    });

+    // Setup end-turn handler from ACP stopReason=end_turn
+    this.agentManager.onEndTurn(() => {
+      // Ensure WebView exits streaming state even if no explicit streamEnd was emitted elsewhere
+      this.sendMessageToWebView({
+        type: 'streamEnd',
+        data: { timestamp: Date.now(), reason: 'end_turn' },
+      });
+    });
+
    // Note: Tool call updates are handled in handleSessionUpdate within QwenAgentManager
    // and sent via onStreamChunk callback
    this.agentManager.onToolCall((update) => {
@@ -365,6 +374,10 @@ export class WebViewProvider {
      '[WebViewProvider] Starting initialization, workingDir:',
      workingDir,
    );
+    console.log(
+      '[WebViewProvider] AuthStateManager available:',
+      !!this.authStateManager,
+    );

    const config = vscode.workspace.getConfiguration('qwenCode');
    const qwenEnabled = config.get<boolean>('qwen.enabled', true);
@@ -604,11 +617,17 @@ export class WebViewProvider {
      });
    } catch (error) {
      console.error('[WebViewProvider] Force re-login failed:', error);
+      console.error(
+        '[WebViewProvider] Error stack:',
+        error instanceof Error ? error.stack : 'N/A',
+      );

      // Send error notification to WebView
      this.sendMessageToWebView({
        type: 'loginError',
-        data: { message: `Login failed: ${error}` },
+        data: {
+          message: `Login failed: ${error instanceof Error ? error.message : String(error)}`,
+        },
      });

      throw error;
--- a/packages/vscode-ide-companion/src/webview/components/ClaudeCompletionMenu.css
+++ b/packages/vscode-ide-companion/src/webview/components/ClaudeCompletionMenu.css
@@ -0,0 +1,115 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/* Claude Code-like dropdown anchored to input container */
+.hi {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  margin-bottom: 8px;
+  background: var(--app-menu-background);
+  border: 1px solid var(--app-input-border);
+  border-radius: var(--corner-radius-large);
+  overflow: hidden;
+  animation: So .15s ease-out;
+  max-height: 50vh;
+  z-index: 1000;
+}
+
+/* Optional top spacer to create visual separation from input */
+.hi > .spacer-4px { height: 4px; }
+
+.xi {
+  max-height: 300px;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  padding: var(--app-list-padding);
+  gap: var(--app-list-gap);
+  padding-bottom: 8px;
+}
+
+.fi { /* divider */
+  height: 1px;
+  background: var(--app-input-border);
+  margin: 4px 0;
+}
+
+.vi { /* section label */
+  padding: 4px 12px;
+  color: var(--app-primary-foreground);
+  opacity: .5;
+  font-size: .9em;
+}
+
+.wi { /* item */
+  padding: var(--app-list-item-padding);
+  margin: 0 4px;
+  cursor: pointer;
+  border-radius: var(--app-list-border-radius);
+}
+
+.ki { /* item content */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.Ii { /* leading icon */
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--vscode-symbolIcon-fileForeground, #cccccc);
+}
+
+.Lo { /* primary text */
+  color: var(--app-primary-foreground);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.Mo { /* secondary text (path/description) */
+  color: var(--app-secondary-foreground);
+  opacity: .7;
+  font-size: .9em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 50%;
+}
+
+.jo { /* active/selected */
+  background: var(--app-list-active-background);
+  color: var(--app-list-active-foreground);
+}
+
+.jo .Lo { color: var(--app-list-active-foreground); }
+
+.yi { /* trailing icon placeholder */
+  width: 16px;
+  height: 16px;
+  opacity: .5;
+  margin-left: auto;
+}
+
+@keyframes So {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Container around the input to anchor the dropdown */
+.Bo {
+  position: relative;
+  display: flex;
+}
--- a/packages/vscode-ide-companion/src/webview/components/ClaudeCompletionMenu.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/ClaudeCompletionMenu.tsx
@@ -0,0 +1,123 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { useEffect, useRef, useState } from 'react';
+import './ClaudeCompletionMenu.css';
+import type { CompletionItem } from './CompletionMenu.js';
+
+interface ClaudeCompletionMenuProps {
+  items: CompletionItem[];
+  onSelect: (item: CompletionItem) => void;
+  onClose: () => void;
+  title?: string;
+  selectedIndex?: number;
+}
+
+/**
+ * Claude Code-like anchored dropdown rendered above the input field.
+ * Keyboard: Up/Down to move, Enter to select, Esc to close.
+ */
+export const ClaudeCompletionMenu: React.FC<ClaudeCompletionMenuProps> = ({
+  items,
+  onSelect,
+  onClose,
+  title,
+  selectedIndex = 0,
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [selected, setSelected] = useState(selectedIndex);
+
+  useEffect(() => setSelected(selectedIndex), [selectedIndex]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        onClose();
+      }
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      switch (event.key) {
+        case 'ArrowDown':
+          event.preventDefault();
+          setSelected((prev) => Math.min(prev + 1, items.length - 1));
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          setSelected((prev) => Math.max(prev - 1, 0));
+          break;
+        case 'Enter':
+          event.preventDefault();
+          if (items[selected]) {
+            onSelect(items[selected]);
+          }
+          break;
+        case 'Escape':
+          event.preventDefault();
+          onClose();
+          break;
+        default:
+          break;
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [items, selected, onSelect, onClose]);
+
+  useEffect(() => {
+    const selectedEl = containerRef.current?.querySelector(
+      `[data-index="${selected}"]`,
+    );
+    if (selectedEl) {
+      selectedEl.scrollIntoView({ block: 'nearest' });
+    }
+  }, [selected]);
+
+  if (!items.length) {
+    return null;
+  }
+
+  return (
+    <div ref={containerRef} className="hi" role="menu">
+      <div className="spacer-4px" />
+      <div className="xi">
+        {title && <div className="vi">{title}</div>}
+        {items.map((item, index) => {
+          const selectedCls = index === selected ? 'jo' : '';
+          return (
+            <div
+              key={item.id}
+              data-index={index}
+              className={`wi ${selectedCls}`}
+              onClick={() => onSelect(item)}
+              onMouseEnter={() => setSelected(index)}
+              role="menuitem"
+            >
+              <div className="ki">
+                {item.icon && <span className="Ii">{item.icon}</span>}
+                <span className="Lo">{item.label}</span>
+                {item.description && (
+                  <span className="Mo" title={item.description}>
+                    {item.description}
+                  </span>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
--- a/packages/vscode-ide-companion/src/webview/components/CompletionMenu.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/CompletionMenu.tsx
@@ -13,8 +13,11 @@ export interface CompletionItem {
  label: string;
  description?: string;
  icon?: React.ReactNode;
-  type: 'file' | 'symbol' | 'command' | 'variable';
-  value?: unknown;
+  type: 'file' | 'folder' | 'symbol' | 'command' | 'variable' | 'info';
+  // Value inserted into the input when selected (e.g., filename or command)
+  value?: string;
+  // Optional full path for files (used to build @filename -> full path mapping)
+  path?: string;
 }

 interface CompletionMenuProps {
--- a/packages/vscode-ide-companion/src/webview/components/InProgressToolCall.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/InProgressToolCall.tsx
@@ -6,12 +6,14 @@
 * In-progress tool call component - displays active tool calls with Claude Code style
 */

-import type React from 'react';
+import React from 'react';
 import type { ToolCallData } from './toolcalls/shared/types.js';
 import { FileLink } from './shared/FileLink.js';
+import { useVSCode } from '../hooks/useVSCode.js';

 interface InProgressToolCallProps {
  toolCall: ToolCallData;
+  onFileClick?: (path: string, line?: number | null) => void;
 }

 /**
@@ -40,65 +42,158 @@ const formatKind = (kind: string): string => {
 };

 /**
- * Get status display text
+ * Get file name from path
 */
-const getStatusText = (status: string): string => {
-  const statusMap: Record<string, string> = {
-    pending: 'Pending',
-    in_progress: 'In Progress',
-    completed: 'Completed',
-    failed: 'Failed',
-  };
-
-  return statusMap[status] || status;
-};
+const getFileName = (path: string): string => path.split('/').pop() || path;

 /**
 * Component to display in-progress tool calls with Claude Code styling
- * Shows kind, status, and file locations
+ * Shows kind, file name, and file locations
 */
 export const InProgressToolCall: React.FC<InProgressToolCallProps> = ({
  toolCall,
+  onFileClick: _onFileClick,
 }) => {
-  const { kind, status, title, locations } = toolCall;
+  const { kind, title, locations, content } = toolCall;
+  const vscode = useVSCode();

  // Format the kind label
  const kindLabel = formatKind(kind);

-  // Get status text
-  const statusText = getStatusText(status || 'in_progress');
+  // Map tool kind to a Tailwind text color class (Claude-like palette)
+  const kindColorClass = React.useMemo(() => {
+    const k = kind.toLowerCase();
+    if (k === 'read') {
+      return 'text-[#4ec9b0]';
+    }
+    if (k === 'write' || k === 'edit') {
+      return 'text-[#e5c07b]';
+    }
+    if (k === 'execute' || k === 'bash' || k === 'command') {
+      return 'text-[#c678dd]';
+    }
+    if (k === 'search' || k === 'grep' || k === 'glob' || k === 'find') {
+      return 'text-[#61afef]';
+    }
+    if (k === 'think' || k === 'thinking') {
+      return 'text-[#98c379]';
+    }
+    return 'text-[var(--app-primary-foreground)]';
+  }, [kind]);

-  // Safely prepare a display value for title. Titles may sometimes arrive as
-  // non-string objects; ensure we render a string in that case.
-  const titleText = typeof title === 'string' ? title : undefined;
-  const titleDisplay: React.ReactNode =
-    typeof title === 'string' ? title : title ? JSON.stringify(title) : null;
+  // Get file name from locations or title
+  let fileName: string | null = null;
+  let filePath: string | null = null;
+  let fileLine: number | null = null;
+
+  if (locations && locations.length > 0) {
+    fileName = getFileName(locations[0].path);
+    filePath = locations[0].path;
+    fileLine = locations[0].line || null;
+  } else if (typeof title === 'string') {
+    fileName = title;
+  }
+
+  // Extract content text from content array
+  let contentText: string | null = null;
+  // Extract first diff (if present)
+  let diffData: {
+    path?: string;
+    oldText?: string | null;
+    newText?: string;
+  } | null = null;
+  if (content && content.length > 0) {
+    // Look for text content
+    for (const item of content) {
+      if (item.type === 'content' && item.content?.text) {
+        contentText = item.content.text;
+        break;
+      }
+    }
+
+    // If no text content found, look for other content types
+    if (!contentText) {
+      for (const item of content) {
+        if (item.type === 'content' && item.content) {
+          contentText = JSON.stringify(item.content, null, 2);
+          break;
+        }
+      }
+    }
+
+    // Look for diff content
+    for (const item of content) {
+      if (
+        item.type === 'diff' &&
+        (item.oldText !== undefined || item.newText !== undefined)
+      ) {
+        diffData = {
+          path: item.path,
+          oldText: item.oldText ?? null,
+          newText: item.newText,
+        };
+        break;
+      }
+    }
+  }
+
+  // Handle open diff
+  const handleOpenDiff = () => {
+    if (!diffData) {
+      return;
+    }
+    const path = diffData.path || filePath || '';
+    vscode.postMessage({
+      type: 'openDiff',
+      data: {
+        path,
+        oldText: diffData.oldText || '',
+        newText: diffData.newText || '',
+      },
+    });
+  };

  return (
-    <div className="in-progress-tool-call">
-      <div className="in-progress-tool-call-header">
-        <span className="in-progress-tool-call-kind">{kindLabel}</span>
+    <div className="relative py-2 toolcall-container">
+      <div className="flex items-center gap-2 mb-1 relative">
+        {/* Pulsing bullet dot (Claude-style), vertically centered with header row */}
        <span
-          className={`in-progress-tool-call-status ${status || 'in_progress'}`}
+          aria-hidden
+          className="absolute -left-[20px] top-1/2 -translate-y-1/2 text-[10px] leading-none text-[#e1c08d] animate-[pulse_1.5s_ease-in-out_infinite]"
        >
-          {statusText}
+          ●
        </span>
+        <span className={`text-xs font-medium ${kindColorClass}`}>
+          {kindLabel}
+        </span>
+        {filePath && (
+          <FileLink
+            path={filePath}
+            line={fileLine ?? undefined}
+            showFullPath={false}
+            className="text-xs"
+          />
+        )}
+        {!filePath && fileName && (
+          <span className="text-xs text-[var(--app-secondary-foreground)] font-mono">
+            {fileName}
+          </span>
+        )}
+
+        {diffData && (
+          <button
+            type="button"
+            onClick={handleOpenDiff}
+            className="text-[11px] px-2 py-0.5 border border-[var(--app-input-border)] rounded-small text-[var(--app-primary-foreground)] bg-transparent hover:bg-[var(--app-ghost-button-hover-background)] cursor-pointer"
+          >
+            Open Diff
+          </button>
+        )}
      </div>

-      {titleDisplay && (titleText ? titleText !== kindLabel : true) && (
-        <div className="in-progress-tool-call-title">{titleDisplay}</div>
-      )}
-
-      {locations && locations.length > 0 && (
-        <div className="in-progress-tool-call-locations">
-          {locations.map((loc, idx) => (
-            <FileLink
-              key={idx}
-              path={loc.path}
-              line={loc.line}
-              showFullPath={false}
-            />
-          ))}
+      {contentText && (
+        <div className="text-xs text-[var(--app-secondary-foreground)] font-mono mt-1 whitespace-pre-wrap break-words max-h-[200px] overflow-y-auto p-1 bg-[var(--app-input-background)] border border-[var(--app-input-border)] rounded">
+          {contentText}
        </div>
      )}
    </div>
--- a/packages/vscode-ide-companion/src/webview/components/InputForm.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/InputForm.tsx
@@ -15,6 +15,8 @@ import {
  LinkIcon,
  ArrowUpIcon,
 } from './icons/index.js';
+import { ClaudeCompletionMenu } from './ClaudeCompletionMenu.js';
+import type { CompletionItem } from './CompletionMenu.js';

 type EditMode = 'ask' | 'auto' | 'plan';

@@ -40,6 +42,9 @@ interface InputFormProps {
  onShowCommandMenu: () => void;
  onAttachContext: () => void;
  completionIsOpen: boolean;
+  completionItems?: CompletionItem[];
+  onCompletionSelect?: (item: CompletionItem) => void;
+  onCompletionClose?: () => void;
 }

 // Get edit mode display info
@@ -92,6 +97,10 @@ export const InputForm: React.FC<InputFormProps> = ({
  onShowCommandMenu,
  onAttachContext,
  completionIsOpen,
+  // Claude-style completion dropdown (optional)
+  completionItems,
+  onCompletionSelect,
+  onCompletionClose,
 }) => {
  const editModeInfo = getEditModeInfo(editMode);

@@ -133,12 +142,27 @@ export const InputForm: React.FC<InputFormProps> = ({
          {/* Banner area */}
          <div className="input-banner" />

-          {/* Input wrapper */}
-          <div className="relative flex z-[1]">
+          {/* Input wrapper (Claude-style anchor container) */}
+          <div className="relative flex z-[1] Bo">
+            {/* Claude-style anchored dropdown */}
+            {completionIsOpen &&
+              completionItems &&
+              completionItems.length > 0 &&
+              onCompletionSelect &&
+              onCompletionClose && (
+                // Render dropdown above the input, matching Claude Code
+                <ClaudeCompletionMenu
+                  items={completionItems}
+                  onSelect={onCompletionSelect}
+                  onClose={onCompletionClose}
+                  title={undefined}
+                />
+              )}
+
            <div
              ref={inputFieldRef}
              contentEditable="plaintext-only"
-              className="flex-1 self-stretch p-2.5 px-3.5 outline-none font-inherit leading-relaxed overflow-y-auto relative select-text min-h-[1.5em] max-h-[200px] bg-transparent border-none rounded-none overflow-x-hidden break-words whitespace-pre-wrap empty:before:content-[attr(data-placeholder)] empty:before:absolute empty:before:pointer-events-none disabled:text-gray-400 disabled:cursor-not-allowed"
+              className="c flex-1 self-stretch p-2.5 px-3.5 outline-none font-inherit leading-relaxed overflow-y-auto relative select-text min-h-[1.5em] max-h-[200px] bg-transparent border-none rounded-none overflow-x-hidden break-words whitespace-pre-wrap empty:before:content-[attr(data-placeholder)] empty:before:absolute empty:before:pointer-events-none disabled:text-gray-400 disabled:cursor-not-allowed"
              style={{
                color: 'var(--app-input-foreground)',
                fontSize: 'var(--vscode-chat-font-size, 13px)',
--- a/packages/vscode-ide-companion/src/webview/components/MessageContent.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/MessageContent.tsx
@@ -134,7 +134,7 @@ export const MessageContent: React.FC<MessageContentProps> = ({
      parts.push(
        <code
          key={`inline-${matchIndex}`}
-          className="rounded px-1.5 py-0.5 whitespace-nowrap text-[0.9em]"
+          className="rounded px-1.5 py-0.5 whitespace-nowrap text-[0.9em] inline-block max-w-full overflow-hidden text-ellipsis align-baseline"
          style={{
            backgroundColor: 'var(--app-code-background, rgba(0, 0, 0, 0.05))',
            border: '1px solid var(--app-primary-border-color)',
--- a/packages/vscode-ide-companion/src/webview/components/PermissionDrawer.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/PermissionDrawer.tsx
@@ -68,7 +68,9 @@ export const PermissionDrawer: React.FC<PermissionDrawerProps> = ({
  // Handle keyboard navigation
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
-      if (!isOpen) return;
+      if (!isOpen) {
+        return;
+      }

      // Number keys 1-9 for quick select
      const numMatch = e.key.match(/^[1-9]$/);
@@ -123,7 +125,9 @@ export const PermissionDrawer: React.FC<PermissionDrawerProps> = ({
    }
  }, [isOpen]);

-  if (!isOpen) return null;
+  if (!isOpen) {
+    return null;
+  }

  return (
    <div className="fixed inset-x-0 bottom-0 z-[1000] p-2">
@@ -162,18 +166,11 @@ export const PermissionDrawer: React.FC<PermissionDrawerProps> = ({
            return (
              <button
                key={option.optionId}
-                className={`flex items-center gap-2 px-3 py-2 text-left rounded-small border transition-colors duration-150 ${
+                className={`flex items-center gap-2 px-2 py-1.5 text-left w-full box-border rounded-[4px] border-0 shadow-[inset_0_0_0_1px_var(--app-transparent-inner-border)] transition-colors duration-150 text-[var(--app-primary-foreground)] ${
                  isFocused
                    ? 'bg-[var(--app-list-active-background)] text-[var(--app-list-active-foreground)]'
                    : 'hover:bg-[var(--app-list-hover-background)]'
                }`}
-                style={{
-                  color: isFocused
-                    ? 'var(--app-list-active-foreground)'
-                    : 'var(--app-primary-foreground)',
-                  borderColor:
-                    'color-mix(in srgb, var(--app-secondary-foreground) 70%, transparent)',
-                }}
                onClick={() => onResponse(option.optionId)}
                onMouseEnter={() => setFocusedIndex(index)}
              >
@@ -197,39 +194,60 @@ export const PermissionDrawer: React.FC<PermissionDrawerProps> = ({
            );
          })}

-          {/* Custom message input */}
-          <input
-            ref={customInputRef as React.RefObject<HTMLInputElement>}
-            type="text"
-            placeholder="Tell Qwen what to do instead"
-            spellCheck={false}
-            className={`w-full px-3 py-2 text-sm rounded-small border transition-colors duration-150 ${
-              focusedIndex === options.length
-                ? 'bg-[var(--app-list-hover-background)]'
-                : 'bg-transparent'
-            }`}
-            style={{
-              color: 'var(--app-input-foreground)',
-              outline: 'none',
-              borderColor:
-                'color-mix(in srgb, var(--app-secondary-foreground) 70%, transparent)',
-            }}
-            value={customMessage}
-            onChange={(e) => setCustomMessage(e.target.value)}
-            onFocus={() => setFocusedIndex(options.length)}
-            onMouseEnter={() => setFocusedIndex(options.length)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' && !e.shiftKey && customMessage.trim()) {
-                e.preventDefault();
-                const rejectOption = options.find((o) =>
-                  o.kind.includes('reject'),
-                );
-                if (rejectOption) {
-                  onResponse(rejectOption.optionId);
-                }
-              }
-            }}
-          />
+          {/* Custom message input (styled consistently with option items) */}
+          {(() => {
+            const isFocused = focusedIndex === options.length;
+            return (
+              <div
+                className={`flex items-center gap-2 px-2 py-1.5 text-left w-full box-border rounded-[4px] border-0 shadow-[inset_0_0_0_1px_var(--app-transparent-inner-border)] transition-colors duration-150 cursor-text text-[var(--app-primary-foreground)] ${
+                  isFocused
+                    ? 'bg-[var(--app-list-active-background)] text-[var(--app-list-active-foreground)]'
+                    : 'hover:bg-[var(--app-list-hover-background)]'
+                }`}
+                onMouseEnter={() => setFocusedIndex(options.length)}
+                onClick={() => customInputRef.current?.focus()}
+              >
+                {/* Number badge (N+1) */}
+                <span
+                  className={`inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs font-semibold rounded ${
+                    isFocused
+                      ? 'bg-white/20 text-inherit'
+                      : 'bg-[var(--app-list-hover-background)]'
+                  }`}
+                >
+                  {options.length + 1}
+                </span>
+
+                {/* Input field */}
+                <input
+                  ref={customInputRef as React.RefObject<HTMLInputElement>}
+                  type="text"
+                  placeholder="Tell Qwen what to do instead"
+                  spellCheck={false}
+                  className="flex-1 bg-transparent border-0 outline-none text-sm placeholder:opacity-70"
+                  style={{ color: 'var(--app-input-foreground)' }}
+                  value={customMessage}
+                  onChange={(e) => setCustomMessage(e.target.value)}
+                  onFocus={() => setFocusedIndex(options.length)}
+                  onKeyDown={(e) => {
+                    if (
+                      e.key === 'Enter' &&
+                      !e.shiftKey &&
+                      customMessage.trim()
+                    ) {
+                      e.preventDefault();
+                      const rejectOption = options.find((o) =>
+                        o.kind.includes('reject'),
+                      );
+                      if (rejectOption) {
+                        onResponse(rejectOption.optionId);
+                      }
+                    }
+                  }}
+                />
+              </div>
+            );
+          })()}
        </div>
      </div>

--- a/packages/vscode-ide-companion/src/webview/components/PlanDisplay.css
+++ b/packages/vscode-ide-companion/src/webview/components/PlanDisplay.css
@@ -5,115 +5,83 @@
 */

 /**
- * PlanDisplay.css - Styles for the task plan component
- * Clean checklist-style design matching Claude Code CLI
+ * PlanDisplay.css -> Tailwind 化
+ * 说明：尽量用 @apply，把原有类名保留，便于调试；
+ * 仅在必须的地方保留少量原生 CSS（如关键帧）。
 */

+/* 容器 */
 .plan-display {
-  background: transparent;
-  border: none;
-  padding: 8px 16px;
-  margin: 8px 0;
+  @apply bg-transparent border-0 py-2 px-4 my-2;
 }

+/* 标题区 */
 .plan-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 8px;
+  @apply flex items-center gap-1.5 mb-2;
 }

 .plan-progress-icons {
-  display: flex;
-  align-items: center;
-  gap: 2px;
+  @apply flex items-center gap-[2px];
 }

 .plan-progress-icon {
-  flex-shrink: 0;
-  color: var(--app-secondary-foreground);
-  opacity: 0.6;
+  @apply shrink-0 text-[var(--app-secondary-foreground)] opacity-60;
 }

 .plan-title {
-  font-size: 12px;
-  font-weight: 400;
-  color: var(--app-secondary-foreground);
-  opacity: 0.8;
+  @apply text-xs font-normal text-[var(--app-secondary-foreground)] opacity-80;
 }

+/* 列表 */
 .plan-entries {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
+  @apply flex flex-col gap-px;
 }

 .plan-entry {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 3px 0;
-  min-height: 20px;
+  @apply flex items-center gap-2 py-[3px] min-h-[20px];
 }

-/* Icon container */
+/* 图标容器（保留类名以兼容旧 DOM） */
 .plan-entry-icon {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 14px;
-  height: 14px;
+  @apply shrink-0 flex items-center justify-center w-[14px] h-[14px];
 }

 .plan-icon {
-  display: block;
-  width: 14px;
-  height: 14px;
+  @apply block w-[14px] h-[14px];
 }

-/* 不同状态的图标颜色 */
+/* 不同状态颜色（保留类名） */
 .plan-icon.pending {
-  color: var(--app-secondary-foreground);
-  opacity: 0.35;
+  @apply text-[var(--app-secondary-foreground)] opacity-30;
 }

 .plan-icon.in-progress {
-  color: var(--app-secondary-foreground);
-  opacity: 0.7;
+  @apply text-[var(--app-secondary-foreground)] opacity-70;
 }

 .plan-icon.completed {
-  color: #4caf50; /* 绿色勾号 */
-  opacity: 0.8;
+  @apply text-[#4caf50] opacity-80; /* 绿色勾号 */
 }

-/* Content */
+/* 内容 */
 .plan-entry-content {
-  flex: 1;
-  display: flex;
-  align-items: center;
+  @apply flex-1 flex items-center;
 }

 .plan-entry-text {
-  flex: 1;
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--app-primary-foreground);
-  opacity: 0.85;
+  @apply flex-1 text-xs leading-[1.5] text-[var(--app-primary-foreground)] opacity-80;
 }

-/* Status-specific styles */
+/* 状态化文本（保留选择器，兼容旧结构） */
 .plan-entry.completed .plan-entry-text {
-  opacity: 0.5;
-  text-decoration: line-through;
+  @apply opacity-50 line-through;
 }

 .plan-entry.in_progress .plan-entry-text {
-  font-weight: 400;
-  opacity: 0.9;
+  @apply font-normal opacity-90;
 }

+/* 保留 fadeIn 动画，供 App.tsx 使用 */
@keyframes fadeIn {
  from {
    opacity: 0;
--- a/packages/vscode-ide-companion/src/webview/components/PlanDisplay.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/PlanDisplay.tsx
@@ -5,12 +5,8 @@
 */

 import type React from 'react';
-import {
-  PlanCompletedIcon,
-  PlanInProgressIcon,
-  PlanPendingIcon,
-} from './icons/index.js';
 import './PlanDisplay.css';
+import { CheckboxDisplay } from './ui/CheckboxDisplay.js';

 export interface PlanEntry {
  content: string;
@@ -26,42 +22,76 @@ interface PlanDisplayProps {
 * PlanDisplay component - displays AI's task plan/todo list
 */
 export const PlanDisplay: React.FC<PlanDisplayProps> = ({ entries }) => {
-  // 计算完成进度
-  const completedCount = entries.filter((e) => e.status === 'completed').length;
-  const totalCount = entries.length;
-
-  const getStatusIcon = (status: string) => {
-    switch (status) {
-      case 'completed':
-        return <PlanCompletedIcon className="plan-icon completed" />;
-      case 'in_progress':
-        return <PlanInProgressIcon className="plan-icon in-progress" />;
-      default:
-        // pending
-        return <PlanPendingIcon className="plan-icon pending" />;
-    }
-  };
+  // 计算整体状态用于左侧圆点颜色
+  const allCompleted =
+    entries.length > 0 && entries.every((e) => e.status === 'completed');
+  const anyInProgress = entries.some((e) => e.status === 'in_progress');
+  const statusDotClass = allCompleted
+    ? 'before:text-[#74c991]'
+    : anyInProgress
+      ? 'before:text-[#e1c08d]'
+      : 'before:text-[var(--app-secondary-foreground)]';

  return (
-    <div className="plan-display">
-      <div className="plan-header">
-        <div className="plan-progress-icons">
-          <PlanPendingIcon className="plan-progress-icon" />
-          <PlanCompletedIcon className="plan-progress-icon" />
-        </div>
-        <span className="plan-title">
-          {completedCount} of {totalCount} Done
-        </span>
-      </div>
-      <div className="plan-entries">
-        {entries.map((entry, index) => (
-          <div key={index} className={`plan-entry ${entry.status}`}>
-            <div className="plan-entry-icon">{getStatusIcon(entry.status)}</div>
-            <div className="plan-entry-content">
-              <span className="plan-entry-text">{entry.content}</span>
-            </div>
+    <div
+      className={[
+        'plan-display',
+        // 容器：类似示例中的 .A/.e
+        'relative flex flex-col items-start py-2 pl-[30px] select-text text-[var(--app-primary-foreground)]',
+        // 左侧状态圆点，类似示例 .e:before
+        'before:content-["\\25cf"] before:absolute before:left-[10px] before:top-[12px] before:text-[10px] before:z-[1]',
+        statusDotClass,
+      ].join(' ')}
+    >
+      {/* 标题区域，类似示例中的 summary/_e/or */}
+      <div className="plan-header w-full">
+        <div className="relative">
+          <div className="list-none line-clamp-2 max-w-full overflow-hidden _e">
+            <span>
+              <div>
+                <span className="or font-bold mr-1">Update Todos</span>
+              </div>
+            </span>
          </div>
-        ))}
+        </div>
+      </div>
+
+      {/* 列表区域，类似示例中的 .qr/.Fr/.Hr */}
+      <div className="qr grid-cols-1 flex flex-col py-2">
+        <ul className="Fr list-none p-0 m-0 flex flex-col gap-1">
+          {entries.map((entry, index) => {
+            const isDone = entry.status === 'completed';
+            const isIndeterminate = entry.status === 'in_progress';
+            return (
+              <li
+                key={index}
+                className={[
+                  'Hr flex items-start gap-2 p-0 rounded text-[var(--app-primary-foreground)]',
+                  isDone ? 'fo opacity-70' : '',
+                ].join(' ')}
+              >
+                {/* 展示用复选框（复用组件） */}
+                <label className="flex items-start gap-2">
+                  <CheckboxDisplay
+                    checked={isDone}
+                    indeterminate={isIndeterminate}
+                  />
+                </label>
+
+                <div
+                  className={[
+                    'vo plan-entry-text flex-1 text-xs leading-[1.5] text-[var(--app-primary-foreground)]',
+                    isDone
+                      ? 'line-through text-[var(--app-secondary-foreground)] opacity-70'
+                      : 'opacity-85',
+                  ].join(' ')}
+                >
+                  {entry.content}
+                </div>
+              </li>
+            );
+          })}
+        </ul>
      </div>
    </div>
  );
--- a/packages/vscode-ide-companion/src/webview/components/icons/FileIcons.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/icons/FileIcons.tsx
@@ -82,3 +82,26 @@ export const SaveDocumentIcon: React.FC<IconProps> = ({
    <path d="M8 10.6666V8M8 8V5.33329M8 8H10.6666M8 8H5.33329" />
  </svg>
 );
+
+/**
+ * Folder icon (16x16)
+ * Useful for directory entries in completion lists
+ */
+export const FolderIcon: React.FC<IconProps> = ({
+  size = 16,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    width={size}
+    height={size}
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path d="M1.5 3A1.5 1.5 0 0 1 3 1.5h3.086a1.5 1.5 0 0 1 1.06.44L8.5 3H13A1.5 1.5 0 0 1 14.5 4.5v7A1.5 1.5 0 0 1 13 13H3A1.5 1.5 0 0 1 1.5 11.5v-8Z" />
+  </svg>
+);
--- a/packages/vscode-ide-companion/src/webview/components/icons/index.ts
+++ b/packages/vscode-ide-companion/src/webview/components/icons/index.ts
@@ -10,7 +10,12 @@
 export type { IconProps } from './types.js';

 // File icons
-export { FileIcon, FileListIcon, SaveDocumentIcon } from './FileIcons.js';
+export {
+  FileIcon,
+  FileListIcon,
+  SaveDocumentIcon,
+  FolderIcon,
+} from './FileIcons.js';

 // Navigation icons
 export {
--- a/packages/vscode-ide-companion/src/webview/components/messages/AssistantMessage.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/messages/AssistantMessage.tsx
@@ -32,6 +32,11 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({
  onFileClick,
  status = 'default',
 }) => {
+  // 空内容直接不渲染，避免只显示 ::before 的圆点导致观感不佳
+  if (!content || content.trim().length === 0) {
+    return null;
+  }
+
  // Map status to CSS class (only for ::before pseudo-element)
  const getStatusClass = () => {
    switch (status) {
--- a/packages/vscode-ide-companion/src/webview/components/messages/MessageOrdering.test.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/messages/MessageOrdering.test.tsx
@@ -0,0 +1,86 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { ToolCallData } from '../toolcalls/shared/types.js';
+import { hasToolCallOutput } from '../toolcalls/shared/utils.js';
+
+describe('Message Ordering', () => {
+  it('should correctly identify tool calls with output', () => {
+    // Test failed tool call (should show)
+    const failedToolCall: ToolCallData = {
+      toolCallId: 'test-1',
+      kind: 'read',
+      title: 'Read file',
+      status: 'failed',
+      timestamp: 1000,
+    };
+    expect(hasToolCallOutput(failedToolCall)).toBe(true);
+
+    // Test execute tool call with title (should show)
+    const executeToolCall: ToolCallData = {
+      toolCallId: 'test-2',
+      kind: 'execute',
+      title: 'ls -la',
+      status: 'completed',
+      timestamp: 2000,
+    };
+    expect(hasToolCallOutput(executeToolCall)).toBe(true);
+
+    // Test tool call with content (should show)
+    const contentToolCall: ToolCallData = {
+      toolCallId: 'test-3',
+      kind: 'read',
+      title: 'Read file',
+      status: 'completed',
+      content: [
+        {
+          type: 'content',
+          content: {
+            type: 'text',
+            text: 'File content',
+          },
+        },
+      ],
+      timestamp: 3000,
+    };
+    expect(hasToolCallOutput(contentToolCall)).toBe(true);
+
+    // Test tool call with locations (should show)
+    const locationToolCall: ToolCallData = {
+      toolCallId: 'test-4',
+      kind: 'read',
+      title: 'Read file',
+      status: 'completed',
+      locations: [
+        {
+          path: '/path/to/file.txt',
+        },
+      ],
+      timestamp: 4000,
+    };
+    expect(hasToolCallOutput(locationToolCall)).toBe(true);
+
+    // Test tool call with title (should show)
+    const titleToolCall: ToolCallData = {
+      toolCallId: 'test-5',
+      kind: 'generic',
+      title: 'Generic tool call',
+      status: 'completed',
+      timestamp: 5000,
+    };
+    expect(hasToolCallOutput(titleToolCall)).toBe(true);
+
+    // Test tool call without output (should not show)
+    const noOutputToolCall: ToolCallData = {
+      toolCallId: 'test-6',
+      kind: 'generic',
+      title: '',
+      status: 'completed',
+      timestamp: 6000,
+    };
+    expect(hasToolCallOutput(noOutputToolCall)).toBe(false);
+  });
+});
--- a/packages/vscode-ide-companion/src/webview/components/messages/UserMessage.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/messages/UserMessage.tsx
@@ -29,7 +29,9 @@ export const UserMessage: React.FC<UserMessageProps> = ({
 }) => {
  // Generate display text for file context
  const getFileContextDisplay = () => {
-    if (!fileContext) return null;
+    if (!fileContext) {
+      return null;
+    }
    const { fileName, startLine, endLine } = fileContext;
    if (startLine && endLine) {
      return startLine === endLine
--- a/packages/vscode-ide-companion/src/webview/components/messages/WaitingMessage.css
+++ b/packages/vscode-ide-companion/src/webview/components/messages/WaitingMessage.css
@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/* Subtle shimmering highlight across the loading text */
+@keyframes waitingMessageShimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+.loading-text-shimmer {
+  /* Use the theme foreground as the base color, with a moving light band */
+  background-image: linear-gradient(
+    90deg,
+    var(--app-secondary-foreground) 0%,
+    var(--app-secondary-foreground) 40%,
+    rgba(255, 255, 255, 0.95) 50%,
+    var(--app-secondary-foreground) 60%,
+    var(--app-secondary-foreground) 100%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent; /* text color comes from the gradient */
+  animation: waitingMessageShimmer 1.6s linear infinite;
+}
+
--- a/packages/vscode-ide-companion/src/webview/components/messages/WaitingMessage.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/messages/WaitingMessage.tsx
@@ -5,27 +5,84 @@
 */

 import type React from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import './AssistantMessage.css';
+import './WaitingMessage.css';
+import { WITTY_LOADING_PHRASES } from '../../../constants/loadingMessages.js';

 interface WaitingMessageProps {
  loadingMessage: string;
 }

+// Rotate message every few seconds while waiting
+const ROTATE_INTERVAL_MS = 3000; // rotate every 3s per request
+
 export const WaitingMessage: React.FC<WaitingMessageProps> = ({
  loadingMessage,
-}) => (
-  <div className="flex gap-0 items-start text-left py-2 flex-col opacity-85 animate-[fadeIn_0.2s_ease-in]">
-    <div className="bg-transparent border-0 py-2 flex items-center gap-2">
-      <span className="inline-flex items-center gap-1 mr-0">
-        <span className="inline-block w-1.5 h-1.5 bg-[var(--app-secondary-foreground)] rounded-full mr-0 opacity-60 animate-[typingPulse_1.4s_infinite_ease-in-out] [animation-delay:0s]"></span>
-        <span className="inline-block w-1.5 h-1.5 bg-[var(--app-secondary-foreground)] rounded-full mr-0 opacity-60 animate-[typingPulse_1.4s_infinite_ease-in-out] [animation-delay:0.2s]"></span>
-        <span className="inline-block w-1.5 h-1.5 bg-[var(--app-secondary-foreground)] rounded-full mr-0 opacity-60 animate-[typingPulse_1.4s_infinite_ease-in-out] [animation-delay:0.4s]"></span>
-      </span>
-      <span
-        className="opacity-70 italic"
-        style={{ color: 'var(--app-secondary-foreground)' }}
+}) => {
+  // Build a phrase list that starts with the provided message (if any), then witty fallbacks
+  const phrases = useMemo(() => {
+    const set = new Set<string>();
+    const list: string[] = [];
+    if (loadingMessage && loadingMessage.trim()) {
+      list.push(loadingMessage);
+      set.add(loadingMessage);
+    }
+    for (const p of WITTY_LOADING_PHRASES) {
+      if (!set.has(p)) {
+        list.push(p);
+      }
+    }
+    return list;
+  }, [loadingMessage]);
+
+  const [index, setIndex] = useState(0);
+
+  // Reset to the first phrase whenever the incoming message changes
+  useEffect(() => {
+    setIndex(0);
+  }, [phrases]);
+
+  // Periodically rotate to a different phrase
+  useEffect(() => {
+    if (phrases.length <= 1) {
+      return;
+    }
+    const id = setInterval(() => {
+      setIndex((prev) => {
+        // pick a different random index to avoid immediate repeats
+        let next = Math.floor(Math.random() * phrases.length);
+        if (phrases.length > 1) {
+          let guard = 0;
+          while (next === prev && guard < 5) {
+            next = Math.floor(Math.random() * phrases.length);
+            guard++;
+          }
+        }
+        return next;
+      });
+    }, ROTATE_INTERVAL_MS);
+    return () => clearInterval(id);
+  }, [phrases]);
+
+  return (
+    <div className="flex gap-0 items-start text-left py-2 flex-col opacity-85 animate-[fadeIn_0.2s_ease-in]">
+      {/* Use the same left status icon (pseudo-element) style as assistant-message-container */}
+      <div
+        className="assistant-message-container assistant-message-loading"
+        style={{
+          width: '100%',
+          alignItems: 'flex-start',
+          paddingLeft: '30px', // reserve space for ::before bullet
+          position: 'relative',
+          paddingTop: '8px',
+          paddingBottom: '8px',
+        }}
      >
-        {loadingMessage}
-      </span>
+        <span className="opacity-70 italic loading-text-shimmer">
+          {phrases[index]}
+        </span>
+      </div>
    </div>
-  </div>
-);
+  );
+};
--- a/packages/vscode-ide-companion/src/webview/components/messages/index.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/messages/index.tsx
@@ -9,3 +9,4 @@ export { AssistantMessage } from './AssistantMessage.js';
 export { ThinkingMessage } from './ThinkingMessage.js';
 export { StreamingMessage } from './StreamingMessage.js';
 export { WaitingMessage } from './WaitingMessage.js';
+export { PlanDisplay } from '../PlanDisplay.js';
--- a/packages/vscode-ide-companion/src/webview/components/toolcalls/EditToolCall.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/toolcalls/EditToolCall.tsx
@@ -7,7 +7,6 @@
 */

 import type React from 'react';
-import { useState } from 'react';
 import type { BaseToolCallProps } from './shared/types.js';
 import { ToolCallContainer } from './shared/LayoutComponents.js';
 import { DiffDisplay } from './shared/DiffDisplay.js';
@@ -42,7 +41,6 @@ const getDiffSummary = (
 export const EditToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
  const { content, locations, toolCallId } = toolCall;
  const vscode = useVSCode();
-  const [expanded, setExpanded] = useState(false);

  // Group content by type
  const { errors, diffs } = groupContent(content);
@@ -69,46 +67,66 @@ export const EditToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
    const fileName = path ? getFileName(path) : '';
    return (
      <ToolCallContainer
-        label={fileName ? `Edit ${fileName}` : 'Edit'}
+        label={fileName ? 'Edit' : 'Edit'}
        status="error"
        toolCallId={toolCallId}
+        labelSuffix={
+          path ? (
+            <FileLink
+              path={path}
+              showFullPath={false}
+              className="text-xs font-mono text-[var(--app-secondary-foreground)] hover:underline"
+            />
+          ) : undefined
+        }
      >
        {errors.join('\n')}
      </ToolCallContainer>
    );
  }

-  // Success case with diff: show collapsible format
+  // Success case with diff: show minimal inline preview; clicking the title opens VS Code diff
  if (diffs.length > 0) {
    const firstDiff = diffs[0];
    const path = firstDiff.path || (locations && locations[0]?.path) || '';
-    const fileName = path ? getFileName(path) : '';
+    // const fileName = path ? getFileName(path) : '';
    const summary = getDiffSummary(firstDiff.oldText, firstDiff.newText);
+    // No hooks here; define a simple click handler scoped to this block
+    const openFirstDiff = () =>
+      handleOpenDiff(path, firstDiff.oldText, firstDiff.newText);

    return (
      <div>
        <div
          className="relative py-2 select-text cursor-pointer hover:bg-[var(--app-input-background)]"
-          onClick={() => setExpanded(!expanded)}
+          onClick={openFirstDiff}
+          title="Open diff in VS Code"
        >
          <span className="absolute left-2 top-[10px] text-[10px] text-[#74c991]">
            ●
          </span>
-          <div className="toolcall-edit-content flex flex-col gap-1 pl-[30px] max-w-full">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
+          {/* Keep content within overall width: pl-[30px] provides the bullet indent; */}
+          {/* IMPORTANT: Always include min-w-0/max-w-full on inner wrappers to prevent overflow. */}
+          <div className="toolcall-edit-content flex flex-col gap-1 pl-[30px] min-w-0 max-w-full">
+            <div className="flex items-center justify-between min-w-0">
+              <div className="flex items-center gap-2 min-w-0">
                <span className="text-[13px] font-medium text-[var(--app-primary-foreground)]">
-                  Edit {fileName}
+                  Edit
                </span>
-                {toolCallId && (
+                {path && (
+                  <FileLink
+                    path={path}
+                    showFullPath={false}
+                    className="text-xs font-mono text-[var(--app-secondary-foreground)] hover:underline"
+                  />
+                )}
+                {/* {toolCallId && (
                  <span className="text-[10px] opacity-30">
                    [{toolCallId.slice(-8)}]
                  </span>
-                )}
+                )} */}
              </div>
-              <span className="text-xs opacity-60 mr-2">
-                {expanded ? '▼' : '▶'}
-              </span>
+              <span className="text-xs opacity-60 ml-2">open</span>
            </div>
            <div className="inline-flex text-[var(--app-secondary-foreground)] text-[0.85em] opacity-70 flex-row items-start w-full gap-1">
              <span className="flex-shrink-0 relative top-[-0.1em]">⎿</span>
@@ -116,26 +134,26 @@ export const EditToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
            </div>
          </div>
        </div>
-        {expanded && (
-          <div className="ml-[30px] mt-1">
-            {diffs.map(
-              (
-                item: import('./shared/types.js').ToolCallContent,
-                idx: number,
-              ) => (
-                <DiffDisplay
-                  key={`diff-${idx}`}
-                  path={item.path}
-                  oldText={item.oldText}
-                  newText={item.newText}
-                  onOpenDiff={() =>
-                    handleOpenDiff(item.path, item.oldText, item.newText)
-                  }
-                />
-              ),
-            )}
-          </div>
-        )}
+        {/* Content area aligned with bullet indent. Do NOT exceed container width. */}
+        {/* For any custom blocks here, keep: min-w-0 max-w-full and avoid extra horizontal padding/margins. */}
+        <div className="pl-[30px] mt-1 min-w-0 max-w-full overflow-hidden">
+          {diffs.map(
+            (
+              item: import('./shared/types.js').ToolCallContent,
+              idx: number,
+            ) => (
+              <DiffDisplay
+                key={`diff-${idx}`}
+                path={item.path}
+                oldText={item.oldText}
+                newText={item.newText}
+                onOpenDiff={() =>
+                  handleOpenDiff(item.path, item.oldText, item.newText)
+                }
+              />
+            ),
+          )}
+        </div>
      </div>
    );
  }
--- a/packages/vscode-ide-companion/src/webview/components/toolcalls/ReadToolCall.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/toolcalls/ReadToolCall.tsx
@@ -10,6 +10,7 @@ import type React from 'react';
 import type { BaseToolCallProps } from './shared/types.js';
 import { ToolCallContainer } from './shared/LayoutComponents.js';
 import { groupContent } from './shared/utils.js';
+import { FileLink } from '../shared/FileLink.js';

 /**
 * Specialized component for Read tool calls
@@ -23,17 +24,25 @@ export const ReadToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
  const { errors } = groupContent(content);

  // Extract filename from path
-  const getFileName = (path: string): string => path.split('/').pop() || path;
+  // const getFileName = (path: string): string => path.split('/').pop() || path;

  // Error case: show error
  if (errors.length > 0) {
    const path = locations?.[0]?.path || '';
-    const fileName = path ? getFileName(path) : '';
    return (
      <ToolCallContainer
-        label={fileName ? `Read ${fileName}` : 'Read'}
+        label={'Read'}
        status="error"
        toolCallId={toolCallId}
+        labelSuffix={
+          path ? (
+            <FileLink
+              path={path}
+              showFullPath={false}
+              className="text-xs font-mono text-[var(--app-secondary-foreground)] hover:underline"
+            />
+          ) : undefined
+        }
      >
        {errors.join('\n')}
      </ToolCallContainer>
@@ -42,12 +51,21 @@ export const ReadToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {

  // Success case: show which file was read with filename in label
  if (locations && locations.length > 0) {
-    const fileName = getFileName(locations[0].path);
+    const path = locations[0].path;
    return (
      <ToolCallContainer
-        label={`Read ${fileName}`}
+        label={'Read'}
        status="success"
        toolCallId={toolCallId}
+        labelSuffix={
+          path ? (
+            <FileLink
+              path={path}
+              showFullPath={false}
+              className="text-xs font-mono text-[var(--app-secondary-foreground)] hover:underline"
+            />
+          ) : undefined
+        }
      >
        {null}
      </ToolCallContainer>
--- a/packages/vscode-ide-companion/src/webview/components/toolcalls/TodoWriteToolCall.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/toolcalls/TodoWriteToolCall.tsx
@@ -9,7 +9,69 @@
 import type React from 'react';
 import type { BaseToolCallProps } from './shared/types.js';
 import { ToolCallContainer } from './shared/LayoutComponents.js';
-import { groupContent } from './shared/utils.js';
+import { groupContent, safeTitle } from './shared/utils.js';
+import { CheckboxDisplay } from '../ui/CheckboxDisplay.js';
+
+type EntryStatus = 'pending' | 'in_progress' | 'completed';
+
+interface TodoEntry {
+  content: string;
+  status: EntryStatus;
+}
+
+const mapToolStatusToBullet = (
+  status: import('./shared/types.js').ToolCallStatus,
+): 'success' | 'error' | 'warning' | 'loading' | 'default' => {
+  switch (status) {
+    case 'completed':
+      return 'success';
+    case 'failed':
+      return 'error';
+    case 'in_progress':
+      return 'warning';
+    case 'pending':
+      return 'loading';
+    default:
+      return 'default';
+  }
+};
+
+// 从文本中尽可能解析带有 - [ ] / - [x] 的 todo 列表
+const parseTodoEntries = (textOutputs: string[]): TodoEntry[] => {
+  const text = textOutputs.join('\n');
+  const lines = text.split(/\r?\n/);
+  const entries: TodoEntry[] = [];
+
+  const todoRe = /^(?:\s*(?:[-*]|\d+[.)])\s*)?\[( |x|X|-)\]\s+(.*)$/;
+  for (const line of lines) {
+    const m = line.match(todoRe);
+    if (m) {
+      const mark = m[1];
+      const title = m[2].trim();
+      const status: EntryStatus =
+        mark === 'x' || mark === 'X'
+          ? 'completed'
+          : mark === '-'
+            ? 'in_progress'
+            : 'pending';
+      if (title) {
+        entries.push({ content: title, status });
+      }
+    }
+  }
+
+  // 如果没匹配到，退化为将非空行当作 pending 条目
+  if (entries.length === 0) {
+    for (const line of lines) {
+      const title = line.trim();
+      if (title) {
+        entries.push({ content: title, status: 'pending' });
+      }
+    }
+  }
+
+  return entries;
+};

 /**
 * Specialized component for TodoWrite tool calls
@@ -18,12 +80,10 @@ import { groupContent } from './shared/utils.js';
 export const TodoWriteToolCall: React.FC<BaseToolCallProps> = ({
  toolCall,
 }) => {
-  const { content } = toolCall;
-
-  // Group content by type
+  const { content, status } = toolCall;
  const { errors, textOutputs } = groupContent(content);

-  // Error case: show error
+  // 错误优先展示
  if (errors.length > 0) {
    return (
      <ToolCallContainer label="Update Todos" status="error">
@@ -32,17 +92,45 @@ export const TodoWriteToolCall: React.FC<BaseToolCallProps> = ({
    );
  }

-  // Success case: show simple confirmation
-  const outputText =
-    textOutputs.length > 0 ? textOutputs.join(' ') : 'Todos updated';
+  const entries = parseTodoEntries(textOutputs);

-  // Truncate if too long
-  const displayText =
-    outputText.length > 100 ? outputText.substring(0, 100) + '...' : outputText;
+  const label = safeTitle(toolCall.title) || 'Update Todos';

  return (
-    <ToolCallContainer label="Update Todos" status="success">
-      {displayText}
+    <ToolCallContainer label={label} status={mapToolStatusToBullet(status)}>
+      <ul className="Fr list-none p-0 m-0 flex flex-col gap-1">
+        {entries.map((entry, idx) => {
+          const isDone = entry.status === 'completed';
+          const isIndeterminate = entry.status === 'in_progress';
+          return (
+            <li
+              key={idx}
+              className={[
+                'Hr flex items-start gap-2 p-0 rounded text-[var(--app-primary-foreground)]',
+                isDone ? 'fo opacity-70' : '',
+              ].join(' ')}
+            >
+              <label className="flex items-start gap-2">
+                <CheckboxDisplay
+                  checked={isDone}
+                  indeterminate={isIndeterminate}
+                />
+              </label>
+
+              <div
+                className={[
+                  'vo flex-1 text-xs leading-[1.5] text-[var(--app-primary-foreground)]',
+                  isDone
+                    ? 'line-through text-[var(--app-secondary-foreground)] opacity-70'
+                    : 'opacity-85',
+                ].join(' ')}
+              >
+                {entry.content}
+              </div>
+            </li>
+          );
+        })}
+      </ul>
    </ToolCallContainer>
  );
 };
--- a/packages/vscode-ide-companion/src/webview/components/toolcalls/WriteToolCall.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/toolcalls/WriteToolCall.tsx
@@ -10,6 +10,7 @@ import type React from 'react';
 import type { BaseToolCallProps } from './shared/types.js';
 import { ToolCallContainer } from './shared/LayoutComponents.js';
 import { groupContent } from './shared/utils.js';
+import { FileLink } from '../shared/FileLink.js';

 /**
 * Specialized component for Write tool calls
@@ -22,7 +23,7 @@ export const WriteToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
  const { errors, textOutputs } = groupContent(content);

  // Extract filename from path
-  const getFileName = (path: string): string => path.split('/').pop() || path;
+  // const getFileName = (path: string): string => path.split('/').pop() || path;

  // Extract content to write from rawInput
  let writeContent = '';
@@ -36,7 +37,6 @@ export const WriteToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
  // Error case: show filename + error message + content preview
  if (errors.length > 0) {
    const path = locations?.[0]?.path || '';
-    const fileName = path ? getFileName(path) : '';
    const errorMessage = errors.join('\n');

    // Truncate content preview
@@ -47,9 +47,18 @@ export const WriteToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {

    return (
      <ToolCallContainer
-        label={fileName ? `Write ${fileName}` : 'Write'}
+        label={'Write'}
        status="error"
        toolCallId={toolCallId}
+        labelSuffix={
+          path ? (
+            <FileLink
+              path={path}
+              showFullPath={false}
+              className="text-xs font-mono text-[var(--app-secondary-foreground)] hover:underline"
+            />
+          ) : undefined
+        }
      >
        <div className="inline-flex text-[var(--app-secondary-foreground)] text-[0.85em] opacity-70 mt-[2px] mb-[2px] flex-row items-start w-full gap-1">
          <span className="flex-shrink-0 relative top-[-0.1em]">⎿</span>
@@ -68,13 +77,22 @@ export const WriteToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {

  // Success case: show filename + line count
  if (locations && locations.length > 0) {
-    const fileName = getFileName(locations[0].path);
+    const path = locations[0].path;
    const lineCount = writeContent.split('\n').length;
    return (
      <ToolCallContainer
-        label={`Created ${fileName}`}
+        label={'Created'}
        status="success"
        toolCallId={toolCallId}
+        labelSuffix={
+          path ? (
+            <FileLink
+              path={path}
+              showFullPath={false}
+              className="text-xs font-mono text-[var(--app-secondary-foreground)] hover:underline"
+            />
+          ) : undefined
+        }
      >
        <div className="inline-flex text-[var(--app-secondary-foreground)] text-[0.85em] opacity-70 flex-row items-start w-full gap-1">
          <span className="flex-shrink-0 relative top-[-0.1em]">⎿</span>
--- a/packages/vscode-ide-companion/src/webview/components/toolcalls/shared/DiffDisplay.css
+++ b/packages/vscode-ide-companion/src/webview/components/toolcalls/shared/DiffDisplay.css
@@ -20,7 +20,7 @@
   紧凑视图样式 - 超简洁版本
   ======================================== */

-.diff-compact-view {
+.diff-display-container {
  border: 1px solid var(--vscode-panel-border);
  border-radius: 4px;
  background: var(--vscode-editor-background);
@@ -97,7 +97,7 @@
 }

 .diff-compact-actions {
-  padding: 4px 10px 6px;
+  padding: 6px 10px 8px;
  border-top: 1px solid var(--vscode-panel-border);
  background: var(--vscode-editorGroupHeader-tabsBackground);
  display: flex;
@@ -108,19 +108,16 @@
   完整视图样式
   ======================================== */

-.diff-full-view {
-  border: 1px solid var(--vscode-panel-border);
-  border-radius: 6px;
-  overflow: hidden;
-}
+/* 已移除完整视图，统一为简洁模式 + 预览 */

-.diff-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px;
-  background: var(--vscode-editorGroupHeader-tabsBackground);
-  border-bottom: 1px solid var(--vscode-panel-border);
+/* 预览区域（仅变更行） */
+.diff-preview {
+  margin: 0;
+  padding: 8px 10px;
+  background: var(--vscode-textCodeBlock-background, rgba(0, 0, 0, 0.06));
+  border-top: 1px solid var(--vscode-panel-border);
+  max-height: 320px;
+  overflow: auto;
 }

 .diff-file-path {
@@ -133,12 +130,32 @@
  gap: 8px;
 }

-.diff-stats-line {
-  padding: 8px 12px;
-  background: var(--vscode-editor-background);
+.diff-line {
+  white-space: pre;
+  font-family: var(--vscode-editor-font-family, 'Menlo', 'Monaco', 'Courier New', monospace);
+  font-size: 0.88em;
+  line-height: 1.45;
+}
+
+.diff-line.added {
+  background: var(--vscode-diffEditor-insertedLineBackground, rgba(76, 175, 80, 0.18));
+  color: var(--vscode-diffEditor-insertedTextForeground, #b5f1cc);
+}
+
+.diff-line.removed {
+  background: var(--vscode-diffEditor-removedLineBackground, rgba(244, 67, 54, 0.18));
+  color: var(--vscode-diffEditor-removedTextForeground, #f6b1a7);
+}
+
+.diff-line.no-change {
  color: var(--vscode-descriptionForeground);
-  font-size: 0.9em;
-  border-bottom: 1px solid var(--vscode-panel-border);
+  opacity: 0.8;
+}
+
+.diff-omitted {
+  color: var(--vscode-descriptionForeground);
+  font-style: italic;
+  padding-top: 6px;
 }

 .diff-section {
@@ -250,16 +267,6 @@
  .diff-stats {
    align-self: flex-start;
  }
-
-  .diff-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-  }
-
-  .diff-header-actions {
-    align-self: flex-end;
-  }
 }

 /* ========================================
--- a/packages/vscode-ide-companion/src/webview/components/toolcalls/shared/DiffDisplay.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/toolcalls/shared/DiffDisplay.tsx
@@ -7,7 +7,7 @@
 */

 import type React from 'react';
-import { useState, useMemo } from 'react';
+import { useMemo } from 'react';
 import { FileLink } from '../../shared/FileLink.js';
 import {
  calculateDiffStats,
@@ -15,6 +15,11 @@ import {
 } from '../../../utils/diffStats.js';
 import { OpenDiffIcon } from '../../icons/index.js';
 import './DiffDisplay.css';
+import {
+  computeLineDiff,
+  truncateOps,
+  type DiffOp,
+} from '../../../utils/simpleDiff.js';

 /**
 * Props for DiffDisplay
@@ -24,8 +29,8 @@ interface DiffDisplayProps {
  oldText?: string | null;
  newText?: string;
  onOpenDiff?: () => void;
-  /** 默认显示模式：'compact' | 'full' */
-  defaultMode?: 'compact' | 'full';
+  /** 是否显示统计信息 */
+  showStats?: boolean;
 }

 /**
@@ -37,20 +42,27 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
  oldText,
  newText,
  onOpenDiff,
-  defaultMode = 'compact',
+  showStats = true,
 }) => {
-  // 视图模式状态：紧凑或完整
-  const [viewMode, setViewMode] = useState<'compact' | 'full'>(defaultMode);
-
-  // 计算 diff 统计信息（仅在文本变化时重新计算）
+  // 统计信息（仅在文本变化时重新计算）
  const stats = useMemo(
    () => calculateDiffStats(oldText, newText),
    [oldText, newText],
  );

-  // 渲染紧凑视图
-  const renderCompactView = () => (
-    <div className="diff-compact-view">
+  // 仅生成变更行（增加/删除），不渲染上下文
+  const ops: DiffOp[] = useMemo(
+    () => computeLineDiff(oldText, newText),
+    [oldText, newText],
+  );
+  const {
+    items: previewOps,
+    truncated,
+    omitted,
+  } = useMemo(() => truncateOps<DiffOp>(ops), [ops]);
+
+  return (
+    <div className="diff-display-container">
      <div
        className="diff-compact-clickable"
        onClick={onOpenDiff}
@@ -75,87 +87,74 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
              />
            </div>
          )}
-          <div className="diff-stats">
-            {stats.added > 0 && (
-              <span className="stat-added">+{stats.added}</span>
-            )}
-            {stats.removed > 0 && (
-              <span className="stat-removed">-{stats.removed}</span>
-            )}
-            {stats.changed > 0 && (
-              <span className="stat-changed">~{stats.changed}</span>
-            )}
-            {stats.total === 0 && (
-              <span className="stat-no-change">No changes</span>
-            )}
-          </div>
-        </div>
-      </div>
-      <div className="diff-compact-actions">
-        <button
-          className="diff-action-button secondary"
-          onClick={(e) => {
-            e.stopPropagation();
-            setViewMode('full');
-          }}
-          title="Show full before/after content"
-        >
-          Show Details
-        </button>
-      </div>
-    </div>
-  );
-
-  // 渲染完整视图
-  const renderFullView = () => (
-    <div className="diff-full-view">
-      <div className="diff-header">
-        <div className="diff-file-path">
-          {path && <FileLink path={path} showFullPath={true} />}
-        </div>
-        <div className="diff-header-actions">
-          {onOpenDiff && (
-            <button
-              className="diff-action-button primary"
-              onClick={onOpenDiff}
-              title="Open in VS Code diff viewer"
-            >
-              <OpenDiffIcon width="14" height="14" />
-              Open Diff
-            </button>
+          {showStats && (
+            <div className="diff-stats" title={formatDiffStatsDetailed(stats)}>
+              {stats.added > 0 && (
+                <span className="stat-added">+{stats.added}</span>
+              )}
+              {stats.removed > 0 && (
+                <span className="stat-removed">-{stats.removed}</span>
+              )}
+              {stats.changed > 0 && (
+                <span className="stat-changed">~{stats.changed}</span>
+              )}
+              {stats.total === 0 && (
+                <span className="stat-no-change">No changes</span>
+              )}
+            </div>
          )}
+        </div>
+      </div>
+
+      {/* 只绘制差异行的预览区域 */}
+      <pre className="diff-preview code-block" aria-label="Diff preview">
+        <div className="code-content">
+          {previewOps.length === 0 && (
+            <div className="diff-line no-change">(no changes)</div>
+          )}
+          {previewOps.map((op, idx) => {
+            if (op.type === 'add') {
+              const line = op.line;
+              return (
+                <div key={`add-${idx}`} className="diff-line added">
+                  +{line || ' '}
+                </div>
+              );
+            }
+            if (op.type === 'remove') {
+              const line = op.line;
+              return (
+                <div key={`rm-${idx}`} className="diff-line removed">
+                  -{line || ' '}
+                </div>
+              );
+            }
+            return null;
+          })}
+          {truncated && (
+            <div
+              className="diff-omitted"
+              title={`${omitted} lines omitted in preview`}
+            >
+              … {omitted} lines omitted
+            </div>
+          )}
+        </div>
+      </pre>
+
+      {/* 在预览下方提供显式打开按钮（可选） */}
+      {onOpenDiff && (
+        <div className="diff-compact-actions">
          <button
-            className="diff-action-button secondary"
-            onClick={() => setViewMode('compact')}
-            title="Collapse to compact view"
+            className="diff-action-button primary"
+            onClick={onOpenDiff}
+            title="Open in VS Code diff viewer"
          >
-            Collapse
+            <OpenDiffIcon width="14" height="14" />
+            Open Diff
          </button>
        </div>
-      </div>
-      <div className="diff-stats-line">{formatDiffStatsDetailed(stats)}</div>
-      {oldText !== undefined && (
-        <div className="diff-section">
-          <div className="diff-label">Before:</div>
-          <pre className="code-block">
-            <div className="code-content">{oldText || '(empty)'}</div>
-          </pre>
-        </div>
      )}
-      {newText !== undefined && (
-        <div className="diff-section">
-          <div className="diff-label">After:</div>
-          <pre className="code-block">
-            <div className="code-content">{newText}</div>
-          </pre>
-        </div>
-      )}
-    </div>
-  );
-
-  return (
-    <div className="diff-display-container">
-      {viewMode === 'compact' ? renderCompactView() : renderFullView()}
    </div>
  );
 };
--- a/packages/vscode-ide-companion/src/webview/components/toolcalls/shared/LayoutComponents.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/toolcalls/shared/LayoutComponents.tsx
@@ -22,6 +22,8 @@ interface ToolCallContainerProps {
  children: React.ReactNode;
  /** Tool call ID for debugging */
  toolCallId?: string;
+  /** Optional trailing content rendered next to label (e.g., clickable filename) */
+  labelSuffix?: React.ReactNode;
 }

 /**
@@ -51,24 +53,30 @@ export const ToolCallContainer: React.FC<ToolCallContainerProps> = ({
  label,
  status = 'success',
  children,
-  toolCallId,
+  toolCallId: _toolCallId,
+  labelSuffix,
 }) => (
-  <div className="relative pl-[30px] py-2 select-text">
-    <span
-      className={`absolute left-2 top-[10px] text-[10px] ${getBulletColorClass(status)}`}
-    >
-      ●
-    </span>
-    <div className="toolcall-content-wrapper flex flex-col gap-1 pl-[30px] max-w-full">
-      <div className="flex items-center gap-2">
+  <div className="relative pl-[30px] py-2 select-text toolcall-container">
+    <div className="toolcall-content-wrapper flex flex-col gap-1 min-w-0 max-w-full">
+      <div className="flex items-center gap-2 relative min-w-0">
+        {/* Status icon (bullet), vertically centered with header row */}
+        <span
+          aria-hidden
+          className={`absolute -left-[20px] top-1/2 -translate-y-1/2 text-[10px] leading-none ${getBulletColorClass(
+            status,
+          )}`}
+        >
+          ●
+        </span>
        <span className="text-[13px] font-medium text-[var(--app-primary-foreground)]">
          {label}
        </span>
-        {toolCallId && (
+        {/* {toolCallId && (
          <span className="text-[10px] opacity-30">
            [{toolCallId.slice(-8)}]
          </span>
-        )}
+        )} */}
+        {labelSuffix}
      </div>
      {children && (
        <div className="text-[var(--app-secondary-foreground)]">{children}</div>
@@ -92,7 +100,7 @@ export const ToolCallCard: React.FC<ToolCallCardProps> = ({
  icon: _icon,
  children,
 }) => (
-  <div className="ml-[30px] grid grid-cols-[auto_1fr] gap-medium bg-[var(--app-input-background)] border border-[var(--app-input-border)] rounded-medium p-large my-medium items-start animate-[fadeIn_0.2s_ease-in]">
+  <div className="grid grid-cols-[auto_1fr] gap-medium bg-[var(--app-input-background)] border border-[var(--app-input-border)] rounded-medium p-large my-medium items-start animate-[fadeIn_0.2s_ease-in] toolcall-card">
    <div className="flex flex-col gap-medium min-w-0">{children}</div>
  </div>
 );
@@ -195,7 +203,7 @@ interface LocationsListProps {
 * List of file locations with clickable links
 */
 export const LocationsList: React.FC<LocationsListProps> = ({ locations }) => (
-  <div className="toolcall-locations-list flex flex-col gap-1 pl-[30px] max-w-full">
+  <div className="toolcall-locations-list flex flex-col gap-1 max-w-full">
    {locations.map((loc, idx) => (
      <FileLink key={idx} path={loc.path} line={loc.line} showFullPath={true} />
    ))}
--- a/packages/vscode-ide-companion/src/webview/components/toolcalls/shared/types.ts
+++ b/packages/vscode-ide-companion/src/webview/components/toolcalls/shared/types.ts
@@ -48,6 +48,7 @@ export interface ToolCallData {
  rawInput?: string | object;
  content?: ToolCallContent[];
  locations?: ToolCallLocation[];
+  timestamp?: number; // 添加时间戳字段用于消息排序
 }

 /**
--- a/packages/vscode-ide-companion/src/webview/components/ui/CheckboxDisplay.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/ui/CheckboxDisplay.tsx
@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+
+export interface CheckboxDisplayProps {
+  checked?: boolean;
+  indeterminate?: boolean;
+  disabled?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  title?: string;
+}
+
+/**
+ * Display-only checkbox styled via Tailwind classes.
+ * - Renders a custom-looking checkbox using appearance-none and pseudo-elements.
+ * - Supports indeterminate (middle) state using the DOM property and a data- attribute.
+ * - Intended for read-only display (disabled by default).
+ */
+export const CheckboxDisplay: React.FC<CheckboxDisplayProps> = ({
+  checked = false,
+  indeterminate = false,
+  disabled = true,
+  className = '',
+  style,
+  title,
+}) => {
+  const ref = React.useRef<HTMLInputElement | null>(null);
+
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+    el.indeterminate = !!indeterminate;
+    if (indeterminate) {
+      el.setAttribute('data-indeterminate', 'true');
+    } else {
+      el.removeAttribute('data-indeterminate');
+    }
+  }, [indeterminate, checked]);
+
+  return (
+    <input
+      ref={ref}
+      type="checkbox"
+      disabled={disabled}
+      checked={checked}
+      readOnly
+      aria-checked={indeterminate ? 'mixed' : checked}
+      title={title}
+      style={style}
+      className={[
+        // Base box style (equivalent to .q)
+        'q appearance-none m-[2px] shrink-0 w-4 h-4 relative rounded-[2px] box-border',
+        'border border-[var(--app-input-border)] bg-[var(--app-input-background)] text-[var(--app-primary-foreground)]',
+        'inline-flex items-center justify-center',
+        // Checked visual state
+        'checked:opacity-70 checked:text-[#74c991]',
+        // Checkmark / indeterminate symbol via pseudo-element
+        'after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2 after:opacity-0 after:pointer-events-none after:antialiased',
+        'checked:after:content-["\\2713"] checked:after:text-[0.9em] checked:after:opacity-100',
+        'data-[indeterminate=true]:text-[#e1c08d] data-[indeterminate=true]:after:content-["\\273d"] data-[indeterminate=true]:after:text-[0.8em] data-[indeterminate=true]:after:opacity-100',
+        className,
+      ].join(' ')}
+    />
+  );
+};
--- a/packages/vscode-ide-companion/src/webview/handlers/AuthMessageHandler.ts
+++ b/packages/vscode-ide-companion/src/webview/handlers/AuthMessageHandler.ts
@@ -46,11 +46,20 @@ export class AuthMessageHandler extends BaseMessageHandler {
  private async handleLogin(): Promise<void> {
    try {
      console.log('[AuthMessageHandler] Login requested');
+      console.log(
+        '[AuthMessageHandler] Login handler available:',
+        !!this.loginHandler,
+      );

      // Direct login without additional confirmation
      if (this.loginHandler) {
+        console.log('[AuthMessageHandler] Calling login handler');
        await this.loginHandler();
+        console.log(
+          '[AuthMessageHandler] Login handler completed successfully',
+        );
      } else {
+        console.log('[AuthMessageHandler] Using fallback login method');
        // Fallback: show message and use command
        vscode.window.showInformationMessage(
          'Please wait while we connect to Qwen Code...',
@@ -59,9 +68,15 @@ export class AuthMessageHandler extends BaseMessageHandler {
      }
    } catch (error) {
      console.error('[AuthMessageHandler] Login failed:', error);
+      console.error(
+        '[AuthMessageHandler] Error stack:',
+        error instanceof Error ? error.stack : 'N/A',
+      );
      this.sendToWebView({
        type: 'loginError',
-        data: { message: `Login failed: ${error}` },
+        data: {
+          message: `Login failed: ${error instanceof Error ? error.message : String(error)}`,
+        },
      });
    }
  }
--- a/packages/vscode-ide-companion/src/webview/hooks/message/useMessageHandling.ts
+++ b/packages/vscode-ide-companion/src/webview/hooks/message/useMessageHandling.ts
@@ -27,10 +27,10 @@ export const useMessageHandling = () => {
  const [isStreaming, setIsStreaming] = useState(false);
  const [isWaitingForResponse, setIsWaitingForResponse] = useState(false);
  const [loadingMessage, setLoadingMessage] = useState('');
-  const [currentStreamContent, setCurrentStreamContent] = useState('');
-
-  // Use ref to store current stream content, avoiding useEffect dependency issues
-  const currentStreamContentRef = useRef<string>('');
+  // Track the index of the assistant placeholder message during streaming
+  const streamingMessageIndexRef = useRef<number | null>(null);
+  // Track the index of the current aggregated thinking message
+  const thinkingMessageIndexRef = useRef<number | null>(null);

  /**
   * Add message
@@ -49,41 +49,75 @@ export const useMessageHandling = () => {
  /**
   * Start streaming response
   */
-  const startStreaming = useCallback(() => {
+  const startStreaming = useCallback((timestamp?: number) => {
+    // Create an assistant placeholder message immediately so tool calls won't jump before it
+    setMessages((prev) => {
+      // Record index of the placeholder to update on chunks
+      streamingMessageIndexRef.current = prev.length;
+      return [
+        ...prev,
+        {
+          role: 'assistant',
+          content: '',
+          // Use provided timestamp (from extension) to keep ordering stable
+          timestamp: typeof timestamp === 'number' ? timestamp : Date.now(),
+        },
+      ];
+    });
    setIsStreaming(true);
-    setCurrentStreamContent('');
-    currentStreamContentRef.current = '';
  }, []);

  /**
   * Add stream chunk
   */
  const appendStreamChunk = useCallback((chunk: string) => {
-    setCurrentStreamContent((prev) => {
-      const newContent = prev + chunk;
-      currentStreamContentRef.current = newContent;
-      return newContent;
+    setMessages((prev) => {
+      let idx = streamingMessageIndexRef.current;
+      const next = prev.slice();
+
+      // If there is no active placeholder (e.g., after a tool call), start a new one
+      if (idx === null) {
+        idx = next.length;
+        streamingMessageIndexRef.current = idx;
+        next.push({ role: 'assistant', content: '', timestamp: Date.now() });
+      }
+
+      if (idx < 0 || idx >= next.length) {
+        return prev;
+      }
+      const target = next[idx];
+      next[idx] = { ...target, content: (target.content || '') + chunk };
+      return next;
    });
  }, []);

+  /**
+   * Break current assistant stream segment (e.g., when a tool call starts/updates)
+   * Next incoming chunk will create a new assistant placeholder
+   */
+  const breakAssistantSegment = useCallback(() => {
+    streamingMessageIndexRef.current = null;
+  }, []);
+
  /**
   * End streaming response
   */
  const endStreaming = useCallback(() => {
-    // If there is streaming content, add it as complete assistant message
-    if (currentStreamContentRef.current) {
-      const assistantMessage: TextMessage = {
-        role: 'assistant',
-        content: currentStreamContentRef.current,
-        timestamp: Date.now(),
-      };
-      setMessages((prev) => [...prev, assistantMessage]);
-    }
-
+    // Finalize streaming; content already lives in the placeholder message
    setIsStreaming(false);
    setIsWaitingForResponse(false);
-    setCurrentStreamContent('');
-    currentStreamContentRef.current = '';
+    streamingMessageIndexRef.current = null;
+    // Remove the thinking message if it exists (collapse thoughts)
+    setMessages((prev) => {
+      const idx = thinkingMessageIndexRef.current;
+      thinkingMessageIndexRef.current = null;
+      if (idx === null || idx < 0 || idx >= prev.length) {
+        return prev;
+      }
+      const next = prev.slice();
+      next.splice(idx, 1);
+      return next;
+    });
  }, []);

  /**
@@ -108,7 +142,6 @@ export const useMessageHandling = () => {
    isStreaming,
    isWaitingForResponse,
    loadingMessage,
-    currentStreamContent,

    // Operations
    addMessage,
@@ -116,6 +149,36 @@ export const useMessageHandling = () => {
    startStreaming,
    appendStreamChunk,
    endStreaming,
+    // Thought handling
+    appendThinkingChunk: (chunk: string) => {
+      setMessages((prev) => {
+        let idx = thinkingMessageIndexRef.current;
+        const next = prev.slice();
+        if (idx === null) {
+          idx = next.length;
+          thinkingMessageIndexRef.current = idx;
+          next.push({ role: 'thinking', content: '', timestamp: Date.now() });
+        }
+        if (idx >= 0 && idx < next.length) {
+          const target = next[idx];
+          next[idx] = { ...target, content: (target.content || '') + chunk };
+        }
+        return next;
+      });
+    },
+    clearThinking: () => {
+      setMessages((prev) => {
+        const idx = thinkingMessageIndexRef.current;
+        thinkingMessageIndexRef.current = null;
+        if (idx === null || idx < 0 || idx >= prev.length) {
+          return prev;
+        }
+        const next = prev.slice();
+        next.splice(idx, 1);
+        return next;
+      });
+    },
+    breakAssistantSegment,
    setWaitingForResponse,
    clearWaitingForResponse,
    setMessages,
--- a/packages/vscode-ide-companion/src/webview/hooks/useCompletionTrigger.test.ts
+++ b/packages/vscode-ide-companion/src/webview/hooks/useCompletionTrigger.test.ts
@@ -0,0 +1,212 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { renderHook, act } from '@testing-library/react';
+import { useCompletionTrigger } from './useCompletionTrigger';
+
+// Mock CompletionItem type
+interface CompletionItem {
+  id: string;
+  label: string;
+  description?: string;
+  icon?: React.ReactNode;
+  type: 'file' | 'symbol' | 'command' | 'variable';
+  value?: unknown;
+}
+
+describe('useCompletionTrigger', () => {
+  let mockInputRef: React.RefObject<HTMLDivElement>;
+  let mockGetCompletionItems: (
+    trigger: '@' | '/',
+    query: string,
+  ) => Promise<CompletionItem[]>;
+
+  beforeEach(() => {
+    mockInputRef = {
+      current: document.createElement('div'),
+    };
+
+    mockGetCompletionItems = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+  });
+
+  it('should trigger completion when @ is typed at word boundary', async () => {
+    mockGetCompletionItems.mockResolvedValue([
+      { id: '1', label: 'test.txt', type: 'file' },
+    ]);
+
+    const { result } = renderHook(() =>
+      useCompletionTrigger(mockInputRef, mockGetCompletionItems),
+    );
+
+    // Simulate typing @ at the beginning
+    mockInputRef.current.textContent = '@';
+
+    // Mock window.getSelection to return a valid range
+    const mockRange = {
+      getBoundingClientRect: () => ({ top: 100, left: 50 }),
+    };
+
+    window.getSelection = jest.fn().mockReturnValue({
+      rangeCount: 1,
+      getRangeAt: () => mockRange,
+    } as unknown as Selection);
+
+    // Trigger input event
+    await act(async () => {
+      const event = new Event('input', { bubbles: true });
+      mockInputRef.current.dispatchEvent(event);
+      // Wait for async operations
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    expect(result.current.isOpen).toBe(true);
+    expect(result.current.triggerChar).toBe('@');
+    expect(mockGetCompletionItems).toHaveBeenCalledWith('@', '');
+  });
+
+  it('should show loading state initially', async () => {
+    // Simulate slow file loading
+    mockGetCompletionItems.mockImplementation(
+      () =>
+        new Promise((resolve) =>
+          setTimeout(
+            () => resolve([{ id: '1', label: 'test.txt', type: 'file' }]),
+            100,
+          ),
+        ),
+    );
+
+    const { result } = renderHook(() =>
+      useCompletionTrigger(mockInputRef, mockGetCompletionItems),
+    );
+
+    // Simulate typing @ at the beginning
+    mockInputRef.current.textContent = '@';
+
+    const mockRange = {
+      getBoundingClientRect: () => ({ top: 100, left: 50 }),
+    };
+
+    window.getSelection = jest.fn().mockReturnValue({
+      rangeCount: 1,
+      getRangeAt: () => mockRange,
+    } as unknown as Selection);
+
+    // Trigger input event
+    await act(async () => {
+      const event = new Event('input', { bubbles: true });
+      mockInputRef.current.dispatchEvent(event);
+      // Wait for async operations but not for the slow promise
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    // Should show loading state immediately
+    expect(result.current.isOpen).toBe(true);
+    expect(result.current.items).toHaveLength(1);
+    expect(result.current.items[0].id).toBe('loading');
+  });
+
+  it('should timeout if loading takes too long', async () => {
+    // Simulate very slow file loading
+    mockGetCompletionItems.mockImplementation(
+      () =>
+        new Promise(
+          (resolve) =>
+            setTimeout(
+              () => resolve([{ id: '1', label: 'test.txt', type: 'file' }]),
+              10000,
+            ), // 10 seconds
+        ),
+    );
+
+    const { result } = renderHook(() =>
+      useCompletionTrigger(mockInputRef, mockGetCompletionItems),
+    );
+
+    // Simulate typing @ at the beginning
+    mockInputRef.current.textContent = '@';
+
+    const mockRange = {
+      getBoundingClientRect: () => ({ top: 100, left: 50 }),
+    };
+
+    window.getSelection = jest.fn().mockReturnValue({
+      rangeCount: 1,
+      getRangeAt: () => mockRange,
+    } as unknown as Selection);
+
+    // Trigger input event
+    await act(async () => {
+      const event = new Event('input', { bubbles: true });
+      mockInputRef.current.dispatchEvent(event);
+      // Wait for async operations
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    // Should show loading state initially
+    expect(result.current.isOpen).toBe(true);
+    expect(result.current.items).toHaveLength(1);
+    expect(result.current.items[0].id).toBe('loading');
+
+    // Wait for timeout (5 seconds)
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 5100)); // 5.1 seconds
+    });
+
+    // Should show timeout message
+    expect(result.current.items).toHaveLength(1);
+    expect(result.current.items[0].id).toBe('timeout');
+    expect(result.current.items[0].label).toBe('Timeout');
+  });
+
+  it('should close completion when cursor moves away from trigger', async () => {
+    mockGetCompletionItems.mockResolvedValue([
+      { id: '1', label: 'test.txt', type: 'file' },
+    ]);
+
+    const { result } = renderHook(() =>
+      useCompletionTrigger(mockInputRef, mockGetCompletionItems),
+    );
+
+    // Simulate typing @ at the beginning
+    mockInputRef.current.textContent = '@';
+
+    const mockRange = {
+      getBoundingClientRect: () => ({ top: 100, left: 50 }),
+    };
+
+    window.getSelection = jest.fn().mockReturnValue({
+      rangeCount: 1,
+      getRangeAt: () => mockRange,
+    } as unknown as Selection);
+
+    // Trigger input event to open completion
+    await act(async () => {
+      const event = new Event('input', { bubbles: true });
+      mockInputRef.current.dispatchEvent(event);
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    expect(result.current.isOpen).toBe(true);
+
+    // Simulate moving cursor away (typing space after @)
+    mockInputRef.current.textContent = '@ ';
+
+    // Trigger input event to close completion
+    await act(async () => {
+      const event = new Event('input', { bubbles: true });
+      mockInputRef.current.dispatchEvent(event);
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    // Should close completion when query contains space
+    expect(result.current.isOpen).toBe(false);
+  });
+});
--- a/packages/vscode-ide-companion/src/webview/hooks/useCompletionTrigger.ts
+++ b/packages/vscode-ide-companion/src/webview/hooks/useCompletionTrigger.ts
@@ -63,6 +63,14 @@ export function useCompletionTrigger(
    [getCompletionItems],
  );

+  const refreshCompletion = useCallback(async () => {
+    if (!state.isOpen || !state.triggerChar) {
+      return;
+    }
+    const items = await getCompletionItems(state.triggerChar, state.query);
+    setState((prev) => ({ ...prev, items }));
+  }, [state.isOpen, state.triggerChar, state.query, getCompletionItems]);
+
  useEffect(() => {
    const inputElement = inputRef.current;
    if (!inputElement) {
@@ -217,5 +225,6 @@ export function useCompletionTrigger(
    items: state.items,
    closeCompletion,
    openCompletion,
+    refreshCompletion,
  };
 }
--- a/packages/vscode-ide-companion/src/webview/hooks/useToolCalls.test.ts
+++ b/packages/vscode-ide-companion/src/webview/hooks/useToolCalls.test.ts
@@ -0,0 +1,93 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { renderHook, act } from '@testing-library/react';
+import { useToolCalls } from './useToolCalls';
+import type { ToolCallUpdate } from '../types/toolCall.js';
+
+describe('useToolCalls', () => {
+  it('should add timestamp when creating tool call', () => {
+    const { result } = renderHook(() => useToolCalls());
+
+    const toolCallUpdate: ToolCallUpdate = {
+      type: 'tool_call',
+      toolCallId: 'test-1',
+      kind: 'read',
+      title: 'Read file',
+      status: 'pending',
+    };
+
+    act(() => {
+      result.current.handleToolCallUpdate(toolCallUpdate);
+    });
+
+    const toolCalls = Array.from(result.current.toolCalls.values());
+    expect(toolCalls).toHaveLength(1);
+    expect(toolCalls[0].timestamp).toBeDefined();
+    expect(typeof toolCalls[0].timestamp).toBe('number');
+  });
+
+  it('should preserve timestamp when updating tool call', () => {
+    const { result } = renderHook(() => useToolCalls());
+
+    const timestamp = Date.now() - 1000; // 1 second ago
+
+    // Create tool call with specific timestamp
+    const toolCallUpdate: ToolCallUpdate = {
+      type: 'tool_call',
+      toolCallId: 'test-1',
+      kind: 'read',
+      title: 'Read file',
+      status: 'pending',
+      timestamp,
+    };
+
+    act(() => {
+      result.current.handleToolCallUpdate(toolCallUpdate);
+    });
+
+    // Update tool call without timestamp
+    const toolCallUpdate2: ToolCallUpdate = {
+      type: 'tool_call_update',
+      toolCallId: 'test-1',
+      status: 'completed',
+    };
+
+    act(() => {
+      result.current.handleToolCallUpdate(toolCallUpdate2);
+    });
+
+    const toolCalls = Array.from(result.current.toolCalls.values());
+    expect(toolCalls).toHaveLength(1);
+    expect(toolCalls[0].timestamp).toBe(timestamp);
+  });
+
+  it('should use current time as default timestamp', () => {
+    const { result } = renderHook(() => useToolCalls());
+
+    const before = Date.now();
+
+    const toolCallUpdate: ToolCallUpdate = {
+      type: 'tool_call',
+      toolCallId: 'test-1',
+      kind: 'read',
+      title: 'Read file',
+      status: 'pending',
+      // No timestamp provided
+    };
+
+    act(() => {
+      result.current.handleToolCallUpdate(toolCallUpdate);
+    });
+
+    const after = Date.now();
+
+    const toolCalls = Array.from(result.current.toolCalls.values());
+    expect(toolCalls).toHaveLength(1);
+    expect(toolCalls[0].timestamp).toBeGreaterThanOrEqual(before);
+    expect(toolCalls[0].timestamp).toBeLessThanOrEqual(after);
+  });
+});
--- a/packages/vscode-ide-companion/src/webview/hooks/useToolCalls.ts
+++ b/packages/vscode-ide-companion/src/webview/hooks/useToolCalls.ts
@@ -25,6 +25,70 @@ export const useToolCalls = () => {
      const newMap = new Map(prevToolCalls);
      const existing = newMap.get(update.toolCallId);

+      // Helpers for todo/todos plan merging & content replacement
+      const isTodoWrite = (kind?: string) =>
+        (kind || '').toLowerCase() === 'todo_write' ||
+        (kind || '').toLowerCase() === 'todowrite' ||
+        (kind || '').toLowerCase() === 'update_todos';
+
+      const normTitle = (t: unknown) =>
+        typeof t === 'string' ? t.trim().toLowerCase() : '';
+
+      const isTodoTitleMergeable = (t?: unknown) => {
+        const nt = normTitle(t);
+        return nt === 'updated plan' || nt === 'update todos';
+      };
+
+      const extractText = (
+        content?: Array<{
+          type: 'content' | 'diff';
+          content?: { text?: string };
+        }>,
+      ): string => {
+        if (!content || content.length === 0) {
+          return '';
+        }
+        const parts: string[] = [];
+        for (const item of content) {
+          if (item.type === 'content' && item.content?.text) {
+            parts.push(String(item.content.text));
+          }
+        }
+        return parts.join('\n');
+      };
+
+      const normalizeTodoLines = (text: string): string[] => {
+        if (!text) {
+          return [];
+        }
+        const lines = text
+          .split(/\r?\n/)
+          .map((l) => l.trim())
+          .filter(Boolean);
+        return lines.map((line) => {
+          const idx = line.indexOf('] ');
+          return idx >= 0 ? line.slice(idx + 2).trim() : line;
+        });
+      };
+
+      const isSameOrSupplement = (
+        prevText: string,
+        nextText: string,
+      ): { same: boolean; supplement: boolean } => {
+        const prev = normalizeTodoLines(prevText);
+        const next = normalizeTodoLines(nextText);
+        if (prev.length === next.length) {
+          const same = prev.every((l, i) => l === next[i]);
+          if (same) {
+            return { same: true, supplement: false };
+          }
+        }
+        // supplement = prev set is subset of next set
+        const setNext = new Set(next);
+        const subset = prev.every((l) => setNext.has(l));
+        return { same: false, supplement: subset };
+      };
+
      const safeTitle = (title: unknown): string => {
        if (typeof title === 'string') {
          return title;
@@ -44,6 +108,49 @@ export const useToolCalls = () => {
          newText: item.newText,
        }));

+        // 合并策略：对于 todo_write + mergeable 标题（Updated Plan/Update Todos），
+        // 如果与最近一条同类卡片相同或是补充，则合并更新而不是新增。
+        if (isTodoWrite(update.kind) && isTodoTitleMergeable(update.title)) {
+          const nextText = extractText(content);
+          // 找最近一条 todo_write + 可合并标题 的卡片
+          let lastId: string | null = null;
+          let lastText = '';
+          let lastTimestamp = 0;
+          for (const tc of newMap.values()) {
+            if (
+              isTodoWrite(tc.kind) &&
+              isTodoTitleMergeable(tc.title) &&
+              typeof tc.timestamp === 'number' &&
+              tc.timestamp >= lastTimestamp
+            ) {
+              lastId = tc.toolCallId;
+              lastText = extractText(tc.content);
+              lastTimestamp = tc.timestamp || 0;
+            }
+          }
+
+          if (lastId) {
+            const cmp = isSameOrSupplement(lastText, nextText);
+            if (cmp.same) {
+              // 完全相同：忽略本次新增
+              return newMap;
+            }
+            if (cmp.supplement) {
+              // 补充：替换内容到上一条（使用更新语义）
+              const prev = newMap.get(lastId);
+              if (prev) {
+                newMap.set(lastId, {
+                  ...prev,
+                  content, // 覆盖（不追加）
+                  status: update.status || prev.status,
+                  timestamp: update.timestamp || Date.now(),
+                });
+                return newMap;
+              }
+            }
+          }
+        }
+
        newMap.set(update.toolCallId, {
          toolCallId: update.toolCallId,
          kind: update.kind || 'other',
@@ -52,6 +159,7 @@ export const useToolCalls = () => {
          rawInput: update.rawInput as string | object | undefined,
          content,
          locations: update.locations,
+          timestamp: update.timestamp || Date.now(), // 添加时间戳
        });
      } else if (update.type === 'tool_call_update') {
        const updatedContent = update.content
@@ -65,9 +173,25 @@ export const useToolCalls = () => {
          : undefined;

        if (existing) {
-          const mergedContent = updatedContent
-            ? [...(existing.content || []), ...updatedContent]
-            : existing.content;
+          // 默认行为是追加；但对于 todo_write + 可合并标题，使用替换避免堆叠重复
+          let mergedContent = existing.content;
+          if (updatedContent) {
+            if (
+              isTodoWrite(update.kind || existing.kind) &&
+              (isTodoTitleMergeable(update.title) ||
+                isTodoTitleMergeable(existing.title))
+            ) {
+              mergedContent = updatedContent; // 覆盖
+            } else {
+              mergedContent = [...(existing.content || []), ...updatedContent];
+            }
+          }
+          // If tool call has just completed/failed, bump timestamp to now for correct ordering
+          const isFinal =
+            update.status === 'completed' || update.status === 'failed';
+          const nextTimestamp = isFinal
+            ? Date.now()
+            : update.timestamp || existing.timestamp || Date.now();

          newMap.set(update.toolCallId, {
            ...existing,
@@ -76,6 +200,7 @@ export const useToolCalls = () => {
            ...(update.status && { status: update.status }),
            content: mergedContent,
            ...(update.locations && { locations: update.locations }),
+            timestamp: nextTimestamp, // 更新时间戳（完成/失败时以完成时间为准）
          });
        } else {
          newMap.set(update.toolCallId, {
@@ -86,6 +211,7 @@ export const useToolCalls = () => {
            rawInput: update.rawInput as string | object | undefined,
            content: updatedContent,
            locations: update.locations,
+            timestamp: update.timestamp || Date.now(), // 添加时间戳
          });
        }
      }
--- a/packages/vscode-ide-companion/src/webview/hooks/useWebViewMessages.ts
+++ b/packages/vscode-ide-companion/src/webview/hooks/useWebViewMessages.ts
@@ -66,9 +66,12 @@ interface UseWebViewMessagesProps {
      timestamp: number;
    }) => void;
    clearMessages: () => void;
-    startStreaming: () => void;
+    startStreaming: (timestamp?: number) => void;
    appendStreamChunk: (chunk: string) => void;
    endStreaming: () => void;
+    breakAssistantSegment: () => void;
+    appendThinkingChunk: (chunk: string) => void;
+    clearThinking: () => void;
    clearWaitingForResponse: () => void;
  };

@@ -116,6 +119,38 @@ export const useWebViewMessages = ({
    handlePermissionRequest,
  });

+  // Track last "Updated Plan" snapshot toolcall to support merge/dedupe
+  const lastPlanSnapshotRef = useRef<{
+    id: string;
+    text: string; // joined lines
+    lines: string[];
+  } | null>(null);
+
+  const buildPlanLines = (entries: PlanEntry[]): string[] =>
+    entries.map((e) => {
+      const mark =
+        e.status === 'completed' ? 'x' : e.status === 'in_progress' ? '-' : ' ';
+      return `- [${mark}] ${e.content}`.trim();
+    });
+
+  const isSupplementOf = (
+    prevLines: string[],
+    nextLines: string[],
+  ): boolean => {
+    // 认为“补充” = 旧内容的文本集合（忽略状态）被新内容包含
+    const key = (line: string) => {
+      const idx = line.indexOf('] ');
+      return idx >= 0 ? line.slice(idx + 2).trim() : line.trim();
+    };
+    const nextSet = new Set(nextLines.map(key));
+    for (const pl of prevLines) {
+      if (!nextSet.has(key(pl))) {
+        return false;
+      }
+    }
+    return true;
+  };
+
  // Update refs
  useEffect(() => {
    handlersRef.current = {
@@ -202,12 +237,42 @@ export const useWebViewMessages = ({
        }

        case 'message': {
-          handlers.messageHandling.addMessage(message.data);
+          const msg = message.data as {
+            role?: 'user' | 'assistant' | 'thinking';
+            content?: string;
+            timestamp?: number;
+          };
+          handlers.messageHandling.addMessage(
+            msg as unknown as Parameters<
+              typeof handlers.messageHandling.addMessage
+            >[0],
+          );
+          // Robustness: if an assistant message arrives outside the normal stream
+          // pipeline (no explicit streamEnd), ensure we clear streaming/waiting states
+          if (msg.role === 'assistant') {
+            try {
+              handlers.messageHandling.endStreaming();
+            } catch (err) {
+              // no-op: stream might not have been started
+              console.warn('[PanelManager] Failed to end streaming:', err);
+            }
+            try {
+              handlers.messageHandling.clearWaitingForResponse();
+            } catch (err) {
+              // no-op: already cleared
+              console.warn(
+                '[PanelManager] Failed to clear waiting for response:',
+                err,
+              );
+            }
+          }
          break;
        }

        case 'streamStart':
-          handlers.messageHandling.startStreaming();
+          handlers.messageHandling.startStreaming(
+            (message.data as { timestamp?: number } | undefined)?.timestamp,
+          );
          break;

        case 'streamChunk': {
@@ -216,17 +281,14 @@ export const useWebViewMessages = ({
        }

        case 'thoughtChunk': {
-          const thinkingMessage = {
-            role: 'thinking' as const,
-            content: message.data.content || message.data.chunk || '',
-            timestamp: Date.now(),
-          };
-          handlers.messageHandling.addMessage(thinkingMessage);
+          const chunk = message.data.content || message.data.chunk || '';
+          handlers.messageHandling.appendThinkingChunk(chunk);
          break;
        }

        case 'streamEnd':
          handlers.messageHandling.endStreaming();
+          handlers.messageHandling.clearThinking();
          break;

        case 'error':
@@ -276,13 +338,76 @@ export const useWebViewMessages = ({
              content: permToolCall.content as ToolCallUpdate['content'],
              locations: permToolCall.locations,
            });
+
+            // Split assistant stream so subsequent chunks start a new assistant message
+            handlers.messageHandling.breakAssistantSegment();
          }
          break;
        }

        case 'plan':
          if (message.data.entries && Array.isArray(message.data.entries)) {
-            handlers.setPlanEntries(message.data.entries as PlanEntry[]);
+            const entries = message.data.entries as PlanEntry[];
+            handlers.setPlanEntries(entries);
+
+            // 生成新的快照文本
+            const lines = buildPlanLines(entries);
+            const text = lines.join('\n');
+            const prev = lastPlanSnapshotRef.current;
+
+            // 1) 完全相同 -> 跳过
+            if (prev && prev.text === text) {
+              break;
+            }
+
+            try {
+              const ts = Date.now();
+
+              // 2) 补充或状态更新 -> 合并到上一条（使用 tool_call_update 覆盖内容）
+              if (prev && isSupplementOf(prev.lines, lines)) {
+                handlers.handleToolCallUpdate({
+                  type: 'tool_call_update',
+                  toolCallId: prev.id,
+                  kind: 'todo_write',
+                  title: 'Updated Plan',
+                  status: 'completed',
+                  content: [
+                    {
+                      type: 'content',
+                      content: { type: 'text', text },
+                    },
+                  ],
+                  timestamp: ts,
+                });
+                lastPlanSnapshotRef.current = { id: prev.id, text, lines };
+              } else {
+                // 3) 其他情况 -> 新增一条历史卡片
+                const toolCallId = `plan-snapshot-${ts}`;
+                handlers.handleToolCallUpdate({
+                  type: 'tool_call',
+                  toolCallId,
+                  kind: 'todo_write',
+                  title: 'Updated Plan',
+                  status: 'completed',
+                  content: [
+                    {
+                      type: 'content',
+                      content: { type: 'text', text },
+                    },
+                  ],
+                  timestamp: ts,
+                });
+                lastPlanSnapshotRef.current = { id: toolCallId, text, lines };
+              }
+
+              // 分割助手消息段，保持渲染块独立
+              handlers.messageHandling.breakAssistantSegment?.();
+            } catch (err) {
+              console.warn(
+                '[useWebViewMessages] failed to push/merge plan snapshot toolcall:',
+                err,
+              );
+            }
          }
          break;

@@ -293,6 +418,15 @@ export const useWebViewMessages = ({
            toolCallData.type = toolCallData.sessionUpdate;
          }
          handlers.handleToolCallUpdate(toolCallData);
+          // Split assistant stream at tool boundaries similar to Claude/GPT rhythm
+          const status = (toolCallData.status || '').toString();
+          const isStart = toolCallData.type === 'tool_call';
+          const isFinalUpdate =
+            toolCallData.type === 'tool_call_update' &&
+            (status === 'completed' || status === 'failed');
+          if (isStart || isFinalUpdate) {
+            handlers.messageHandling.breakAssistantSegment();
+          }
          break;
        }

@@ -343,6 +477,7 @@ export const useWebViewMessages = ({
          }
          handlers.clearToolCalls();
          handlers.setPlanEntries([]);
+          lastPlanSnapshotRef.current = null;
          break;

        case 'conversationCleared':
@@ -352,6 +487,7 @@ export const useWebViewMessages = ({
          handlers.sessionManagement.setCurrentSessionTitle(
            'Past Conversations',
          );
+          lastPlanSnapshotRef.current = null;
          break;

        case 'sessionTitleUpdated': {
--- a/packages/vscode-ide-companion/src/webview/types/toolCall.ts
+++ b/packages/vscode-ide-companion/src/webview/types/toolCall.ts
@@ -30,6 +30,7 @@ export interface ToolCallUpdate {
    path: string;
    line?: number | null;
  }>;
+  timestamp?: number; // 添加时间戳字段用于消息排序
 }

 /**
--- a/packages/vscode-ide-companion/src/webview/utils/simpleDiff.ts
+++ b/packages/vscode-ide-companion/src/webview/utils/simpleDiff.ts
@@ -0,0 +1,92 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Minimal line-diff utility for webview previews.
+ *
+ * This is a lightweight LCS-based algorithm to compute add/remove operations
+ * between two texts. It intentionally avoids heavy dependencies and is
+ * sufficient for rendering a compact preview inside the chat.
+ */
+
+export type DiffOp =
+  | { type: 'add'; line: string; newIndex: number }
+  | { type: 'remove'; line: string; oldIndex: number };
+
+/**
+ * Compute a minimal line-diff (added/removed only).
+ * - Equal lines are omitted from output by design (we only preview changes).
+ * - Order of operations follows the new text progression so the preview feels natural.
+ */
+export function computeLineDiff(
+  oldText: string | null | undefined,
+  newText: string | undefined,
+): DiffOp[] {
+  const a = (oldText || '').split('\n');
+  const b = (newText || '').split('\n');
+
+  const n = a.length;
+  const m = b.length;
+
+  // Build LCS DP table
+  const dp: number[][] = Array.from({ length: n + 1 }, () =>
+    new Array(m + 1).fill(0),
+  );
+  for (let i = n - 1; i >= 0; i--) {
+    for (let j = m - 1; j >= 0; j--) {
+      if (a[i] === b[j]) {
+        dp[i][j] = dp[i + 1][j + 1] + 1;
+      } else {
+        dp[i][j] = Math.max(dp[i + 1][j], dp[i][j + 1]);
+      }
+    }
+  }
+
+  // Walk to produce operations
+  const ops: DiffOp[] = [];
+  let i = 0;
+  let j = 0;
+  while (i < n && j < m) {
+    if (a[i] === b[j]) {
+      i++;
+      j++;
+    } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+      // remove a[i]
+      ops.push({ type: 'remove', line: a[i], oldIndex: i });
+      i++;
+    } else {
+      // add b[j]
+      ops.push({ type: 'add', line: b[j], newIndex: j });
+      j++;
+    }
+  }
+
+  // Remaining tails
+  while (i < n) {
+    ops.push({ type: 'remove', line: a[i], oldIndex: i });
+    i++;
+  }
+  while (j < m) {
+    ops.push({ type: 'add', line: b[j], newIndex: j });
+    j++;
+  }
+
+  return ops;
+}
+
+/**
+ * Truncate a long list of operations for preview purposes.
+ * Keeps first `head` and last `tail` operations, inserting a gap marker.
+ */
+export function truncateOps<T>(
+  ops: T[],
+  head = 120,
+  tail = 80,
+): { items: T[]; truncated: boolean; omitted: number } {
+  if (ops.length <= head + tail) {
+    return { items: ops, truncated: false, omitted: 0 };
+  }
+  const items = [...ops.slice(0, head), ...ops.slice(-tail)];
+  return { items, truncated: true, omitted: ops.length - head - tail };
+}