@vibe-forge/client 2.0.0 → 2.0.1

package/src/components/chat/status-bar/ChatStatusBar.tsx

@@ -1,6 +1,11 @@
 import './ChatStatusBar.scss'
 
+import type { ReactNode } from 'react'
+
+import { AccountSelectControl } from '#~/components/chat/sender/@components/account-select/AccountSelectControl'
+import { AdapterSelectControl } from '#~/components/chat/sender/@components/adapter-select/AdapterSelectControl'
 import type { ChatSessionWorkspaceDraft } from '#~/hooks/chat/chat-session-workspace-draft'
+import type { ChatAdapterAccountOption } from '#~/hooks/chat/use-chat-adapter-account-selection'
 import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
 
 import { ChatGitControls } from '../git-controls/ChatGitControls'
@@ -10,11 +15,31 @@ export function ChatStatusBar({
   draftWorkspace,
   isCreating,
   sessionId,
+  adapterLocked = false,
+  isThinking = false,
+  modelUnavailable = false,
+  selectedAdapter,
+  adapterOptions,
+  onAdapterChange,
+  selectedAccount,
+  accountOptions,
+  showAccountSelector = false,
+  onAccountChange,
   onDraftWorkspaceChange
 }: {
   draftWorkspace: ChatSessionWorkspaceDraft
   isCreating: boolean
   sessionId?: string
+  adapterLocked?: boolean
+  isThinking?: boolean
+  modelUnavailable?: boolean
+  selectedAdapter?: string
+  adapterOptions?: Array<{ value: string; label: ReactNode }>
+  onAdapterChange?: (adapter: string) => void
+  selectedAccount?: string
+  accountOptions?: ChatAdapterAccountOption[]
+  showAccountSelector?: boolean
+  onAccountChange?: (account: string) => void
   onDraftWorkspaceChange: (nextDraft: ChatSessionWorkspaceDraft) => void
 }) {
   const { isCompactLayout } = useResponsiveLayout()
@@ -34,6 +59,29 @@ export function ChatStatusBar({
             />
           )}
       </div>
+      <div className='chat-status-bar__actions'>
+        <AccountSelectControl
+          state={{
+            isThinking,
+            modelUnavailable,
+            selectedAccount,
+            selectedAdapter,
+            showAccountSelector
+          }}
+          data={{ accountOptions }}
+          handlers={{ onAccountChange }}
+        />
+        <AdapterSelectControl
+          state={{
+            adapterLocked,
+            modelUnavailable,
+            isThinking,
+            selectedAdapter
+          }}
+          data={{ adapterOptions }}
+          handlers={{ onAdapterChange }}
+        />
+      </div>
     </div>
   )
 }

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

