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

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

@@ -1,192 +0,0 @@
-import '@xterm/xterm/css/xterm.css'
-import './ChatTerminalView.scss'
-
-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 {
-  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,
-  onClose,
-  sessionId
-}: {
-  isOpen: boolean
-  onClose: () => void
-  sessionId: string
-}) {
-  const { t } = useTranslation()
-  const { isCompactLayout, isTouchInteraction } = useResponsiveLayout()
-  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])
-
-  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
-      }
-
-      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 : CHAT_BOTTOM_DOCK_DEFAULT_HEIGHT}
-      fullscreenEnterLabel={t('common.enterFullscreen')}
-      fullscreenExitLabel={t('common.exitFullscreen')}
-      isOpen={isOpen}
-      maxHeight={isCompactView ? 320 : CHAT_BOTTOM_DOCK_MAX_HEIGHT}
-      minHeight={isCompactView ? 180 : CHAT_BOTTOM_DOCK_MIN_HEIGHT}
-      title={t('chat.viewTerminal')}
-      closeLabel={t('common.close')}
-      resizeLabel={t('chat.terminal.resizePanel')}
-      storageKey={CHAT_BOTTOM_DOCK_HEIGHT_STORAGE_KEY}
-      onClose={onClose}
-      actions={
-        <TerminalPanelActions
-          isManagerToggleVisible={shouldShowManagerToggle}
-          isManagerVisible={isManagerVisible}
-          terminalCount={panes.length}
-          onAddTerminal={handleAddTerminal}
-          onToggleManager={() => setIsManagerVisible(current => !current)}
-        />
-      }
-    >
-      <div className='chat-terminal-view__surface'>
-        <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/DefaultTool.tsx

