@opensumi/ide-ai-native 3.8.3-next-1741752385.0 → 3.8.3-next-1741763229.0

package/src/browser/components/mention-input/mention-item.tsx

@@ -0,0 +1,24 @@
+import cls from 'classnames';
+import * as React from 'react';
+
+import { Icon, getIcon } from '@opensumi/ide-core-browser/lib/components';
+
+import styles from './mention-input.module.less';
+import { MentionItem as MentionItemType } from './types';
+
+interface MentionItemProps {
+  item: MentionItemType;
+  isActive: boolean;
+  onClick: (item: MentionItemType) => void;
+}
+
+export const MentionItem: React.FC<MentionItemProps> = ({ item, isActive, onClick }) => (
+  <div className={`${styles.mention_item} ${isActive ? styles.active : ''}`} onClick={() => onClick(item)}>
+    <div className={styles.mention_item_left}>
+      <Icon className={cls(styles.mention_item_icon, item.icon)} />
+      <span className={styles.mention_item_text}>{item.text}</span>
+      <span className={styles.mention_item_description}>{item.description}</span>
+    </div>
+    {item.getItems && <Icon className={cls(styles.mention_item_right, getIcon('arrowright'))} />}
+  </div>
+);

package/src/browser/components/mention-input/mention-panel.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+
+import styles from './mention-input.module.less';
+import { MentionItem } from './mention-item';
+import { MentionItem as MentionItemType, MentionPosition } from './types';
+
+interface MentionPanelProps {
+  items: MentionItemType[];
+  activeIndex: number;
+  onSelectItem: (item: MentionItemType, isTriggerByClick?: boolean) => void;
+  position: MentionPosition;
+  filter: string;
+  visible: boolean;
+  level: number;
+  loading?: boolean;
+}
+
+export const MentionPanel: React.FC<MentionPanelProps> = ({
+  items,
+  activeIndex,
+  onSelectItem,
+  position,
+  filter,
+  visible,
+  level,
+  loading = false,
+}) => {
+  const panelRef = React.useRef<HTMLDivElement>(null);
+
+  // 当活动项改变时滚动到可见区域
+  React.useEffect(() => {
+    if (visible && panelRef.current) {
+      const activeItem = panelRef.current.querySelector(`.${styles.mention_item}.${styles.active}`);
+      if (activeItem) {
+        activeItem.scrollIntoView({ block: 'nearest' });
+      }
+    }
+  }, [activeIndex, visible]);
+
+  if (!visible) {
+    return null;
+  }
+
+  // 根据过滤条件筛选项目
+  const getFilteredItems = () => {
+    let filteredItems = items;
+
+    if (level === 0) {
+      // 一级菜单根据 @ 后面的文本过滤
+      if (filter && filter.length > 1) {
+        const searchText = filter.substring(1).toLowerCase();
+        filteredItems = items.filter((item) => item.text.toLowerCase().includes(searchText));
+      }
+    } else {
+      // 二级菜单根据 @file: 后面的文本过滤
+      if (filter && filter.length > 0) {
+        filteredItems = items.filter((item) => item.text.toLowerCase().includes(filter.toLowerCase()));
+      }
+    }
+
+    return filteredItems;
+  };
+
+  const filteredItems = getFilteredItems();
+
+  if (level === 0 && filteredItems.length === 0) {
+    return null;
+  }
+
+  return (
+    <div ref={panelRef} className={styles.mention_panel} style={{ top: position.top, left: position.left }}>
+      {loading && <div className={styles.loading_bar}></div>}
+      {items.length > 0 ? (
+        <ul className={styles.mention_list}>
+          {items.map((item, index) => (
+            <MentionItem
+              key={item.id}
+              item={item}
+              isActive={index === activeIndex}
+              onClick={() => onSelectItem(item, true)}
+            />
+          ))}
+        </ul>
+      ) : (
+        <div className={styles.no_results}>{loading ? '正在搜索...' : '无匹配结果'}</div>
+      )}
+    </div>
+  );
+};

package/src/browser/components/mention-input/types.ts