@@ -0,0 +1,191 @@
+import { Button, Tooltip } from 'antd'
+import type { DragEvent } from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { useTerminalTitleEditor } from '../@hooks/use-terminal-title-editor'
+import type { MoveTerminalPanePlacement, TerminalPaneConfig } from '../@utils/terminal-panes'
+
+export interface TerminalPaneInfo {
+  shellLabel: string
+  isExited: boolean
+}
+
+interface DropTargetState {
+  terminalId: string
+  placement: MoveTerminalPanePlacement
+}
+
+export function TerminalManagerList({
+  activeTerminalId,
+  infoById,
+  panes,
+  onActivate,
+  onClose,
+  onMove,
+  onRename
+}: {
+  activeTerminalId: string
+  infoById: Record<string, TerminalPaneInfo>
+  panes: TerminalPaneConfig[]
+  onActivate: (terminalId: string) => void
+  onClose: (terminalId: string) => void
+  onMove: (sourceId: string, targetId: string, placement: MoveTerminalPanePlacement) => void
+  onRename: (terminalId: string, title: string) => void
+}) {
+  const { t } = useTranslation()
+  const [draggingTerminalId, setDraggingTerminalId] = useState<string | null>(null)
+  const [dropTarget, setDropTarget] = useState<DropTargetState | null>(null)
+  const {
+    cancelEditing,
+    editingInputRef,
+    editingTerminalId,
+    editingTitle,
+    finishEditing,
+    setEditingTitle,
+    startEditing
+  } = useTerminalTitleEditor({ onActivate, onRename, panes })
+
+  const handleDragStart = (event: DragEvent, terminalId: string) => {
+    setDraggingTerminalId(terminalId)
+    event.dataTransfer.effectAllowed = 'move'
+    event.dataTransfer.setData('text/plain', terminalId)
+
+    const dragImage = event.currentTarget.closest('.chat-terminal-view__manager-item')
+    if (dragImage instanceof HTMLElement) {
+      event.dataTransfer.setDragImage(dragImage, 12, 14)
+    }
+  }
+
+  const handleDragOver = (event: DragEvent, terminalId: string) => {
+    event.preventDefault()
+    event.dataTransfer.dropEffect = 'move'
+    if (draggingTerminalId === terminalId) {
+      setDropTarget(null)
+      return
+    }
+
+    const rect = event.currentTarget.getBoundingClientRect()
+    const placement = event.clientY < rect.top + rect.height / 2 ? 'before' : 'after'
+    setDropTarget(current => (
+      current?.terminalId === terminalId && current.placement === placement
+        ? current
+        : { terminalId, placement }
+    ))
+  }
+
+  const handleDrop = (event: DragEvent, targetId: string) => {
+    event.preventDefault()
+    const sourceId = draggingTerminalId ?? event.dataTransfer.getData('text/plain')
+    const placement = dropTarget?.terminalId === targetId ? dropTarget.placement : 'before'
+    setDraggingTerminalId(null)
+    setDropTarget(null)
+    if (sourceId !== '' && sourceId !== targetId) {
+      onMove(sourceId, targetId, placement)
+    }
+  }
+
+  return (
+    <aside
+      className='chat-terminal-view__manager'
+      aria-label={t('chat.terminal.manageTerminals')}
+      onDragLeave={(event) => {
+        if (!(event.relatedTarget instanceof Node) || !event.currentTarget.contains(event.relatedTarget)) {
+          setDropTarget(null)
+        }
+      }}
+    >
+      {panes.map((pane) => {
+        const info = infoById[pane.id]
+        const isEditing = pane.id === editingTerminalId
+        const shellLabel = info?.shellLabel ?? t(`chat.terminal.shell.${pane.shellKind}`)
+        const shellTooltip = info?.isExited === true
+          ? t('chat.terminal.shellTooltipExited', { shell: shellLabel })
+          : t('chat.terminal.shellTooltip', { shell: shellLabel })
+        return (
+          <div
+            key={pane.id}
+            className={`chat-terminal-view__manager-item ${pane.id === activeTerminalId ? 'is-active' : ''} ${
+              pane.id === draggingTerminalId ? 'is-dragging' : ''
+            } ${isEditing ? 'is-editing' : ''} ${
+              dropTarget?.terminalId === pane.id ? `is-drop-${dropTarget.placement}` : ''
+            }`}
+            onClick={() => onActivate(pane.id)}
+            onDragOver={(event) => handleDragOver(event, pane.id)}
+            onDrop={(event) => handleDrop(event, pane.id)}
+          >
+            <button
+              type='button'
+              className='chat-terminal-view__manager-drag material-symbols-rounded'
+              draggable
+              title={t('chat.terminal.dragSession')}
+              aria-label={t('chat.terminal.dragSession')}
+              onDragStart={(event) => handleDragStart(event, pane.id)}
+              onDragEnd={() => {
+                setDraggingTerminalId(null)
+                setDropTarget(null)
+              }}
+            >
+              drag_indicator
+            </button>
+            <Tooltip title={isEditing ? null : shellTooltip} placement='top'>
+              <span className='chat-terminal-view__manager-title-wrap'>
+                {isEditing
+                  ? (
+                    <>
+                      <span className='chat-terminal-view__manager-edit-icon material-symbols-rounded'>
+                        edit
+                      </span>
+                      <input
+                        ref={editingInputRef}
+                        className='chat-terminal-view__manager-title-input'
+                        value={editingTitle}
+                        aria-label={t('chat.terminal.renameSession', { title: pane.title })}
+                        onBlur={finishEditing}
+                        onChange={event => setEditingTitle(event.target.value)}
+                        onClick={event => event.stopPropagation()}
+                        onDoubleClick={event => event.stopPropagation()}
+                        onKeyDown={(event) => {
+                          if (event.key === 'Enter') {
+                            finishEditing()
+                            return
+                          }
+
+                          if (event.key === 'Escape') {
+                            cancelEditing()
+                          }
+                        }}
+                      />
+                    </>
+                  )
+                  : (
+                    <span
+                      className='chat-terminal-view__manager-title-text'
+                      onDoubleClick={(event) => {
+                        event.stopPropagation()
+                        startEditing(pane)
+                      }}
+                    >
+                      {pane.title}
+                    </span>
+                  )}
+              </span>
+            </Tooltip>
+            <Button
+              type='text'
+              className='chat-terminal-view__manager-close'
+              data-dock-panel-no-resize='true'
+              icon={<span className='material-symbols-rounded'>close</span>}
+              title={t('chat.terminal.closeNamedSession', { title: pane.title })}
+              aria-label={t('chat.terminal.closeNamedSession', { title: pane.title })}
+              onClick={(event) => {
+                event.stopPropagation()
+                onClose(pane.id)
+              }}
+            />
+          </div>
+        )
+      })}
+    </aside>
+  )
+}

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