@@ -1,102 +0,0 @@
-import { useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-
-import type { ChatMessageContent } from '@vibe-forge/core'
-
-import { ToolCallBox } from './core/ToolCallBox'
-import { ToolDiffViewer } from './core/ToolDiffViewer'
-import { ToolResultContent } from './core/ToolResultContent'
-import { ToolSummaryHeader } from './core/ToolSummaryHeader'
-import { buildGenericToolPresentation } from './core/generic-tool-presentation'
-import { hasMeaningfulToolValue } from './core/tool-content-presence'
-import { getToolTargetPresentation } from './core/tool-display'
-import { ToolInlineFields, renderToolBlockField } from './core/tool-field-sections'
-import { getToolPrimaryText, getToolTitleText } from './core/tool-summary'
-
-export function DefaultTool({
-  item,
-  resultItem
-}: {
-  item: Extract<ChatMessageContent, { type: 'tool_use' }>
-  resultItem?: Extract<ChatMessageContent, { type: 'tool_result' }>
-}) {
-  const { t } = useTranslation()
-  const view = useMemo(() => buildGenericToolPresentation(item.name, item.input), [item.input, item.name])
-  const hasCallDetails = view.inlineFields.length > 0 || view.blockFields.length > 0 || view.diff != null
-  const hasResultDetails = resultItem != null && hasMeaningfulToolValue(resultItem.content)
-  const showResultDetails = hasResultDetails && !(view.suppressSuccessResult === true && resultItem?.is_error !== true)
-  const hasDetails = hasCallDetails || showResultDetails
-  const titleText = view.titleKey != null
-    ? t(view.titleKey, { defaultValue: view.fallbackTitle })
-    : getToolTitleText(item, t)
-  const targetPresentation = getToolTargetPresentation(view.primary ?? getToolPrimaryText(item))
-  const preferMarkdown = ['webfetch', 'websearch'].includes(
-    item.name.split(':').pop()?.replace(/[^a-z0-9]+/gi, '').toLowerCase() ?? ''
-  )
-  const errorMeta = resultItem?.is_error === true
-    ? (
-      <span className='tool-status tool-status--error'>
-        <span className='material-symbols-rounded'>error</span>
-      </span>
-    )
-    : undefined
-
-  return (
-    <div className='tool-group tool-group--compact'>
-      <ToolCallBox
-        variant='inline'
-        defaultExpanded={false}
-        collapsible={hasDetails}
-        header={({ isExpanded, isCollapsible }) => (
-          <ToolSummaryHeader
-            icon={<span className='material-symbols-rounded'>{view.icon}</span>}
-            title={titleText}
-            target={targetPresentation.text}
-            targetTitle={targetPresentation.title}
-            targetMonospace={targetPresentation.monospace}
-            expanded={isExpanded}
-            collapsible={isCollapsible}
-            meta={errorMeta}
-            metaTitle={errorMeta == null ? undefined : t('chat.result')}
-          />
-        )}
-        content={hasDetails
-          ? (
-            <div className='tool-detail-sections'>
-              <ToolInlineFields fields={view.inlineFields} t={t} />
-              {view.diff != null && (
-                <div className='tool-detail-section'>
-                  <ToolDiffViewer
-                    original={view.diff.original}
-                    modified={view.diff.modified}
-                    language={view.diff.language}
-                    metaItems={(view.diff.metaItems ?? []).map(item => ({
-                      icon: item.icon,
-                      label: t(item.labelKey, { defaultValue: item.fallbackLabel }),
-                      value: item.value != null && item.value !== ''
-                        ? (item.value === 'true'
-                          ? t('chat.tools.booleanOn')
-                          : item.value === 'false'
-                          ? t('chat.tools.booleanOff')
-                          : item.value)
-                        : undefined,
-                      tone: item.tone
-                    }))}
-                    splitLabel={t('chat.tools.diffSplit')}
-                    inlineLabel={t('chat.tools.diffInline')}
-                  />
-                </div>
-              )}
-              {view.blockFields.map((field, index) => renderToolBlockField(field, index, t))}
-              {showResultDetails && resultItem != null && (
-                <div className='tool-detail-section'>
-                  <ToolResultContent content={resultItem.content} preferMarkdown={preferMarkdown} />
-                </div>
-              )}
-            </div>
-          )
-          : null}
-      />
-    </div>
-  )
-}

package/src/components/chat/tools/adapter-claude/BashTool.scss

@@ -1,87 +0,0 @@
-.tool-group.bash-tool {
-  .tool-call-header {
-    height: auto;
-    min-height: 32px;
-  }
-
-  .bash-tool__header {
-    width: 100%;
-    min-width: 0;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .bash-tool__icon {
-    font-size: 16px;
-    color: var(--sub-text-color);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-    align-self: center;
-  }
-
-  .bash-tool__header-main {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-
-  .bash-tool__command-row {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    min-width: 0;
-  }
-
-  .bash-tool__command-text {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: 12px;
-    color: var(--text-color);
-  }
-
-  .bash-tool__command-text--clickable {
-    cursor: pointer;
-    color: var(--text-color);
-
-    &:hover {
-      text-shadow: 0 0 .5px currentColor;
-    }
-  }
-
-  .bash-tool__reason-row {
-    display: flex;
-    min-width: 0;
-  }
-
-  .bash-tool__reason-text {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .bash-tool__header-tags {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    flex-shrink: 0;
-  }
-
-  .bash-tool__command-detail {
-    margin-bottom: 6px;
-  }
-
-  .tool-scroll {
-    max-height: 270px;
-  }
-}

package/src/components/chat/tools/adapter-claude/BashTool.tsx

@@ -1,116 +0,0 @@
-import './BashTool.scss'
-import { CodeBlock } from '#~/components/CodeBlock'
-import { safeJsonStringify } from '#~/utils/safe-serialize'
-import type { ToolInputs } from '@vibe-forge/core'
-import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { ToolCallBox } from '../core/ToolCallBox'
-import { defineToolRender } from '../defineToolRender'
-
-export const BashTool = defineToolRender(({ item, resultItem }) => {
-  const { t } = useTranslation()
-  const input = (item.input != null ? item.input : {}) as Partial<ToolInputs['adapter:claude-code:Bash']>
-  const command = input.command ?? ''
-  const reason = (input.description != null && input.description !== '')
-    ? input.description
-    : (input.reason != null && input.reason !== '')
-    ? input.reason
-    : (input.thought != null && input.thought !== '')
-    ? input.thought
-    : ''
-  const timeout = input.timeout
-  const runInBackground = input.run_in_background
-  const dangerouslyDisableSandbox = input.dangerouslyDisableSandbox
-  const reasonLine = reason.replaceAll('\n', ' ').replace(/\s+/g, ' ').trim()
-  const commandLine = command.split('\n')[0] ?? ''
-  const hasMoreCommand = command.trim() !== commandLine.trim()
-  const showCommandExpand = hasMoreCommand || commandLine.length > 80
-  const [showCommandDetail, setShowCommandDetail] = useState(false)
-
-  return (
-    <div className='tool-group bash-tool'>
-      <ToolCallBox
-        defaultExpanded={true}
-        type={resultItem != null ? 'result' : 'call'}
-        isError={resultItem?.is_error ?? false}
-        header={
-          <div className='bash-tool__header'>
-            <span className='material-symbols-rounded bash-tool__icon'>terminal</span>
-            <div className='bash-tool__header-main'>
-              <div className='bash-tool__reason-row'>
-                <span className='bash-tool__reason-text tool-header-hint'>
-                  {reasonLine !== '' ? reasonLine : commandLine}
-                </span>
-              </div>
-              {reasonLine !== '' && (
-                <div className='bash-tool__command-row'>
-                  <span
-                    className={`bash-tool__command-text tool-header-mono${
-                      showCommandExpand ? ' bash-tool__command-text--clickable' : ''
-                    }`}
-                    title={showCommandExpand ? t('chat.tools.viewCommand') : undefined}
-                    onClick={(e) => {
-                      if (!showCommandExpand) return
-                      e.stopPropagation()
-                      setShowCommandDetail(prev => !prev)
-                    }}
-                  >
-                    {commandLine}
-                    {hasMoreCommand ? ' …' : ''}
-                  </span>
-                </div>
-              )}
-            </div>
-            <div className='bash-tool__header-tags'>
-              {typeof timeout === 'number' && Number.isFinite(timeout) && (
-                <span
-                  className='tool-icon-tag'
-                  title={`${t('chat.tools.timeout')}: ${timeout}ms`}
-                >
-                  <span className='material-symbols-rounded tool-icon-tag__icon'>timer</span>
-                  <span className='tool-icon-tag__text'>
-                    {timeout % 1000 === 0 ? `${timeout / 1000}s` : `${timeout}ms`}
-                  </span>
-                </span>
-              )}
-              {runInBackground === true && (
-                <span className='tool-icon-tag' title={t('chat.tools.runInBackground')}>
-                  <span className='material-symbols-rounded tool-icon-tag__icon'>schedule</span>
-                </span>
-              )}
-              {dangerouslyDisableSandbox === true && (
-                <span className='tool-icon-tag' title={t('chat.tools.dangerouslyDisableSandbox')}>
-                  <span className='material-symbols-rounded tool-icon-tag__icon'>shield_lock</span>
-                </span>
-              )}
-            </div>
-          </div>
-        }
-        content={
-          <div className='tool-content'>
-            {showCommandDetail && (
-              <div className='bash-tool__command-detail'>
-                <div className='tool-code-wrapper'>
-                  <CodeBlock code={command} lang='shell' hideHeader={true} />
-                </div>
-              </div>
-            )}
-            <div className='tool-scroll'>
-              <div className='tool-code-wrapper'>
-                {resultItem
-                  ? (typeof resultItem.content === 'string'
-                    ? <CodeBlock code={resultItem.content} lang='text' hideHeader={true} />
-                    : <CodeBlock code={safeJsonStringify(resultItem.content, 2)} lang='json' hideHeader={true} />)
-                  : (
-                    <div className='tool-placeholder'>
-                      {t('chat.result')}
-                    </div>
-                  )}
-              </div>
-            </div>
-          </div>
-        }
-      />
-    </div>
-  )
-})

package/src/components/chat/tools/adapter-claude/ClaudeEditDiff.tsx

@@ -1,30 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-
-import { ToolDiffViewer } from '../core/ToolDiffViewer'
-import type { ToolDiffMetaItem } from '../core/ToolDiffViewer'
-
-export function ClaudeEditDiff({
-  oldValue,
-  newValue,
-  lang,
-  metaItems = []
-}: {
-  oldValue?: string
-  newValue?: string
-  lang?: string
-  metaItems?: ToolDiffMetaItem[]
-}) {
-  const { t } = useTranslation()
-
-  return (
-    <ToolDiffViewer
-      original={oldValue ?? ''}
-      modified={newValue ?? ''}
-      language={lang}
-      metaItems={metaItems}
-      splitLabel={t('chat.tools.diffSplit')}
-      inlineLabel={t('chat.tools.diffInline')}
-    />
-  )
-}

package/src/components/chat/tools/adapter-claude/GenericClaudeTool.scss

@@ -1,128 +0,0 @@
-.tool-group.claude-generic-tool {
-  .claude-generic-tool__content {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .claude-generic-tool__section {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    min-width: 0;
-  }
-
-  .claude-generic-tool__status {
-    display: inline-flex;
-    align-items: center;
-
-    .material-symbols-rounded {
-      font-size: 16px;
-    }
-
-    &.is-success {
-      color: var(--success-color);
-    }
-
-    &.is-error {
-      color: var(--danger-color);
-    }
-  }
-
-  .claude-generic-tool__list {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  .claude-generic-tool__list-item {
-    padding: 4px 0 4px 10px;
-    border: none;
-    border-left: 1px solid var(--border-color);
-    border-radius: 0;
-    background: transparent;
-    color: var(--text-color);
-    font-family: var(--font-mono);
-    font-size: 12px;
-    overflow-wrap: anywhere;
-  }
-
-  .claude-generic-tool__questions {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .claude-generic-tool__question {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    padding-left: 10px;
-    border-left: 1px solid var(--border-color);
-  }
-
-  .claude-generic-tool__question-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-  }
-
-  .claude-generic-tool__question-title {
-    font-size: 12px;
-    font-weight: 500;
-    color: var(--text-color);
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .claude-generic-tool__question-mode {
-    flex-shrink: 0;
-    color: var(--sub-text-color);
-    font-size: 15px;
-    cursor: help;
-  }
-
-  .claude-generic-tool__question-text {
-    color: var(--text-color);
-    font-size: 12px;
-    line-height: 1.55;
-  }
-
-  .claude-generic-tool__question-options {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  .claude-generic-tool__question-option {
-    padding: 4px 0 4px 10px;
-    border-radius: 0;
-    background: transparent;
-    border: none;
-    border-left: 1px solid var(--border-color);
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-
-  .claude-generic-tool__question-option-label {
-    color: var(--text-color);
-    font-size: 12px;
-    font-weight: 500;
-  }
-
-  .claude-generic-tool__question-option-description {
-    color: var(--sub-text-color);
-    font-size: 11px;
-    line-height: 1.45;
-  }
-
-  .claude-generic-tool__placeholder {
-    color: var(--sub-text-color);
-    font-size: 12px;
-    font-style: italic;
-  }
-}