@vibe-forge/client 3.0.0-alpha.6 → 3.0.0-alpha.7

package/src/components/chat/terminal/@components/TerminalPane.scss

@@ -1,71 +0,0 @@
-.chat-terminal-pane {
-  display: flex;
-  position: absolute;
-  inset: 0;
-  flex-direction: column;
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-  background-color: var(--bg-color);
-  opacity: 0;
-  pointer-events: none;
-  visibility: hidden;
-
-  &.is-active {
-    opacity: 1;
-    pointer-events: auto;
-    visibility: visible;
-  }
-
-  &__body {
-    display: flex;
-    position: relative;
-    flex: 1;
-    min-height: 0;
-    padding: 0 10px;
-    box-sizing: border-box;
-  }
-
-  &__error {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    z-index: 3;
-    max-width: min(360px, calc(100% - 16px));
-    padding: 8px 10px;
-    border-radius: 8px;
-    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 {
-    flex: 1;
-    min-width: 0;
-    min-height: 0;
-    overflow: hidden;
-    cursor: text;
-
-    .xterm {
-      height: 100%;
-    }
-
-    .xterm-viewport {
-      background-color: var(--bg-color);
-    }
-  }
-
-  &__footer {
-    padding: 4px 8px;
-    border-top: 1px solid var(--border-color);
-    color: var(--sub-text-color);
-    font-size: 12px;
-    flex-shrink: 0;
-  }
-}

package/src/components/chat/terminal/@components/TerminalPane.tsx

@@ -1,137 +0,0 @@
-import './TerminalPane.scss'
-
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-
-import type { TerminalShellKind } from '@vibe-forge/types'
-
-import { useTerminalInstance } from '../@hooks/use-terminal-instance'
-import { useTerminalSession } from '../@hooks/use-terminal-session'
-
-const formatShellLabel = (shell: string | undefined) => shell?.split('/').filter(Boolean).at(-1) ?? 'shell'
-
-export function TerminalPane({
-  isActive,
-  onInfoChange,
-  onTerminateChange,
-  sessionId,
-  shellKind,
-  terminalId
-}: {
-  isActive: boolean
-  onInfoChange: (terminalId: string, info: { shellLabel: string; isExited: boolean }) => void
-  onTerminateChange: (terminalId: string, handler: (() => boolean) | null) => void
-  sessionId: string
-  shellKind: TerminalShellKind
-  terminalId: string
-}) {
-  const { t } = useTranslation()
-  const inputHandlerRef = useRef<(data: string) => void>(() => undefined)
-  const resizeHandlerRef = useRef<(cols: number, rows: number) => void>(() => undefined)
-  const [shellLabel, setShellLabel] = useState('shell')
-  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,
-    terminateTerminal
-  } = useTerminalSession({
-    sessionId,
-    shellKind,
-    terminalId,
-    active: terminalMounted,
-    initialCols: lastMeasuredSize.cols,
-    initialRows: lastMeasuredSize.rows,
-    onReady: useCallback((event) => {
-      const terminal = terminalRef.current
-      if (terminal == null) {
-        return
-      }
-
-      terminal.reset()
-      setShellLabel(formatShellLabel(event.info.shell))
-      if (event.scrollback != null && event.scrollback !== '') {
-        terminal.write(event.scrollback)
-      }
-      fitTerminal()
-    }, [fitTerminal, terminalRef]),
-    onOutput: useCallback((data) => {
-      terminalRef.current?.write(data)
-    }, [terminalRef])
-  })
-
-  useEffect(() => {
-    onTerminateChange(terminalId, terminateTerminal)
-    return () => {
-      onTerminateChange(terminalId, null)
-    }
-  }, [onTerminateChange, terminalId, terminateTerminal])
-
-  useEffect(() => {
-    onInfoChange(terminalId, {
-      shellLabel,
-      isExited: lastExit != null
-    })
-  }, [lastExit, onInfoChange, shellLabel, terminalId])
-
-  useEffect(() => {
-    if (!isActive) {
-      return
-    }
-
-    window.requestAnimationFrame(() => {
-      fitTerminal()
-      focusTerminal()
-    })
-  }, [fitTerminal, focusTerminal, isActive])
-
-  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'
-    })
-
-  return (
-    <section className={`chat-terminal-pane ${isActive ? 'is-active' : ''}`} aria-hidden={!isActive}>
-      <div className='chat-terminal-pane__body'>
-        {errorMessage != null && errorMessage !== '' && (
-          <div className='chat-terminal-pane__error'>
-            {errorMessage}
-          </div>
-        )}
-
-        <div
-          ref={containerRef}
-          className='chat-terminal-pane__terminal'
-          onClick={focusTerminal}
-        />
-      </div>
-
-      {exitSummary != null && (
-        <div className='chat-terminal-pane__footer'>
-          {exitSummary}
-        </div>
-      )}
-    </section>
-  )
-}

