@lobehub/chat 1.141.7 → 1.141.9

package/src/store/chat/slices/builtinTool/actions/{localFile.ts → localSystem.ts}

@@ -1,4 +1,9 @@
 import {
+  EditLocalFileParams,
+  GetCommandOutputParams,
+  GlobFilesParams,
+  GrepContentParams,
+  KillCommandParams,
   ListLocalFileParams,
   LocalMoveFilesResultItem,
   LocalReadFileParams,
@@ -6,6 +11,7 @@ import {
   LocalSearchFilesParams,
   MoveLocalFilesParams,
   RenameLocalFileParams,
+  RunCommandParams,
   WriteLocalFileParams,
 } from '@lobechat/electron-client-ipc';
 import { StateCreator } from 'zustand/vanilla';
@@ -13,67 +19,91 @@ import { StateCreator } from 'zustand/vanilla';
 import { localFileService } from '@/services/electron/localFileService';
 import { ChatStore } from '@/store/chat/store';
 import {
+  EditLocalFileState,
+  GetCommandOutputState,
+  GlobFilesState,
+  GrepContentState,
+  KillCommandState,
   LocalFileListState,
   LocalFileSearchState,
   LocalMoveFilesState,
   LocalReadFileState,
   LocalReadFilesState,
   LocalRenameFileState,
+  RunCommandState,
 } from '@/tools/local-system/type';
 
+/* eslint-disable typescript-sort-keys/interface */
 export interface LocalFileAction {
   internal_triggerLocalFileToolCalling: <T = any>(
     id: string,
     callingService: () => Promise<{ content: any; state?: T }>,
   ) => Promise<boolean>;
 
+  // File Operations
   listLocalFiles: (id: string, params: ListLocalFileParams) => Promise<boolean>;
   moveLocalFiles: (id: string, params: MoveLocalFilesParams) => Promise<boolean>;
-  reSearchLocalFiles: (id: string, params: LocalSearchFilesParams) => Promise<boolean>;
   readLocalFile: (id: string, params: LocalReadFileParams) => Promise<boolean>;
   readLocalFiles: (id: string, params: LocalReadFilesParams) => Promise<boolean>;
   renameLocalFile: (id: string, params: RenameLocalFileParams) => Promise<boolean>;
-  // Added rename action
+  reSearchLocalFiles: (id: string, params: LocalSearchFilesParams) => Promise<boolean>;
   searchLocalFiles: (id: string, params: LocalSearchFilesParams) => Promise<boolean>;
   toggleLocalFileLoading: (id: string, loading: boolean) => void;
-
   writeLocalFile: (id: string, params: WriteLocalFileParams) => Promise<boolean>;
+
+  // Shell Commands
+  editLocalFile: (id: string, params: EditLocalFileParams) => Promise<boolean>;
+  getCommandOutput: (id: string, params: GetCommandOutputParams) => Promise<boolean>;
+  killCommand: (id: string, params: KillCommandParams) => Promise<boolean>;
+  runCommand: (id: string, params: RunCommandParams) => Promise<boolean>;
+
+  // Search & Find
+  globLocalFiles: (id: string, params: GlobFilesParams) => Promise<boolean>;
+  grepContent: (id: string, params: GrepContentParams) => Promise<boolean>;
 }
+/* eslint-enable typescript-sort-keys/interface */
 
-export const localFileSlice: StateCreator<
+/* eslint-disable sort-keys-fix/sort-keys-fix */
+export const localSystemSlice: StateCreator<
   ChatStore,
   [['zustand/devtools', never]],
   [],
   LocalFileAction
 > = (set, get) => ({
-  internal_triggerLocalFileToolCalling: async (id, callingService) => {
-    get().toggleLocalFileLoading(id, true);
-    try {
-      const { state, content } = await callingService();
-      if (state) {
-        await get().updatePluginState(id, state as any);
-      }
-      await get().internal_updateMessageContent(id, JSON.stringify(content));
-    } catch (error) {
-      await get().internal_updateMessagePluginError(id, {
-        body: error,
-        message: (error as Error).message,
-        type: 'PluginServerError',
-      });
-    }
-    get().toggleLocalFileLoading(id, false);
+  // ==================== File Editing ====================
+  editLocalFile: async (id, params) => {
+    return get().internal_triggerLocalFileToolCalling<EditLocalFileState>(id, async () => {
+      const result = await localFileService.editLocalFile(params);
 
-    return true;
-  },
+      const message = result.success
+        ? `Successfully replaced ${result.replacements} occurrence(s) in ${params.file_path}`
+        : `Edit failed: ${result.error}`;
+
+      const state: EditLocalFileState = { message, result };
 
-  listLocalFiles: async (id, params) => {
-    return get().internal_triggerLocalFileToolCalling<LocalFileListState>(id, async () => {
-      const result = await localFileService.listLocalFiles(params);
-      const state: LocalFileListState = { listResults: result };
       return { content: result, state };
     });
   },
 
+  writeLocalFile: async (id, params) => {
+    return get().internal_triggerLocalFileToolCalling(id, async () => {
+      const result = await localFileService.writeFile(params);
+
+      let content: { message: string; success: boolean };
+
+      if (result.success) {
+        content = {
+          message: `成功写入文件 ${params.path}`,
+          success: true,
+        };
+      } else {
+        const errorMessage = result.error;
+
+        content = { message: errorMessage || '写入文件失败', success: false };
+      }
+      return { content };
+    });
+  },
   moveLocalFiles: async (id, params) => {
     return get().internal_triggerLocalFileToolCalling<LocalMoveFilesState>(id, async () => {
       const results: LocalMoveFilesResultItem[] = await localFileService.moveLocalFiles(params);
@@ -100,31 +130,6 @@ export const localFileSlice: StateCreator<
       return { content: { message, results }, state };
     });
   },
-
-  reSearchLocalFiles: async (id, params) => {
-    get().toggleLocalFileLoading(id, true);
-
-    await get().updatePluginArguments(id, params);
-
-    return get().searchLocalFiles(id, params);
-  },
-
-  readLocalFile: async (id, params) => {
-    return get().internal_triggerLocalFileToolCalling<LocalReadFileState>(id, async () => {
-      const result = await localFileService.readLocalFile(params);
-      const state: LocalReadFileState = { fileContent: result };
-      return { content: result, state };
-    });
-  },
-
-  readLocalFiles: async (id, params) => {
-    return get().internal_triggerLocalFileToolCalling<LocalReadFilesState>(id, async () => {
-      const results = await localFileService.readLocalFiles(params);
-      const state: LocalReadFilesState = { filesContent: results };
-      return { content: results, state };
-    });
-  },
-
   renameLocalFile: async (id, params) => {
     return get().internal_triggerLocalFileToolCalling<LocalRenameFileState>(id, async () => {
       const { path: currentPath, newName } = params;
@@ -169,6 +174,33 @@ export const localFileSlice: StateCreator<
     });
   },
 
+  // ==================== Search & Find ====================
+  grepContent: async (id, params) => {
+    return get().internal_triggerLocalFileToolCalling<GrepContentState>(id, async () => {
+      const result = await localFileService.grepContent(params);
+
+      const message = result.success
+        ? `Found ${result.total_matches} matches in ${result.matches.length} locations`
+        : 'Search failed';
+
+      const state: GrepContentState = { message, result };
+
+      return { content: result, state };
+    });
+  },
+
+  globLocalFiles: async (id, params) => {
+    return get().internal_triggerLocalFileToolCalling<GlobFilesState>(id, async () => {
+      const result = await localFileService.globFiles(params);
+
+      const message = result.success ? `Found ${result.total_files} files` : 'Glob search failed';
+
+      const state: GlobFilesState = { message, result };
+
+      return { content: result, state };
+    });
+  },
+
   searchLocalFiles: async (id, params) => {
     return get().internal_triggerLocalFileToolCalling<LocalFileSearchState>(id, async () => {
       const result = await localFileService.searchLocalFiles(params);
@@ -177,6 +209,89 @@ export const localFileSlice: StateCreator<
     });
   },
 
+  listLocalFiles: async (id, params) => {
+    return get().internal_triggerLocalFileToolCalling<LocalFileListState>(id, async () => {
+      const result = await localFileService.listLocalFiles(params);
+      const state: LocalFileListState = { listResults: result };
+      return { content: result, state };
+    });
+  },
+
+  reSearchLocalFiles: async (id, params) => {
+    get().toggleLocalFileLoading(id, true);
+
+    await get().updatePluginArguments(id, params);
+
+    return get().searchLocalFiles(id, params);
+  },
+
+  readLocalFile: async (id, params) => {
+    return get().internal_triggerLocalFileToolCalling<LocalReadFileState>(id, async () => {
+      const result = await localFileService.readLocalFile(params);
+      const state: LocalReadFileState = { fileContent: result };
+      return { content: result, state };
+    });
+  },
+
+  readLocalFiles: async (id, params) => {
+    return get().internal_triggerLocalFileToolCalling<LocalReadFilesState>(id, async () => {
+      const results = await localFileService.readLocalFiles(params);
+      const state: LocalReadFilesState = { filesContent: results };
+      return { content: results, state };
+    });
+  },
+
+  // ==================== Shell Commands ====================
+  runCommand: async (id, params) => {
+    return get().internal_triggerLocalFileToolCalling<RunCommandState>(id, async () => {
+      const result = await localFileService.runCommand(params);
+
+      let message: string;
+
+      if (result.success) {
+        if (result.shell_id) {
+          message = `Command started in background with shell_id: ${result.shell_id}`;
+        } else {
+          message = `Command completed successfully. Exit code: ${result.exit_code}`;
+        }
+      } else {
+        message = `Command failed: ${result.error}`;
+      }
+
+      const state: RunCommandState = { message, result };
+
+      return { content: result, state };
+    });
+  },
+  killCommand: async (id, params) => {
+    return get().internal_triggerLocalFileToolCalling<KillCommandState>(id, async () => {
+      const result = await localFileService.killCommand(params);
+
+      const message = result.success
+        ? `Successfully killed shell: ${params.shell_id}`
+        : `Failed to kill shell: ${result.error}`;
+
+      const state: KillCommandState = { message, result };
+
+      return { content: result, state };
+    });
+  },
+  getCommandOutput: async (id, params) => {
+    return get().internal_triggerLocalFileToolCalling<GetCommandOutputState>(id, async () => {
+      const result = await localFileService.getCommandOutput(params);
+
+      const message = result.success
+        ? `Output retrieved. Running: ${result.running}`
+        : `Failed: ${result.error}`;
+
+      const state: GetCommandOutputState = { message, result };
+
+      return { content: result, state };
+    });
+  },
+
+  // ==================== utils ====================
+
   toggleLocalFileLoading: (id, loading) => {
     // Assuming a loading state structure similar to searchLoading
     set(
@@ -187,24 +302,23 @@ export const localFileSlice: StateCreator<
       `toggleLocalFileLoading/${loading ? 'start' : 'end'}`,
     );
   },
-
-  writeLocalFile: async (id, params) => {
-    return get().internal_triggerLocalFileToolCalling(id, async () => {
-      const result = await localFileService.writeFile(params);
-
-      let content: { message: string; success: boolean };
-
-      if (result.success) {
-        content = {
-          message: `成功写入文件 ${params.path}`,
-          success: true,
-        };
-      } else {
-        const errorMessage = result.error;
-
-        content = { message: errorMessage || '写入文件失败', success: false };
+  internal_triggerLocalFileToolCalling: async (id, callingService) => {
+    get().toggleLocalFileLoading(id, true);
+    try {
+      const { state, content } = await callingService();
+      if (state) {
+        await get().updatePluginState(id, state as any);
       }
-      return { content };
-    });
+      await get().internal_updateMessageContent(id, JSON.stringify(content));
+    } catch (error) {
+      await get().internal_updateMessagePluginError(id, {
+        body: error,
+        message: (error as Error).message,
+        type: 'PluginServerError',
+      });
+    }
+    get().toggleLocalFileLoading(id, false);
+
+    return true;
   },
 });

package/src/store/chatGroup/action.ts

@@ -98,14 +98,49 @@ export const chatGroupAction: StateCreator<
       return group.id;
     },
     deleteGroup: async (id) => {
+      // First, get all group members to identify virtual members
+      // Note: ChatGroupAgentItem type is incorrectly defined in schema as agents table type
+      // but getGroupAgents actually returns chatGroupsAgents junction table entries
+      const groupAgents = (await chatGroupService.getGroupAgents(id)) as unknown as Array<{
+        agentId: string;
+        chatGroupId: string;
+      }>;
+
+      // Delete the group first (this will cascade delete the chat_groups_agents entries)
       await chatGroupService.deleteGroup(id);
       dispatch({ payload: id, type: 'deleteGroup' });
 
+      // Now delete virtual members (agents with virtual: true)
+      const sessionStore = getSessionStoreState();
+      const sessions = sessionStore.sessions || [];
+
+      // Find and delete all virtual sessions that were members of this group
+      const virtualMemberDeletions = groupAgents
+        .map((groupAgent) => {
+          // groupAgent has agentId property from the junction table
+          const session = sessions.find((s) => {
+            // Type guard: check if it's an agent session
+            if (s.type === 'agent') {
+              return s.config?.id === groupAgent.agentId;
+            }
+            return false;
+          });
+
+          // Only delete if the session exists and has virtual flag set to true
+          if (session && session.type === 'agent' && session.config?.virtual) {
+            return sessionStore.removeSession(session.id);
+          }
+          return null;
+        })
+        .filter(Boolean);
+
+      // Wait for all virtual member deletions to complete
+      await Promise.all(virtualMemberDeletions);
+
       await get().loadGroups();
       await getSessionStoreState().refreshSessions();
 
       // If the active session is the deleted group, switch to the inbox session
-      const sessionStore = getSessionStoreState();
       if (sessionStore.activeId === id) {
         sessionStore.switchSession(INBOX_SESSION_ID);
       }

package/src/store/electron/selectors/__tests__/desktopState.test.ts

@@ -6,7 +6,7 @@ import { merge } from '@/utils/merge';
 import { desktopStateSelectors } from '../desktopState';
 
 describe('desktopStateSelectors', () => {
-  describe('usePath', () => {
+  describe('userPath', () => {
     it('should return userPath from appState', () => {
       const state: ElectronState = merge(initialState, {
         appState: {
@@ -23,7 +23,7 @@ describe('desktopStateSelectors', () => {
         },
       });
 
-      expect(desktopStateSelectors.usePath(state)).toEqual({
+      expect(desktopStateSelectors.userPath(state)).toEqual({
         desktop: '/test/desktop',
         documents: '/test/documents',
         downloads: '/test/downloads',
@@ -40,7 +40,7 @@ describe('desktopStateSelectors', () => {
         appState: {},
       });
 
-      expect(desktopStateSelectors.usePath(state)).toBeUndefined();
+      expect(desktopStateSelectors.userPath(state)).toBeUndefined();
     });
   });
 });

package/src/store/electron/selectors/desktopState.ts

@@ -1,7 +1,16 @@
 import { ElectronState } from '@/store/electron/initialState';
 
-const usePath = (s: ElectronState) => s.appState.userPath;
+const userPath = (s: ElectronState) => s.appState.userPath;
+const userHomePath = (s: ElectronState) => userPath(s)?.home || '';
+
+const displayRelativePath = (path: string) => (s: ElectronState) => {
+  const basePath = userHomePath(s);
+
+  return !!basePath ? path.replaceAll(basePath, '~') : path;
+};
 
 export const desktopStateSelectors = {
-  usePath,
+  displayRelativePath,
+  userHomePath,
+  userPath,
 };

package/src/store/user/slices/settings/selectors/__snapshots__/settings.test.ts.snap

@@ -59,10 +59,6 @@ exports[`settingsSelectors > currentSystemAgent > should merge DEFAULT_SYSTEM_AG
     "model": "gpt-5-mini",
     "provider": "openai",
   },
-  "groupChatSupervisor": {
-    "model": "gpt-5-mini",
-    "provider": "openai",
-  },
   "historyCompress": {
     "model": "gpt-5-mini",
     "provider": "openai",

package/src/store/user/slices/settings/selectors/systemAgent.ts

@@ -14,12 +14,10 @@ const agentMeta = (s: UserStore) => currentSystemAgent(s).agentMeta;
 const queryRewrite = (s: UserStore) => currentSystemAgent(s).queryRewrite;
 const historyCompress = (s: UserStore) => currentSystemAgent(s).historyCompress;
 const generationTopic = (s: UserStore) => currentSystemAgent(s).generationTopic;
-const groupChatSupervisor = (s: UserStore) => currentSystemAgent(s).groupChatSupervisor;
 
 export const systemAgentSelectors = {
   agentMeta,
   generationTopic,
-  groupChatSupervisor,
   historyCompress,
   queryRewrite,
   thread,

package/src/tools/local-system/Placeholder/ListFiles.tsx

@@ -1,7 +1,7 @@
 import { ListLocalFileParams } from '@lobechat/electron-client-ipc';
 import { Skeleton } from 'antd';
 import React, { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { Center, Flexbox } from 'react-layout-kit';
 
 import { LocalFolder } from '@/features/LocalFile';
 
@@ -10,14 +10,16 @@ interface ListFilesProps {
 }
 export const ListFiles = memo<ListFilesProps>(({ args }) => {
   return (
-    <Flexbox gap={8}>
+    <Flexbox gap={12}>
       <LocalFolder path={args.path} />
-      <Flexbox gap={4}>
-        <Skeleton.Button active block style={{ height: 16 }} />
-        <Skeleton.Button active block style={{ height: 16 }} />
-        <Skeleton.Button active block style={{ height: 16 }} />
-        <Skeleton.Button active block style={{ height: 16 }} />
-      </Flexbox>
+      <Center height={140}>
+        <Flexbox gap={4} width={'90%'}>
+          <Skeleton.Button active block style={{ height: 16 }} />
+          <Skeleton.Button active block style={{ height: 16 }} />
+          <Skeleton.Button active block style={{ height: 16 }} />
+          <Skeleton.Button active block style={{ height: 16 }} />
+        </Flexbox>
+      </Center>
     </Flexbox>
   );
 });

package/src/tools/local-system/Placeholder/SearchFiles.tsx

@@ -3,8 +3,8 @@ import { Icon } from '@lobehub/ui';
 import { Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
 import { SearchIcon } from 'lucide-react';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import React, { memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
 
 const useStyles = createStyles(({ css, token, cx }) => ({
   query: cx(css`
@@ -29,8 +29,8 @@ const SearchFiles = memo<SearchFilesProps>(({ args }) => {
   const { styles } = useStyles();
 
   return (
-    <Flexbox gap={8}>
-      <Flexbox align={'center'} distribution={'space-between'} gap={40} height={32} horizontal>
+    <Flexbox gap={4}>
+      <Flexbox align={'center'} distribution={'space-between'} gap={40} height={26} horizontal>
         <Flexbox align={'center'} className={styles.query} gap={8} horizontal>
           <Icon icon={SearchIcon} />
           {args.keywords ? (
@@ -42,12 +42,14 @@ const SearchFiles = memo<SearchFilesProps>(({ args }) => {
 
         <Skeleton.Node active style={{ height: 20, width: 40 }} />
       </Flexbox>
-      <Flexbox gap={4}>
-        <Skeleton.Button active block style={{ height: 16 }} />
-        <Skeleton.Button active block style={{ height: 16 }} />
-        <Skeleton.Button active block style={{ height: 16 }} />
-        <Skeleton.Button active block style={{ height: 16 }} />
-      </Flexbox>
+      <Center height={140}>
+        <Flexbox gap={4} width={'90%'}>
+          <Skeleton.Button active block style={{ height: 16 }} />
+          <Skeleton.Button active block style={{ height: 16 }} />
+          <Skeleton.Button active block style={{ height: 16 }} />
+          <Skeleton.Button active block style={{ height: 16 }} />
+        </Flexbox>
+      </Center>
     </Flexbox>
   );
 });

package/src/tools/local-system/Placeholder/index.tsx

@@ -3,8 +3,8 @@ import { memo } from 'react';
 
 import { LocalSystemApiName } from '@/tools/local-system';
 
+import ReadLocalFile from '../Render/ReadLocalFile/ReadFileSkeleton';
 import { ListFiles } from './ListFiles';
-import ReadLocalFile from './ReadLocalFile';
 import SearchFiles from './SearchFiles';
 
 const RenderMap = {

package/src/tools/local-system/Render/ReadLocalFile/ReadFileSkeleton.tsx

@@ -9,40 +9,30 @@ const useStyles = createStyles(({ css, token }) => ({
     border: 1px solid ${token.colorBorderSecondary};
     border-radius: ${token.borderRadiusLG}px;
   `,
-  header: css`
-    margin-block-end: 4px;
-  `,
+
   meta: css`
     font-size: 12px;
   `,
-  path: css`
-    margin-block-start: 4px;
-  `,
 }));
 
 const ReadFileSkeleton = memo(() => {
   const { styles } = useStyles();
 
   return (
-    <Flexbox className={styles.container}>
-      <Flexbox
-        align={'center'}
-        className={styles.header}
-        gap={24}
-        horizontal
-        justify={'space-between'}
-      >
+    <Flexbox className={styles.container} gap={2}>
+      <Flexbox align={'center'} gap={24} horizontal justify={'space-between'}>
         <Flexbox align={'center'} flex={1} gap={8} horizontal style={{ overflow: 'hidden' }}>
-          <Skeleton.Avatar active shape="square" size={24} style={{ borderRadius: 4 }} />
-          <Skeleton.Input active size="small" style={{ flex: 1, minWidth: 100 }} />
+          <Skeleton.Node active style={{ flex: 1, height: 16, width: 20 }} />
+
+          <Skeleton.Node active style={{ flex: 1, height: 16, minWidth: 100 }} />
         </Flexbox>
         <Flexbox align={'center'} className={styles.meta} gap={16}>
-          <Skeleton.Input active size="small" style={{ maxWidth: 40 }} />
+          <Skeleton.Node active style={{ height: 16, maxWidth: 40 }} />
         </Flexbox>
       </Flexbox>
 
       {/* Path */}
-      <Skeleton.Input active block className={styles.path} size="small" />
+      <Skeleton.Node active style={{ height: 16, width: '100%' }} />
     </Flexbox>
   );
 });

package/src/tools/local-system/Render/ReadLocalFile/ReadFileView.tsx

@@ -8,6 +8,8 @@ import { Flexbox } from 'react-layout-kit';
 
 import FileIcon from '@/components/FileIcon';
 import { localFileService } from '@/services/electron/localFileService';
+import { useElectronStore } from '@/store/electron';
+import { desktopStateSelectors } from '@/store/electron/selectors';
 
 const useStyles = createStyles(({ css, token, cx }) => ({
   actions: cx(
@@ -20,11 +22,19 @@ const useStyles = createStyles(({ css, token, cx }) => ({
     `,
   ),
   container: css`
+    justify-content: space-between;
+
+    height: 64px;
     padding: 8px;
     border: 1px solid ${token.colorBorderSecondary};
     border-radius: ${token.borderRadiusLG}px;
+
     transition: all 0.2s ${token.motionEaseInOut};
 
+    .local-file-actions {
+      opacity: 0;
+    }
+
     &:hover {
       border-color: ${token.colorBorder};
 
@@ -48,10 +58,13 @@ const useStyles = createStyles(({ css, token, cx }) => ({
   lineCount: css`
     color: ${token.colorTextQuaternary};
   `,
-  meta: css`
-    font-size: 12px;
-    color: ${token.colorTextTertiary};
-  `,
+  meta: cx(
+    'local-file-actions',
+    css`
+      font-size: 12px;
+      color: ${token.colorTextTertiary};
+    `,
+  ),
   path: css`
     margin-block-start: 4px;
     padding-inline: 4px;
@@ -104,6 +117,8 @@ const ReadFileView = memo<ReadFileViewProps>(
       localFileService.openLocalFolder({ isDirectory: false, path });
     };
 
+    const displayPath = useElectronStore(desktopStateSelectors.displayRelativePath(path));
+
     return (
       <Flexbox className={styles.container}>
         <Flexbox
@@ -115,7 +130,7 @@ const ReadFileView = memo<ReadFileViewProps>(
           onClick={handleToggleExpand}
         >
           <Flexbox align={'center'} flex={1} gap={0} horizontal style={{ overflow: 'hidden' }}>
-            <FileIcon fileName={filename} fileType={fileType} size={24} variant={'raw'} />
+            <FileIcon fileName={filename} fileType={fileType} size={16} variant={'raw'} />
             <Flexbox horizontal>
               <Text className={styles.fileName} ellipsis>
                 {filename}
@@ -174,7 +189,7 @@ const ReadFileView = memo<ReadFileViewProps>(
 
         {/* Path */}
         <Text className={styles.path} ellipsis type={'secondary'}>
-          {path}
+          {displayPath}
         </Text>
 
         {isExpanded && (