@vibe-forge/client 2.0.0 → 3.0.0-alpha.0

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

@@ -1,62 +1,334 @@
 .chat-terminal-view {
   position: relative;
-
-  &__error {
-    position: absolute;
-    top: 36px;
-    right: 16px;
-    z-index: 3;
-    padding: 8px 10px;
-    border-radius: 10px;
-    border: 1px solid
-      color-mix(in srgb, var(--danger-color) 24%, var(--border-color));
-    background-color: color-mix(
-      in srgb,
-      var(--bg-color) 86%,
-      var(--danger-color) 14%
-    );
-    color: var(--danger-color);
-    font-size: 12px;
-  }
+  --terminal-action-hover-bg: var(--nav-hover-bg, #f3f4f6);
 
   &__surface {
     display: flex;
     position: relative;
     flex: 1;
     min-height: 0;
+    gap: 10px;
     overflow: hidden;
-    background:
-      radial-gradient(
-        circle at top,
-        color-mix(in srgb, var(--primary-color) 12%, transparent),
-        transparent 52%
-      ),
-      linear-gradient(
-      180deg,
-      color-mix(in srgb, var(--sub-bg-color) 78%, var(--bg-color)),
-      var(--bg-color)
-    );
-  }
-
-  &__terminal {
+    background-color: var(--bg-color);
+  }
+
+  &__terminal-stage {
+    display: flex;
+    position: relative;
     flex: 1;
     min-width: 0;
     min-height: 0;
     overflow: hidden;
-    cursor: text;
+  }
+
+  &__header-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  &__create-actions {
+    display: inline-flex;
+    align-items: center;
+    height: 24px;
+    overflow: hidden;
+    border-radius: 6px;
+    background-color: transparent;
+    transition: background-color .2s ease;
+
+    &:hover,
+    &:focus-within {
+      background-color: var(--terminal-action-hover-bg);
+    }
+  }
+
+  &__create-btn.ant-btn.ant-btn-text {
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    height: 24px;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    color: var(--sub-text-color);
+    transition: background-color .2s ease, color .2s ease;
+
+    .material-symbols-rounded {
+      font-size: 15px;
+      line-height: 1;
+    }
+
+    &:not(:disabled):not(.ant-btn-disabled):hover,
+    &:focus-visible {
+      background-color: transparent;
+      color: var(--text-color);
+    }
+  }
 
-    .xterm {
-      height: 100%;
+  &__create-btn--add.ant-btn.ant-btn-text {
+    width: 28px;
+  }
+
+  &__create-btn--menu.ant-btn.ant-btn-text {
+    width: 20px;
+
+    &::before {
+      position: absolute;
+      top: 6px;
+      bottom: 6px;
+      left: 0;
+      width: 1px;
+      background-color: var(--border-color);
+      content: '';
+      pointer-events: none;
     }
+  }
 
-    .xterm-viewport {
-      background-color: var(--bg-color);
+  &__manager-toggle-btn.ant-btn.ant-btn-text {
+    .material-symbols-rounded {
+      font-size: 15px;
     }
   }
 
-  &__footer {
+  &__manager-toggle-btn.ant-btn.ant-btn-text {
+    overflow: visible;
+    position: relative;
+  }
+
+  &__manager-toggle-badge {
+    display: inline-flex;
+    position: absolute;
+    right: -5px;
+    bottom: -4px;
+    align-items: center;
+    justify-content: center;
+    min-width: 14px;
+    height: 14px;
+    padding: 0 4px;
+    border: 1px solid var(--bg-color);
+    border-radius: 999px;
+    background-color: var(--primary-color);
+    color: #fff;
+    font-size: 10px;
+    font-weight: 700;
+    line-height: 1;
+    pointer-events: none;
+  }
+
+  &__manager {
+    display: flex;
+    flex: 0 0 176px;
+    flex-direction: column;
+    gap: 2px;
+    min-height: 0;
+    padding-left: 8px;
+    border-left: 1px solid var(--border-color);
+    overflow: auto;
+  }
+
+  &__manager-item {
+    display: flex;
+    position: relative;
+    align-items: center;
+    gap: 2px;
+    min-width: 0;
+    min-height: 30px;
+    padding: 2px 3px;
+    border-radius: 6px;
+    color: var(--sub-text-color);
+    cursor: pointer;
+    transition: background-color .18s ease, color .18s ease, opacity .18s ease;
+
+    &::before,
+    &::after {
+      position: absolute;
+      right: 4px;
+      left: 4px;
+      height: 2px;
+      border-radius: 999px;
+      background-color: var(--primary-color);
+      content: '';
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity .12s ease;
+    }
+
+    &::before {
+      top: -2px;
+    }
+
+    &::after {
+      bottom: -2px;
+    }
+
+    &.is-active {
+      background-color: var(--sub-bg-color);
+      color: var(--text-color);
+    }
+
+    &.is-dragging {
+      opacity: .56;
+    }
+
+    &.is-editing {
+      background-color: color-mix(
+        in srgb,
+        var(--primary-color) 9%,
+        var(--bg-color)
+      );
+      box-shadow:
+        inset 0 0 0 1px var(--primary-color),
+        0 0 0 2px color-mix(in srgb, var(--primary-color) 14%, transparent);
+      color: var(--text-color);
+      cursor: text;
+    }
+
+    &.is-drop-before::before,
+    &.is-drop-after::after {
+      opacity: 1;
+    }
+
+    &:hover,
+    &:focus-within {
+      background-color: var(--nav-hover-bg);
+      color: var(--text-color);
+    }
+  }
+
+  &__manager-drag {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 24px;
     padding: 0;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--sub-text-color);
+    cursor: grab;
+    font-size: 16px;
+    line-height: 1;
+    user-select: none;
+    flex: 0 0 auto;
+
+    &:hover {
+      background-color: color-mix(
+        in srgb,
+        var(--nav-hover-bg) 72%,
+        transparent
+      );
+      color: var(--text-color);
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  &__manager-title-wrap {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+  }
+
+  &__manager-title-text {
+    display: block;
+    width: 100%;
+    min-width: 0;
+    height: 24px;
+    padding: 0 3px;
     font-size: 12px;
+    font-weight: 600;
+    line-height: 24px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__manager-edit-icon {
+    color: var(--primary-color);
+    font-size: 14px;
+    line-height: 1;
+    flex: 0 0 auto;
+  }
+
+  &__manager-title-input {
+    width: 100%;
+    min-width: 0;
+    height: 24px;
+    padding: 0 6px;
+    border: none;
+    border-radius: 4px;
+    outline: none;
+    background-color: var(--bg-color);
+    box-shadow: inset 0 0 0 1px var(--primary-color);
+    color: var(--text-color);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 24px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &::placeholder {
+      color: inherit;
+      opacity: .74;
+    }
+
+    &:focus {
+      box-shadow:
+        inset 0 0 0 1px var(--primary-color),
+        0 0 0 2px color-mix(in srgb, var(--primary-color) 18%, transparent);
+    }
+  }
+
+  &__manager-close.ant-btn.ant-btn-text {
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: none;
+    border-radius: 6px;
     color: var(--sub-text-color);
+    opacity: 0;
+    flex: 0 0 auto;
+    transform: translateX(2px);
+    visibility: hidden;
+    pointer-events: none;
+    transition:
+      background-color .2s ease,
+      color .2s ease,
+      opacity .16s ease,
+      transform .16s ease,
+      visibility .16s ease;
+
+    .material-symbols-rounded {
+      font-size: 14px;
+      line-height: 1;
+    }
+
+    &:hover {
+      background-color: var(--nav-hover-bg);
+      color: var(--text-color);
+    }
   }
+
+  &__manager-item:hover &__manager-close.ant-btn.ant-btn-text,
+  &__manager-item:focus-within &__manager-close.ant-btn.ant-btn-text {
+    opacity: 1;
+    transform: translateX(0);
+    visibility: visible;
+    pointer-events: auto;
+  }
+}
+
+.dock-panel.chat-terminal-view {
+  gap: 0;
+}
+
+html.dark .chat-terminal-view {
+  --terminal-action-hover-bg: var(--nav-hover-bg, #1a1a1a);
 }

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) => {