@vibe-forge/client 2.0.0 → 2.0.1

package/src/components/chat/terminal/ChatTerminalView.tsx

@@ -1,16 +1,49 @@
 import '@xterm/xterm/css/xterm.css'
 import './ChatTerminalView.scss'
 
-import React, { useCallback, useState } from 'react'
+import type { TFunction } from 'i18next'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import type { TerminalShellKind } from '@vibe-forge/types'
+
 import { DockPanel } from '#~/components/dock-panel/DockPanel'
 import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
-import { useTerminalInstance } from './@hooks/use-terminal-instance'
-import { useTerminalSession } from './@hooks/use-terminal-session'
 
-const TERMINAL_HEIGHT_STORAGE_KEY = 'chatTerminalHeight'
-const formatShellLabel = (shell: string | undefined) => shell?.split('/').filter(Boolean).at(-1) ?? 'shell'
+import {
+  CHAT_BOTTOM_DOCK_DEFAULT_HEIGHT,
+  CHAT_BOTTOM_DOCK_HEIGHT_STORAGE_KEY,
+  CHAT_BOTTOM_DOCK_MAX_HEIGHT,
+  CHAT_BOTTOM_DOCK_MIN_HEIGHT
+} from '../bottom-dock-constants'
+import { TerminalManagerList } from './@components/TerminalManagerList'
+import type { TerminalPaneInfo } from './@components/TerminalManagerList'
+import { TerminalPane } from './@components/TerminalPane'
+import { TerminalPanelActions } from './@components/TerminalPanelActions'
+import {
+  DEFAULT_TERMINAL_ID,
+  createTerminalPane,
+  getNextTerminalTitle,
+  moveTerminalPane,
+  normalizeTerminalPanes,
+  withFixedTerminalTitles
+} from './@utils/terminal-panes'
+import type { MoveTerminalPanePlacement } from './@utils/terminal-panes'
+
+const buildTerminalPaneStorageKey = (sessionId: string) => `chatTerminalPaneIds:${sessionId}`
+
+const readTerminalPanes = (sessionId: string, t: TFunction) => {
+  const raw = localStorage.getItem(buildTerminalPaneStorageKey(sessionId))
+  if (raw == null || raw === '') {
+    return withFixedTerminalTitles(normalizeTerminalPanes(null), t)
+  }
+
+  try {
+    return withFixedTerminalTitles(normalizeTerminalPanes(JSON.parse(raw) as unknown), t)
+  } catch {
+    return withFixedTerminalTitles(normalizeTerminalPanes(null), t)
+  }
+}
 
 export function ChatTerminalView({
   isOpen,
@@ -23,97 +56,136 @@ export function ChatTerminalView({
 }) {
   const { t } = useTranslation()
   const { isCompactLayout, isTouchInteraction } = useResponsiveLayout()
-  const inputHandlerRef = React.useRef<(data: string) => void>(() => undefined)
-  const resizeHandlerRef = React.useRef<(cols: number, rows: number) => void>(() => undefined)
-  const [shellLabel, setShellLabel] = useState('zsh')
-  const {
-    containerRef,
-    fitTerminal,
-    focusTerminal,
-    lastMeasuredSize,
-    terminalMounted,
-    terminalRef
-  } = useTerminalInstance({
-    onInput: (data: string) => inputHandlerRef.current(data),
-    onResize: (cols: number, rows: number) => resizeHandlerRef.current(cols, rows)
-  })
-
-  const {
-    errorMessage,
-    lastExit,
-    resizeTerminal,
-    sendInput
-  } = useTerminalSession({
-    sessionId,
-    active: terminalMounted,
-    initialCols: lastMeasuredSize.cols,
-    initialRows: lastMeasuredSize.rows,
-    onReady: useCallback((event) => {
-      const terminal = terminalRef.current
-      if (terminal == null) {
-        return
-      }
+  const [panes, setPanes] = useState(() => readTerminalPanes(sessionId, t))
+  const [activeTerminalId, setActiveTerminalId] = useState(() =>
+    readTerminalPanes(sessionId, t)[0]?.id ?? DEFAULT_TERMINAL_ID
+  )
+  const [terminalInfoById, setTerminalInfoById] = useState<Record<string, TerminalPaneInfo>>({})
+  const [isManagerVisible, setIsManagerVisible] = useState(true)
+  const terminateHandlersRef = useRef(new Map<string, () => boolean>())
+
+  useEffect(() => {
+    const nextPanes = readTerminalPanes(sessionId, t)
+    setPanes(nextPanes)
+    setActiveTerminalId(nextPanes[0]?.id ?? DEFAULT_TERMINAL_ID)
+    setTerminalInfoById({})
+    setIsManagerVisible(true)
+  }, [sessionId, t])
+
+  useEffect(() => {
+    localStorage.setItem(buildTerminalPaneStorageKey(sessionId), JSON.stringify(panes))
+  }, [panes, sessionId])
 
-      terminal.reset()
-      setShellLabel(formatShellLabel(event.info.shell))
-      if (event.scrollback != null && event.scrollback !== '') {
-        terminal.write(event.scrollback)
+  const handleAddTerminal = useCallback((shellKind: TerminalShellKind = 'default') => {
+    const pane = createTerminalPane(shellKind, getNextTerminalTitle(panes, t))
+    setPanes(current => [...current, pane])
+    setActiveTerminalId(pane.id)
+  }, [panes, t])
+
+  const handleCloseTerminal = useCallback((terminalId: string) => {
+    void terminateHandlersRef.current.get(terminalId)?.()
+    setTerminalInfoById((current) => {
+      const next = { ...current }
+      delete next[terminalId]
+      return next
+    })
+    setPanes((current) => {
+      if (current.length <= 1) {
+        return current
       }
-      fitTerminal()
-    }, [fitTerminal, terminalRef]),
-    onOutput: useCallback((data) => {
-      terminalRef.current?.write(data)
-    }, [terminalRef])
-  })
-
-  inputHandlerRef.current = (data: string) => {
-    void sendInput(data)
-  }
-  resizeHandlerRef.current = (cols: number, rows: number) => {
-    void resizeTerminal(cols, rows)
-  }
 
-  const exitSummary = lastExit == null
-    ? null
-    : t('chat.terminal.exitSummary', {
-      code: lastExit.exitCode ?? 'null',
-      signal: lastExit.signal ?? 'null'
+      const removedIndex = current.findIndex(item => item.id === terminalId)
+      const nextPanes = current.filter(item => item.id !== terminalId)
+      setActiveTerminalId((activeId) => {
+        if (activeId !== terminalId) {
+          return activeId
+        }
+
+        return nextPanes[Math.min(Math.max(removedIndex, 0), nextPanes.length - 1)]?.id ?? DEFAULT_TERMINAL_ID
+      })
+      return nextPanes
     })
+  }, [])
+
+  const handleTerminalInfoChange = useCallback((terminalId: string, info: TerminalPaneInfo) => {
+    setTerminalInfoById(current => ({ ...current, [terminalId]: info }))
+  }, [])
+
+  const handleTerminateChange = useCallback((terminalId: string, handler: (() => boolean) | null) => {
+    if (handler == null) {
+      terminateHandlersRef.current.delete(terminalId)
+      return
+    }
+
+    terminateHandlersRef.current.set(terminalId, handler)
+  }, [])
+
+  const handleRenameTerminal = useCallback((terminalId: string, title: string) => {
+    setPanes(current => current.map(item => item.id === terminalId ? { ...item, title } : item))
+  }, [])
+
+  const handleMoveTerminal = useCallback((
+    sourceId: string,
+    targetId: string,
+    placement: MoveTerminalPanePlacement
+  ) => {
+    setPanes(current => moveTerminalPane(current, sourceId, targetId, placement))
+  }, [])
+
+  const shouldShowManagerToggle = panes.length > 1
   const isCompactView = isCompactLayout || isTouchInteraction
 
   return (
     <DockPanel
+      allowFullscreen={!isCompactView}
       allowResize={!isCompactView}
       className='chat-terminal-view'
-      defaultHeight={isCompactView ? 208 : undefined}
+      defaultHeight={isCompactView ? 208 : CHAT_BOTTOM_DOCK_DEFAULT_HEIGHT}
+      fullscreenEnterLabel={t('common.enterFullscreen')}
+      fullscreenExitLabel={t('common.exitFullscreen')}
       isOpen={isOpen}
-      maxHeight={isCompactView ? 320 : 520}
+      maxHeight={isCompactView ? 320 : CHAT_BOTTOM_DOCK_MAX_HEIGHT}
+      minHeight={isCompactView ? 180 : CHAT_BOTTOM_DOCK_MIN_HEIGHT}
       title={t('chat.viewTerminal')}
-      meta={shellLabel}
       closeLabel={t('common.close')}
       resizeLabel={t('chat.terminal.resizePanel')}
-      storageKey={TERMINAL_HEIGHT_STORAGE_KEY}
+      storageKey={CHAT_BOTTOM_DOCK_HEIGHT_STORAGE_KEY}
       onClose={onClose}
-      footer={exitSummary != null
-        ? (
-          <div className='chat-terminal-view__footer'>
-            {exitSummary}
-          </div>
-        )
-        : undefined}
+      actions={
+        <TerminalPanelActions
+          isManagerToggleVisible={shouldShowManagerToggle}
+          isManagerVisible={isManagerVisible}
+          terminalCount={panes.length}
+          onAddTerminal={handleAddTerminal}
+          onToggleManager={() => setIsManagerVisible(current => !current)}
+        />
+      }
     >
-      {errorMessage != null && errorMessage !== '' && (
-        <div className='chat-terminal-view__error'>
-          {errorMessage}
-        </div>
-      )}
-
       <div className='chat-terminal-view__surface'>
-        <div
-          ref={containerRef}
-          className='chat-terminal-view__terminal'
-          onClick={focusTerminal}
-        />
+        <div className='chat-terminal-view__terminal-stage'>
+          {panes.map(pane => (
+            <TerminalPane
+              key={pane.id}
+              isActive={pane.id === activeTerminalId}
+              sessionId={sessionId}
+              shellKind={pane.shellKind}
+              terminalId={pane.id}
+              onInfoChange={handleTerminalInfoChange}
+              onTerminateChange={handleTerminateChange}
+            />
+          ))}
+        </div>
+        {shouldShowManagerToggle && isManagerVisible && (
+          <TerminalManagerList
+            activeTerminalId={activeTerminalId}
+            infoById={terminalInfoById}
+            panes={panes}
+            onActivate={setActiveTerminalId}
+            onClose={handleCloseTerminal}
+            onMove={handleMoveTerminal}
+            onRename={handleRenameTerminal}
+          />
+        )}
       </div>
     </DockPanel>
   )

package/src/components/chat/tools/core/ToolDiffViewer.tsx

@@ -1,32 +1,18 @@
 import './ToolDiffViewer.scss'
 
-import { DiffEditor, loader } from '@monaco-editor/react'
+import { DiffEditor } from '@monaco-editor/react'
 import { Tooltip } from 'antd'
 import type { editor as MonacoEditorNamespace } from 'monaco-editor'
-import * as monacoApi from 'monaco-editor'
-import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
 import React, { useEffect, useMemo, useState } from 'react'
 
+import '#~/components/monaco/monaco-runtime'
+
 import { TOOL_TOOLTIP_PROPS } from './tool-display'
 
 const DIFF_LINE_HEIGHT = 18
 const MIN_DIFF_HEIGHT = 96
 const MAX_DIFF_HEIGHT = 360
 
-const monacoRuntime = globalThis as typeof globalThis & {
-  MonacoEnvironment?: {
-    getWorker: () => Worker
-  }
-}
-
-if (monacoRuntime.MonacoEnvironment == null) {
-  monacoRuntime.MonacoEnvironment = {
-    getWorker: () => new EditorWorker()
-  }
-}
-
-loader.config({ monaco: monacoApi })
-
 const getThemeName = () => (document.documentElement.classList.contains('dark') ? 'vs-dark' : 'vs')
 
 const getEditorHeight = (original: string, modified: string) => {