@@ -0,0 +1,82 @@
+import type { LabelService } from '@opensumi/ide-core-browser';
+
+export interface MentionItem {
+  id: string;
+  type: string;
+  text: string;
+  value?: string;
+  description?: string;
+  contextId?: string;
+  icon?: string;
+  getHighestLevelItems?: () => MentionItem[];
+  getItems?: (searchText: string) => Promise<MentionItem[]>;
+}
+
+export interface SecondLevelMenuConfig {
+  getDefaultItems: () => MentionItem[];
+  getHighestLevelItems: () => MentionItem[];
+}
+
+export interface MentionPosition {
+  top: number;
+  left: number;
+}
+
+export interface MentionState {
+  active: boolean;
+  startPos: number | null;
+  filter: string;
+  position: MentionPosition;
+  activeIndex: number;
+  level: number; // 0: 一级菜单, 1: 二级菜单
+  parentType: string | null; // 二级菜单的父类型
+  secondLevelFilter: string; // 二级菜单的筛选文本
+  inlineSearchActive: boolean; // 是否在输入框中进行二级搜索
+  inlineSearchStartPos: number | null; // 内联搜索的起始位置
+  loading: boolean; // 加载状态
+}
+
+interface ModelOption {
+  label: string;
+  value: string;
+}
+
+export enum FooterButtonPosition {
+  LEFT = 'left',
+  RIGHT = 'right',
+}
+
+export enum MentionType {
+  FILE = 'file',
+  FOLDER = 'folder',
+  CODE = 'code',
+}
+
+interface FooterButton {
+  id: string;
+  icon: string;
+  title: string;
+  onClick?: () => void;
+  position: FooterButtonPosition;
+}
+
+export interface FooterConfig {
+  modelOptions?: ModelOption[];
+  defaultModel?: string;
+  buttons?: FooterButton[];
+  showModelSelector?: boolean;
+}
+
+export interface MentionInputProps {
+  mentionItems?: MentionItem[]; // 简化为单一菜单项配置
+  onSend?: (content: string, config?: { model: string; [key: string]: any }) => void;
+  onStop?: () => void;
+  placeholder?: string;
+  loading?: boolean;
+  onSelectionChange?: (value: string) => void;
+  footerConfig?: FooterConfig; // 新增配置项
+  mentionKeyword?: string;
+  labelService?: LabelService;
+}
+
+export const MENTION_KEYWORD = '@';

package/src/browser/context/llm-context.service.ts

@@ -10,6 +10,7 @@ import {
   IEditorDocumentModelService,
 } from '@opensumi/ide-editor/lib/browser/doc-model/types';
 import { EditorSelectionChangeEvent } from '@opensumi/ide-editor/lib/browser/types';
+import { FileType, IFileServiceClient } from '@opensumi/ide-file-service';
 import { IMarkerService } from '@opensumi/ide-markers/lib/common/types';
 import { Range } from '@opensumi/ide-monaco';
 
@@ -26,13 +27,18 @@ export class LLMContextServiceImpl extends WithEventBus implements LLMContextSer
   @Autowired(IMarkerService)
   protected readonly markerService: IMarkerService;
 
+  @Autowired(IFileServiceClient)
+  protected readonly fileService: IFileServiceClient;
+
   private isAutoCollecting = false;
 
   private contextVersion = 0;
 
   private readonly maxAttachFilesLimit = 10;
+  private readonly maxAttachFoldersLimit = 10;
   private readonly maxViewFilesLimit = 20;
-  private readonly attachedFiles: FileContext[] = [];
+  private attachedFiles: FileContext[] = [];
+  private attachedFolders: FileContext[] = [];
   private readonly recentlyViewFiles: FileContext[] = [];
   private readonly onDidContextFilesChangeEmitter = new Emitter<{
     viewed: FileContext[];
@@ -53,6 +59,18 @@ export class LLMContextServiceImpl extends WithEventBus implements LLMContextSer
     }
   }
 
