feat(diff): 添加文件差异预览和原始内容恢复功能

- 在 DiffPreview 组件中新增打开文件及查看差异编辑器按钮
- 通过 wrpc 实现打开文件及展示差异编辑器的远程调用
- 在扩展中新增 openDiffEditor 方法，支持反向应用 diff 预览重建原始文件内容
- 通过临时文件机制启动 VS Code 原生差异比较编辑器
- 新增 diff-utils 模块，实现统一 diff 解析与反向应用算法
- 更新路由类型与实现，支持差异编辑器和文件内容拉取接口
- 工具气泡组件显示名称首字母大写，优化显示效果
- 新增字符串首字母大写辅助函数 capitalize，提高代码复用性

Author: hqwlkj

packages/vscode-ide-companion/src/extension.ts

@@ -20,6 +20,7 @@ import { appRouter, type RouterContext } from "./router.js";
 import { attachRouterToPanel } from "@webview-rpc/host";
 import { createLogger } from "./utils/logger.js";
 import { checkForUpdates } from "./utils/checkForUpdates.js";
+import { reverseApplyDiff } from "./utils/diff-utils.js";
 
 const DEFAULT_MODEL = "deepseek-v4-pro";
 const DEFAULT_BASE_URL = "https://api.deepseek.com";
@@ -174,6 +175,8 @@ export class DeepCodeViewProvider implements vscode.WebviewViewProvider {
         // Switch to this session
         this.sessionManager.setActiveSessionId(sessionId);
       },
+      getFileContent: (filePath) => this.getFileContent(filePath),
+      showDiffEditor: (filePath, diffPreview) => this.openDiffEditor(filePath, diffPreview),
     };
 
     // Attach RPC router
@@ -324,6 +327,61 @@ export class DeepCodeViewProvider implements vscode.WebviewViewProvider {
     editor.selection = new vscode.Selection(position, position);
     editor.revealRange(new vscode.Range(position, position), vscode.TextEditorRevealType.InCenter);
   }
+
+  /**
+   * Get the raw file content from disk.
+   */
+  private getFileContent(filePath: string): string {
+    return fs.readFileSync(filePath, "utf8");
+  }
+
+  /**
+   * Open a VS Code native diff editor showing the before/after of a file edit.
+   *
+   * The current file on disk contains the modified version (after the edit was
+   * applied). The diff_preview from the tool result metadata is used to
+   * reconstruct the original content by reverse-applying the unified diff.
+   */
+  private async openDiffEditor(filePath: string, diffPreview: string): Promise<void> {
+    try {
+      // Read the current (modified) file content from disk
+      const modifiedContent = this.getFileContent(filePath);
+
+      // Reconstruct the original content by reverse-applying the diff
+      const originalContent = reverseApplyDiff(modifiedContent, diffPreview);
+
+      if (originalContent === null) {
+        void vscode.window.showWarningMessage(
+          `Unable to reconstruct original content for diff. The file may have been modified since the edit.`
+        );
+        return;
+      }
+
+      // Create temp files for the diff editor
+      const tempDir = path.join(os.tmpdir(), "deepcode-diff");
+      if (!fs.existsSync(tempDir)) {
+        fs.mkdirSync(tempDir, { recursive: true });
+      }
+
+      const baseName = path.basename(filePath);
+      const timestamp = Date.now();
+      const originalPath = path.join(tempDir, `${baseName}.${timestamp}.original`);
+      const modifiedPath = path.join(tempDir, `${baseName}.${timestamp}.modified`);
+
+      fs.writeFileSync(originalPath, originalContent, "utf8");
+      fs.writeFileSync(modifiedPath, modifiedContent, "utf8");
+
+      const originalUri = vscode.Uri.file(originalPath);
+      const modifiedUri = vscode.Uri.file(modifiedPath);
+      const title = `${baseName} (Original ↔ Modified)`;
+
+      // Open VS Code's native diff editor
+      await vscode.commands.executeCommand("vscode.diff", originalUri, modifiedUri, title);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      void vscode.window.showErrorMessage(`Diff editor error: ${message}`);
+    }
+  }
 }
 
 export async function activate(context: vscode.ExtensionContext): Promise<void> {

packages/vscode-ide-companion/src/router.ts

@@ -15,6 +15,8 @@ export interface RouterContext {
   openSettings: () => Promise<void>;
   getActiveEditor: () => { fileName: string; languageId: string; lineCount: number } | null;
   openChatPanel: (sessionId: string, viewColumn: number) => void;
+  showDiffEditor: (filePath: string, diffPreview: string) => Promise<void>;
+  getFileContent: (filePath: string) => string;
 }
 
 export const { router, procedure } = initWRPC.context<RouterContext>().create();
@@ -339,6 +341,23 @@ export const appRouter = router({
     await vscodeApi.env.openExternal(vscodeApi.Uri.parse(input.url));
     return { ok: true };
   }),
+
+  showDiffEditor: procedure
+    .input(
+      z.object({
+        filePath: z.string(),
+        diffPreview: z.string(),
+      })
+    )
+    .resolve(async ({ ctx, input }) => {
+      await ctx.showDiffEditor(input.filePath, input.diffPreview);
+      return { ok: true };
+    }),
+
+  getFileContent: procedure.input(z.object({ filePath: z.string() })).resolve(({ ctx, input }) => {
+    const content = ctx.getFileContent(input.filePath);
+    return { content };
+  }),
 });
 
 export type AppRouter = typeof appRouter;