package/src/components/chat/terminal/@components/TerminalPanelActions.tsx

@@ -1,75 +0,0 @@
-import { Button, Dropdown } from 'antd'
-import type { MenuProps } from 'antd'
-import { useTranslation } from 'react-i18next'
-
-import type { TerminalShellKind } from '@vibe-forge/types'
-
-import { TERMINAL_SHELL_KINDS } from '../@utils/terminal-panes'
-
-export function TerminalPanelActions({
-  isManagerToggleVisible,
-  isManagerVisible,
-  terminalCount,
-  onAddTerminal,
-  onToggleManager
-}: {
-  isManagerToggleVisible: boolean
-  isManagerVisible: boolean
-  terminalCount: number
-  onAddTerminal: (shellKind?: TerminalShellKind) => void
-  onToggleManager: () => void
-}) {
-  const { t } = useTranslation()
-  const managerLabel = isManagerVisible ? t('chat.terminal.hideManager') : t('chat.terminal.showManager')
-  const shellMenuItems: MenuProps['items'] = TERMINAL_SHELL_KINDS.map(shellKind => ({
-    key: shellKind,
-    label: t(`chat.terminal.shell.${shellKind}`)
-  }))
-
-  return (
-    <div className='chat-terminal-view__header-actions' data-dock-panel-no-resize='true'>
-      <div className='chat-terminal-view__create-actions'>
-        <Button
-          type='text'
-          className='chat-terminal-view__create-btn chat-terminal-view__create-btn--add'
-          icon={<span className='material-symbols-rounded'>add</span>}
-          title={t('chat.terminal.addSession')}
-          aria-label={t('chat.terminal.addSession')}
-          onClick={() => onAddTerminal()}
-        />
-        <Dropdown
-          menu={{
-            items: shellMenuItems,
-            onClick: ({ key }) => onAddTerminal(key as TerminalShellKind)
-          }}
-          placement='bottomRight'
-          trigger={['click']}
-        >
-          <Button
-            type='text'
-            className='chat-terminal-view__create-btn chat-terminal-view__create-btn--menu'
-            icon={<span className='material-symbols-rounded'>arrow_drop_down</span>}
-            title={t('chat.terminal.selectShell')}
-            aria-label={t('chat.terminal.selectShell')}
-          />
-        </Dropdown>
-      </div>
-      {isManagerToggleVisible && (
-        <Button
-          type='text'
-          className='dock-panel__close-btn chat-terminal-view__manager-toggle-btn'
-          icon={<span className='material-symbols-rounded'>view_sidebar</span>}
-          title={managerLabel}
-          aria-label={managerLabel}
-          onClick={onToggleManager}
-        >
-          {!isManagerVisible && (
-            <span className='chat-terminal-view__manager-toggle-badge' aria-hidden='true'>
-              {terminalCount}
-            </span>
-          )}
-        </Button>
-      )}
-    </div>
-  )
-}

package/src/components/chat/terminal/@hooks/use-terminal-instance.ts

