feat(vscode-ide-companion): 增加代码编辑功能和文件操作支持

- 实现了与 Claude Code 类似的代码编辑功能
- 添加了文件打开、保存等操作的支持
- 优化了消息显示，增加了代码高亮和文件路径点击功能
- 改进了用户界面，增加了编辑模式切换和思考模式功能

packages/vscode-ide-companion/src/webview/components/toolcalls/GenericToolCall.tsx

@@ -14,8 +14,8 @@ import {
   StatusIndicator,
   CodeBlock,
   LocationsList,
-  DiffDisplay,
 } from './shared/LayoutComponents.js';
+import { DiffDisplay } from './shared/DiffDisplay.js';
 import {
   formatValue,
   safeTitle,

packages/vscode-ide-companion/src/webview/components/toolcalls/WriteToolCall.tsx

@@ -14,9 +14,10 @@ import {
   StatusIndicator,
   CodeBlock,
   LocationsList,
-  DiffDisplay,
 } from './shared/LayoutComponents.js';
+import { DiffDisplay } from './shared/DiffDisplay.js';
 import { formatValue, safeTitle, groupContent } from './shared/utils.js';
+import { useVSCode } from '../../hooks/useVSCode.js';
 
 /**
  * Specialized component for Write/Edit tool calls
@@ -26,10 +27,24 @@ export const WriteToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
   const { kind, title, status, rawInput, content, locations } = toolCall;
   const titleText = safeTitle(title);
   const isEdit = kind.toLowerCase() === 'edit';
+  const vscode = useVSCode();
 
   // Group content by type
   const { textOutputs, errors, diffs, otherData } = groupContent(content);
 
+  const handleOpenDiff = (
+    path: string | undefined,
+    oldText: string | null | undefined,
+    newText: string | undefined,
+  ) => {
+    if (path) {
+      vscode.postMessage({
+        type: 'openDiff',
+        data: { path, oldText: oldText || '', newText: newText || '' },
+      });
+    }
+  };
+
   return (
     <ToolCallCard icon="✏️">
       {/* Title row */}
@@ -59,6 +74,9 @@ export const WriteToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
               path={item.path}
               oldText={item.oldText}
               newText={item.newText}
+              onOpenDiff={() =>
+                handleOpenDiff(item.path, item.oldText, item.newText)
+              }
             />
           </ToolCallRow>
         ),

packages/vscode-ide-companion/src/webview/components/toolcalls/shared/DiffDisplay.tsx

@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Diff display component for showing file changes
+ */
+
+import type React from 'react';
+
+/**
+ * Props for DiffDisplay
+ */
+interface DiffDisplayProps {
+  path?: string;
+  oldText?: string | null;
+  newText?: string;
+  onOpenDiff?: () => void;
+}
+
+/**
+ * Display diff with before/after sections and option to open in VSCode diff viewer
+ */
+export const DiffDisplay: React.FC<DiffDisplayProps> = ({
+  path,
+  oldText,
+  newText,
+  onOpenDiff,
+}) => (
+  <div className="diff-display-container">
+    <div className="diff-header">
+      <div className="diff-file-path">
+        <strong>{path || 'Unknown file'}</strong>
+      </div>
+      {onOpenDiff && (
+        <button
+          className="open-diff-button"
+          onClick={onOpenDiff}
+          title="Open in VS Code diff viewer"
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path
+              d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
+              fill="currentColor"
+            />
+            <path
+              d="M5.25 8a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1-.75-.75z"
+              fill="currentColor"
+            />
+          </svg>
+          Open Diff
+        </button>
+      )}
+    </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>
+);

packages/vscode-ide-companion/src/webview/components/toolcalls/shared/LayoutComponents.tsx

@@ -107,55 +107,3 @@ export const LocationsList: React.FC<LocationsListProps> = ({ locations }) => (
     ))}
   </>
 );
-
-/**
- * Props for DiffDisplay
- */
-interface DiffDisplayProps {
-  path?: string;
-  oldText?: string | null;
-  newText?: string;
-}
-
-/**
- * Display diff with before/after sections
- */
-export const DiffDisplay: React.FC<DiffDisplayProps> = ({
-  path,
-  oldText,
-  newText,
-}) => (
-  <div>
-    <div>
-      <strong>{path || 'Unknown file'}</strong>
-    </div>
-    {oldText !== undefined && (
-      <div>
-        <div
-          style={{
-            opacity: 0.5,
-            fontSize: '0.85em',
-            marginTop: '4px',
-          }}
-        >
-          Before:
-        </div>
-        <pre className="code-block">{oldText || '(empty)'}</pre>
-      </div>
-    )}
-    {newText !== undefined && (
-      <div>
-        <div
-          style={{
-            opacity: 0.5,
-            fontSize: '0.85em',
-            marginTop: '4px',
-          }}
-        >
-          After:
-        </div>
-        <pre className="code-block">{newText}</pre>
-      </div>
-    )}
-  </div>
-);