+  private addFolderToList(folder: FileContext, list: FileContext[], maxLimit: number) {
+    const existingIndex = list.findIndex((f) => f.uri.toString() === folder.uri.toString());
+    if (existingIndex > -1) {
+      list.splice(existingIndex, 1);
+    }
+
+    list.push(folder);
+    if (list.length > maxLimit) {
+      list.shift();
+    }
+  }
+
   addFileToContext(uri: URI, selection?: [number, number], isManual = false): void {
     if (!uri) {
       return;
@@ -70,12 +88,24 @@ export class LLMContextServiceImpl extends WithEventBus implements LLMContextSer
     this.notifyContextChange();
   }
 
+  addFolderToContext(uri: URI): void {
+    if (!uri) {
+      return;
+    }
+
+    const file = { uri };
+
+    this.addFolderToList(file, this.attachedFolders, this.maxAttachFoldersLimit);
+    this.notifyContextChange();
+  }
+
   private notifyContextChange(): void {
     this.onDidContextFilesChangeEmitter.fire(this.getAllContextFiles());
   }
 
   cleanFileContext() {
-    this.attachedFiles.length = 0;
+    this.attachedFiles = [];
+    this.attachedFolders = [];
     this.notifyContextChange();
   }
 
@@ -83,6 +113,7 @@ export class LLMContextServiceImpl extends WithEventBus implements LLMContextSer
     return {
       viewed: this.recentlyViewFiles,
       attached: this.attachedFiles,
+      attachedFolders: this.attachedFolders,
       version: this.contextVersion++,
     };
   }
@@ -160,16 +191,63 @@ export class LLMContextServiceImpl extends WithEventBus implements LLMContextSer
     this.dispose();
   }
 