@@ -1,188 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-
-import { FitAddon } from '@xterm/addon-fit'
-import { Terminal } from '@xterm/xterm'
-
-import { getTerminalKeyboardAction } from '../@utils/terminal-keyboard'
-
-const DEFAULT_COLS = 120
-const DEFAULT_ROWS = 32
-
-const readCssVar = (styles: CSSStyleDeclaration, name: string, fallback: string) => {
-  const value = styles.getPropertyValue(name).trim()
-  return value === '' ? fallback : value
-}
-
-const buildTerminalTheme = () => {
-  const styles = window.getComputedStyle(document.documentElement)
-  const isDark = document.documentElement.classList.contains('dark')
-  const background = readCssVar(styles, '--bg-color', isDark ? '#141414' : '#ffffff')
-  const foreground = readCssVar(styles, '--text-color', isDark ? '#ffffff' : '#000000')
-  const subForeground = readCssVar(styles, '--sub-text-color', isDark ? '#8c8c8c' : '#1b1b1b')
-  const primaryColor = readCssVar(styles, '--primary-color', isDark ? '#3b82f6' : '#2563eb')
-  const primarySoftBg = readCssVar(styles, '--primary-soft-bg', isDark ? '#111b26' : '#eff6ff')
-
-  return {
-    background,
-    foreground,
-    cursor: primaryColor,
-    cursorAccent: background,
-    selectionBackground: primarySoftBg,
-    black: isDark ? '#0f172a' : '#111827',
-    red: isDark ? '#ef4444' : '#dc2626',
-    green: isDark ? '#10b981' : '#047857',
-    yellow: isDark ? '#f59e0b' : '#b45309',
-    blue: isDark ? '#60a5fa' : '#2563eb',
-    magenta: isDark ? '#f472b6' : '#c026d3',
-    cyan: isDark ? '#22d3ee' : '#0f766e',
-    white: isDark ? '#e2e8f0' : subForeground,
-    brightBlack: isDark ? '#475569' : '#4b5563',
-    brightRed: isDark ? '#f87171' : '#ef4444',
-    brightGreen: isDark ? '#34d399' : '#10b981',
-    brightYellow: isDark ? '#fbbf24' : '#f59e0b',
-    brightBlue: isDark ? '#93c5fd' : '#3b82f6',
-    brightMagenta: isDark ? '#f9a8d4' : '#d946ef',
-    brightCyan: isDark ? '#67e8f9' : '#14b8a6',
-    brightWhite: foreground
-  }
-}
-
-const getActiveLineText = (terminal: Terminal) => {
-  const buffer = terminal.buffer.active
-  return buffer.getLine(buffer.baseY + buffer.cursorY)?.translateToString(true) ?? ''
-}
-
-export function useTerminalInstance({
-  onInput,
-  onResize
-}: {
-  onInput: (data: string) => void
-  onResize: (cols: number, rows: number) => void
-}) {
-  const containerRef = useRef<HTMLDivElement | null>(null)
-  const terminalRef = useRef<Terminal | null>(null)
-  const fitAddonRef = useRef<FitAddon | null>(null)
-  const onInputRef = useRef(onInput)
-  const onResizeRef = useRef(onResize)
-  const [terminalMounted, setTerminalMounted] = useState(false)
-  const [lastMeasuredSize, setLastMeasuredSize] = useState({
-    cols: DEFAULT_COLS,
-    rows: DEFAULT_ROWS
-  })
-
-  onInputRef.current = onInput
-  onResizeRef.current = onResize
-
-  const fitTerminal = useCallback(() => {
-    const terminal = terminalRef.current
-    const fitAddon = fitAddonRef.current
-    if (terminal == null || fitAddon == null) {
-      return
-    }
-
-    fitAddon.fit()
-    if (terminal.cols <= 0 || terminal.rows <= 0) {
-      return
-    }
-
-    setLastMeasuredSize({
-      cols: terminal.cols,
-      rows: terminal.rows
-    })
-    onResizeRef.current(terminal.cols, terminal.rows)
-  }, [])
-
-  const focusTerminal = useCallback(() => {
-    terminalRef.current?.focus()
-  }, [])
-
-  useEffect(() => {
-    const container = containerRef.current
-    if (container == null) {
-      return
-    }
-
-    const terminal = new Terminal({
-      cursorBlink: true,
-      fontSize: 13,
-      fontFamily: '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace',
-      macOptionIsMeta: true,
-      scrollback: 5000,
-      theme: buildTerminalTheme()
-    })
-    const fitAddon = new FitAddon()
-
-    terminal.loadAddon(fitAddon)
-    terminal.attachCustomKeyEventHandler((event) => {
-      const buffer = terminal.buffer.active
-      const keyboardAction = getTerminalKeyboardAction(event, {
-        cursorX: buffer.cursorX,
-        isAlternateBuffer: buffer.type === 'alternate',
-        lineText: getActiveLineText(terminal)
-      })
-      if (keyboardAction == null) {
-        return true
-      }
-
-      event.preventDefault()
-      event.stopPropagation()
-      event.stopImmediatePropagation()
-      if (event.type !== 'keydown') {
-        return false
-      }
-
-      if (keyboardAction.type === 'clear') {
-        terminal.clear()
-        return false
-      }
-
-      if (keyboardAction.data !== '') {
-        terminal.input(keyboardAction.data)
-      }
-      return false
-    })
-    terminal.open(container)
-    terminal.focus()
-
-    terminalRef.current = terminal
-    fitAddonRef.current = fitAddon
-    setTerminalMounted(true)
-    fitTerminal()
-
-    const dataDisposable = terminal.onData((data) => {
-      onInputRef.current(data)
-    })
-
-    const resizeObserver = new ResizeObserver(() => {
-      fitTerminal()
-    })
-    resizeObserver.observe(container)
-
-    const themeObserver = new MutationObserver(() => {
-      terminal.options.theme = buildTerminalTheme()
-    })
-    themeObserver.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ['class', 'style']
-    })
-
-    return () => {
-      themeObserver.disconnect()
-      resizeObserver.disconnect()
-      dataDisposable.dispose()
-      fitAddon.dispose()
-      terminal.dispose()
-      fitAddonRef.current = null
-      terminalRef.current = null
-    }
-  }, [fitTerminal])
-
-  return {
-    containerRef,
-    fitTerminal,
-    focusTerminal,
-    lastMeasuredSize,
-    terminalMounted,
-    terminalRef
-  }
-}

