@vibe-forge/client 2.0.0 → 2.0.1

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

@@ -0,0 +1,72 @@
+import { useEffect, useRef, useState } from 'react'
+
+import type { TerminalPaneConfig } from '../@utils/terminal-panes'
+
+export function useTerminalTitleEditor({
+  onActivate,
+  onRename,
+  panes
+}: {
+  onActivate: (terminalId: string) => void
+  onRename: (terminalId: string, title: string) => void
+  panes: TerminalPaneConfig[]
+}) {
+  const [editingTerminalId, setEditingTerminalId] = useState<string | null>(null)
+  const [editingTitle, setEditingTitle] = useState('')
+  const editingInputRef = useRef<HTMLInputElement | null>(null)
+  const editingTerminalIdRef = useRef<string | null>(null)
+
+  useEffect(() => {
+    if (editingTerminalId == null) {
+      return
+    }
+
+    window.requestAnimationFrame(() => {
+      editingInputRef.current?.focus()
+      editingInputRef.current?.select()
+    })
+  }, [editingTerminalId])
+
+  useEffect(() => {
+    if (editingTerminalId != null && panes.every(pane => pane.id !== editingTerminalId)) {
+      editingTerminalIdRef.current = null
+      setEditingTerminalId(null)
+      setEditingTitle('')
+    }
+  }, [editingTerminalId, panes])
+
+  const startEditing = (pane: TerminalPaneConfig) => {
+    onActivate(pane.id)
+    editingTerminalIdRef.current = pane.id
+    setEditingTerminalId(pane.id)
+    setEditingTitle(pane.title)
+  }
+
+  const cancelEditing = () => {
+    editingTerminalIdRef.current = null
+    setEditingTerminalId(null)
+    setEditingTitle('')
+  }
+
+  const finishEditing = () => {
+    const terminalId = editingTerminalIdRef.current
+    if (terminalId != null) {
+      const title = editingTitle.trim()
+      if (title !== '') {
+        onRename(terminalId, title)
+      }
+    }
+
+    cancelEditing()
+  }
+
+  return {
+    cancelEditing,
+    editingInputRef,
+    editingTerminalId,
+    editingTitle,
+    finishEditing,
+    setEditingTitle,
+    startEditing
+  }
+}

package/src/components/chat/terminal/@utils/terminal-keyboard.ts

