From a8b135b4892451f7faaea412b30a4d5772ae924b Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Mon, 30 Mar 2026 12:03:23 +0800
Subject: [PATCH] web-ui: nav, file viewer, flow chat tools, file explorer

- Nav panel, sessions, workspace item styling

- File viewer nav, files panel, Markdown styles

- Skill/task tool cards; remove SkillDisplay.scss

- File explorer getNewItemParentPath; i18n updates
---
 .../src/app/components/NavPanel/NavPanel.scss |  12 +-
 .../sections/sessions/SessionsSection.scss    |   3 +-
 .../sections/workspaces/WorkspaceItem.tsx     |   4 +-
 .../src/app/components/panels/FilesPanel.tsx  |  53 ++++++-
 .../app/scenes/file-viewer/FileViewerNav.scss |   1 +
 .../app/scenes/file-viewer/FileViewerNav.tsx  |  38 ++++-
 .../components/Markdown/Markdown.scss         |   2 +-
 .../flow_chat/tool-cards/SkillDisplay.scss    |  50 -------
 .../src/flow_chat/tool-cards/SkillDisplay.tsx | 135 ++++++++++--------
 .../flow_chat/tool-cards/TaskToolDisplay.scss |   5 +-
 src/web-ui/src/locales/en-US/common.json      |   2 -
 src/web-ui/src/locales/en-US/flow-chat.json   |   4 +-
 src/web-ui/src/locales/zh-CN/common.json      |  22 ++-
 src/web-ui/src/locales/zh-CN/flow-chat.json   |   4 +-
 .../file-system/components/FileExplorer.tsx   |  64 ++-------
 src/web-ui/src/tools/file-system/index.ts     |   3 +
 .../src/tools/file-system/types/index.ts      |  10 ++
 .../file-system/utils/getNewItemParentPath.ts |  59 ++++++++
 18 files changed, 277 insertions(+), 194 deletions(-)
 delete mode 100644 src/web-ui/src/flow_chat/tool-cards/SkillDisplay.scss
 create mode 100644 src/web-ui/src/tools/file-system/utils/getNewItemParentPath.ts

diff --git a/src/web-ui/src/app/components/NavPanel/NavPanel.scss b/src/web-ui/src/app/components/NavPanel/NavPanel.scss
index 0b366f4c..119d0968 100644
--- a/src/web-ui/src/app/components/NavPanel/NavPanel.scss
+++ b/src/web-ui/src/app/components/NavPanel/NavPanel.scss
@@ -1807,7 +1807,8 @@ $_section-header-height: 24px;
     transition: none;
   }
 
-  .bitfun-nav-panel__top-action-btn:hover .bitfun-nav-panel__top-action-icon-circle {
+  .bitfun-nav-panel__top-action-btn:hover .bitfun-nav-panel__top-action-icon-circle,
+  .bitfun-nav-panel__top-action-btn:active .bitfun-nav-panel__top-action-icon-circle {
     transform: scale(1);
   }
 
@@ -1941,8 +1942,6 @@ $_section-header-height: 24px;
     color: var(--color-text-primary);
   }
 