packages/vscode-ide-companion/src/utils/diff-utils.ts

@@ -0,0 +1,205 @@
+/**
+ * Utilities for working with unified diff previews generated by buildDiffPreview.
+ *
+ * The diff format is a simplified single-hunk unified diff:
+ * ```
+ * --- a/filePath  (or /dev/null for new files)
+ * +++ b/filePath
+ * @@ -oldStart,oldLen +newStart,newLen @@
+ *  context_before      (optional, one line with " " prefix)
+ * -removed_line_1
+ * -removed_line_2
+ * +added_line_1
+ * +added_line_2
+ *  context_after       (optional, one line with " " prefix)
+ * ```
+ */
+
+interface ParsedDiff {
+  isNewFile: boolean;
+  removedLines: string[];
+  addedLines: string[];
+  contextBefore: string[];
+  contextAfter: string[];
+}
+
+/**
+ * Parse the simplified unified diff from buildDiffPreview into structured data.
+ */
+export function parseDiff(diffText: string): ParsedDiff {
+  const diffLines = diffText.split("\n");
+
+  const isNewFile = diffLines[0]?.includes("/dev/null") ?? false;
+
+  // Find hunk header index
+  let i = 0;
+  while (i < diffLines.length && !diffLines[i].startsWith("@@")) {
+    i++;
+  }
+
+  const contextBefore: string[] = [];
+  const removedLines: string[] = [];
+  const addedLines: string[] = [];
+  const contextAfter: string[] = [];
+
+  // State machine: before → removed → added → after
+  enum State {
+    ContextBefore,
+    Removed,
+    Added,
+    ContextAfter,
+    Done,
+  }
+
+  let state: State = State.ContextBefore;
+
+  for (i = i + 1; i < diffLines.length; i++) {
+    const line = diffLines[i];
+
+    // Handle truncation marker
+    if (line === "...") break;
+
+    if (line.length === 0) continue;
+
+    const prefix = line[0];
+    const content = line.slice(1);
+
+    switch (state) {
+      case State.ContextBefore:
+        if (prefix === " ") {
+          contextBefore.push(content);
+          state = State.Removed;
+        } else if (prefix === "-") {
+          removedLines.push(content);
+          state = State.Removed;
+        }
+        break;
+      case State.Removed:
+        if (prefix === "-") {
+          removedLines.push(content);
+        } else if (prefix === "+") {
+          addedLines.push(content);
+          state = State.Added;
+        } else if (prefix === " ") {
+          contextAfter.push(content);
+          state = State.ContextAfter;
+        }
+        break;
+      case State.Added:
+        if (prefix === "+") {
+          addedLines.push(content);
+        } else if (prefix === " ") {
+          contextAfter.push(content);
+          state = State.ContextAfter;
+        }
+        break;
+      case State.ContextAfter:
+        if (prefix === " ") {
+          contextAfter.push(content);
+        }
+        break;
+    }
+  }
+
+  return { isNewFile, removedLines, addedLines, contextBefore, contextAfter };
+}
+
+/**
+ * Given the current file content (after the edit was applied) and the diff
+ * preview, compute the original content (before the edit).
+ *
+ * Returns null if the reconstruction fails (e.g., content no longer matches).
+ */
+export function reverseApplyDiff(modifiedContent: string, diffText: string): string | null {
+  const diff = parseDiff(diffText);
+
+  // New file: original is empty
+  if (diff.isNewFile) {
+    return "";
+  }
+
+  const modifiedLines = modifiedContent.split("\n");
+
+  // Build the anchor pattern: contextBefore + addedLines
+  const anchor = [...diff.contextBefore, ...diff.addedLines];
+
+  if (anchor.length === 0 && diff.contextAfter.length === 0) {
+    // No identifiable anchor, probably an empty diff
+    return modifiedContent;
+  }
+
+  // Find the anchor in modified content
+  let anchorStart = -1;
+  for (let j = 0; j <= modifiedLines.length - anchor.length; j++) {
+    let match = true;
+    for (let k = 0; k < anchor.length; k++) {
+      if (modifiedLines[j + k] !== anchor[k]) {
+        match = false;
+        break;
+      }
+    }
+    if (match) {
+      // Verify contextAfter follows after the anchor
+      const afterStart = j + anchor.length;
+      if (diff.contextAfter.length === 0) {
+        anchorStart = j;
+        break;
+      }
+      if (afterStart + diff.contextAfter.length <= modifiedLines.length) {
+        let afterMatch = true;
+        for (let k = 0; k < diff.contextAfter.length; k++) {
+          if (modifiedLines[afterStart + k] !== diff.contextAfter[k]) {
+            afterMatch = false;
+            break;
+          }
+        }
+        if (afterMatch) {
+          anchorStart = j;
+          break;
+        }
+      }
+    }
+  }
+
+  if (anchorStart === -1) {
+    // Try a looser match: find just the contextBefore
+    if (diff.contextBefore.length > 0) {
+      for (let j = 0; j <= modifiedLines.length - 1; j++) {
+        if (modifiedLines[j] === diff.contextBefore[0]) {
+          anchorStart = j;
+          break;
+        }
+      }
+    }
+
+    if (anchorStart === -1) {
+      return null; // Could not reconstruct
+    }
+  }
+
+  // Reconstruct original:
+  // Lines before anchor + contextBefore + removedLines + contextAfter + lines after changed region
+  const beforeAnchor = modifiedLines.slice(0, anchorStart);
+  const changedEnd = anchorStart + diff.contextBefore.length + diff.addedLines.length + diff.contextAfter.length;
+  const afterChanged = modifiedLines.slice(changedEnd);
+
+  const original: string[] = [...beforeAnchor, ...diff.contextBefore, ...diff.removedLines, ...diff.contextAfter];
+
+  // Remove trailing empty line that may have been added by split()
+  if (afterChanged.length === 1 && afterChanged[0] === "") {
+    // Modified has trailing newline, will be rejoined naturally
+  } else if (afterChanged.length > 0) {
+    original.push(...afterChanged);
+  }
+
+  // Handle trailing newline: if modified content ends with \n, ensure original does too
+  const result = original.join("\n");
+  if (modifiedContent.endsWith("\n") && !result.endsWith("\n")) {
+    return result + "\n";
+  }
+  if (!modifiedContent.endsWith("\n") && result.endsWith("\n")) {
+    return result.slice(0, -1);
+  }
+
+  return result;
+}

