@lobehub/lobehub 2.0.0-next.187 → 2.0.0-next.188

package/packages/builtin-tool-local-system/src/client/Inspector/GrepContent/index.tsx

@@ -2,8 +2,8 @@
 
 import { type GrepContentParams } from '@lobechat/electron-client-ipc';
 import { type BuiltinInspectorProps } from '@lobechat/types';
+import { Text } from '@lobehub/ui';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
-import { Check, X } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -20,10 +20,6 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 
     color: ${cssVar.colorTextSecondary};
   `,
-  statusIcon: css`
-    margin-block-end: -2px;
-    margin-inline-start: 4px;
-  `,
 }));
 
 export const GrepContentInspector = memo<
@@ -50,22 +46,28 @@ export const GrepContentInspector = memo<
     );
   }
 
-  // Check if grep was successful
-  const isSuccess = pluginState?.result?.success;
+  // Check result count
+  const resultCount = pluginState?.result?.total_matches ?? 0;
+  const hasResults = resultCount > 0;
 
   return (
     <div className={cx(styles.root, isLoading && shinyTextStyles.shinyText)}>
-      <span style={{ marginInlineStart: 2 }}>
-        <span>{t('builtins.lobe-local-system.apiName.grepContent')}: </span>
-        {pattern && <span className={highlightTextStyles.primary}>{pattern}</span>}
-        {isLoading ? null : pluginState?.result ? (
-          isSuccess ? (
-            <Check className={styles.statusIcon} color={cssVar.colorSuccess} size={14} />
-          ) : (
-            <X className={styles.statusIcon} color={cssVar.colorError} size={14} />
-          )
-        ) : null}
-      </span>
+      <span>{t('builtins.lobe-local-system.apiName.grepContent')}: </span>
+      {pattern && <span className={highlightTextStyles.primary}>{pattern}</span>}
+      {!isLoading &&
+        pluginState?.result &&
+        (hasResults ? (
+          <span style={{ marginInlineStart: 4 }}>({resultCount})</span>
+        ) : (
+          <Text
+            as={'span'}
+            color={cssVar.colorTextDescription}
+            fontSize={12}
+            style={{ marginInlineStart: 4 }}
+          >
+            ({t('builtins.lobe-local-system.inspector.noResults')})
+          </Text>
+        ))}
     </div>
   );
 });

package/packages/builtin-tool-local-system/src/client/Inspector/ListLocalFiles/index.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { type ListLocalFileParams } from '@lobechat/electron-client-ipc';
+import { type BuiltinInspectorProps } from '@lobechat/types';
+import { Text } from '@lobehub/ui';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { shinyTextStyles } from '@/styles';
+
+import { type LocalFileListState } from '../../..';
+import { FilePathDisplay } from '../../components/FilePathDisplay';
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  root: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    color: ${cssVar.colorTextSecondary};
+  `,
+}));
+
+export const ListLocalFilesInspector = memo<
+  BuiltinInspectorProps<ListLocalFileParams, LocalFileListState>
+>(({ args, partialArgs, isArgumentsStreaming, pluginState, isLoading }) => {
+  const { t } = useTranslation('plugin');
+
+  const path = args?.path || partialArgs?.path || '';
+
+  // During argument streaming
+  if (isArgumentsStreaming) {
+    if (!path)
+      return (
+        <div className={cx(styles.root, shinyTextStyles.shinyText)}>
+          <span>{t('builtins.lobe-local-system.apiName.listLocalFiles')}</span>
+        </div>
+      );
+
+    return (
+      <div className={cx(styles.root, shinyTextStyles.shinyText)}>
+        <span>{t('builtins.lobe-local-system.apiName.listLocalFiles')}: </span>
+        <FilePathDisplay filePath={path} isDirectory />
+      </div>
+    );
+  }
+
+  // Show result count if available
+  const resultCount = pluginState?.listResults?.length ?? 0;
+  const hasResults = resultCount > 0;
+
+  return (
+    <div className={cx(styles.root, isLoading && shinyTextStyles.shinyText)}>
+      <span>{t('builtins.lobe-local-system.apiName.listLocalFiles')}: </span>
+      <FilePathDisplay filePath={path} isDirectory />
+      {!isLoading &&
+        pluginState?.listResults &&
+        (hasResults ? (
+          <span style={{ marginInlineStart: 4 }}>({resultCount})</span>
+        ) : (
+          <Text
+            as={'span'}
+            color={cssVar.colorTextDescription}
+            fontSize={12}
+            style={{ marginInlineStart: 4 }}
+          >
+            ({t('builtins.lobe-local-system.inspector.noResults')})
+          </Text>
+        ))}
+    </div>
+  );
+});
+
+ListLocalFilesInspector.displayName = 'ListLocalFilesInspector';