@@ -0,0 +1,141 @@
+const APPLE_PLATFORM_PATTERN = /mac|iphone|ipad|ipod/i
+const WORD_CHARACTER_PATTERN = /\w/
+const WORD_NAVIGATION_SEQUENCES = {
+  cursorLeft: '\x1B[D',
+  cursorRight: '\x1B[C',
+  modifiedAltLeft: '\x1B[1;3D',
+  modifiedAltRight: '\x1B[1;3C',
+  ctrlLeft: '\x1B[1;5D',
+  ctrlRight: '\x1B[1;5C'
+}
+
+export type TerminalKeyboardAction =
+  | { type: 'clear' }
+  | { data: string; type: 'input' }
+
+export interface TerminalKeyboardActionOptions {
+  cursorX?: number
+  isAlternateBuffer?: boolean
+  lineText?: string
+  platform?: string
+}
+
+const getCurrentPlatform = () => globalThis.navigator?.platform ?? ''
+
+const isApplePlatform = (platform = getCurrentPlatform()) => APPLE_PLATFORM_PATTERN.test(platform)
+
+const isClearOutputShortcut = (event: KeyboardEvent, platform?: string) => {
+  if (event.key.toLowerCase() !== 'k' || event.altKey || event.shiftKey) {
+    return false
+  }
+
+  return isApplePlatform(platform) ? event.metaKey : event.ctrlKey
+}
+
+const isWordCharacter = (character: string) => WORD_CHARACTER_PATTERN.test(character)
+
+const getPreviousWordBoundary = (lineText: string, cursorX: number) => {
+  let index = Math.min(Math.max(cursorX, 0), lineText.length)
+
+  while (index > 0 && !isWordCharacter(lineText[index - 1] ?? '')) {
+    index -= 1
+  }
+
+  while (index > 0 && isWordCharacter(lineText[index - 1] ?? '')) {
+    index -= 1
+  }
+
+  return index
+}
+
+const getNextWordBoundary = (lineText: string, cursorX: number) => {
+  let index = Math.min(Math.max(cursorX, 0), lineText.length)
+
+  if (isWordCharacter(lineText[index] ?? '')) {
+    while (index < lineText.length && isWordCharacter(lineText[index] ?? '')) {
+      index += 1
+    }
+    return index
+  }
+
+  while (index < lineText.length && !isWordCharacter(lineText[index] ?? '')) {
+    index += 1
+  }
+
+  while (index < lineText.length && isWordCharacter(lineText[index] ?? '')) {
+    index += 1
+  }
+
+  return index
+}
+
+const repeatSequence = (sequence: string, count: number) => count <= 0 ? '' : sequence.repeat(count)
+
+const getRenderedWordNavigationSequence = (
+  event: KeyboardEvent,
+  options: TerminalKeyboardActionOptions
+) => {
+  const cursorX = options.cursorX
+  const lineText = options.lineText
+  if (cursorX == null || lineText == null) {
+    return null
+  }
+
+  if (event.key === 'ArrowLeft') {
+    return repeatSequence(
+      WORD_NAVIGATION_SEQUENCES.cursorLeft,
+      cursorX - getPreviousWordBoundary(lineText, cursorX)
+    )
+  }
+
+  return repeatSequence(
+    WORD_NAVIGATION_SEQUENCES.cursorRight,
+    getNextWordBoundary(lineText, cursorX) - cursorX
+  )
+}
+
+const getWordNavigationSequence = (
+  event: KeyboardEvent,
+  options: TerminalKeyboardActionOptions
+) => {
+  if (event.metaKey || event.shiftKey || (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')) {
+    return null
+  }
+
+  if (event.altKey && !event.ctrlKey) {
+    if (options.isAlternateBuffer === true) {
+      return event.key === 'ArrowLeft'
+        ? WORD_NAVIGATION_SEQUENCES.modifiedAltLeft
+        : WORD_NAVIGATION_SEQUENCES.modifiedAltRight
+    }
+
+    return getRenderedWordNavigationSequence(event, options)
+  }
+
+  if (!isApplePlatform(options.platform) && event.ctrlKey && !event.altKey) {
+    return event.key === 'ArrowLeft'
+      ? WORD_NAVIGATION_SEQUENCES.ctrlLeft
+      : WORD_NAVIGATION_SEQUENCES.ctrlRight
+  }
+
+  return null
+}
+
+export const getTerminalKeyboardAction = (
+  event: KeyboardEvent,
+  options: TerminalKeyboardActionOptions = {}
+): TerminalKeyboardAction | null => {
+  if (isClearOutputShortcut(event, options.platform)) {
+    return { type: 'clear' }
+  }
+
+  const wordNavigationSequence = getWordNavigationSequence(event, options)
+  if (wordNavigationSequence == null) {
+    return null
+  }
+
+  return {
+    type: 'input',
+    data: wordNavigationSequence
+  }
+}

package/src/components/chat/terminal/@utils/terminal-panes.ts

@@ -0,0 +1,123 @@
+import type { TFunction } from 'i18next'
+
+import type { TerminalShellKind } from '@vibe-forge/types'
+
+export const DEFAULT_TERMINAL_ID = 'default'
+export const TERMINAL_SHELL_KINDS: TerminalShellKind[] = ['default', 'zsh', 'bash', 'sh']
+
+export interface TerminalPaneConfig {
+  id: string
+  title: string
+  shellKind: TerminalShellKind
+}
+
+export type MoveTerminalPanePlacement = 'after' | 'before'
+
+const buildTerminalTitle = (index: number, t: TFunction) => t('chat.terminal.paneTitle', { index })
+
+export const getNextTerminalTitle = (panes: TerminalPaneConfig[], t: TFunction) => {
+  const usedTitles = new Set(panes.map(pane => pane.title.trim()).filter(Boolean))
+  for (let index = 1; index <= panes.length + 1; index += 1) {
+    const title = buildTerminalTitle(index, t)
+    if (!usedTitles.has(title)) {
+      return title
+    }
+  }
+
+  return buildTerminalTitle(panes.length + 1, t)
+}
+
+export const withFixedTerminalTitles = (panes: TerminalPaneConfig[], t: TFunction) => {
+  const titledPanes: TerminalPaneConfig[] = []
+  for (const pane of panes) {
+    const title = pane.title.trim()
+    titledPanes.push({
+      ...pane,
+      title: title === '' ? getNextTerminalTitle(titledPanes, t) : title
+    })
+  }
+
+  return titledPanes
+}
+
+const isTerminalShellKind = (value: unknown): value is TerminalShellKind => (
+  typeof value === 'string' && TERMINAL_SHELL_KINDS.includes(value as TerminalShellKind)
+)
+
+const normalizePane = (value: unknown): TerminalPaneConfig | null => {
+  if (typeof value === 'string' && value.trim() !== '') {
+    return { id: value.trim(), title: '', shellKind: 'default' }
+  }
+
+  if (value == null || typeof value !== 'object') {
+    return null
+  }
+
+  const candidate = value as Partial<TerminalPaneConfig>
+  const id = typeof candidate.id === 'string' ? candidate.id.trim() : ''
+  if (id === '') {
+    return null
+  }
+
+  return {
+    id,
+    title: typeof candidate.title === 'string' ? candidate.title : '',
+    shellKind: isTerminalShellKind(candidate.shellKind) ? candidate.shellKind : 'default'
+  }
+}
+
+export const normalizeTerminalPanes = (value: unknown): TerminalPaneConfig[] => {
+  if (!Array.isArray(value)) {
+    return [{ id: DEFAULT_TERMINAL_ID, title: '', shellKind: 'default' }]
+  }
+
+  const panes: TerminalPaneConfig[] = []
+  const seen = new Set<string>()
+  for (const item of value) {
+    const pane = normalizePane(item)
+    if (pane == null || seen.has(pane.id)) {
+      continue
+    }
+
+    panes.push(pane)
+    seen.add(pane.id)
+  }
+
+  return panes.length > 0 ? panes : [{ id: DEFAULT_TERMINAL_ID, title: '', shellKind: 'default' }]
+}
+
+export const createTerminalPane = (
+  shellKind: TerminalShellKind = 'default',
+  title = ''
+): TerminalPaneConfig => ({
+  id: `term-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`,
+  title,
+  shellKind
+})
+
+export const moveTerminalPane = (
+  panes: TerminalPaneConfig[],
+  sourceId: string,
+  targetId: string,
+  placement: MoveTerminalPanePlacement = 'before'
+) => {
+  const sourceIndex = panes.findIndex(item => item.id === sourceId)
+  const targetIndex = panes.findIndex(item => item.id === targetId)
+  if (sourceIndex < 0 || targetIndex < 0 || sourceIndex === targetIndex) {
+    return panes
+  }
+
+  const nextPanes = [...panes]
+  const [moved] = nextPanes.splice(sourceIndex, 1)
+  if (moved == null) {
+    return panes
+  }
+
+  const nextTargetIndex = nextPanes.findIndex(item => item.id === targetId)
+  if (nextTargetIndex < 0) {
+    return panes
+  }
+
+  nextPanes.splice(nextTargetIndex + (placement === 'after' ? 1 : 0), 0, moved)
+  return nextPanes
+}

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);
 }