-  &:active { transform: translateY(1px); }
-
   &:focus-visible {
     outline: 1px solid var(--color-accent-500);
     outline-offset: 1px;
@@ -2015,7 +2014,7 @@ $_section-header-height: 24px;
   transition: background $motion-fast $easing-standard,
               color $motion-fast $easing-standard,
               box-shadow $motion-fast $easing-standard,
-              transform $motion-fast $easing-standard;
+              transform 0.4s $easing-bounce;
 
   .bitfun-nav-panel__top-action-btn:hover & {
     @include btn-primary.btn-primary-surface-hover;
@@ -2024,5 +2023,10 @@ $_section-header-height: 24px;
 
   .bitfun-nav-panel__top-action-btn:active & {
     @include btn-primary.btn-primary-surface-active;
+    transform: scale(0.86);
+    transition: background $motion-instant $easing-accelerate,
+                color $motion-instant $easing-accelerate,
+                box-shadow $motion-instant $easing-accelerate,
+                transform 0.09s $easing-accelerate;
   }
 }
diff --git a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss
index b4e13257..efc563b7 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss
+++ b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss
@@ -65,7 +65,7 @@
     background: transparent;
     color: var(--color-text-primary);
     font-size: 13px;
-    font-weight: 400;
+    font-weight: 500;
     cursor: pointer;
     width: 100%;
     text-align: left;
@@ -79,7 +79,6 @@
 
     &.is-active {
       color: var(--color-text-primary);
-      font-weight: 500;
       background: var(--element-bg-soft);
     }
 
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx
index fd4b9c09..24b292ea 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx
@@ -606,11 +606,11 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
             >
               <button type="button" className="bitfun-nav-panel__workspace-item-menu-item" onClick={handleCreateCodeSession}>
                 <Plus size={13} />
-                <span className="bitfun-nav-panel__workspace-item-menu-label">{t('nav.workspaces.actions.newCodeSession')}</span>
+                <span className="bitfun-nav-panel__workspace-item-menu-label">{t('nav.sessions.newCodeSessionShort')}</span>
               </button>
               <button type="button" className="bitfun-nav-panel__workspace-item-menu-item" onClick={handleCreateCoworkSession}>
                 <Plus size={13} />
-                <span className="bitfun-nav-panel__workspace-item-menu-label">{t('nav.workspaces.actions.newCoworkSession')}</span>
+                <span className="bitfun-nav-panel__workspace-item-menu-label">{t('nav.sessions.newCoworkSessionShort')}</span>
               </button>
               {isLinkedWorktree ? (
                 <button
diff --git a/src/web-ui/src/app/components/panels/FilesPanel.tsx b/src/web-ui/src/app/components/panels/FilesPanel.tsx
index 207291e2..f9cb61be 100644
--- a/src/web-ui/src/app/components/panels/FilesPanel.tsx
+++ b/src/web-ui/src/app/components/panels/FilesPanel.tsx
@@ -6,7 +6,12 @@
 import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Search as SearchIcon, CaseSensitive, Regex, WholeWord, List, Loader2 } from 'lucide-react';
-import { FileExplorer, useFileSystem } from '@/tools/file-system';
+import {
+  FileExplorer,
+  getNewItemParentPath,
+  useFileSystem,
+  type FileExplorerToolbarHandlers,
+} from '@/tools/file-system';
 import { Search, IconButton, Tooltip } from '@/component-library';
 import { useFileTreeGitSync } from '@/tools/file-system/hooks/useFileTreeGitSync';
 import { FileSearchResults } from '@/tools/file-system/components/FileSearchResults';
@@ -40,6 +45,9 @@ interface FilesPanelProps {
   hideHeader?: boolean;
   viewMode?: 'tree' | 'search';
   onViewModeChange?: (mode: 'tree' | 'search') => void;
+  /** Hide the in-explorer floating toolbar; parent can render equivalent actions (e.g. file viewer nav header). */
+  hideExplorerToolbar?: boolean;
+  onExplorerToolbarApi?: (api: FileExplorerToolbarHandlers | null) => void;
 }
 
 const FilesPanel: React.FC<FilesPanelProps> = ({
@@ -49,6 +57,8 @@ const FilesPanel: React.FC<FilesPanelProps> = ({
   hideHeader = false,
   viewMode: externalViewMode,
   onViewModeChange,
+  hideExplorerToolbar = false,
+  onExplorerToolbarApi,
 }) => {
   const { t } = useTranslation('panels/files');
   
@@ -600,6 +610,46 @@ const FilesPanel: React.FC<FilesPanelProps> = ({
     }
   }, [viewMode, onViewModeChange]);
 
+  const handleExplorerToolbarNewFile = useCallback(() => {
+    const parentPath = getNewItemParentPath(workspacePath, selectedFile, fileTree);
+    if (parentPath) {
+      handleNewFile({ parentPath });
+    }
+  }, [workspacePath, selectedFile, fileTree, handleNewFile]);
+
+  const handleExplorerToolbarNewFolder = useCallback(() => {
+    const parentPath = getNewItemParentPath(workspacePath, selectedFile, fileTree);
+    if (parentPath) {
+      handleNewFolder({ parentPath });
+    }
+  }, [workspacePath, selectedFile, fileTree, handleNewFolder]);
+
+  const handleExplorerToolbarRefresh = useCallback(() => {
+    loadFileTree(workspacePath || '', false);
+  }, [loadFileTree, workspacePath]);
+
+  useEffect(() => {
+    if (!onExplorerToolbarApi) return;
+    if (!hideExplorerToolbar || !workspacePath || viewMode !== 'tree') {
+      onExplorerToolbarApi(null);
+      return;
+    }
+    onExplorerToolbarApi({
+      onNewFile: handleExplorerToolbarNewFile,
+      onNewFolder: handleExplorerToolbarNewFolder,
+      onRefresh: handleExplorerToolbarRefresh,
+    });
+    return () => onExplorerToolbarApi(null);
+  }, [
+    onExplorerToolbarApi,
+    hideExplorerToolbar,
+    workspacePath,
+    viewMode,
+    handleExplorerToolbarNewFile,
+    handleExplorerToolbarNewFolder,
+    handleExplorerToolbarRefresh,
+  ]);
+
   return (
     <div 
       ref={panelRef}
@@ -770,6 +820,7 @@ const FilesPanel: React.FC<FilesPanelProps> = ({
               onNewFile={handleNewFile}
               onNewFolder={handleNewFolder}
               onRefresh={() => loadFileTree(workspacePath || '', false)}
+              hideToolbar={hideExplorerToolbar}
             />
           )
         )}
diff --git a/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.scss b/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.scss
index a1afe571..cc027b04 100644
--- a/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.scss
+++ b/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.scss
@@ -72,5 +72,6 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
+    gap: 2px;
   }
 }
diff --git a/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.tsx b/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.tsx
index 3415d74e..096dada1 100644
--- a/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.tsx
+++ b/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.tsx
@@ -7,19 +7,22 @@
  */
 
 import React, { useState, useCallback } from 'react';
-import { Folder, Search as SearchIcon, List } from 'lucide-react';
+import { Folder, Search as SearchIcon, List, FilePlus, FolderPlus, RefreshCw } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useCurrentWorkspace } from '../../../infrastructure/contexts/WorkspaceContext';
 import { useI18n } from '@/infrastructure/i18n';
 import { IconButton } from '@/component-library';
+import type { FileExplorerToolbarHandlers } from '@/tools/file-system';
 import FilesPanel from '../../components/panels/FilesPanel';
 import './FileViewerNav.scss';
 
 const FileViewerNav: React.FC = () => {
   const { workspace: currentWorkspace } = useCurrentWorkspace();
   const { t } = useI18n('common');
+  const { t: tTools } = useI18n('tools');
   const { t: tFiles } = useTranslation('panels/files');
   const [viewMode, setViewMode] = useState<'tree' | 'search'>('tree');
+  const [explorerToolbar, setExplorerToolbar] = useState<FileExplorerToolbarHandlers | null>(null);
 
   const handleToggleViewMode = useCallback(() => {
     setViewMode(prev => prev === 'tree' ? 'search' : 'tree');
@@ -36,6 +39,37 @@ const FileViewerNav: React.FC = () => {
         </span>
         {currentWorkspace?.rootPath && (
           <span className="bitfun-file-viewer-nav__actions">
+            {viewMode === 'tree' && explorerToolbar && (
+              <>
+                <IconButton
+                  size="xs"
+                  variant="ghost"
+                  onClick={explorerToolbar.onNewFile}
+                  tooltip={tTools('fileTree.newFile')}
+                  tooltipPlacement="bottom"
+                >
+                  <FilePlus size={14} />
+                </IconButton>
+                <IconButton
+                  size="xs"
+                  variant="ghost"
+                  onClick={explorerToolbar.onNewFolder}
+                  tooltip={tTools('fileTree.newFolder')}
+                  tooltipPlacement="bottom"
+                >
+                  <FolderPlus size={14} />
+                </IconButton>
+                <IconButton
+                  size="xs"
+                  variant="ghost"
+                  onClick={explorerToolbar.onRefresh}
+                  tooltip={tTools('fileTree.refresh')}
+                  tooltipPlacement="bottom"
+                >
+                  <RefreshCw size={14} />
+                </IconButton>
+              </>
+            )}
             <IconButton
               size="xs"
               onClick={handleToggleViewMode}
@@ -50,6 +84,8 @@ const FileViewerNav: React.FC = () => {
       <FilesPanel
         workspacePath={currentWorkspace?.rootPath}
         hideHeader
+        hideExplorerToolbar
+        onExplorerToolbarApi={setExplorerToolbar}
         viewMode={viewMode}
         onViewModeChange={setViewMode}
       />
diff --git a/src/web-ui/src/component-library/components/Markdown/Markdown.scss b/src/web-ui/src/component-library/components/Markdown/Markdown.scss
index 604f502c..86d29d0f 100644
--- a/src/web-ui/src/component-library/components/Markdown/Markdown.scss
+++ b/src/web-ui/src/component-library/components/Markdown/Markdown.scss
@@ -908,7 +908,7 @@
 .markdown-renderer .inline-code:hover,
 .markdown-renderer pre:hover,
 .markdown-renderer blockquote:hover {
-  will-change: transform, color, background;
+  will-change: color, background;
 }
 
 
diff --git a/src/web-ui/src/flow_chat/tool-cards/SkillDisplay.scss b/src/web-ui/src/flow_chat/tool-cards/SkillDisplay.scss
deleted file mode 100644
index e3de0a63..00000000
--- a/src/web-ui/src/flow_chat/tool-cards/SkillDisplay.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * Skill display styles.
- * Based on BaseToolCard common styles.
- */
-
-.skill-display {
-  .skill-icon {
-    color: rgba(59, 130, 246, 0.55);
-  }
-
-  .tool-card-icon.skill-icon {
-    color: rgba(59, 130, 246, 0.55);
-  }
-
-  .skill-name {
-    font-weight: 600;
-    color: var(--tool-card-text-primary);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .error-content {
-    padding: 12px 16px;
-    background: rgba(239, 68, 68, 0.05);
-    border-top: 1px solid rgba(239, 68, 68, 0.2);
-
-    .error-message {
-      color: rgba(239, 68, 68, 0.9);
-      font-size: 13px;
-      margin-bottom: 8px;
-    }
-
-    .error-meta {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 12px;
-      color: var(--tool-card-text-secondary);
-
-      .error-skill {
-        color: rgba(239, 68, 68, 0.7);
-      }
-    }
-  }
-
-  .icon-completed {
-    color: rgba(34, 197, 94, 0.9);
-  }
-}
diff --git a/src/web-ui/src/flow_chat/tool-cards/SkillDisplay.tsx b/src/web-ui/src/flow_chat/tool-cards/SkillDisplay.tsx
index 1029239c..1bf2b6ed 100644
--- a/src/web-ui/src/flow_chat/tool-cards/SkillDisplay.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/SkillDisplay.tsx
@@ -1,88 +1,105 @@
 /**
- * Skill tool display component.
- * Refactored from the BaseToolCard patterns.
+ * Skill tool display — compact row (same pattern as Read file).
  */
 
-import React from 'react';
-import { Sparkles } from 'lucide-react';
+import React, { useMemo } from 'react';
+import { Loader2, Clock, Check, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { CubeLoading } from '../../component-library';
 import type { ToolCardProps } from '../types/flow-chat';
-import { BaseToolCard, ToolCardHeader } from './BaseToolCard';
-import './SkillDisplay.scss';
+import { CompactToolCard, CompactToolCardHeader } from './CompactToolCard';
+import type { CompactToolCardProps } from './CompactToolCard';
 
-export const SkillDisplay: React.FC<ToolCardProps> = ({
-  toolItem
-}) => {
+export const SkillDisplay: React.FC<ToolCardProps> = React.memo(({ toolItem }) => {
   const { t } = useTranslation('flow-chat');
   const { toolCall, toolResult, status } = toolItem;
 
-  const getSkillInfo = () => {
+  const skillInfo = useMemo(() => {
     if (!toolResult?.result) return null;
-    const result = toolResult.result;
+    const result = toolResult.result as Record<string, unknown>;
     return {
-      name: result.skill_name || result.name || t('toolCards.skill.unknownSkill'),
+      name: (result.skill_name || result.name || t('toolCards.skill.unknownSkill')) as string,
     };
-  };
-
-  const skillInfo = getSkillInfo();
-  const commandName = toolCall?.input?.command || toolCall?.input?.skill_name || t('toolCards.skill.unknown');
+  }, [toolResult?.result, t]);
 
-  const isLoading = status === 'preparing' || status === 'streaming' || status === 'running';
+  const commandName =
+    (toolCall?.input?.command as string | undefined) ||
+    (toolCall?.input?.skill_name as string | undefined) ||
+    t('toolCards.skill.unknown');
 
-  const isFailed = status === 'error';
+  const displayName = status === 'completed' && skillInfo ? skillInfo.name : commandName;
 
   const getErrorMessage = () => {
-    if (toolResult && 'error' in toolResult) {
-      return toolResult.error;
+    if (toolResult && 'error' in toolResult && toolResult.error) {
+      return String(toolResult.error);
     }
     return t('toolCards.skill.loadSkillFailed');
   };
 
-  const renderToolIcon = () => {
-    return <Sparkles size={16} />;
+  const getStatusIcon = () => {
+    switch (status) {
+      case 'running':
+      case 'streaming':
+      case 'preparing':
+        return <Loader2 className="animate-spin" size={12} />;
+      case 'completed':
+        return <Check size={12} className="icon-check-done" />;
+      case 'error':
+        return <X size={12} />;
+      case 'pending':
+      default:
+        return <Clock size={12} />;
+    }
   };
 
-  const renderStatusIcon = () => {
-    if (isLoading) {
-      return <CubeLoading size="small" />;
+  const renderContent = () => {
+    if (status === 'error') {
+      return (
+        <>
+          {getErrorMessage()}
+          {commandName ? <span className="read-file-meta"> {commandName}</span> : null}
+        </>
+      );
+    }
+    if (status === 'completed') {
+      return (
+        <>
+          {t('toolCards.skill.skillAction')} {displayName}
+        </>
+      );
     }
-    return null;
+    if (status === 'running' || status === 'streaming' || status === 'preparing') {
+      return (
+        <>
+          {t('toolCards.skill.loadingSkill')} {displayName}...
+        </>
+      );
+    }
+    if (status === 'pending') {
+      return (
+        <>
+          {t('toolCards.skill.preparingSkill')} {displayName}
+        </>
+      );
+    }
+    return (
+      <>
+        {t('toolCards.skill.skillAction')} {displayName}
+      </>
+    );
   };
 
-  const renderHeader = () => (
-    <ToolCardHeader
-      icon={renderToolIcon()}
-      iconClassName="skill-icon"
-      action={isFailed ? t('toolCards.skill.loadSkillFailed') : t('toolCards.skill.skillAction')}
-      content={
-        <span className="skill-name">
-          {status === 'completed' && skillInfo ? skillInfo.name : commandName}
-        </span>
-      }
-      statusIcon={renderStatusIcon()}
-    />
-  );
-
-  const renderErrorContent = () => (
-    <div className="error-content">
-      <div className="error-message">{getErrorMessage()}</div>
-      {commandName && (
-        <div className="error-meta">
-          <span className="error-skill">{t('toolCards.skill.skillAction')} {commandName}</span>
-        </div>
-      )}
-    </div>
-  );
-
   return (
-    <BaseToolCard
-      status={status}
+    <CompactToolCard
+      status={status as CompactToolCardProps['status']}
       isExpanded={false}
-      className="skill-display"
-      header={renderHeader()}
-      errorContent={renderErrorContent()}
-      isFailed={isFailed}
+      className="skill-tool-compact"
+      clickable={false}
+      header={
+        <CompactToolCardHeader
+          statusIcon={getStatusIcon()}
+          content={renderContent()}
+        />
+      }
     />
   );
-};
+});
diff --git a/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.scss b/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.scss
index 6bbde78b..003e099d 100644
--- a/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.scss
@@ -127,14 +127,15 @@
     min-width: 0;
   }
 
-  /* Narrow right rail; invisible hit layer matches hover tint + opens detail panel. */
+  /* Narrow right rail; invisible hit layer matches hover tint + opens detail panel.
+     Stretch full header row height so ::before hover fill reaches padding edges (no vertical gap). */
   .task-header-rail {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    align-self: center;
+    align-self: stretch;
     flex-shrink: 0;
     min-width: 40px;
     padding: 0 0 0 8px;
diff --git a/src/web-ui/src/locales/en-US/common.json b/src/web-ui/src/locales/en-US/common.json
index 4e30f7c3..f12e0012 100644
--- a/src/web-ui/src/locales/en-US/common.json
+++ b/src/web-ui/src/locales/en-US/common.json
@@ -296,8 +296,6 @@
       "actions": {
         "more": "More actions",
         "newSession": "New session",
-        "newCodeSession": "New Code session",
-        "newCoworkSession": "New Cowork session",
         "newAssistant": "New personal assistant",
         "deleteAssistant": "Delete personal assistant",
         "resetWorkspace": "Reset workspace",
diff --git a/src/web-ui/src/locales/en-US/flow-chat.json b/src/web-ui/src/locales/en-US/flow-chat.json
index 54e2e8e8..9518cd7f 100644
--- a/src/web-ui/src/locales/en-US/flow-chat.json
+++ b/src/web-ui/src/locales/en-US/flow-chat.json
@@ -638,7 +638,9 @@
       "unknownSkill": "Unknown skill",
       "unknown": "Unknown",
       "loadSkillFailed": "Load skill failed",
-      "skillAction": "Skill:"
+      "skillAction": "Skill:",
+      "loadingSkill": "Loading",
+      "preparingSkill": "Preparing to load"
     },
     "readFile": {
       "parsingParams": "Parsing parameters...",
diff --git a/src/web-ui/src/locales/zh-CN/common.json b/src/web-ui/src/locales/zh-CN/common.json
index 99334cf0..2b634a22 100644
--- a/src/web-ui/src/locales/zh-CN/common.json
+++ b/src/web-ui/src/locales/zh-CN/common.json
@@ -36,13 +36,13 @@
     "clarificationBatchCompleted": "批量澄清处理完成"
   },
   "header": {
-    "openProject": "打开工程",
-    "newProject": "新建工程",
+    "openProject": "打开工作区",
+    "newProject": "新建工作区",
     "goHome": "返回首页",
     "about": "关于",
     "openMenu": "打开菜单",
     "closeMenu": "关闭菜单",
-    "selectProjectDirectory": "选择要打开的工程目录",
+    "selectProjectDirectory": "选择要打开的工作区目录",
     "configCenter": "配置中心",
     "expandLeftPanel": "展开左侧面板",
     "collapseLeftPanel": "收起左侧面板",
@@ -296,8 +296,6 @@
       "actions": {
         "more": "更多操作",
         "newSession": "新建会话",
-        "newCodeSession": "新建 Code 会话",
-        "newCoworkSession": "新建 Cowork 会话",
         "newAssistant": "新建个人助理",
         "deleteAssistant": "删除个人助理",
         "resetWorkspace": "重置工作区",
@@ -351,21 +349,21 @@
     "close": "关闭"
   },
   "newProject": {
-    "title": "新建工程",
+    "title": "新建工作区",
     "subtitle": "创建一个新的工作区目录",
     "parentDirectory": "父目录",
     "parentDirectoryPlaceholder": "点击右侧按钮选择父目录",
-    "selectParentDirectory": "选择新工程的父目录位置",
+    "selectParentDirectory": "选择新工作区的父目录位置",
     "select": "选择",
-    "projectName": "工程名称",
-    "projectNamePlaceholder": "请输入工程名称，例如：my-project",
+    "projectName": "工作区名称",
+    "projectNamePlaceholder": "请输入工作区名称，例如：my-project",
     "fullPath": "完整路径",
     "cancel": "取消",
     "create": "创建",
     "creating": "创建中...",
     "errorSelectParent": "请选择父目录",
-    "errorEnterName": "请输入工程名称",
-    "errorCreateFailed": "创建工程失败"
+    "errorEnterName": "请输入工作区名称",
+    "errorCreateFailed": "创建工作区失败"
   },
   "remoteConnect": {
     "title": "远程控制",
@@ -921,7 +919,7 @@
   "ssh": {
     "remote": {
       "title": "远程 SSH",
-      "connect": "连接远程工程",
+      "connect": "连接远程工作区",
       "connecting": "连接中...",
       "connected": "已连接",
       "disconnect": "断开连接",
diff --git a/src/web-ui/src/locales/zh-CN/flow-chat.json b/src/web-ui/src/locales/zh-CN/flow-chat.json
index 7f6e2190..70fd51e0 100644
--- a/src/web-ui/src/locales/zh-CN/flow-chat.json
+++ b/src/web-ui/src/locales/zh-CN/flow-chat.json
@@ -630,7 +630,9 @@
       "unknownSkill": "未知技能",
       "unknown": "未知",
       "loadSkillFailed": "加载技能失败",
-      "skillAction": "技能:"
+      "skillAction": "技能:",
+      "loadingSkill": "正在加载",
+      "preparingSkill": "准备加载"
     },
     "readFile": {
       "parsingParams": "解析参数中...",
diff --git a/src/web-ui/src/tools/file-system/components/FileExplorer.tsx b/src/web-ui/src/tools/file-system/components/FileExplorer.tsx
index 9ba8ef42..c92c14b6 100644
--- a/src/web-ui/src/tools/file-system/components/FileExplorer.tsx
+++ b/src/web-ui/src/tools/file-system/components/FileExplorer.tsx
@@ -5,6 +5,7 @@ import { VirtualFileTree } from './VirtualFileTree';
 import { FileExplorerProps, FileSystemNode, FlatFileNode } from '../types';
 import { GitStatusIndicator } from './GitStatusIndicator';
 import { flattenFileTree } from '../utils/treeFlattening';
+import { getNewItemParentPath } from '../utils/getNewItemParentPath';
 import { i18nService, useI18n } from '@/infrastructure/i18n';
 import { IconButton } from '@/component-library';
 
@@ -131,7 +132,8 @@ export const FileExplorer: React.FC<FileExplorerProps> = ({
   workspacePath,
   onNewFile,
   onNewFolder,
-  onRefresh
+  onRefresh,
+  hideToolbar = false,
 }) => {
   const { t } = useI18n('tools');
   const [internalExpandedFolders, setInternalExpandedFolders] = useState<Set<string>>(new Set());
@@ -288,73 +290,23 @@ export const FileExplorer: React.FC<FileExplorerProps> = ({
     };
   }, []);
   
-  const getNewItemParentPath = useCallback((): string => {
-    if (!workspacePath) {
-      return '';
-    }
-    
-    if (!selectedFile) {
-      return workspacePath;
-    }
-    
-    const normalizePath = (path: string): string => {
-      return path.replace(/\\/g, '/').toLowerCase();
-    };
-    
-    const findNodeInTree = (nodes: FileSystemNode[], path: string): FileSystemNode | null => {
-      for (const node of nodes) {
-        if (normalizePath(node.path) === normalizePath(path)) {
-          return node;
-        }
-        if (node.children) {
-          const found = findNodeInTree(node.children, path);
-          if (found) return found;
-        }
-      }
-      return null;
-    };
-    
-    const selectedNode = findNodeInTree(fileTree, selectedFile);
-    
-    if (!selectedNode) {
-      return workspacePath;
-    }
-    
-    if (selectedNode.isDirectory) {
-      return selectedNode.path;
-    }
-    
-    const isWindows = selectedNode.path.includes('\\');
-    const separator = isWindows ? '\\' : '/';
-    
-    const lastSeparatorIndex = selectedNode.path.lastIndexOf(separator);
-    
-    if (lastSeparatorIndex === -1) {
-      return workspacePath;
-    }
-    
-    const parentPath = selectedNode.path.substring(0, lastSeparatorIndex);
-    
-    return parentPath || workspacePath;
-  }, [workspacePath, selectedFile, fileTree]);
-  
   const handleNewFile = useCallback(() => {
     if (onNewFile) {
-      const parentPath = getNewItemParentPath();
+      const parentPath = getNewItemParentPath(workspacePath, selectedFile, fileTree);
       if (parentPath) {
         onNewFile({ parentPath });
       }
     }
-  }, [onNewFile, getNewItemParentPath]);
+  }, [onNewFile, workspacePath, selectedFile, fileTree]);
   
   const handleNewFolder = useCallback(() => {
     if (onNewFolder) {
-      const parentPath = getNewItemParentPath();
+      const parentPath = getNewItemParentPath(workspacePath, selectedFile, fileTree);
       if (parentPath) {
         onNewFolder({ parentPath });
       }
     }
-  }, [onNewFolder, getNewItemParentPath]);
+  }, [onNewFolder, workspacePath, selectedFile, fileTree]);
   
   const handleRefresh = useCallback(() => {
     if (onRefresh) {
@@ -407,7 +359,7 @@ export const FileExplorer: React.FC<FileExplorerProps> = ({
       onBlur={handleBlur}
       onClick={handleContainerClick}
     >
-      {(onNewFile || onNewFolder || onRefresh) && (
+      {(onNewFile || onNewFolder || onRefresh) && !hideToolbar && (
         <div 
           className={`bitfun-file-explorer__toolbar ${isToolbarVisible ? 'bitfun-file-explorer__toolbar--visible' : ''}`}
           onClick={(e) => e.stopPropagation()}
diff --git a/src/web-ui/src/tools/file-system/index.ts b/src/web-ui/src/tools/file-system/index.ts
index e6210d77..e6b057e8 100644
--- a/src/web-ui/src/tools/file-system/index.ts
+++ b/src/web-ui/src/tools/file-system/index.ts
@@ -6,12 +6,15 @@ export { useFileTreeGitSync } from './hooks/useFileTreeGitSync';
 export type {
   FileSystemNode,
   FileExplorerProps,
+  FileExplorerToolbarHandlers,
   FileTreeProps,
   FileTreeNodeProps,
   FileSystemOptions,
   FileSystemState
 } from './types';
 
+export { getNewItemParentPath } from './utils/getNewItemParentPath';
+
 export {
   getFileIcon,
   getFileIconClass,
diff --git a/src/web-ui/src/tools/file-system/types/index.ts b/src/web-ui/src/tools/file-system/types/index.ts
index f231626d..ac16ab3e 100644
--- a/src/web-ui/src/tools/file-system/types/index.ts
+++ b/src/web-ui/src/tools/file-system/types/index.ts
@@ -52,6 +52,16 @@ export interface FileExplorerProps {
   onNewFile?: (data: { parentPath: string }) => void;
   onNewFolder?: (data: { parentPath: string }) => void;
   onRefresh?: () => void;
+
+  /** When true, the floating toolbar is not rendered (e.g. actions live in a parent header). */
+  hideToolbar?: boolean;
+}
+
+/** Zero-arg handlers for toolbar buttons when the UI is rendered outside FileExplorer. */
+export interface FileExplorerToolbarHandlers {
+  onNewFile: () => void;
+  onNewFolder: () => void;
+  onRefresh: () => void;
 }
 
 
diff --git a/src/web-ui/src/tools/file-system/utils/getNewItemParentPath.ts b/src/web-ui/src/tools/file-system/utils/getNewItemParentPath.ts
new file mode 100644
index 00000000..152a2571
--- /dev/null
+++ b/src/web-ui/src/tools/file-system/utils/getNewItemParentPath.ts
@@ -0,0 +1,59 @@
+import type { FileSystemNode } from '../types';
+
+function normalizePath(path: string): string {
+  return path.replace(/\\/g, '/').toLowerCase();
+}
+
+function findNodeInTree(nodes: FileSystemNode[], path: string): FileSystemNode | null {
+  for (const node of nodes) {
+    if (normalizePath(node.path) === normalizePath(path)) {
+      return node;
+    }
+    if (node.children) {
+      const found = findNodeInTree(node.children, path);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+/**
+ * Resolves the parent directory for "new file / new folder" actions
+ * from the current selection (same rules as the file explorer toolbar).
+ */
+export function getNewItemParentPath(
+  workspacePath: string | undefined,
+  selectedFile: string | undefined,
+  fileTree: FileSystemNode[]
+): string {
+  if (!workspacePath) {
+    return '';
+  }
+
+  if (!selectedFile) {
+    return workspacePath;
+  }
+
+  const selectedNode = findNodeInTree(fileTree, selectedFile);
+
+  if (!selectedNode) {
+    return workspacePath;
+  }
+
+  if (selectedNode.isDirectory) {
+    return selectedNode.path;
+  }
+
+  const isWindows = selectedNode.path.includes('\\');
+  const separator = isWindows ? '\\' : '/';
+
+  const lastSeparatorIndex = selectedNode.path.lastIndexOf(separator);
+
+  if (lastSeparatorIndex === -1) {
+    return workspacePath;
+  }
+
+  const parentPath = selectedNode.path.substring(0, lastSeparatorIndex);
+
+  return parentPath || workspacePath;
+}