@opensumi/ide-ai-native 3.8.1-next-1741080291.0 → 3.8.1-next-1741091353.0

package/src/browser/mcp/tools/components/ExpandableFileList.tsx

@@ -0,0 +1,133 @@
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { CommandService, LabelService, URI, path, useInjectable } from '@opensumi/ide-core-browser';
+import { WorkbenchEditorService } from '@opensumi/ide-editor';
+import { IWorkspaceService } from '@opensumi/ide-workspace';
+
+import { IChatInternalService } from '../../../../common';
+import { ChatInternalService } from '../../../chat/chat.internal.service';
+
+import styles from './index.module.less';
+
+interface FileInfo {
+  uri: string;
+  isDirectory: boolean;
+}
+
+interface ExpandableFileListProps {
+  args: any;
+  toolCallId: string;
+  messageId: string;
+  toolName: string;
+  headerText?: string;
+}
+
+export const FileSearchToolComponent: React.FC<ExpandableFileListProps> = ({ args, toolCallId, messageId }) => (
+  <ExpandableFileList
+    args={args}
+    toolCallId={toolCallId}
+    messageId={messageId}
+    toolName='fileSearch'
+    headerText={`Searched files "${args.query}"`}
+  />
+);
+
+export const GrepSearchToolComponent: React.FC<ExpandableFileListProps> = ({ args, toolCallId, messageId }) => (
+  <ExpandableFileList
+    args={args}
+    toolCallId={toolCallId}
+    messageId={messageId}
+    toolName='grepSearch'
+    headerText={`Grepped codebase "${args.query}"`}
+  />
+);
+
+export const ListDirToolComponent: React.FC<ExpandableFileListProps> = ({ args, toolCallId, messageId }) => (
+  <ExpandableFileList
+    args={args}
+    toolCallId={toolCallId}
+    messageId={messageId}
+    toolName='listDir'
+    headerText={`Listed directory "${args.relative_workspace_path}"`}
+  />
+);
+
+const ExpandableFileList: React.FC<ExpandableFileListProps> = ({
+  args,
+  toolCallId,
+  toolName,
+  messageId,
+  headerText,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const labelService = useInjectable<LabelService>(LabelService);
+  const editorService = useInjectable<WorkbenchEditorService>(WorkbenchEditorService);
+  const workspaceService = useInjectable<IWorkspaceService>(IWorkspaceService);
+  const commandService = useInjectable<CommandService>(CommandService);
+  const workspaceRoot = useMemo(() => URI.parse(workspaceService.tryGetRoots()?.[0]?.uri), []);
+
+  const chatService = useInjectable<ChatInternalService>(IChatInternalService);
+  const [fileList, setFileList] = useState<FileInfo[]>([]);
+
+  useEffect(() => {
+    const toDispose = chatService.sessionModel.history.onMessageAdditionalChange((additional) => {
+      setFileList(additional[toolCallId]?.files || []);
+    });
+    return () => {
+      toDispose.dispose();
+    };
+  }, []);
+
+  const handleFileClick = async (fileInfo: FileInfo) => {
+    // 处理文件点击跳转
+    if (!fileInfo.isDirectory) {
+      editorService.open(URI.parse(fileInfo.uri));
+    } else {
+      // 如果是目录，聚焦到文件树并展开该目录
+      const uri = URI.parse(fileInfo.uri);
+      commandService.executeCommand('filetree.location', uri);
+    }
+  };
+
+  const parsedFiles = useMemo(
+    () =>
+      fileList.map((file) => {
+        const uri = URI.parse(file.uri);
+        const iconClass = labelService.getIcon(uri, { isDirectory: file.isDirectory });
+        return {
+          iconClass,
+          name: uri.path.base,
+          path: path.relative(workspaceRoot.codeUri.fsPath, uri.path.dir.toString()),
+          uri: file.uri,
+          isDirectory: file.isDirectory,
+        };
+      }),
+    [fileList],
+  );
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header} onClick={() => setIsExpanded(!isExpanded)}>
+        <span style={{ transform: `rotate(${isExpanded ? '90deg' : '0deg'})` }}>▶</span>
+        <span>
+          {headerText} · {fileList.length} files
+        </span>
+      </div>
+      {isExpanded && (
+        <ul className={styles.fileList}>
+          {parsedFiles.map((file, index) => (
+            <li
+              key={index}
+              className={styles.fileItem}
+              onClick={() => handleFileClick({ uri: file.uri, isDirectory: file.isDirectory })}
+            >
+              <span className={file.iconClass}></span>
+              <span style={{ flex: 1 }}>{file.name}</span>
+              <span className={styles.filePath}>{file.path}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};

package/src/browser/mcp/tools/components/index.module.less

@@ -17,6 +17,9 @@
     align-items: center;
     justify-content: center;
   }
+  .left {
+    overflow: hidden;
+  }
   .left,
   .right {
     display: flex;
@@ -154,6 +157,7 @@
   background-color: var(--design-chatInput-background);
   padding: 10px;
   border-radius: 4px;
+  margin: 10px 0px;
 
   .command_title {
     display: flex;

package/src/browser/mcp/tools/createNewFileWithText.ts

@@ -6,10 +6,13 @@ import { IFileServiceClient } from '@opensumi/ide-file-service';
 import { IWorkspaceService } from '@opensumi/ide-workspace';
 
 import { IMCPServerRegistry, MCPLogger, MCPServerContribution, MCPToolDefinition } from '../../types';
+import { BaseApplyService } from '../base-apply.service';
+
+import { EditFileToolComponent } from './components/EditFile';
 
 const inputSchema = z.object({
-  pathInProject: z.string().describe('The relative path where the file should be created'),
-  text: z.string().describe('The content to write into the new file'),
+  target_file: z.string().describe('The relative path where the file should be created'),
+  code_edit: z.string().describe('The content to write into the new file'),
 });
 
 @Domain(MCPServerContribution)
@@ -20,29 +23,31 @@ export class CreateNewFileWithTextTool implements MCPServerContribution {
   @Autowired(IFileServiceClient)
   private readonly fileService: IFileServiceClient;
 
+  @Autowired(BaseApplyService)
+  private applyService: BaseApplyService;
+
   registerMCPServer(registry: IMCPServerRegistry): void {
     registry.registerMCPTool(this.getToolDefinition());
+    registry.registerToolComponent('create_new_file_with_text', EditFileToolComponent);
   }
 
   getToolDefinition(): MCPToolDefinition {
     return {
       name: 'create_new_file_with_text',
+      label: 'Create File',
       description:
         'Creates a new file at the specified path within the project directory and populates it with the provided text. ' +
         'Use this tool to generate new files in your project structure. ' +
-        'Requires two parameters: ' +
-        '- pathInProject: The relative path where the file should be created ' +
-        '- text: The content to write into the new file ' +
         'Returns one of two possible responses: ' +
         '"ok" if the file was successfully created and populated, ' +
         '"can\'t find project dir" if the project directory cannot be determined. ' +
-        'Note: Creates any necessary parent directories automatically.',
+        'Note: This tool creates any necessary parent directories automatically.',
       inputSchema,
       handler: this.handler.bind(this),
     };
   }
 
-  private async handler(args: z.infer<typeof inputSchema>, logger: MCPLogger) {
+  private async handler(args: z.infer<typeof inputSchema> & { toolCallId: string }, logger: MCPLogger) {
     try {
       // 获取工作区根目录
       const workspaceRoots = this.workspaceService.tryGetRoots();
@@ -56,7 +61,7 @@ export class CreateNewFileWithTextTool implements MCPServerContribution {
 
       // 构建完整的文件路径
       const rootUri = URI.parse(workspaceRoots[0].uri);
-      const fullPath = path.join(rootUri.codeUri.fsPath, args.pathInProject);
+      const fullPath = path.join(rootUri.codeUri.fsPath, args.target_file);
       const fileUri = URI.file(fullPath);
 
       // 创建父目录
@@ -64,17 +69,21 @@ export class CreateNewFileWithTextTool implements MCPServerContribution {
       const parentUri = URI.file(parentDir);
       await this.fileService.createFolder(parentUri.toString());
 
-      // 写入文件内容
-      await this.fileService.createFile(fileUri.toString(), { content: args.text });
+      // 创建文件
+      await this.fileService.createFile(fileUri.toString());
+
+      // 使用 applyService 写入文件内容
+      const codeBlock = await this.applyService.registerCodeBlock(args.target_file, args.code_edit, args.toolCallId);
+      await this.applyService.apply(codeBlock);
 
-      logger.appendLine(`Successfully created file at: ${args.pathInProject}`);
+      logger.appendLine(`Successfully created file at: ${args.target_file}`);
       return {
         content: [{ type: 'text', text: 'ok' }],
       };
     } catch (error) {
       logger.appendLine(`Error during file creation: ${error}`);
       return {
-        content: [{ type: 'text', text: 'unknown error' }],
+        content: [{ type: 'text', text: error.message }],
         isError: true,
       };
     }

package/src/browser/mcp/tools/fileSearch.ts

@@ -1,6 +1,7 @@
 import { z } from 'zod';
 
 import { Autowired } from '@opensumi/di';
+import { getValidateInput } from '@opensumi/ide-addons/lib/browser/file-search.contribution';
 import { Domain, URI } from '@opensumi/ide-core-common';
 import { FileSearchServicePath, IFileSearchService } from '@opensumi/ide-file-search/lib/common';
 import { IWorkspaceService } from '@opensumi/ide-workspace';
@@ -9,7 +10,7 @@ import { IChatInternalService } from '../../../common';
 import { ChatInternalService } from '../../chat/chat.internal.service';
 import { IMCPServerRegistry, MCPLogger, MCPServerContribution, MCPToolDefinition } from '../../types';
 
-import { FileSearchToolComponent } from './components/SearchResult';
+import { FileSearchToolComponent } from './components/ExpandableFileList';
 
 const inputSchema = z.object({
   query: z.string().describe('Fuzzy filename to search for'),
@@ -58,7 +59,7 @@ export class FileSearchTool implements MCPServerContribution {
     }
 
     // 使用 OpenSumi 的文件搜索 API
-    const searchPattern = args.query;
+    const searchPattern = this.normalizeQuery(args.query);
     const searchResults = await this.fileSearchService.find(searchPattern, {
       rootUris: [new URI(workspaceRoots[0].uri).codeUri.fsPath],
       // TODO: 忽略配置
@@ -71,7 +72,10 @@ export class FileSearchTool implements MCPServerContribution {
 
     const files = searchResults.slice(0, MAX_RESULTS).map((file) => {
       const uri = URI.parse(file);
-      return uri.codeUri.fsPath;
+      return {
+        uri: uri.codeUri.fsPath,
+        isDirectory: false, // 文件搜索结果都是文件
+      };
     });
 
     const messages = this.chatInternalService.sessionModel.history.getMessages();
@@ -87,7 +91,7 @@ export class FileSearchTool implements MCPServerContribution {
       content: [
         {
           type: 'text',
-          text: `${files.join('\n')}\n${
+          text: `${files.map((f) => f.uri).join('\n')}\n${
             searchResults.length > MAX_RESULTS
               ? `\nFound ${searchResults.length} files matching "${args.query}", only return the first ${MAX_RESULTS} results`
               : ''
@@ -96,4 +100,10 @@ export class FileSearchTool implements MCPServerContribution {
       ],
     };
   }
+
+  private normalizeQuery(query: string): string {
+    const nonBlank = query.trim().replace(/\s/g, '');
+    const validated = getValidateInput(nonBlank);
+    return validated;
+  }
 }

package/src/browser/mcp/tools/getDiagnosticsByPath.ts

@@ -29,6 +29,7 @@ export class GetDiagnosticsByPathTool implements MCPServerContribution {
   getToolDefinition(): MCPToolDefinition {
     return {
       name: 'get_diagnostics_by_path',
+      label: 'Get Diagnostics',
       description:
         'Retrieves diagnostic information (errors, warnings, etc.) from a specific file in the project. ' +
         'Use this tool to get information about problems in any project file. ' +

package/src/browser/mcp/tools/grepSearch.ts

@@ -10,7 +10,7 @@ import { IChatInternalService } from '../../../common';
 import { ChatInternalService } from '../../chat/chat.internal.service';
 import { IMCPServerRegistry, MCPLogger, MCPServerContribution, MCPToolDefinition } from '../../types';
 
-import { GrepSearchToolComponent } from './components/SearchResult';
+import { GrepSearchToolComponent } from './components/ExpandableFileList';
 
 const inputSchema = z.object({
   query: z.string().describe('The regex pattern to search for'),
@@ -90,7 +90,7 @@ export class GrepSearchTool implements MCPServerContribution {
         return;
       }
       const results: string[] = [];
-      const files: string[] = [];
+      const files: Array<{ uri: string; isDirectory: boolean }> = [];
       for (const [fileUri, result] of this.searchService.searchResults.entries()) {
         results.push(
           `File: ${fileUri}\n${result
@@ -103,7 +103,10 @@ export class GrepSearchTool implements MCPServerContribution {
             .map((r) => `Line: ${r.line}\nContent: ${r.lineText || r.renderLineText}`)
             .join('\n')}`,
         );
-        files.push(fileUri);
+        files.push({
+          uri: fileUri,
+          isDirectory: false, // grep 搜索结果都是文件
+        });
       }
       deferred.resolve(results.join('\n\n'));
       const messages = this.chatInternalService.sessionModel.history.getMessages();

package/src/browser/mcp/tools/handlers/EditFile.ts

@@ -14,7 +14,7 @@ export class EditFileHandler {
 
   async handler(params: { targetFile: string; codeEdit: string; instructions?: string }, toolCallId: string) {
     const { targetFile, codeEdit } = params;
-    const block = this.applyService.registerCodeBlock(targetFile, codeEdit, toolCallId);
+    const block = await this.applyService.registerCodeBlock(targetFile, codeEdit, toolCallId);
     const blockData = await this.applyService.apply(block);
     return blockData;
   }

package/src/browser/mcp/tools/handlers/ListDir.ts

@@ -56,6 +56,10 @@ export class ListDirHandler {
   @Autowired(IFileServiceClient)
   private readonly fileSystemService: IFileServiceClient;
 
+  getWorkspaceDir(): string {
+    return this.appConfig.workspaceDir;
+  }
+
   async handler(args: { relativeWorkspacePath: string }) {
     const { relativeWorkspacePath } = args;
     if (!relativeWorkspacePath) {

package/src/browser/mcp/tools/handlers/RunCommand.ts

@@ -49,6 +49,7 @@ export class RunCommandHandler {
   }
 
   async handler(args: z.infer<typeof inputSchema> & { toolCallId: string }, logger: MCPLogger) {
+    logger.appendLine(`Executing command: ${args.command}`);
     if (args.require_user_approval) {
       const def = new Deferred<boolean>();
       this.approvalDeferredMap.set(args.toolCallId, def);
@@ -89,6 +90,7 @@ export class RunCommandHandler {
         content: result,
       });
 
+      logger.appendLine(`Command ${args.command} finished with exit code: ${e.code}`);
       terminalClient.term.writeln(
         `\n${color.italic}> Command ${args.command} executed successfully. Terminal will close in ${
           3000 / 1000

package/src/browser/mcp/tools/listDir.ts

@@ -3,8 +3,11 @@ import { z } from 'zod';
 import { Autowired } from '@opensumi/di';
 import { Domain } from '@opensumi/ide-core-common';
 
+import { IChatInternalService } from '../../../common';
+import { ChatInternalService } from '../../chat/chat.internal.service';
 import { IMCPServerRegistry, MCPLogger, MCPServerContribution, MCPToolDefinition } from '../../types';
 
+import { ListDirToolComponent } from './components/ExpandableFileList';
 import { ListDirHandler } from './handlers/ListDir';
 
 const inputSchema = z
@@ -26,8 +29,12 @@ export class ListDirTool implements MCPServerContribution {
   @Autowired(ListDirHandler)
   private readonly listDirHandler: ListDirHandler;
 
+  @Autowired(IChatInternalService)
+  private readonly chatInternalService: ChatInternalService;
+
   registerMCPServer(registry: IMCPServerRegistry): void {
     registry.registerMCPTool(this.getToolDefinition());
+    registry.registerToolComponent('list_dir', ListDirToolComponent);
   }
 
   getToolDefinition(): MCPToolDefinition {
@@ -41,16 +48,40 @@ export class ListDirTool implements MCPServerContribution {
     };
   }
 
-  private async handler(args: z.infer<typeof inputSchema>, logger: MCPLogger) {
+  private async handler(args: z.infer<typeof inputSchema> & { toolCallId: string }, logger: MCPLogger) {
     const result = await this.listDirHandler.handler(args);
+
+    // 构建文件 URI 列表，用于前端渲染
+    const fileUris = result.files.map((file) => {
+      const filePath = `${this.listDirHandler.getWorkspaceDir()}/${result.directoryRelativeWorkspacePath}/${file.name}`;
+      return {
+        uri: filePath,
+        isDirectory: file.isDirectory,
+      };
+    });
+
+    // 设置消息的附加数据
+    const messages = this.chatInternalService.sessionModel.history.getMessages();
+    this.chatInternalService.sessionModel.history.setMessageAdditional(messages[messages.length - 1].id, {
+      [args.toolCallId]: {
+        files: fileUris,
+        title: `Listed directory "${args.relativeWorkspacePath}"`,
+        details: result.files.map((file) => ({
+          type: file.isDirectory ? 'dir' : 'file',
+          name: file.name,
+          info: file.isDirectory ? `${file.numChildren ?? '?'} items` : `${file.size}KB, ${file.numLines} lines`,
+          lastModified: file.lastModified,
+        })),
+      },
+    });
+
+    logger.appendLine(`Listed ${fileUris.length} files in directory "${args.relativeWorkspacePath}"`);
+
     return {
       content: [
         {
           type: 'text',
-          text: `Contents of directory:
-
-
-          ${result.files
+          text: `Contents of directory "${args.relativeWorkspacePath}":\n${result.files
             .map(
               (file) =>
                 `[${file.isDirectory ? 'dir' : 'file'}] ${file.name} ${

package/src/browser/mcp/tools/runTerminalCmd.ts

@@ -32,6 +32,7 @@ export class RunTerminalCommandTool implements MCPServerContribution {
   getToolDefinition(): MCPToolDefinition {
     return {
       name: 'run_terminal_cmd',
+      label: 'Run Command',
       description:
         "PROPOSE a command to run on behalf of the user.\nIf you have this tool, note that you DO have the ability to run commands directly on the USER's system.\n\nAdhere to these rules:\n1. Based on the contents of the conversation, you will be told if you are in the same shell as a previous step or a new shell.\n2. If in a new shell, you should `cd` to the right directory and do necessary setup in addition to running the command.\n3. If in the same shell, the state will persist, no need to do things like `cd` to the same directory.\n4. For ANY commands that would use a pager, you should append ` | cat` to the command (or whatever is appropriate). You MUST do this for: git, less, head, tail, more, etc.\n5. For commands that are long running/expected to run indefinitely until interruption, please run them in the background. To run jobs in the background, set `is_background` to true rather than changing the details of the command.\n6. Dont include any newlines in the command.",
       inputSchema,

package/src/browser/model/msg-history-manager.ts

@@ -128,6 +128,10 @@ export class MsgHistoryManager extends Disposable {
     return this.messageAdditionalMap.get(id) || {};
   }
 
+  public get sessionAdditionals() {
+    return this.messageAdditionalMap;
+  }
+
   toJSON() {
     return {
       messages: this.getMessages(),

package/src/browser/preferences/schema.ts

@@ -69,14 +69,9 @@ export const aiNativePreferenceSchema: PreferenceSchema = {
     [AINativeSettingSectionsId.LLMModelSelection]: {
       type: 'string',
       default: 'deepseek',
-      enum: ['deepseek', 'anthropic', 'openai', 'openai-compatible'],
+      enum: ['deepseek', 'anthropic', 'openai'],
       description: localize('preference.ai.native.llm.model.selection.description'),
     },
-    [AINativeSettingSectionsId.ModelID]: {
-      type: 'string',
-      default: 'deepseek-chat',
-      description: localize('preference.ai.native.llm.model.id'),
-    },
     [AINativeSettingSectionsId.DeepseekApiKey]: {
       type: 'string',
       default: '',
@@ -153,7 +148,6 @@ export const aiNativePreferenceSchema: PreferenceSchema = {
     },
     [AINativeSettingSectionsId.SystemPrompt]: {
       type: 'string',
-      default: '',
       description: localize('preference.ai.native.chat.system.prompt.description'),
     },
   },

package/src/browser/widget/inline-diff/inline-diff-manager.tsx

@@ -1,38 +1,160 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { Button } from '@opensumi/ide-components';
-import { localize, useInjectable } from '@opensumi/ide-core-browser';
-import { IResource } from '@opensumi/ide-editor';
+import { Icon, Popover } from '@opensumi/ide-components';
+import { AppConfig, IDisposable, URI, localize, path, useInjectable } from '@opensumi/ide-core-browser';
+import { IResource, WorkbenchEditorService } from '@opensumi/ide-editor';
+import { Path } from '@opensumi/ide-utils/lib/path';
 
 import { BaseApplyService } from '../../mcp/base-apply.service';
 
 import styles from './inline-diff-widget.module.less';
 
+const IconWithPopover = (props: {
+  icon: string;
+  content: string;
+  id: string;
+  onClick?: () => void;
+  disabled?: boolean;
+}) => (
+  <Popover content={props.content} id={props.id} onClick={props.onClick}>
+    <Icon iconClass={props.icon} className={props.disabled ? styles.disabled : ''} />
+  </Popover>
+);
+
 export const InlineDiffManager: React.FC<{ resource: IResource }> = (props) => {
+  const { resource } = props;
   const applyService = useInjectable<BaseApplyService>(BaseApplyService);
+  const editorService = useInjectable<WorkbenchEditorService>(WorkbenchEditorService);
+  const appConfig = useInjectable<AppConfig>(AppConfig);
   const [show, setShow] = useState(true);
+  const [changesCount, setChangesCount] = useState(0);
+  const [currentChangeIndex, setCurrentChangeIndex] = useState(0);
+  const [filePaths, setFilePaths] = useState<string[]>([]);
+
+  const currentFilePath = useMemo(
+    () => path.relative(appConfig.workspaceDir, resource.uri.path.toString()),
+    [resource],
+  );
+
   useEffect(() => {
-    applyService.onCodeBlockUpdate((codeBlock) => {
-      setShow(codeBlock.status === 'pending');
+    const toDispose = applyService.onCodeBlockUpdate((codeBlock) => {
+      if (path.relative(appConfig.workspaceDir, props.resource.uri.path.toString()) === codeBlock.relativePath) {
+        setShow(codeBlock.status === 'pending');
+      }
+      const pendingPaths = applyService.getPendingPaths();
+      setFilePaths(pendingPaths);
     });
+    return () => {
+      toDispose.dispose();
+    };
   }, []);
+
+  // 不同编辑器是不同实例，所以不需要监听
+  const decorationModelService = applyService.currentPreviewer?.getNode()?.livePreviewDiffDecorationModel;
+
+  useEffect(() => {
+    let toDispose: IDisposable | undefined;
+    if (decorationModelService) {
+      setChangesCount(decorationModelService.partialEditWidgetCount);
+      toDispose = decorationModelService.onPartialEditWidgetListChange((e) => {
+        setChangesCount(e.filter((item) => item.status === 'pending').length);
+      });
+    }
+    return () => {
+      toDispose?.dispose();
+    };
+  }, [decorationModelService]);
+
+  const handleSiblingChange = useCallback(
+    (direction: 'up' | 'down') => {
+      const index = decorationModelService?.revealSiblingChange(direction);
+      if (index !== undefined) {
+        setCurrentChangeIndex(index);
+      }
+    },
+    [decorationModelService],
+  );
+
+  const handleSiblingFile = useCallback(
+    (direction: 'up' | 'down') => {
+      const index = filePaths.indexOf(currentFilePath!);
+      if (index === -1) {
+        return;
+      }
+      const uri = URI.file(path.join(appConfig.workspaceDir, filePaths[index + (direction === 'up' ? -1 : 1)]));
+      editorService.open(uri);
+    },
+    [currentFilePath, filePaths],
+  );
+
+  const changeTip = useMemo(() => {
+    if (changesCount === 0) {
+      return '';
+    }
+    return ` ${currentChangeIndex + 1} of ${changesCount}`;
+  }, [changesCount, currentChangeIndex]);
+
+  const fileTip = useMemo(() => {
+    if (!currentFilePath) {
+      return '';
+    }
+    return ` ${filePaths.indexOf(currentFilePath) + 1} of ${filePaths.length}`;
+  }, [currentFilePath, filePaths]);
+
   return (
     <div className={styles.inlineDiffManager} style={{ display: show ? 'flex' : 'none' }}>
-      <Button
-        onClick={() => {
-          applyService.processAll(props.resource.uri, 'accept');
-        }}
-      >
-        {localize('aiNative.inlineDiff.acceptAll')}
-      </Button>
-      <Button
-        type='ghost'
-        onClick={() => {
-          applyService.processAll(props.resource.uri, 'reject');
-        }}
-      >
-        {localize('aiNative.inlineDiff.rejectAll')}
-      </Button>
+      {/* <div className={styles.left}>
+        <IconWithPopover
+          icon='codicon codicon-issues'
+          content={localize('aiNative.inlineDiff.reveal')}
+          id='inline-diff-manager-reveal'
+          onClick={handleReveal}
+        />
+      </div> */}
+      <div className={styles.mid}>
+        <IconWithPopover
+          icon='codicon codicon-check'
+          onClick={() => applyService.processAll(props.resource.uri, 'accept')}
+          content={localize('aiNative.inlineDiff.acceptAll')}
+          id='inline-diff-manager-accept-all'
+        />
+        <IconWithPopover
+          icon='codicon codicon-close'
+          onClick={() => applyService.processAll(props.resource.uri, 'reject')}
+          content={localize('aiNative.inlineDiff.rejectAll')}
+          id='inline-diff-manager-reject-all'
+        />
+        <IconWithPopover
+          icon='codicon codicon-arrow-up'
+          content={localize('aiNative.inlineDiff.up') + changeTip}
+          id='inline-diff-manager-up'
+          disabled={currentChangeIndex === 0}
+          onClick={() => handleSiblingChange('up')}
+        />
+        <IconWithPopover
+          icon='codicon codicon-arrow-down'
+          content={localize('aiNative.inlineDiff.down') + changeTip}
+          id='inline-diff-manager-down'
+          disabled={currentChangeIndex === changesCount - 1}
+          onClick={() => handleSiblingChange('down')}
+        />
+      </div>
+      <div className={styles.right}>
+        <IconWithPopover
+          icon='codicon codicon-arrow-left'
+          onClick={() => handleSiblingFile('up')}
+          disabled={filePaths.length === 0 || filePaths[0] === currentFilePath}
+          content={localize('aiNative.inlineDiff.left') + fileTip}
+          id='inline-diff-manager-left'
+        />
+        <IconWithPopover
+          icon='codicon codicon-arrow-right'
+          onClick={() => handleSiblingFile('down')}
+          disabled={filePaths.length === 0 || filePaths[filePaths.length - 1] === currentFilePath}
+          content={localize('aiNative.inlineDiff.right') + fileTip}
+          id='inline-diff-manager-right'
+        />
+      </div>
     </div>
   );
 };