@opensumi/ide-ai-native 3.7.2-next-1740066619.0 → 3.7.2-next-1740323956.0

package/src/browser/mcp/base-apply.service.ts

@@ -0,0 +1,349 @@
+import { createPatch } from 'diff';
+
+import { Autowired } from '@opensumi/di';
+import { AppConfig, ChatMessageRole, IMarker, MarkerSeverity, OnEvent, WithEventBus } from '@opensumi/ide-core-browser';
+import { WorkbenchEditorService } from '@opensumi/ide-editor';
+import { EditorGroupCloseEvent } from '@opensumi/ide-editor/lib/browser';
+import { IMarkerService } from '@opensumi/ide-markers';
+import { Position, Range, Selection, SelectionDirection } from '@opensumi/ide-monaco';
+import { observableValue, transaction } from '@opensumi/ide-monaco/lib/common/observable';
+import { Deferred, URI, path } from '@opensumi/ide-utils';
+
+import { IChatInternalService } from '../../common';
+import { ChatInternalService } from '../chat/chat.internal.service';
+import {
+  BaseInlineDiffPreviewer,
+  InlineDiffController,
+  InlineDiffService,
+  LiveInlineDiffPreviewer,
+} from '../widget/inline-diff';
+import { InlineStreamDiffHandler } from '../widget/inline-stream-diff/inline-stream-diff.handler';
+
+import { FileHandler } from './tools/handlers/ReadFile';
+
+// 提供代码块的唯一索引，迭代轮次，生成状态管理（包括取消），关联文件位置这些信息的记录，后续并行 apply 的支持
+export abstract class BaseApplyService extends WithEventBus {
+  @Autowired(FileHandler)
+  protected fileHandler: FileHandler;
+
+  @Autowired(IChatInternalService)
+  protected chatInternalService: ChatInternalService;
+
+  @Autowired(AppConfig)
+  protected appConfig: AppConfig;
+
+  @Autowired(WorkbenchEditorService)
+  protected readonly editorService: WorkbenchEditorService;
+
+  @Autowired(InlineDiffService)
+  private readonly inlineDiffService: InlineDiffService;
+
+  @Autowired(IMarkerService)
+  private readonly markerService: IMarkerService;
+
+  constructor() {
+    super();
+    this.addDispose(
+      this.chatInternalService.onCancelRequest(() => {
+        this.cancelAllApply();
+      }),
+    );
+    this.addDispose(
+      this.chatInternalService.onRegenerateRequest(() => {
+        const messages = this.chatInternalService.sessionModel.history.getMessages();
+        const messageId = messages[messages.length - 1].id;
+        messageId && this.disposeApplyForMessage(messageId);
+      }),
+    );
+  }
+
+  public readonly codeBlockMapObservable = observableValue<Map<string, CodeBlockData>>(this, new Map());
+
+  private activePreviewer: BaseInlineDiffPreviewer<InlineStreamDiffHandler> | undefined;
+
+  private pendingApplyParams:
+    | {
+        relativePath: string;
+        newContent: string;
+        range?: Range;
+      }
+    | undefined;
+
+  @OnEvent(EditorGroupCloseEvent)
+  onEditorGroupClose(event: EditorGroupCloseEvent) {
+    if (this.activePreviewer?.getNode()?.uri.path.toString() === event.payload.resource.uri.path.toString()) {
+      this.activePreviewer.dispose();
+      this.activePreviewer = undefined;
+    }
+  }
+
+  /**
+   * Get the code block data by relative or absolute path of the last assistant message
+   */
+  getCodeBlock(relativeOrAbsolutePath: string, messageId?: string): CodeBlockData | undefined {
+    if (!relativeOrAbsolutePath) {
+      return undefined;
+    }
+    const blockId = this.generateBlockId(relativeOrAbsolutePath, messageId);
+    return this.codeBlockMapObservable.get().get(blockId);
+  }
+
+  getCodeBlockById(id: string): CodeBlockData | undefined {
+    return this.codeBlockMapObservable.get().get(id);
+  }
+
+  protected updateCodeBlock(codeBlock: CodeBlockData) {
+    const codeBlockMap = new Map(this.codeBlockMapObservable.get());
+    codeBlockMap.set(codeBlock.id, codeBlock);
+    transaction((tx) => {
+      this.codeBlockMapObservable.set(codeBlockMap, tx);
+    });
+  }
+
+  /**
+   * Register a new code block and return its unique ID
+   */
+  registerCodeBlock(relativePath: string, content: string): string {
+    const blockId = this.generateBlockId(relativePath);
+
+    if (!this.codeBlockMapObservable.get().has(blockId)) {
+      this.codeBlockMapObservable.get().set(blockId, {
+        id: blockId,
+        content,
+        relativePath,
+        status: 'generating',
+        iterationCount: 0,
+        createdAt: Date.now(),
+      });
+    }
+
+    return blockId;
+  }
+
+  initToolCallId(blockId: string, toolCallId: string): void {
+    const blockData = this.getCodeBlockById(blockId);
+    if (blockData && !blockData.initToolCallId) {
+      blockData.initToolCallId = toolCallId;
+    }
+  }
+
+  /**
+   * Apply changes of a code block
+   */
+  async apply(relativePath: string, newContent: string, instructions?: string): Promise<CodeBlockData> {
+    const blockData = this.getCodeBlock(relativePath);
+    if (!blockData) {
+      throw new Error('Code block not found');
+    }
+    try {
+      if (++blockData.iterationCount > 3) {
+        throw new Error('Max iteration count exceeded');
+      }
+      blockData.status = 'generating';
+      blockData.content = newContent;
+      this.updateCodeBlock(blockData);
+      const applyDiffResult = await this.doApply(relativePath, newContent, instructions);
+      blockData.applyResult = applyDiffResult;
+      this.updateCodeBlock(blockData);
+      return blockData;
+    } catch (err) {
+      blockData.status = 'failed';
+      this.updateCodeBlock(blockData);
+      throw err;
+    }
+  }
+
+  async reRenderPendingApply() {
+    if (!this.pendingApplyParams) {
+      throw new Error('No pending apply params');
+    }
+    const result = await this.renderApplyResult(
+      this.pendingApplyParams.relativePath,
+      this.pendingApplyParams.newContent,
+      this.pendingApplyParams.range,
+    );
+    if (result) {
+      const blockData = this.getCodeBlock(this.pendingApplyParams.relativePath)!;
+      blockData.applyResult = result;
+      this.updateCodeBlock(blockData);
+    }
+  }
+
+  async renderApplyResult(
+    relativePath: string,
+    newContent: string,
+    range?: Range,
+  ): Promise<{ diff: string; diagnosticInfos: IMarker[] } | undefined> {
+    // 用户可能会关闭编辑器，所以需要缓存参数
+    this.pendingApplyParams = {
+      relativePath,
+      newContent,
+      range,
+    };
+    const blockData = this.getCodeBlock(relativePath);
+    if (!blockData) {
+      throw new Error('Code block not found');
+    }
+    const openResult = await this.editorService.open(URI.file(path.join(this.appConfig.workspaceDir, relativePath)));
+    if (!openResult) {
+      throw new Error('Failed to open editor');
+    }
+    const editor = openResult.group.codeEditor.monacoEditor;
+    const inlineDiffController = InlineDiffController.get(editor)!;
+    blockData.status = 'pending';
+    this.updateCodeBlock(blockData);
+
+    range = range || editor.getModel()?.getFullModelRange()!;
+    // Create diff previewer
+    const previewer = inlineDiffController.createDiffPreviewer(
+      editor,
+      Selection.fromRange(range, SelectionDirection.LTR),
+      {
+        disposeWhenEditorClosed: true,
+        renderRemovedWidgetImmediately: true,
+      },
+    ) as LiveInlineDiffPreviewer;
+    this.activePreviewer = previewer;
+
+    const fullOriginalContent = editor.getModel()!.getValue();
+    const savedContent = editor.getModel()!.getValueInRange(range);
+    const deferred = new Deferred<{ diff: string; diagnosticInfos: IMarker[] }>();
+    if (newContent === savedContent) {
+      blockData.status = 'success';
+      deferred.resolve();
+    } else {
+      previewer.setValue(newContent);
+      this.addDispose(
+        this.inlineDiffService.onPartialEdit((event) => {
+          // TODO 支持自动保存
+          if (event.totalPartialEditCount === event.resolvedPartialEditCount) {
+            if (event.acceptPartialEditCount > 0) {
+              blockData.status = 'success';
+              const appliedResult = editor.getModel()!.getValue();
+              const diffResult = createPatch(relativePath, fullOriginalContent, appliedResult)
+                .split('\n')
+                .slice(4)
+                .join('\n');
+              const rangesFromDiffHunk = diffResult
+                .split('\n')
+                .map((line) => {
+                  if (line.startsWith('@@')) {
+                    const [, , , start, end] = line.match(/@@ -(\d+),(\d+) \+(\d+),(\d+) @@/)!;
+                    return new Range(parseInt(start, 10), 0, parseInt(end, 10), 0);
+                  }
+                  return null;
+                })
+                .filter((range) => range !== null);
+              const diagnosticInfos = this.getdiagnosticInfos(editor.getModel()!.uri.toString(), rangesFromDiffHunk);
+              // 移除开头的几个固定信息，避免浪费 tokens
+              deferred.resolve({
+                diff: diffResult,
+                diagnosticInfos,
+              });
+            } else {
+              // 用户全部取消
+              blockData.status = 'cancelled';
+              deferred.resolve();
+            }
+          }
+        }),
+      );
+    }
+    return deferred.promise;
+  }
+
+  /**
+   * Cancel an ongoing apply operation
+   */
+  cancelApply(relativePath: string): void {
+    const blockData = this.getCodeBlock(relativePath);
+    if (blockData && (blockData.status === 'generating' || blockData.status === 'pending')) {
+      if (this.activePreviewer) {
+        this.activePreviewer.getNode()?.livePreviewDiffDecorationModel.discardUnProcessed();
+        this.activePreviewer.dispose();
+      }
+      blockData.status = 'cancelled';
+      this.updateCodeBlock(blockData);
+    }
+  }
+
+  cancelAllApply(): void {
+    this.codeBlockMapObservable.get().forEach((blockData) => {
+      if (blockData.status === 'generating' || blockData.status === 'pending') {
+        this.cancelApply(blockData.relativePath);
+      }
+    });
+  }
+
+  disposeApplyForMessage(messageId: string): void {
+    this.codeBlockMapObservable.get().forEach((blockData) => {
+      if (blockData.id.endsWith(':' + messageId)) {
+        if (blockData.status === 'generating') {
+          this.cancelApply(blockData.relativePath);
+        }
+        this.codeBlockMapObservable.get().delete(blockData.id);
+      }
+    });
+  }
+
+  revealApplyPosition(blockId: string): void {
+    const blockData = this.codeBlockMapObservable.get().get(blockId);
+    if (blockData) {
+      const hunkInfo = blockData.applyResult?.diff.split('\n').find((line) => line.startsWith('@@'));
+      let startLine = 0;
+      let endLine = 0;
+      if (hunkInfo) {
+        // 取改动后的区间
+        const [, , , start, end] = hunkInfo.match(/@@ -(\d+),(\d+) \+(\d+),(\d+) @@/)!;
+        startLine = parseInt(start, 10) - 1;
+        endLine = parseInt(end, 10) - 1;
+      }
+      this.editorService.open(URI.file(path.join(this.appConfig.workspaceDir, blockData.relativePath)));
+      const editor = this.editorService.currentEditor;
+      if (editor) {
+        editor.setSelection(new Selection(startLine, 0, endLine, 0));
+      }
+    }
+  }
+
+  protected abstract doApply(
+    relativePath: string,
+    newContent: string,
+    instructions?: string,
+  ): Promise<{ diff: string; diagnosticInfos: IMarker[] } | undefined>;
+
+  protected generateBlockId(absoluteOrRelativePath: string, messageId?: string): string {
+    if (!absoluteOrRelativePath.startsWith('/')) {
+      absoluteOrRelativePath = path.join(this.appConfig.workspaceDir, absoluteOrRelativePath);
+    }
+    const sessionId = this.chatInternalService.sessionModel.sessionId;
+    const messages = this.chatInternalService.sessionModel.history.getMessages();
+    messageId = messageId || messages[messages.length - 1].id;
+    return `${sessionId}:${absoluteOrRelativePath}:${messageId || '-'}`;
+  }
+
+  protected getdiagnosticInfos(uri: string, ranges: Range[]) {
+    const markers = this.markerService.getManager().getMarkers({ resource: uri });
+    return markers.filter(
+      (marker) =>
+        marker.severity >= MarkerSeverity.Warning &&
+        ranges.some((range) => range.containsPosition(new Position(marker.startLineNumber, marker.startColumn))),
+    );
+  }
+}
+
+export interface CodeBlockData {
+  id: string;
+  initToolCallId?: string;
+  content: string;
+  relativePath: string;
+  status: CodeBlockStatus;
+  iterationCount: number;
+  createdAt: number;
+  applyResult?: {
+    diff: string;
+    diagnosticInfos: IMarker[];
+  };
+}
+
+export type CodeBlockStatus = 'generating' | 'pending' | 'success' | 'rejected' | 'failed' | 'cancelled';