package/src/components/chat/terminal/@hooks/use-terminal-session.ts

@@ -1,193 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-
-import type { TerminalSessionCommand, TerminalSessionEvent, TerminalShellKind } from '@vibe-forge/types'
-
-import { createSocket } from '#~/ws.js'
-
-const isSocketOpen = (socket: WebSocket | null): socket is WebSocket =>
-  socket != null && socket.readyState === WebSocket.OPEN
-
-export function useTerminalSession({
-  sessionId,
-  shellKind,
-  terminalId,
-  active,
-  initialCols,
-  initialRows,
-  onReady,
-  onOutput,
-  onExit
-}: {
-  sessionId: string
-  shellKind?: TerminalShellKind
-  terminalId?: string
-  active: boolean
-  initialCols: number
-  initialRows: number
-  onReady: (event: Extract<TerminalSessionEvent, { type: 'terminal_ready' }>) => void
-  onOutput: (data: string) => void
-  onExit?: (event: Extract<TerminalSessionEvent, { type: 'terminal_exit' }>) => void
-}) {
-  const { t } = useTranslation()
-  const socketRef = useRef<WebSocket | null>(null)
-  const expectedCloseRef = useRef(false)
-  const fatalErrorRef = useRef(false)
-  const reconnectTimerRef = useRef<number | null>(null)
-  const restartRequestedRef = useRef(false)
-  const latestSizeRef = useRef({ cols: initialCols, rows: initialRows })
-  const pendingResizeRef = useRef<{ cols: number; rows: number } | null>(null)
-  const onReadyRef = useRef(onReady)
-  const onOutputRef = useRef(onOutput)
-  const onExitRef = useRef(onExit)
-  const [connectVersion, setConnectVersion] = useState(0)
-  const [errorMessage, setErrorMessage] = useState<string | null>(null)
-  const [lastExit, setLastExit] = useState<{ exitCode: number | null; signal: number | null } | null>(null)
-
-  onReadyRef.current = onReady
-  onOutputRef.current = onOutput
-  onExitRef.current = onExit
-  latestSizeRef.current = { cols: initialCols, rows: initialRows }
-
-  const sendCommand = useCallback((command: TerminalSessionCommand) => {
-    const socket = socketRef.current
-    if (!isSocketOpen(socket)) {
-      return false
-    }
-
-    socket.send(JSON.stringify(command))
-    return true
-  }, [])
-
-  const scheduleReconnect = useCallback(() => {
-    if (reconnectTimerRef.current != null) {
-      window.clearTimeout(reconnectTimerRef.current)
-    }
-
-    reconnectTimerRef.current = window.setTimeout(() => {
-      reconnectTimerRef.current = null
-      setConnectVersion(current => current + 1)
-    }, 800)
-  }, [])
-
-  const sendInput = useCallback((data: string) => sendCommand({ type: 'terminal_input', data }), [sendCommand])
-  const sendResizeCommand = useCallback(
-    (cols: number, rows: number) => sendCommand({ type: 'terminal_resize', cols, rows }),
-    [sendCommand]
-  )
-  const terminateTerminal = useCallback(() => sendCommand({ type: 'terminal_terminate' }), [sendCommand])
-  const flushPendingResize = useCallback(() => {
-    const pendingResize = pendingResizeRef.current
-    if (pendingResize == null) {
-      return false
-    }
-
-    const sent = sendResizeCommand(pendingResize.cols, pendingResize.rows)
-    if (sent) {
-      pendingResizeRef.current = null
-    }
-    return sent
-  }, [sendResizeCommand])
-
-  const resizeTerminal = useCallback((cols: number, rows: number) => {
-    latestSizeRef.current = { cols, rows }
-    pendingResizeRef.current = { cols, rows }
-    return flushPendingResize()
-  }, [flushPendingResize])
-
-  useEffect(() => {
-    if (!active) {
-      return
-    }
-
-    expectedCloseRef.current = false
-    fatalErrorRef.current = false
-    restartRequestedRef.current = false
-    setErrorMessage(null)
-    pendingResizeRef.current = latestSizeRef.current
-
-    const connectSize = latestSizeRef.current
-
-    const socket = createSocket<TerminalSessionEvent>({
-      onOpen: () => {
-        flushPendingResize()
-      },
-      onMessage: (event) => {
-        switch (event.type) {
-          case 'terminal_ready':
-            setErrorMessage(null)
-            if (event.info.status === 'exited') {
-              if (!restartRequestedRef.current) {
-                restartRequestedRef.current = true
-                const restartSize = latestSizeRef.current
-                socket.send(JSON.stringify(
-                  {
-                    type: 'terminal_restart',
-                    cols: restartSize.cols,
-                    rows: restartSize.rows
-                  } satisfies TerminalSessionCommand
-                ))
-              }
-              return
-            }
-
-            restartRequestedRef.current = false
-            setLastExit(null)
-            onReadyRef.current(event)
-            return
-          case 'terminal_output':
-            onOutputRef.current(event.data)
-            return
-          case 'terminal_exit':
-            setLastExit({
-              exitCode: event.exitCode,
-              signal: event.signal
-            })
-            onExitRef.current?.(event)
-            return
-          case 'terminal_error':
-            fatalErrorRef.current = event.fatal === true
-            setErrorMessage(event.message)
-        }
-      },
-      onError: () => {
-        setErrorMessage(t('chat.terminal.connectionError'))
-      },
-      onClose: () => {
-        socketRef.current = null
-        if (expectedCloseRef.current || fatalErrorRef.current) {
-          return
-        }
-
-        scheduleReconnect()
-      }
-    }, {
-      channel: 'terminal',
-      sessionId,
-      shellKind: shellKind ?? 'default',
-      terminalId: terminalId ?? '',
-      cols: String(connectSize.cols),
-      rows: String(connectSize.rows)
-    })
-
-    socketRef.current = socket
-
-    return () => {
-      expectedCloseRef.current = true
-      if (reconnectTimerRef.current != null) {
-        window.clearTimeout(reconnectTimerRef.current)
-        reconnectTimerRef.current = null
-      }
-      socket.close()
-      socketRef.current = null
-    }
-  }, [active, connectVersion, flushPendingResize, scheduleReconnect, sessionId, shellKind, t, terminalId])
-
-  return {
-    errorMessage,
-    lastExit,
-    resizeTerminal,
-    sendInput,
-    terminateTerminal
-  }
-}