package/packages/builtin-tool-local-system/src/client/Inspector/ReadLocalFile/index.tsx

@@ -2,15 +2,14 @@
 
 import { type LocalReadFileParams } from '@lobechat/electron-client-ipc';
 import { type BuiltinInspectorProps } from '@lobechat/types';
-import { createStaticStyles, cssVar, cx } from 'antd-style';
-import { Check, X } from 'lucide-react';
-import path from 'path-browserify-esm';
+import { createStaticStyles, cx } from 'antd-style';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { highlightTextStyles, shinyTextStyles } from '@/styles';
+import { shinyTextStyles } from '@/styles';
 
 import { type LocalReadFileState } from '../../..';
+import { FilePathDisplay } from '../../components/FilePathDisplay';
 
 const styles = createStaticStyles(({ css, cssVar }) => ({
   root: css`
@@ -21,29 +20,18 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 
     color: ${cssVar.colorTextSecondary};
   `,
-  statusIcon: css`
-    margin-block-end: -2px;
-    margin-inline-start: 4px;
-  `,
 }));
 
 export const ReadLocalFileInspector = memo<
   BuiltinInspectorProps<LocalReadFileParams, LocalReadFileState>
->(({ args, partialArgs, isArgumentsStreaming, pluginState, isLoading }) => {
+>(({ args, partialArgs, isArgumentsStreaming, isLoading }) => {
   const { t } = useTranslation('plugin');
 
-  // Show filename with parent directory for context
   const filePath = args?.path || partialArgs?.path || '';
-  let displayPath = '';
-  if (filePath) {
-    const { base, dir } = path.parse(filePath);
-    const parentDir = path.basename(dir);
-    displayPath = parentDir ? `${parentDir}/${base}` : base;
-  }
 
   // During argument streaming
   if (isArgumentsStreaming) {
-    if (!displayPath)
+    if (!filePath)
       return (
         <div className={cx(styles.root, shinyTextStyles.shinyText)}>
           <span>{t('builtins.lobe-local-system.apiName.readLocalFile')}</span>
@@ -53,27 +41,15 @@ export const ReadLocalFileInspector = memo<
     return (
       <div className={cx(styles.root, shinyTextStyles.shinyText)}>
         <span>{t('builtins.lobe-local-system.apiName.readLocalFile')}: </span>
-        <span className={highlightTextStyles.primary}>{displayPath}</span>
+        <FilePathDisplay filePath={filePath} />
       </div>
     );
   }
 
-  // Check if file was read successfully (has content)
-  const hasContent = !!pluginState?.fileContent;
-
   return (
     <div className={cx(styles.root, isLoading && shinyTextStyles.shinyText)}>
-      <span style={{ marginInlineStart: 2 }}>
-        <span>{t('builtins.lobe-local-system.apiName.readLocalFile')}: </span>
-        {displayPath && <span className={highlightTextStyles.primary}>{displayPath}</span>}
-        {isLoading ? null : pluginState ? (
-          hasContent ? (
-            <Check className={styles.statusIcon} color={cssVar.colorSuccess} size={14} />
-          ) : (
-            <X className={styles.statusIcon} color={cssVar.colorError} size={14} />
-          )
-        ) : null}
-      </span>
+      <span>{t('builtins.lobe-local-system.apiName.readLocalFile')}: </span>
+      <FilePathDisplay filePath={filePath} />
     </div>
   );
 });

package/packages/builtin-tool-local-system/src/client/Inspector/RenameLocalFile/index.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { type RenameLocalFileParams } from '@lobechat/electron-client-ipc';
+import { type BuiltinInspectorProps } from '@lobechat/types';
+import { MaterialFileTypeIcon } from '@lobehub/ui';
+import { createStaticStyles, cx } from 'antd-style';
+import path from 'path-browserify-esm';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { highlightTextStyles, shinyTextStyles } from '@/styles';
+
+import { type LocalRenameFileState } from '../../..';
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  icon: css`
+    flex-shrink: 0;
+    margin-inline-end: 4px;
+  `,
+  root: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    color: ${cssVar.colorTextSecondary};
+  `,
+}));
+
+export const RenameLocalFileInspector = memo<
+  BuiltinInspectorProps<RenameLocalFileParams, LocalRenameFileState>
+>(({ args, partialArgs, isArgumentsStreaming }) => {
+  const { t } = useTranslation('plugin');
+
+  const filePath = args?.path || partialArgs?.path || '';
+  const newName = args?.newName || partialArgs?.newName || '';
+
+  // Get the old filename from path
+  const oldName = filePath ? path.basename(filePath) : '';
+
+  return (
+    <div className={cx(styles.root, isArgumentsStreaming && shinyTextStyles.shinyText)}>
+      {oldName && newName ? (
+        <>
+          {t('builtins.lobe-local-system.apiName.renameLocalFile')} {oldName} →{' '}
+          <MaterialFileTypeIcon
+            className={styles.icon}
+            filename={newName}
+            size={16}
+            type={'file'}
+            variant={'raw'}
+          />
+          <span className={highlightTextStyles.primary}>{newName}</span>
+        </>
+      ) : (
+        <span>{t('builtins.lobe-local-system.apiName.renameLocalFile')}</span>
+      )}
+    </div>
+  );
+});
+
+RenameLocalFileInspector.displayName = 'RenameLocalFileInspector';

package/packages/builtin-tool-local-system/src/client/Inspector/SearchLocalFiles/index.tsx

@@ -2,8 +2,8 @@
 
 import { type LocalSearchFilesParams } from '@lobechat/electron-client-ipc';
 import { type BuiltinInspectorProps } from '@lobechat/types';
+import { Text } from '@lobehub/ui';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
-import { Check } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -20,10 +20,6 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 
     color: ${cssVar.colorTextSecondary};
   `,
-  statusIcon: css`
-    margin-block-end: -2px;
-    margin-inline-start: 4px;
-  `,
 }));
 
 export const SearchLocalFilesInspector = memo<