-  serialize(): SerializedContext {
+  async serialize(): Promise<SerializedContext> {
     const files = this.getAllContextFiles();
     const workspaceRoot = URI.file(this.appConfig.workspaceDir);
 
     return {
       recentlyViewFiles: this.serializeRecentlyViewFiles(files.viewed, workspaceRoot),
       attachedFiles: this.serializeAttachedFiles(files.attached, workspaceRoot),
+      attachedFolders: await this.serializeAttachedFolders(files.attachedFolders, workspaceRoot),
     };
   }
 
+  private async serializeAttachedFolders(folders: FileContext[], workspaceRoot: URI): Promise<string[]> {
+    // 去重
+    const folderPath = Array.from(new Set(folders.map((folder) => folder.uri.toString())));
+    return Promise.all(
+      folderPath.map(async (folder) => {
+        const folderUri = new URI(folder);
+        const root = workspaceRoot.relative(folderUri)?.toString() || '/';
+        return `\`\`\`\n${root}\n${(await this.getPartiaFolderStructure(folderUri.codeUri.fsPath))
+          .map((line) => `- ${line}`)
+          .join('\n')}\n\`\`\`\n`;
+      }),
+    );
+  }
+
+  private async getPartiaFolderStructure(folder: string, level = 2): Promise<string[]> {
+    const result: string[] = [];
+    const stat = await this.fileService.getFileStat(folder);
+
+    for (const child of stat?.children || []) {
+      const relativePath = new URI(folder).relative(new URI(child.uri))!.toString();
+
+      if (child.isSymbolicLink) {
+        // 处理软链接
+        const target = await this.fileService.getFileStat(child.realUri || child.uri);
+        if (target) {
+          result.push(`${relativePath} -> ${target} (symbolic link)`);
+        } else {
+          result.push(`${relativePath} (broken symbolic link)`);
+        }
+        continue;
+      }
+
+      if (child.type === FileType.Directory) {
+        result.push(`${relativePath}/`);
+        if (level > 1) {
+          const subDirStructure = await this.getPartiaFolderStructure(child.uri, level - 1);
+          result.push(...subDirStructure.map((subEntry) => `${relativePath}/${subEntry}`));
+        }
+      } else if (child.type === FileType.File) {
+        result.push(relativePath);
+      }
+    }
+
+    return result;
+  }
+
   private serializeRecentlyViewFiles(files: FileContext[], workspaceRoot: URI): string[] {
     return files
       .map((file) => workspaceRoot.relative(file.uri)?.toString() || file.uri.parent.toString())

package/src/browser/contrib/inline-completions/prompt/matcher.ts

@@ -244,8 +244,8 @@ export abstract class WindowedMatcher {
         tokens.slice(startLine, endLine).forEach((token) => token.forEach((word) => size.add(word)));
         cache.push(size);
       }
-      const traget = cache[index];
-      const score = this.similarityScore(traget, this.referenceTokens);
+      const target = cache[index];
+      const score = this.similarityScore(target, this.referenceTokens);
       snippets.push({
         score,
         startLine,

package/src/browser/contrib/inline-completions/prompt/similarSnippets.ts

@@ -15,9 +15,9 @@ import {
 import { MAX_NEIGHBOR_AGGREGATE_LENGTH } from './const';
 import { FixedWindowSizeJaccardMatcher } from './jaccardMatcher';
 
-export const getOpenedTabFileList = (docuemnts: IEditorDocumentModel[]) => {
+export const getOpenedTabFileList = (documents: IEditorDocumentModel[]) => {
   // 过滤超大文档
-  const recentFiles = docuemnts.filter((document) => isDocumentValid(document));
+  const recentFiles = documents.filter((document) => isDocumentValid(document));
   return recentFiles;
 };
 

package/src/browser/contrib/intelligent-completions/view/default.ts

@@ -29,7 +29,6 @@ import {
 
 import { CodeEditsResultValue, ICodeEdit, ICodeEditsResult } from '../index';
 
-
 import { BaseCodeEditsView } from './base';
 
 /**

package/src/browser/mcp/config/components/mcp-config.view.tsx

@@ -4,8 +4,8 @@ import React, { useCallback } from 'react';
 import { Badge } from '@opensumi/ide-components';
 import { AINativeSettingSectionsId, ILogger, useInjectable } from '@opensumi/ide-core-browser';
 import { PreferenceService } from '@opensumi/ide-core-browser/lib/preferences';
-import { localize } from '@opensumi/ide-core-common';
-import { IMessageService } from '@opensumi/ide-overlay/lib/common';
+import { PreferenceScope, localize } from '@opensumi/ide-core-common';
+import { IMessageService } from '@opensumi/ide-overlay';
 
 import { BUILTIN_MCP_SERVER_NAME, ISumiMCPServerBackend, SumiMCPServerProxyServicePath } from '../../../../common';
 import { MCPServerDescription } from '../../../../common/mcp-server-manager';
@@ -18,13 +18,13 @@ import { MCPServerForm, MCPServerFormData } from './mcp-server-form';
 export const MCPConfigView: React.FC = () => {
   const mcpServerProxyService = useInjectable<MCPServerProxyService>(MCPServerProxyService);
   const preferenceService = useInjectable<PreferenceService>(PreferenceService);
+  const messageService = useInjectable<IMessageService>(IMessageService);
   const sumiMCPServerBackendProxy = useInjectable<ISumiMCPServerBackend>(SumiMCPServerProxyServicePath);
   const logger = useInjectable<ILogger>(ILogger);
-  const messageService = useInjectable<IMessageService>(IMessageService);
   const [servers, setServers] = React.useState<MCPServer[]>([]);
   const [formVisible, setFormVisible] = React.useState(false);
   const [editingServer, setEditingServer] = React.useState<MCPServerFormData | undefined>();
-
+  const [loadingServer, setLoadingServer] = React.useState<string | undefined>();
   const loadServers = useCallback(async () => {
     const allServers = await mcpServerProxyService.$getServers();
     setServers(allServers);
@@ -44,6 +44,7 @@ export const MCPConfigView: React.FC = () => {
   const handleServerControl = useCallback(
     async (serverName: string, start: boolean) => {
       try {
+        setLoadingServer(serverName);
         if (start) {
           await mcpServerProxyService.$startServer(serverName);
         } else {
@@ -87,12 +88,14 @@ export const MCPConfigView: React.FC = () => {
           });
         }
 
-        await preferenceService.set(AINativeSettingSectionsId.MCPServers, updatedServers);
+        await preferenceService.set(AINativeSettingSectionsId.MCPServers, updatedServers, PreferenceScope.User);
         await loadServers();
+        setLoadingServer(undefined);
       } catch (error) {
         const msg = error.message || error;
         logger.error(`Failed to ${start ? 'start' : 'stop'} server ${serverName}:`, error);
-        messageService.error(`Failed to ${start ? 'start' : 'stop'} server ${serverName}:` + msg);
+        messageService.error(error.message);
+        setLoadingServer(undefined);
       }
     },
     [mcpServerProxyService, preferenceService, sumiMCPServerBackendProxy, loadServers],
@@ -121,7 +124,7 @@ export const MCPConfigView: React.FC = () => {
       const servers = preferenceService.get<MCPServerFormData[]>(AINativeSettingSectionsId.MCPServers, []);
       const updatedServers = servers.filter((s) => s.name !== serverName);
       sumiMCPServerBackendProxy.removeServer(serverName);
-      await preferenceService.set(AINativeSettingSectionsId.MCPServers, updatedServers);
+      await preferenceService.set(AINativeSettingSectionsId.MCPServers, updatedServers, PreferenceScope.User);
       await loadServers();
     },
     [editingServer, formVisible],
@@ -140,7 +143,7 @@ export const MCPConfigView: React.FC = () => {
       setServers(servers as MCPServer[]);
       setFormVisible(false);
       await sumiMCPServerBackendProxy.addOrUpdateServer(data as MCPServerDescription);
-      await preferenceService.set(AINativeSettingSectionsId.MCPServers, servers);
+      await preferenceService.set(AINativeSettingSectionsId.MCPServers, servers, PreferenceScope.User);
       await loadServers();
     },
     [servers, formVisible, loadServers],
@@ -164,10 +167,10 @@ export const MCPConfigView: React.FC = () => {
       <div className={styles.header}>
         <div>
           <h2 className={styles.title}>MCP Servers</h2>
-          <p className={styles.description}>Manage your MCP server connections.</p>
+          <p className={styles.description}>{localize('ai.native.mcp.manage.connections')}</p>
         </div>
         <button className={styles.addButton} onClick={handleAddServer}>
-          + Add new MCP server
+          + {localize('ai.native.mcp.addMCPServer.title')}
         </button>
       </div>
       <div className={styles.serversList}>
@@ -188,7 +191,15 @@ export const MCPConfigView: React.FC = () => {
                   title={server.isStarted ? 'Stop' : 'Start'}
                   onClick={() => handleServerControl(server.name, !server.isStarted)}
                 >
-                  <i className={`codicon ${server.isStarted ? 'codicon-debug-stop' : 'codicon-debug-start'}`} />
+                  <i
+                    className={`codicon ${
+                      loadingServer === server.name
+                        ? 'codicon-loading kt-icon-loading'
+                        : server.isStarted
+                        ? 'codicon-debug-stop'
+                        : 'codicon-debug-start'
+                    }`}
+                  />
                 </button>
                 {server.name !== BUILTIN_MCP_SERVER_NAME && (
                   <button className={styles.iconButton} title='Delete' onClick={() => handleDeleteServer(server.name)}>
@@ -201,7 +212,7 @@ export const MCPConfigView: React.FC = () => {
               <div className={styles.detailRow}>
                 <span className={styles.detailLabel}>Status:</span>
                 <span className={`${styles.serverStatus} ${server.isStarted ? styles.running : styles.stopped}`}>
-                  {server.isStarted ? 'Running' : 'Stopped'}
+                  {server.isStarted ? localize('ai.native.mcp.running') : localize('ai.native.mcp.stopped')}
                 </span>
               </div>
               {server.type && (

package/src/browser/mcp/config/components/mcp-server-form.tsx

@@ -67,35 +67,75 @@ export const MCPServerForm: FC<Props> = ({ visible, initialData, onSave, onCance
     );
   }, [initialData]);
 
-  const handleSubmit = (e: FormEvent) => {
-    e.preventDefault();
-    const isValid = validateForm(formData);
-    if (!isValid) {
-      return;
-    }
-    const form = {
-      ...formData,
-    };
-    if (formData.type === MCP_SERVER_TYPE.SSE) {
-      form.serverHost = form.serverHost?.trim();
-    } else {
-      const args = argsText.split(' ').filter(Boolean);
-      const env = envText
-        .split('\n')
-        .filter(Boolean)
-        .reduce((acc, line) => {
-          const [key, value] = line.split('=');
-          if (key && value) {
-            acc[key.trim()] = value.trim();
-          }
-          return acc;
-        }, {} as Record<string, string>);
-      form.args = args;
-      form.env = env;
-    }
+  const validateForm = useCallback(
+    (formData: MCPServerFormData) => {
+      if (formData.name.trim() === '') {
+        messageService.error(localize('ai.native.mcp.name.isRequired'));
+        return false;
+      }
+      if (
+        !initialData &&
+        existingServers.some((server) => server.name.toLocaleLowerCase() === formData.name.toLocaleLowerCase())
+      ) {
+        messageService.error(formatLocalize('ai.native.mcp.serverNameExists', formData.name));
+        return false;
+      }
+      if (formData.type === MCP_SERVER_TYPE.SSE) {
+        const isServerHostValid = formData.serverHost?.trim() !== '';
+        if (!isServerHostValid) {
+          messageService.error(localize('ai.native.mcp.serverHost.isRequired'));
+        }
+        return isServerHostValid;
+      }
+      const isCommandValid = formData.command?.trim() !== '';
+      if (!isCommandValid) {
+        messageService.error(localize('ai.native.mcp.command.isRequired'));
+      }
+      return isCommandValid;
+    },
+    [existingServers, initialData],
+  );
 
-    onSave(form);
-  };
+  const handleSubmit = useCallback(
+    (e: FormEvent) => {
+      e.preventDefault();
+      const isValid = validateForm(formData);
+      if (!isValid) {
+        return;
+      }
+      const form = {
+        ...formData,
+      };
+      if (formData.type === MCP_SERVER_TYPE.SSE) {
+        form.serverHost = form.serverHost?.trim();
+      } else {
+        const args = argsText.split(' ').filter(Boolean);
+        const env = envText
+          .split('\n')
+          .filter(Boolean)
+          .reduce((acc, line) => {
+            const [key, value] = line.split('=');
+            if (key && value) {
+              acc[key.trim()] = value.trim();
+            }
+            return acc;
+          }, {} as Record<string, string>);
+        form.args = args;
+        form.env = env;
+      }
+
+      setFormData({
+        ...formData,
+        command: '',
+        serverHost: '',
+        args: [],
+        env: {},
+      });
+
+      onSave(form);
+    },
+    [formData, argsText, envText, onSave, validateForm],
+  );
 
   const handleCommandChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
@@ -183,32 +223,6 @@ export const MCPServerForm: FC<Props> = ({ visible, initialData, onSave, onCance
     }
   }, [formData, argsText, envText]);
 
-  const validateForm = useCallback(
-    (formData: MCPServerFormData) => {
-      if (formData.name.trim() === '') {
-        messageService.error(localize('ai.native.mcp.name.isRequired'));
-        return false;
-      }
-      if (existingServers.some((server) => server.name.toLocaleLowerCase() === formData.name.toLocaleLowerCase())) {
-        messageService.error(formatLocalize('ai.native.mcp.serverNameExists', formData.name));
-        return false;
-      }
-      if (formData.type === MCP_SERVER_TYPE.SSE) {
-        const isServerHostValid = formData.serverHost?.trim() !== '';
-        if (!isServerHostValid) {
-          messageService.error(localize('ai.native.mcp.serverHost.isRequired'));
-        }
-        return isServerHostValid;
-      }
-      const isCommandValid = formData.command?.trim() !== '';
-      if (!isCommandValid) {
-        messageService.error(localize('ai.native.mcp.command.isRequired'));
-      }
-      return isCommandValid;
-    },
-    [existingServers],
-  );
-
   return (
     <Modal
       title={initialData ? localize('ai.native.mcp.editMCPServer.title') : localize('ai.native.mcp.addMCPServer.title')}

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

@@ -60,7 +60,7 @@ export class MCPServerRegistry implements IMCPServerRegistry {
   }
 
   getMCPTools(): MCPToolDefinition[] {
-    return this.tools;
+    return this.tools.sort((a, b) => (a.order ?? Infinity) - (b.order ?? Infinity));
   }
 
   async callMCPTool(

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

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
+import { Icon } from '@opensumi/ide-components/lib/icon/icon';
 import { CommandService, LabelService, URI, path, useInjectable } from '@opensumi/ide-core-browser';
 import { WorkbenchEditorService } from '@opensumi/ide-editor';
 import { IWorkspaceService } from '@opensumi/ide-workspace';
@@ -110,7 +111,9 @@ const ExpandableFileList: React.FC<ExpandableFileListProps> = ({
   return (
     <div className={styles.container}>
       <div className={styles.header} onClick={() => setIsExpanded(!isExpanded)}>
-        <span style={{ transform: `rotate(${isExpanded ? '90deg' : '0deg'})` }}>▶</span>
+        <span style={{ transform: `rotate(${isExpanded ? '90deg' : '0deg'})`, display: 'flex' }}>
+          <Icon iconClass={'codicon codicon-chevron-right'} />
+        </span>
         <span>
           {headerText} · {fileList.length} files
         </span>