package/src/browser/mcp/mcp-server-proxy.service.ts

@@ -1,3 +1,5 @@
+import { zodToJsonSchema } from 'zod-to-json-schema';
+
 import { Autowired, Injectable } from '@opensumi/di';
 import { ILogger } from '@opensumi/ide-core-browser';
 import { Emitter, Event } from '@opensumi/ide-core-common';
@@ -29,10 +31,10 @@ export class MCPServerProxyService implements IMCPServerProxyService {
   async $getMCPTools() {
     const tools = await this.mcpServerRegistry.getMCPTools().map((tool) =>
       // 不要传递 handler
-       ({
+      ({
         name: tool.name,
         description: tool.description,
-        inputSchema: tool.inputSchema,
+        inputSchema: zodToJsonSchema(tool.inputSchema),
         providerName: 'sumi-builtin',
       }),
     );

package/src/browser/mcp/mcp-server.feature.registry.ts

@@ -1,11 +1,12 @@
 // OpenSumi as MCP Server 前端的代理服务
 import { Autowired, Injectable } from '@opensumi/di';
-import { IAIBackService, ILogger } from '@opensumi/ide-core-common';
+import { ILogger } from '@opensumi/ide-core-common';
 
-import { IMCPServerRegistry, MCPLogger, MCPToolDefinition } from '../types';
+import { getToolName } from '../../common/utils';
+import { IMCPServerRegistry, IMCPServerToolComponentProps, MCPLogger, MCPToolDefinition } from '../types';
 
 class LoggerAdapter implements MCPLogger {
-  constructor(private readonly logger: ILogger) { }
+  constructor(private readonly logger: ILogger) {}
 
   appendLine(message: string): void {
     this.logger.log(message);
@@ -15,6 +16,7 @@ class LoggerAdapter implements MCPLogger {
 @Injectable()
 export class MCPServerRegistry implements IMCPServerRegistry {
   private tools: MCPToolDefinition[] = [];
+  private toolComponents: Record<string, React.FC<IMCPServerToolComponentProps>> = {};
 
   @Autowired(ILogger)
   private readonly baseLogger: ILogger;
@@ -23,10 +25,26 @@ export class MCPServerRegistry implements IMCPServerRegistry {
     return new LoggerAdapter(this.baseLogger);
   }
 
+  getMCPTool(name: string, serverName = 'sumi-builtin'): MCPToolDefinition | undefined {
+    return this.tools.find((tool) => getToolName(tool.name, serverName) === name);
+  }
+
   registerMCPTool(tool: MCPToolDefinition): void {
     this.tools.push(tool);
   }
 
+  registerToolComponent(
+    name: string,
+    component: React.FC<IMCPServerToolComponentProps>,
+    serverName = 'sumi-builtin',
+  ): void {
+    this.toolComponents[getToolName(name, serverName)] = component;
+  }
+
+  getToolComponent(name: string): React.FC<IMCPServerToolComponentProps> | undefined {
+    return this.toolComponents[name];
+  }
+
   getMCPTools(): MCPToolDefinition[] {
     return this.tools;
   }
@@ -43,8 +61,13 @@ export class MCPServerRegistry implements IMCPServerRegistry {
       if (!tool) {
         throw new Error(`MCP tool ${name} not found`);
       }
-      return await tool.handler(args, this.logger);
+      // 统一校验并转换
+      const toolCallId = args.toolCallId;
+      args = tool.inputSchema.parse(args);
+      return await tool.handler({ ...args, toolCallId }, this.logger);
     } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('callMCPTool error:', error);
       return {
         content: [{ type: 'text', text: `The tool ${name} failed to execute. Error: ${error}` }],
         isError: true,

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

@@ -0,0 +1,144 @@
+import cls from 'classnames';
+import React, { useEffect, useMemo } from 'react';
+
+import { Icon, Popover } from '@opensumi/ide-components';
+import {
+  AppConfig,
+  LabelService,
+  MarkerSeverity,
+  URI,
+  Uri,
+  detectModeId,
+  path,
+  useAutorun,
+  useInjectable,
+} from '@opensumi/ide-core-browser';
+import { Loading } from '@opensumi/ide-core-browser/lib/components/ai-native';
+import { ILanguageService } from '@opensumi/monaco-editor-core/esm/vs/editor/common/languages/language';
+import { IModelService } from '@opensumi/monaco-editor-core/esm/vs/editor/common/services/model';
+import { StandaloneServices } from '@opensumi/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices';
+
+import { ChatMarkdown } from '../../../components/ChatMarkdown';
+import { IMCPServerToolComponentProps } from '../../../types';
+import { BaseApplyService, CodeBlockData } from '../../base-apply.service';
+
+import styles from './index.module.less';
+
+const renderStatus = (codeBlockData: CodeBlockData) => {
+  const status = codeBlockData.status;
+  switch (status) {
+    case 'generating':
+      return <Loading />;
+    case 'pending':
+      return (
+        <Popover title={status} id={'edit-file-tool-status-pending'}>
+          <Icon iconClass='codicon codicon-circle-large' />
+        </Popover>
+      );
+    case 'success':
+      return (
+        <Popover title={status} id={'edit-file-tool-status-success'}>
+          <Icon iconClass='codicon codicon-check-all' />
+        </Popover>
+      );
+    case 'failed':
+      return (
+        <Popover title={status} id={'edit-file-tool-status-failed'}>
+          <Icon iconClass='codicon codicon-error' color='var(--vscode-input-errorForeground)' />
+        </Popover>
+      );
+    case 'cancelled':
+      return (
+        <Popover title={status} id={'edit-file-tool-status-cancelled'}>
+          <Icon iconClass='codicon codicon-close' color='var(--vscode-input-placeholderForeground)' />
+        </Popover>
+      );
+    default:
+      return null;
+  }
+};
+
+export const EditFileToolComponent = (props: IMCPServerToolComponentProps) => {
+  const { args, messageId, toolCallId } = props;
+  const labelService = useInjectable(LabelService);
+  const appConfig = useInjectable<AppConfig>(AppConfig);
+  const applyService = useInjectable<BaseApplyService>(BaseApplyService);
+  const { target_file = '', code_edit, instructions } = args || {};
+  const absolutePath = path.join(appConfig.workspaceDir, target_file);
+
+  const codeBlockData = applyService.getCodeBlock(absolutePath, messageId);
+
+  useAutorun(applyService.codeBlockMapObservable);
+
+  if (toolCallId && codeBlockData) {
+    applyService.initToolCallId(codeBlockData.id, toolCallId);
+  }
+
+  const icon = useMemo(() => {
+    if (!target_file) {
+      return;
+    }
+    const icon = `file-icon ${labelService.getIcon(URI.file(absolutePath))}`;
+    return icon;
+  }, [target_file, absolutePath]);
+  const languageId = useMemo(() => {
+    if (!target_file) {
+      return;
+    }
+    const modelService = StandaloneServices.get(IModelService);
+    const languageService = StandaloneServices.get(ILanguageService);
+    const detectedModeId = detectModeId(modelService, languageService, Uri.file(absolutePath));
+    return detectedModeId;
+  }, [target_file, absolutePath]);
+
+  // 多次迭代时，仅在首处tool组件中展示
+  if (!args || !codeBlockData || (toolCallId && toolCallId !== codeBlockData.initToolCallId)) {
+    return null;
+  }
+
+  return [
+    instructions && <p>{instructions}</p>,
+    <div className={styles['edit-file-tool']} key={`edit-file-tool-${codeBlockData.id}`}>
+      <div
+        className={cls(styles['edit-file-tool-header'], {
+          clickable: codeBlockData.status === 'pending' || codeBlockData.status === 'success',
+        })}
+        onClick={() => {
+          if (codeBlockData.status === 'pending') {
+            applyService.reRenderPendingApply();
+          } else if (codeBlockData.status === 'success') {
+            applyService.revealApplyPosition(codeBlockData.id);
+          }
+        }}
+      >
+        {icon && <span className={icon}></span>}
+        <span className={styles['edit-file-tool-file-name']}>{target_file}</span>
+        {codeBlockData.iterationCount > 1 && (
+          <span className={styles['edit-file-tool-iteration-count']}>{codeBlockData.iterationCount}/3</span>
+        )}
+        {renderStatus(codeBlockData)}
+      </div>
+      <ChatMarkdown markdown={`\`\`\`${languageId || ''}\n${code_edit}\n\`\`\``} hideInsert={true} />
+    </div>,
+    codeBlockData.applyResult && codeBlockData.applyResult.diagnosticInfos.length > 0 && (
+      <div
+        className={styles['edit-file-tool-diagnostic-errors']}
+        key={`edit-file-tool-diagnostic-errors-${codeBlockData.id}`}
+      >
+        <div className={styles['title']}>Found Lints:</div>
+        {codeBlockData.applyResult?.diagnosticInfos.map((info) => (
+          <div
+            key={info.message}
+            className={cls({
+              [styles['error']]: info.severity === MarkerSeverity.Error,
+              [styles['warning']]: info.severity === MarkerSeverity.Warning,
+            })}
+          >
+            <Icon className={`codicon codicon-${info.severity === MarkerSeverity.Error ? 'error' : 'warning'}`} />
+            {info.message.split('\n')[0]}
+          </div>
+        ))}
+      </div>
+    ),
+  ];
+};

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

@@ -0,0 +1,92 @@
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { 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 SearchResultProps {
+  args: any;
+  toolCallId: string;
+  messageId: string;
+  toolName: string;
+}
+
+export const FileSearchToolComponent: React.FC<SearchResultProps> = ({ args, toolCallId, messageId }) => (
+  <SearchResult args={args} toolCallId={toolCallId} messageId={messageId} toolName='fileSearch' />
+);
+
+export const GrepSearchToolComponent: React.FC<SearchResultProps> = ({ args, toolCallId, messageId }) => (
+  <SearchResult args={args} toolCallId={toolCallId} messageId={messageId} toolName='grepSearch' />
+);
+
+const SearchResult: React.FC<SearchResultProps> = ({ args, toolCallId, toolName, messageId }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const labelService = useInjectable<LabelService>(LabelService);
+  const editorService = useInjectable<WorkbenchEditorService>(WorkbenchEditorService);
+  const workspaceService = useInjectable<IWorkspaceService>(IWorkspaceService);
+  const workspaceRoot = useMemo(() => URI.parse(workspaceService.tryGetRoots()?.[0]?.uri), []);
+
+  const chatService = useInjectable<ChatInternalService>(IChatInternalService);
+  const [files, setFiles] = useState<string[]>(
+    chatService.sessionModel.history.getMessageAdditional(messageId)?.[toolCallId]?.files || [],
+  );
+  useEffect(() => {
+    const toDispose = chatService.sessionModel.history.onMessageAdditionalChange((additional) => {
+      setFiles(additional[toolCallId]?.files || []);
+    });
+    return () => {
+      toDispose.dispose();
+    };
+  }, []);
+
+  const handleFileClick = (uri: URI) => {
+    // 处理文件点击跳转
+    editorService.open(uri);
+  };
+
+  const parsedFiles = useMemo(
+    () =>
+      files.map((file) => {
+        const uri = URI.parse(file);
+        const iconClass = labelService.getIcon(uri);
+        return {
+          iconClass,
+          name: uri.path.base,
+          path: path.relative(workspaceRoot.codeUri.fsPath, uri.path.dir.toString()),
+        };
+      }),
+    [files],
+  );
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header} onClick={() => setIsExpanded(!isExpanded)}>
+        <span style={{ transform: `rotate(${isExpanded ? '90deg' : '0deg'})` }}>▶</span>
+        <span>
+          {toolName === 'fileSearch' ? `Searched files "${args.query}"` : `Grepped codebase "${args.query}"`} ·{' '}
+          {files.length} files
+        </span>
+      </div>
+      {isExpanded && (
+        <ul className={styles.fileList}>
+          {parsedFiles.map((file, index) => (
+            <li
+              key={index}
+              className={styles.fileItem}
+              onClick={() => handleFileClick(URI.file(path.join(workspaceRoot.codeUri.fsPath, file.path, file.name)))}
+            >
+              <span className={file.iconClass}></span>
+              <span style={{ flex: 1 }}>{file.name}</span>
+              <span className={styles.filePath}>{file.path}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};