@@ -51,18 +47,28 @@ export const SearchLocalFilesInspector = memo<
   }
 
   // Check if search returned results
-  const hasResults = pluginState?.searchResults && pluginState.searchResults.length >= 0;
+  const resultCount = pluginState?.searchResults?.length ?? 0;
+  const hasResults = resultCount > 0;
 
   return (
     <div className={cx(styles.root, isLoading && shinyTextStyles.shinyText)}>
       <span style={{ marginInlineStart: 2 }}>
         <span>{t('builtins.lobe-local-system.apiName.searchLocalFiles')}: </span>
         {keywords && <span className={highlightTextStyles.primary}>{keywords}</span>}
-        {isLoading ? null : pluginState?.searchResults ? (
-          hasResults ? (
-            <Check className={styles.statusIcon} color={cssVar.colorSuccess} size={14} />
-          ) : null
-        ) : null}
+        {!isLoading &&
+          pluginState?.searchResults &&
+          (hasResults ? (
+            <span style={{ marginInlineStart: 4 }}>({resultCount})</span>
+          ) : (
+            <Text
+              as={'span'}
+              color={cssVar.colorTextDescription}
+              fontSize={12}
+              style={{ marginInlineStart: 4 }}
+            >
+              ({t('builtins.lobe-local-system.inspector.noResults')})
+            </Text>
+          ))}
       </span>
     </div>
   );

