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

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

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

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

@@ -1,123 +0,0 @@
-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,334 +0,0 @@
-.chat-terminal-view {
-  position: relative;
-  --terminal-action-hover-bg: var(--nav-hover-bg, #f3f4f6);
-
-  &__surface {
-    display: flex;
-    position: relative;
-    flex: 1;
-    min-height: 0;
-    gap: 10px;
-    overflow: hidden;
-    background-color: var(--bg-color);
-  }
-
-  &__terminal-stage {
-    display: flex;
-    position: relative;
-    flex: 1;
-    min-width: 0;
-    min-height: 0;
-    overflow: hidden;
-  }
-
-  &__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);
-    }
-  }
-
-  &__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;
-    }
-  }
-
-  &__manager-toggle-btn.ant-btn.ant-btn-text {
-    .material-symbols-rounded {
-      font-size: 15px;
-    }
-  }
-
-  &__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);
-}