web-ui: nav, file viewer, flow chat tools, file explorer

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;
   }
 }

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);
     }
 

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

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}
             />
           )
         )}

src/web-ui/src/app/scenes/file-viewer/FileViewerNav.scss

@@ -72,5 +72,6 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
+    gap: 2px;
   }
 }

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}
       />

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;
 }