package/packages/builtin-tool-local-system/src/client/Inspector/WriteLocalFile/index.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { type WriteLocalFileParams } from '@lobechat/electron-client-ipc';
+import { type BuiltinInspectorProps } from '@lobechat/types';
+import { Icon, Text } from '@lobehub/ui';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
+import { Plus } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { shinyTextStyles } from '@/styles';
+
+import { FilePathDisplay } from '../../components/FilePathDisplay';
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  root: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    color: ${cssVar.colorTextSecondary};
+  `,
+}));
+
+export const WriteLocalFileInspector = memo<BuiltinInspectorProps<WriteLocalFileParams>>(
+  ({ args, partialArgs, isArgumentsStreaming }) => {
+    const { t } = useTranslation('plugin');
+
+    const filePath = args?.path || partialArgs?.path || '';
+    const content = args?.content || partialArgs?.content || '';
+
+    // Calculate lines from content
+    const lines = content ? content.split('\n').length : 0;
+
+    // During argument streaming without path
+    if (isArgumentsStreaming && !filePath) {
+      return (
+        <div className={cx(styles.root, shinyTextStyles.shinyText)}>
+          <span>{t('builtins.lobe-local-system.apiName.writeLocalFile')}</span>
+        </div>
+      );
+    }
+
+    return (
+      <div className={cx(styles.root, isArgumentsStreaming && shinyTextStyles.shinyText)}>
+        <span>{t('builtins.lobe-local-system.apiName.writeLocalFile')}: </span>
+        <FilePathDisplay filePath={filePath} />
+        {lines > 0 && (
+          <Text as={'span'} code color={cssVar.colorSuccess} fontSize={12}>
+            {' '}
+            <Icon icon={Plus} size={12} />
+            {lines}
+          </Text>
+        )}
+      </div>
+    );
+  },
+);
+
+WriteLocalFileInspector.displayName = 'WriteLocalFileInspector';

package/packages/builtin-tool-local-system/src/client/Inspector/index.ts

@@ -2,9 +2,12 @@ import { LocalSystemApiName } from '../..';
 import { EditLocalFileInspector } from './EditLocalFile';
 import { GlobLocalFilesInspector } from './GlobLocalFiles';
 import { GrepContentInspector } from './GrepContent';
+import { ListLocalFilesInspector } from './ListLocalFiles';
 import { ReadLocalFileInspector } from './ReadLocalFile';
+import { RenameLocalFileInspector } from './RenameLocalFile';
 import { RunCommandInspector } from './RunCommand';
 import { SearchLocalFilesInspector } from './SearchLocalFiles';
+import { WriteLocalFileInspector } from './WriteLocalFile';
 
 /**
  * Local System Inspector Components Registry
@@ -13,7 +16,10 @@ export const LocalSystemInspectors = {
   [LocalSystemApiName.editLocalFile]: EditLocalFileInspector,
   [LocalSystemApiName.globLocalFiles]: GlobLocalFilesInspector,
   [LocalSystemApiName.grepContent]: GrepContentInspector,
+  [LocalSystemApiName.listLocalFiles]: ListLocalFilesInspector,
   [LocalSystemApiName.readLocalFile]: ReadLocalFileInspector,
+  [LocalSystemApiName.renameLocalFile]: RenameLocalFileInspector,
   [LocalSystemApiName.runCommand]: RunCommandInspector,
   [LocalSystemApiName.searchLocalFiles]: SearchLocalFilesInspector,
+  [LocalSystemApiName.writeLocalFile]: WriteLocalFileInspector,
 };

package/packages/builtin-tool-local-system/src/client/Render/EditLocalFile/index.tsx

@@ -50,7 +50,12 @@ const EditLocalFile = memo<BuiltinRenderProps<EditLocalFileParams, EditLocalFile
           <Flexbox data-theme={isDarkMode ? 'dark' : 'light'} gap={12}>
             {files.map((file, index) => (
               <div key={`${file.oldPath}-${index}`} style={{ fontSize: '12px' }}>
-                <Diff diffType={file.type} gutterType="default" hunks={file.hunks} viewType="split">
+                <Diff
+                  diffType={file.type}
+                  gutterType="default"
+                  hunks={file.hunks}
+                  viewType="unified"
+                >
                   {(hunks) => hunks.map((hunk) => <Hunk hunk={hunk} key={hunk.content} />)}
                 </Diff>
               </div>

package/packages/builtin-tool-local-system/src/client/Render/SearchFiles/SearchQuery/SearchView.tsx

@@ -12,52 +12,40 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     color: ${cssVar.colorTextTertiary};
   `,
   query: css`
-    cursor: pointer;
-
     padding-block: 4px;
     padding-inline: 8px;
     border-radius: 8px;
 
     font-size: 12px;
     color: ${cssVar.colorTextSecondary};
-
-    &:hover {
-      background: ${cssVar.colorFillTertiary};
-    }
   `,
 }));
 
 interface SearchBarProps {
   defaultQuery: string;
-  onEditingChange: (editing: boolean) => void;
   resultsNumber: number;
   searching?: boolean;
 }
 