@@ -0,0 +1,71 @@
+.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

@@ -0,0 +1,137 @@
+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

@@ -0,0 +1,75 @@
+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

@@ -3,6 +3,8 @@ 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
 
@@ -45,6 +47,11 @@ const buildTerminalTheme = () => {
   }
 }
 
+const getActiveLineText = (terminal: Terminal) => {
+  const buffer = terminal.buffer.active
+  return buffer.getLine(buffer.baseY + buffer.cursorY)?.translateToString(true) ?? ''
+}
+
 export function useTerminalInstance({
   onInput,
   onResize
@@ -99,12 +106,41 @@ export function useTerminalInstance({
       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()
 

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

@@ -1,16 +1,17 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import type { TerminalSessionCommand, TerminalSessionEvent } from '@vibe-forge/types'
+import type { TerminalSessionCommand, TerminalSessionEvent, TerminalShellKind } from '@vibe-forge/types'
 
 import { createSocket } from '#~/ws.js'
 
-const isSocketOpen = (socket: WebSocket | null): socket is WebSocket => {
-  return socket != null && socket.readyState === WebSocket.OPEN
-}
+const isSocketOpen = (socket: WebSocket | null): socket is WebSocket =>
+  socket != null && socket.readyState === WebSocket.OPEN
 
 export function useTerminalSession({
   sessionId,
+  shellKind,
+  terminalId,
   active,
   initialCols,
   initialRows,
@@ -19,6 +20,8 @@ export function useTerminalSession({
   onExit
 }: {
   sessionId: string
+  shellKind?: TerminalShellKind
+  terminalId?: string
   active: boolean
   initialCols: number
   initialRows: number
@@ -67,21 +70,12 @@ export function useTerminalSession({
     }, 800)
   }, [])
 
-  const sendInput = useCallback((data: string) => {
-    return sendCommand({
-      type: 'terminal_input',
-      data
-    })
-  }, [sendCommand])
-
-  const sendResizeCommand = useCallback((cols: number, rows: number) => {
-    return sendCommand({
-      type: 'terminal_resize',
-      cols,
-      rows
-    })
-  }, [sendCommand])
-
+  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) {
@@ -170,6 +164,8 @@ export function useTerminalSession({
     }, {
       channel: 'terminal',
       sessionId,
+      shellKind: shellKind ?? 'default',
+      terminalId: terminalId ?? '',
       cols: String(connectSize.cols),
       rows: String(connectSize.rows)
     })
@@ -185,12 +181,13 @@ export function useTerminalSession({
       socket.close()
       socketRef.current = null
     }
-  }, [active, connectVersion, flushPendingResize, scheduleReconnect, sessionId, t])
+  }, [active, connectVersion, flushPendingResize, scheduleReconnect, sessionId, shellKind, t, terminalId])
 
   return {
     errorMessage,
     lastExit,
     resizeTerminal,
-    sendInput
+    sendInput,
+    terminateTerminal
   }
 }