packages/vscode-ide-companion/src/webview/components/DiffPreview.tsx

@@ -1,5 +1,6 @@
 import { Button } from "@/webview/components/ui/button";
 import type { FileToolMetadata } from "@/webview/components/bubbles/ToolBubble";
+import { wrpc } from "@/webview/wrpc";
 
 interface DiffPreviewProps {
   output: string;
@@ -15,6 +16,16 @@ export default function DiffPreview({ metadata, output }: DiffPreviewProps) {
   const meta = metadata;
   if (!meta?.file_path) return null;
 
+  const handleOpenFile = () => {
+    void wrpc.openFile.mutate({ filePath: meta.file_path!, line: 1 });
+  };
+
+  const handleViewDiff = () => {
+    if (meta.diff_preview) {
+      void wrpc.showDiffEditor.mutate({ filePath: meta.file_path!, diffPreview: meta.diff_preview });
+    }
+  };
+
   const diffLines = (meta.diff_preview || "")
     .split("\n")
     .filter((l) => !l.startsWith("--- ") && !l.startsWith("+++ ") && !l.startsWith("@@ "));
@@ -24,14 +35,38 @@ export default function DiffPreview({ metadata, output }: DiffPreviewProps) {
       {output && <div className="text-xs text-muted-foreground pl-3">{output.trim()}</div>}
 
       <div className="flex items-center gap-2 text-xs pl-3">
-        <span className="text-muted-foreground">File</span>
+        <span className="text-muted-foreground shrink-0">File</span>
         <Button
           variant="link"
           className="text-(--vscode-textLink-foreground) hover:underline cursor-pointer border-none bg-transparent p-0 text-xs truncate"
           title={meta.file_path}
+          onClick={handleOpenFile}
         >
           {formatDisplayPath(meta.file_path)}
         </Button>
+
+        <div className="flex items-center gap-1 ml-1 shrink-0">
+          <Button
+            variant="secondary"
+            size="xs"
+            className="h-5 px-1.5 text-[10px] cursor-pointer"
+            title="Open file in editor"
+            onClick={handleOpenFile}
+          >
+            Open
+          </Button>
+          {meta.diff_preview && (
+            <Button
+              variant="secondary"
+              size="xs"
+              className="h-5 px-1.5 text-[10px] cursor-pointer"
+              title="View changes in diff editor"
+              onClick={handleViewDiff}
+            >
+              View Diff
+            </Button>
+          )}
+        </div>
       </div>
 
       {diffLines.length > 0 && (

packages/vscode-ide-companion/src/webview/components/bubbles/ToolBubble.tsx

@@ -7,6 +7,7 @@ import { ChevronDown } from "lucide-react";
 import { Button } from "@/webview/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/webview/components/ui/tooltip";
 import ProgressShimmer from "@/webview/components/ProgressShimmer";
+import { capitalize } from "@/webview/utils";
 export interface ToolBubbleProps {
   content: string;
   meta?: {
@@ -270,7 +271,7 @@ export default function ToolBubble({
             variant="ghost"
             className="group w-full flex data-[state=open]:rounded-b-none data-[state=open]:border-muted"
           >
-            <span className="font-medium">{name}</span>
+            <span className="font-medium">{capitalize(name)}</span>
             {paramsMd && (
               <Tooltip>
                 <TooltipTrigger asChild>