-const SearchBar = memo<SearchBarProps>(
-  ({ defaultQuery, resultsNumber, onEditingChange, searching }) => {
-    const { t } = useTranslation('tool');
-    return (
-      <Flexbox align={'center'} distribution={'space-between'} gap={40} height={26} horizontal>
-        <Flexbox
-          align={'center'}
-          className={cx(styles.query, searching && shinyTextStyles.shinyText)}
-          gap={8}
-          horizontal
-          onClick={() => {
-            onEditingChange(true);
-          }}
-        >
-          <Icon icon={SearchIcon} />
-          {defaultQuery}
-        </Flexbox>
+const SearchBar = memo<SearchBarProps>(({ defaultQuery, resultsNumber, searching }) => {
+  const { t } = useTranslation('tool');
+  return (
+    <Flexbox align={'center'} distribution={'space-between'} gap={40} height={26} horizontal>
+      <Flexbox
+        align={'center'}
+        className={cx(styles.query, searching && shinyTextStyles.shinyText)}
+        gap={8}
+        horizontal
+      >
+        <Icon icon={SearchIcon} />
+        {defaultQuery}
+      </Flexbox>
 
-        <Flexbox align={'center'} className={styles.font} horizontal>
-          <div>{t('search.searchResult')}</div>
-          {resultsNumber}
-        </Flexbox>
+      <Flexbox align={'center'} className={styles.font} horizontal>
+        <div>{t('search.searchResult')}</div>
+        {resultsNumber}
       </Flexbox>
-    );
-  },
-);
+    </Flexbox>
+  );
+});
 export default SearchBar;

package/packages/builtin-tool-local-system/src/client/Render/SearchFiles/SearchQuery/index.tsx

@@ -1,9 +1,6 @@
 import type { LocalFileSearchState } from '@lobechat/builtin-tool-local-system';
 import { type LocalSearchFilesParams } from '@lobechat/electron-client-ipc';
