feat(vscode-ide-companion): 新增 DiffDisplay 组件和 diff 统计工具

- 增强 DiffDisplay 组件，支持更丰富的差异展示
- 新增 diffStats.ts 工具，提供差异统计功能
- 新增样式文件 DiffDisplay.css

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

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

@@ -7,6 +7,13 @@
  */
 
 import type React from 'react';
+import { useState, useMemo } from 'react';
+import { FileLink } from '../../shared/FileLink.js';
+import {
+  calculateDiffStats,
+  formatDiffStatsDetailed,
+} from '../../../utils/diffStats.js';
+import './DiffDisplay.css';
 
 /**
  * Props for DiffDisplay
@@ -16,57 +23,140 @@ interface DiffDisplayProps {
   oldText?: string | null;
   newText?: string;
   onOpenDiff?: () => void;
+  /** 默认显示模式：'compact' | 'full' */
+  defaultMode?: 'compact' | 'full';
 }
 
 /**
- * Display diff with before/after sections and option to open in VSCode diff viewer
+ * Display diff with compact stats or full before/after sections
+ * Supports toggling between compact and full view modes
  */
 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>
+  defaultMode = 'compact',
+}) => {
+  // 视图模式状态：紧凑或完整
+  const [viewMode, setViewMode] = useState<'compact' | 'full'>(defaultMode);
+
+  // 计算 diff 统计信息（仅在文本变化时重新计算）
+  const stats = useMemo(
+    () => calculateDiffStats(oldText, newText),
+    [oldText, newText],
+  );
+
+  // 渲染紧凑视图
+  const renderCompactView = () => (
+    <div className="diff-compact-view">
+      <div
+        className="diff-compact-clickable"
+        onClick={onOpenDiff}
+        role="button"
+        tabIndex={0}
+        title="Click to open diff in VS Code"
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onOpenDiff?.();
+          }
+        }}
+      >
+        <div className="diff-compact-header">
+          {path && (
+            <div className="diff-file-info">
+              <FileLink
+                path={path}
+                showFullPath={false}
+                className="diff-file-link"
+                disableClick={true}
+              />
+            </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>
-      {onOpenDiff && (
+      <div className="diff-compact-actions">
         <button
-          className="open-diff-button"
-          onClick={onOpenDiff}
-          title="Open in VS Code diff viewer"
+          className="diff-action-button secondary"
+          onClick={(e) => {
+            e.stopPropagation();
+            setViewMode('full');
+          }}
+          title="Show full before/after content"
         >
-          <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
+          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"
+            >
+              <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
+                <path d="M13.5 7l-4-4v3h-6v2h6v3l4-4z" fill="currentColor" />
+              </svg>
+              Open Diff
+            </button>
+          )}
+          <button
+            className="diff-action-button secondary"
+            onClick={() => setViewMode('compact')}
+            title="Collapse to compact view"
+          >
+            Collapse
+          </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>
-    {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>
+  );
+};