fix: The established terminal cannot be deleted and the terminal display is disordered

Author: 吴糖可乐

src/web-ui/src/app/components/NavPanel/sections/shells/ShellsSection.tsx

@@ -17,7 +17,8 @@
  */
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Plus, SquareTerminal, Circle } from 'lucide-react';
+import { Plus, SquareTerminal, Circle, Trash2, Square, Edit2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import { getTerminalService } from '../../../../../tools/terminal';
 import type { TerminalService } from '../../../../../tools/terminal';
 import type { SessionResponse, TerminalEvent } from '../../../../../tools/terminal/types/session';
@@ -27,6 +28,8 @@ import { resolveAndFocusOpenTarget } from '../../../../../shared/services/sceneO
 import { useCurrentWorkspace } from '../../../../../infrastructure/contexts/WorkspaceContext';
 import { configManager } from '../../../../../infrastructure/config/services/ConfigManager';
 import type { TerminalConfig } from '../../../../../infrastructure/config/types';
+import { Tooltip } from '@/component-library';
+import { TerminalEditModal } from '../../../panels/TerminalEditModal';
 import { createLogger } from '@/shared/utils/logger';
 
 const log = createLogger('ShellsSection');
@@ -55,6 +58,14 @@ function loadHubConfig(workspacePath: string): HubConfig {
   return { terminals: [], worktrees: {} };
 }
 
+function saveHubConfig(workspacePath: string, config: HubConfig) {
+  try {
+    localStorage.setItem(`${TERMINAL_HUB_STORAGE_KEY}:${workspacePath}`, JSON.stringify(config));
+  } catch (err) {
+    log.error('Failed to save hub config', err);
+  }
+}
+
 interface ShellEntry {
   sessionId: string;
   name: string;
@@ -65,11 +76,17 @@ interface ShellEntry {
 }
 
 const ShellsSection: React.FC = () => {
+  const { t } = useTranslation('panels/terminal');
   const setActiveSession = useTerminalSceneStore(s => s.setActiveSession);
   const { workspacePath } = useCurrentWorkspace();
 
   const [sessions, setSessions] = useState<SessionResponse[]>([]);
   const [hubConfig, setHubConfig] = useState<HubConfig>({ terminals: [], worktrees: {} });
+  const [editModalOpen, setEditModalOpen] = useState(false);
+  const [editingTerminal, setEditingTerminal] = useState<{
+    terminal: HubTerminalEntry;
+    worktreePath?: string;
+  } | null>(null);
   const serviceRef = useRef<TerminalService | null>(null);
 
   const runningIds = useMemo(() => new Set(sessions.map(s => s.id)), [sessions]);
@@ -241,6 +258,215 @@ const ShellsSection: React.FC = () => {
     }
   }, [workspacePath, sessions.length, setActiveSession]);
 
+  /**
+   * Stop terminal session
+   * - For hub terminals: keep in list but stop the process, right panel stays open
+   * - For ad-hoc terminals: same as delete (close session and right panel tab)
+   */
+  const handleStopTerminal = useCallback(
+    async (entry: ShellEntry, e: React.MouseEvent) => {
+      e.stopPropagation();
+      const service = serviceRef.current;
+      if (!service || !runningIds.has(entry.sessionId)) return;
+
+      try {
+        await service.closeSession(entry.sessionId);
+
+        // For ad-hoc terminals, dispatch destroyed event to close right panel tab
+        // (since they won't be preserved in the list anyway)
+        if (!entry.isHub) {
+          window.dispatchEvent(
+            new CustomEvent('terminal-session-destroyed', { detail: { sessionId: entry.sessionId } })
+          );
+        }
+
+        await refreshSessions();
+      } catch (err) {
+        log.error('Failed to stop terminal', err);
+      }
+    },
+    [runningIds, refreshSessions]
+  );
+
+  /**
+   * Delete terminal - close session, close right panel tab, and remove from list
+   * For hub terminals: also remove from localStorage config
+   */
+  const handleDeleteTerminal = useCallback(
+    async (entry: ShellEntry, e: React.MouseEvent) => {
+      e.stopPropagation();
+
+      // Close the terminal session if running
+      if (entry.isRunning) {
+        const service = serviceRef.current;
+        if (service) {
+          try {
+            await service.closeSession(entry.sessionId);
+          } catch (err) {
+            log.error('Failed to close terminal session', err);
+          }
+        }
+      }
+
+      // Dispatch event to close the tab in right panel
+      window.dispatchEvent(
+        new CustomEvent('terminal-session-destroyed', { detail: { sessionId: entry.sessionId } })
+      );
+
+      // For hub terminals, also remove from localStorage config
+      if (entry.isHub && workspacePath) {
+        setHubConfig(prev => {
+          let next: HubConfig;
+          if (entry.worktreePath) {
+            const terms = (prev.worktrees[entry.worktreePath] || []).filter(
+              t => t.sessionId !== entry.sessionId
+            );
+            next = { ...prev, worktrees: { ...prev.worktrees, [entry.worktreePath]: terms } };
+          } else {
+            next = { ...prev, terminals: prev.terminals.filter(t => t.sessionId !== entry.sessionId) };
+          }
+          saveHubConfig(workspacePath, next);
+          return next;
+        });
+      }
+
+      // Refresh the session list
+      await refreshSessions();
+    },
+    [workspacePath, refreshSessions]
+  );
+
+  /**
+   * Open edit modal for a terminal
+   */
+  const handleOpenEditModal = useCallback(
+    (entry: ShellEntry, e: React.MouseEvent) => {
+      e.stopPropagation();
+
+      if (entry.isHub) {
+        // For hub terminals, find the entry from config
+        let hubEntry: HubTerminalEntry | undefined;
+        if (entry.worktreePath) {
+          hubEntry = hubConfig.worktrees[entry.worktreePath]?.find(t => t.sessionId === entry.sessionId);
+        } else {
+          hubEntry = hubConfig.terminals.find(t => t.sessionId === entry.sessionId);
+        }
+
+        if (hubEntry) {
+          setEditingTerminal({ terminal: hubEntry, worktreePath: entry.worktreePath });
+          setEditModalOpen(true);
+        }
+      } else {
+        // For ad-hoc sessions, create a temporary entry for editing
+        setEditingTerminal({
+          terminal: { sessionId: entry.sessionId, name: entry.name },
+          worktreePath: undefined,
+        });
+        setEditModalOpen(true);
+      }
+    },
+    [hubConfig]
+  );
+
+  /**
+   * Save terminal edit (name and optionally startup command)
+   */
+  const handleSaveTerminalEdit = useCallback(
+    (newName: string, newStartupCommand?: string) => {
+      if (!editingTerminal) return;
+      const { terminal, worktreePath } = editingTerminal;
+
+      // For hub terminals, update localStorage config
+      if (terminal.sessionId.startsWith(HUB_TERMINAL_ID_PREFIX) && workspacePath) {
+        setHubConfig(prev => {
+          let next: HubConfig;
+          if (worktreePath) {
+            const terms = (prev.worktrees[worktreePath] || []).map(t =>
+              t.sessionId === terminal.sessionId
+                ? { ...t, name: newName, startupCommand: newStartupCommand }
+                : t
+            );
+            next = { ...prev, worktrees: { ...prev.worktrees, [worktreePath]: terms } };
+          } else {
+            const terms = prev.terminals.map(t =>
+              t.sessionId === terminal.sessionId
+                ? { ...t, name: newName, startupCommand: newStartupCommand }
+                : t
+            );
+            next = { ...prev, terminals: terms };
+          }
+          saveHubConfig(workspacePath, next);
+          return next;
+        });
+      }
+
+      // Update session name in state and notify other components
+      if (runningIds.has(terminal.sessionId)) {
+        setSessions(prev =>
+          prev.map(s => (s.id === terminal.sessionId ? { ...s, name: newName } : s))
+        );
+        window.dispatchEvent(
+          new CustomEvent('terminal-session-renamed', {
+            detail: { sessionId: terminal.sessionId, newName },
+          })
+        );
+      }
+
+      setEditingTerminal(null);
+    },
+    [editingTerminal, workspacePath, runningIds]
+  );
+
+  const renderTerminalItem = (entry: ShellEntry) => {
+    return (
+      <button
+        key={entry.sessionId}
+        type="button"
+        className="bitfun-nav-panel__inline-item"
+        onClick={() => handleOpen(entry)}
+        title={entry.name}
+      >
+        <SquareTerminal size={12} className="bitfun-nav-panel__inline-item-icon" />
+        <span className="bitfun-nav-panel__inline-item-label">{entry.name}</span>
+        <Circle
+          size={6}
+          className={`bitfun-nav-panel__shell-dot ${entry.isRunning ? 'is-running' : 'is-stopped'}`}
+        />
+        <div className="bitfun-nav-panel__inline-item-actions">
+          <Tooltip content={t('actions.edit')}>
+            <button
+              type="button"
+              className="bitfun-nav-panel__inline-item-action-btn"
+              onClick={(e) => handleOpenEditModal(entry, e)}
+            >
+              <Edit2 size={10} />
+            </button>
+          </Tooltip>
+          {entry.isRunning && (
+            <Tooltip content={t('actions.stopTerminal')}>
+              <button
+                type="button"
+                className="bitfun-nav-panel__inline-item-action-btn"
+                onClick={(e) => handleStopTerminal(entry, e)}
+              >
+                <Square size={10} />
+              </button>
+            </Tooltip>
+          )}
+          <Tooltip content={t('actions.deleteTerminal')}>
+            <button
+              type="button"
+              className="bitfun-nav-panel__inline-item-action-btn delete"
+              onClick={(e) => handleDeleteTerminal(entry, e)}
+            >
+              <Trash2 size={10} />
+            </button>
+          </Tooltip>
+        </div>
+      </button>
+    );
+  };
+
   return (
     <div className="bitfun-nav-panel__inline-list">
       <button
@@ -256,22 +482,20 @@ const ShellsSection: React.FC = () => {
       {entries.length === 0 ? (
         <div className="bitfun-nav-panel__inline-empty">No shells</div>
       ) : (
-        entries.map(entry => (
-          <button
-            key={entry.sessionId}
-            type="button"
-            className="bitfun-nav-panel__inline-item"
-            onClick={() => handleOpen(entry)}
-            title={entry.name}
-          >
-            <SquareTerminal size={12} className="bitfun-nav-panel__inline-item-icon" />
-            <span className="bitfun-nav-panel__inline-item-label">{entry.name}</span>
-            <Circle
-              size={6}
-              className={`bitfun-nav-panel__shell-dot ${entry.isRunning ? 'is-running' : 'is-stopped'}`}
-            />
-          </button>
-        ))
+        entries.map(entry => renderTerminalItem(entry))
+      )}
+
+      {editingTerminal && (
+        <TerminalEditModal
+          isOpen={editModalOpen}
+          onClose={() => {
+            setEditModalOpen(false);
+            setEditingTerminal(null);
+          }}
+          onSave={handleSaveTerminalEdit}
+          initialName={editingTerminal.terminal.name}
+          initialStartupCommand={editingTerminal.terminal.startupCommand}
+        />
       )}
     </div>
   );

src/web-ui/src/app/components/panels/base/FlexiblePanel.tsx

@@ -706,6 +706,7 @@ const FlexiblePanel: React.FC<ExtendedFlexiblePanelProps> = memo(({
           <React.Suspense fallback={<div className="bitfun-flexible-panel__loading">{t('flexiblePanel.loading.terminal')}</div>}>
             <div className="bitfun-flexible-panel__terminal-container">
               <TerminalTabPanel
+                key={sessionId}
                 sessionId={sessionId}
                 autoFocus={true}
               />

src/web-ui/src/app/components/panels/content-canvas/hooks/useTabLifecycle.ts

@@ -9,7 +9,7 @@
  */
 
 import { useCallback, useEffect } from 'react';
-import { useCanvasStore } from '../stores';
+import { useCanvasStore, useAgentCanvasStore, useProjectCanvasStore, useGitCanvasStore } from '../stores';
 import type { EditorGroupId, PanelContent, CreateTabEventDetail } from '../types';
 import { TAB_EVENTS } from '../types';
 import { createLogger } from '@/shared/utils/logger';
@@ -185,17 +185,41 @@ export const useTabLifecycle = (options: UseTabLifecycleOptions = {}): UseTabLif
    * Listen for left-panel terminal close events to sync right-panel tabs.
    */
   useEffect(() => {
+    const store = mode === 'project' ? useProjectCanvasStore 
+                : mode === 'git' ? useGitCanvasStore 
+                : useAgentCanvasStore;
+    
     const handleTerminalSessionDestroyed = (event: CustomEvent<{ sessionId: string }>) => {
       const { sessionId } = event.detail ?? {};
       if (sessionId) {
-        useCanvasStore.getState().closeTerminalTabBySessionId(sessionId);
+        store.getState().closeTerminalTabBySessionId(sessionId);
       }
     };
     window.addEventListener('terminal-session-destroyed', handleTerminalSessionDestroyed as EventListener);
     return () => {
       window.removeEventListener('terminal-session-destroyed', handleTerminalSessionDestroyed as EventListener);
     };
-  }, []);
+  }, [mode]);
+
+  /**
+   * Listen for left-panel terminal rename events to sync right-panel tabs.
+   */
+  useEffect(() => {
+    const store = mode === 'project' ? useProjectCanvasStore 
+                : mode === 'git' ? useGitCanvasStore 
+                : useAgentCanvasStore;
+    
+    const handleTerminalSessionRenamed = (event: CustomEvent<{ sessionId: string; newName: string }>) => {
+      const { sessionId, newName } = event.detail ?? {};
+      if (sessionId && newName) {
+        store.getState().renameTerminalTabBySessionId(sessionId, newName);
+      }
+    };
+    window.addEventListener('terminal-session-renamed', handleTerminalSessionRenamed as EventListener);
+    return () => {
+      window.removeEventListener('terminal-session-renamed', handleTerminalSessionRenamed as EventListener);
+    };
+  }, [mode]);
 
   /**
    * Listen for external tab creation events.

src/web-ui/src/app/components/panels/content-canvas/stores/canvasStore.ts

@@ -53,6 +53,9 @@ interface CanvasStoreActions {
 
   /** Close and remove tab by terminal sessionId (sync when left panel closes terminal) */
   closeTerminalTabBySessionId: (sessionId: string) => void;
+
+  /** Rename terminal tab by sessionId (sync when left panel renames terminal) */
+  renameTerminalTabBySessionId: (sessionId: string, newName: string) => void;
 
   /** Close all tabs */
   closeAllTabs: (groupId?: EditorGroupId) => void;
@@ -457,6 +460,22 @@ const createCanvasStoreHook = () => create<CanvasStore>()(
         if (!result || result.tab.content.type !== 'terminal') return;
         state.closeTab(result.tab.id, result.groupId, { forceRemove: true });
       },
+
+      renameTerminalTabBySessionId: (sessionId, newName) => {
+        const result = get().findTabByMetadata({ sessionId });
+        if (!result || result.tab.content.type !== 'terminal') return;
+        
+        set((draft) => {
+          const group = getGroup(draft, result.groupId);
+          const tab = group.tabs.find(t => t.id === result.tab.id);
+          if (tab) {
+            const displayTitle = newName.length > 20 ? `${newName.slice(0, 20)}...` : newName;
+            tab.title = displayTitle;
+            tab.content.title = displayTitle;
+            tab.content.data = { ...tab.content.data, sessionName: newName };
+          }
+        });
+      },
 
       closeAllTabs: (groupId) => {
         set((draft) => {