-import { ActionIcon, Button, Flexbox, Icon, SearchBar } from '@lobehub/ui';
-import { SearchIcon, XIcon } from 'lucide-react';
-import { memo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { memo } from 'react';
 
 import { useChatStore } from '@/store/chat';
 import { chatToolSelectors } from '@/store/chat/selectors';
@@ -17,49 +14,12 @@ interface SearchQueryViewProps {
 }
 
 const SearchQueryView = memo<SearchQueryViewProps>(({ messageId, args, pluginState }) => {
-  const { t } = useTranslation('tool');
   const loading = useChatStore(chatToolSelectors.isSearchingLocalFiles(messageId));
-  const reSearchLocalFiles = useChatStore((s) => s.reSearchLocalFiles);
   const searchResults = pluginState?.searchResults || [];
 
-  const [editing, setEditing] = useState(false);
-  const [query, setQuery] = useState(args.keywords);
-
-  const updateAndSearch = async () => {
-    const data: LocalSearchFilesParams = { keywords: query };
-
-    await reSearchLocalFiles(messageId, data);
-  };
-
-  return editing ? (
-    <Flexbox align={'center'} flex={1} gap={8} height={32} horizontal>
-      <Flexbox gap={8}>
-        <SearchBar
-          autoFocus
-          onChange={(e) => {
-            setQuery(e.target.value);
-          }}
-          onSearch={updateAndSearch}
-          placeholder={t('search.searchBar.placeholder')}
-          style={{ minWidth: 400 }}
-          value={query}
-          variant={'filled'}
-        />
-        <Button
-          icon={<Icon icon={SearchIcon} />}
-          loading={loading}
-          onClick={updateAndSearch}
-          type={'primary'}
-        >
-          {t('search.searchBar.button')}
-        </Button>
-      </Flexbox>
-      <ActionIcon icon={XIcon} onClick={() => setEditing(false)} />
-    </Flexbox>
-  ) : (
+  return (
     <SearchView
       defaultQuery={args?.keywords}
-      onEditingChange={setEditing}
       resultsNumber={searchResults.length}
       searching={loading || !pluginState}
     />

package/packages/builtin-tool-local-system/src/client/Render/index.ts

@@ -3,7 +3,6 @@ import EditLocalFile from './EditLocalFile';
 import ListFiles from './ListFiles';
 import MoveLocalFiles from './MoveLocalFiles';
 import ReadLocalFile from './ReadLocalFile';
-import RenameLocalFile from './RenameLocalFile';
 import RunCommand from './RunCommand';
 import SearchFiles from './SearchFiles';
 import WriteFile from './WriteFile';
@@ -16,7 +15,6 @@ export const LocalSystemRenders = {
   [LocalSystemApiName.listLocalFiles]: ListFiles,
   [LocalSystemApiName.moveLocalFiles]: MoveLocalFiles,
   [LocalSystemApiName.readLocalFile]: ReadLocalFile,
-  [LocalSystemApiName.renameLocalFile]: RenameLocalFile,
   [LocalSystemApiName.runCommand]: RunCommand,
   [LocalSystemApiName.searchLocalFiles]: SearchFiles,
   [LocalSystemApiName.writeLocalFile]: WriteFile,

package/packages/builtin-tool-local-system/src/client/components/FilePathDisplay.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { MaterialFileTypeIcon } from '@lobehub/ui';
+import { createStaticStyles, cssVar } from 'antd-style';
+import path from 'path-browserify-esm';
+import { memo, useMemo } from 'react';
+
+const styles = createStaticStyles(({ css }) => ({
+  icon: css`
+    flex-shrink: 0;
+    margin-inline-end: 4px;
+  `,
+  text: css`
+    color: ${cssVar.colorText};
+  `,
+}));
+
+interface FilePathDisplayProps {
+  filePath: string;
+  isDirectory?: boolean;
+}
+
+/**
+ * Reusable component for displaying file/folder icon + path in LocalSystem inspectors
+ * Used by Read, Write, Edit, Delete, Rename, List inspectors
+ */
+export const FilePathDisplay = memo<FilePathDisplayProps>(({ filePath, isDirectory }) => {
+  const { displayPath, name } = useMemo(() => {
+    if (!filePath) return { displayPath: '', name: '' };
+    const { base, dir } = path.parse(filePath);
+    const parentDir = path.basename(dir);
+    return {
+      displayPath: parentDir ? `${parentDir}/${base}` : base,
+      name: base,
+    };
+  }, [filePath]);
+
+  if (!filePath) return null;
+
+  return (
+    <>
+      {name && (
+        <MaterialFileTypeIcon
+          className={styles.icon}
+          filename={name}
+          size={16}
+          type={isDirectory ? 'folder' : 'file'}
+          variant={'raw'}
+        />
+      )}
+      {displayPath && <span className={styles.text}>{displayPath}</span>}
+    </>
+  );
+});
+
+FilePathDisplay.displayName = 'FilePathDisplay';

package/packages/builtin-tool-local-system/src/client/components/index.ts

@@ -0,0 +1,2 @@
+export { default as FileItem } from './FileItem';
+export { FilePathDisplay } from './FilePathDisplay';