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

package/src/components/chat/session-timeline-panel/index.tsx

@@ -1,197 +0,0 @@
-import './index.scss'
-
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-
-import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
-import { buildGantt, buildGitGraph } from './mermaid'
-import type { Task } from './types'
-
-export interface SessionTimelinePanelProps {
-  task: Task
-  viewMode: 'git' | 'gantt'
-  className?: string
-  style?: React.CSSProperties
-}
-
-const getCompactTimelineLabels = <
-  T extends {
-    allTasksDone: string
-    askUserQuestion: string
-    ganttMainSection: string
-    mainEnd: string
-    mainStart: string
-    receiveReply: string
-    resumeTask: string
-    startTasks: string
-    taskEnd: string
-    taskStart: string
-    userAnswer: string
-    userPrompt: string
-  },
->(labels: T, isZh: boolean) => {
-  if (isZh) {
-    return {
-      ...labels,
-      mainStart: '启动',
-      mainEnd: '结束',
-      startTasks: '任务',
-      allTasksDone: '完成',
-      askUserQuestion: '提问',
-      resumeTask: '继续',
-      userPrompt: '提示',
-      userAnswer: '回答',
-      receiveReply: '回复',
-      taskStart: '开始',
-      taskEnd: '结束',
-      ganttMainSection: '主'
-    }
-  }
-
-  return {
-    ...labels,
-    mainStart: 'Start',
-    mainEnd: 'End',
-    startTasks: 'Tasks',
-    allTasksDone: 'Done',
-    askUserQuestion: 'Ask',
-    resumeTask: 'Resume',
-    userPrompt: 'Prompt',
-    userAnswer: 'Answer',
-    receiveReply: 'Reply',
-    taskStart: 'Start',
-    taskEnd: 'End',
-    ganttMainSection: 'Main'
-  }
-}
-
-export function SessionTimelinePanel(props: SessionTimelinePanelProps) {
-  const {
-    task,
-    viewMode,
-    className,
-    style
-  } = props
-  const containerRef = React.useRef<HTMLDivElement | null>(null)
-  const { t, i18n } = useTranslation()
-  const { isCompactLayout } = useResponsiveLayout()
-  const labels = React.useMemo(() => ({
-    mainStart: t('chat.timeline.mainStart'),
-    mainEnd: t('chat.timeline.mainEnd'),
-    startTasks: t('chat.timeline.startTasks'),
-    allTasksDone: t('chat.timeline.allTasksDone'),
-    askUserQuestion: t('chat.timeline.askUserQuestion'),
-    edit: t('chat.timeline.edit'),
-    resumeTask: t('chat.timeline.resumeTask'),
-    userPrompt: t('chat.timeline.userPrompt'),
-    userAnswer: t('chat.timeline.userAnswer'),
-    receiveReply: t('chat.timeline.receiveReply'),
-    taskStart: t('chat.timeline.taskStart'),
-    taskEnd: t('chat.timeline.taskEnd'),
-    ganttTitle: t('chat.timeline.ganttTitle'),
-    ganttMainSection: t('chat.timeline.ganttMainSection'),
-    ganttTasksSection: t('chat.timeline.ganttTasksSection')
-  }), [t])
-  const diagramLabels = React.useMemo(
-    () =>
-      isCompactLayout
-        ? getCompactTimelineLabels(labels, i18n.resolvedLanguage?.startsWith('zh') === true)
-        : labels,
-    [i18n.resolvedLanguage, isCompactLayout, labels]
-  )
-  const diagram = React.useMemo(() => {
-    if (viewMode === 'gantt') {
-      return buildGantt(task, diagramLabels, { compact: isCompactLayout })
-    }
-    return buildGitGraph(task, diagramLabels, { compact: isCompactLayout })
-  }, [diagramLabels, isCompactLayout, task, viewMode])
-  const diagramId = React.useId()
-  const safeDiagramId = React.useMemo(() => diagramId.replace(/\W/g, '_'), [diagramId])
-  const interactionsRef = React.useRef(new Map<string, { label: string; payload: unknown }>())
-  const mermaidCode = React.useMemo(() => diagram.code, [diagram.code])
-
-  React.useEffect(() => {
-    let cancelled = false
-    const render = async () => {
-      const mermaidModule = await import('mermaid')
-      const mermaid = mermaidModule.default
-      const fontFamily = getComputedStyle(document.body).fontFamily
-      mermaid.initialize({
-        startOnLoad: false,
-        securityLevel: 'loose',
-        themeVariables: {
-          fontFamily,
-          fontSize: isCompactLayout ? '12px' : '14px'
-        },
-        gitGraph: isCompactLayout
-          ? {
-            rotateCommitLabel: false,
-            showBranches: false
-          }
-          : {},
-        gantt: {
-          topAxis: true,
-          displayMode: 'compact',
-          gridLineStartPadding: 0,
-          leftPadding: isCompactLayout ? 8 : 16,
-          rightPadding: isCompactLayout ? 8 : 16,
-          topPadding: isCompactLayout ? 28 : 36,
-          barHeight: isCompactLayout ? 16 : 20,
-          barGap: isCompactLayout ? 3 : 4,
-          fontSize: isCompactLayout ? 10 : 11,
-          sectionFontSize: isCompactLayout ? 10 : 11
-        }
-      })
-      if (cancelled) return
-      const container = containerRef.current
-      if (!container) return
-      const { svg, bindFunctions } = await mermaid.render(safeDiagramId, mermaidCode)
-      if (cancelled) return
-      container.innerHTML = svg
-      const svgElement = container.querySelector('svg')
-      if (svgElement) {
-        svgElement.classList.add('session-timeline-mermaid__svg')
-        for (const interaction of diagram.interactions) {
-          const target = svgElement.querySelector<HTMLElement>(`#${CSS.escape(interaction.id)}`)
-          if (target) {
-            target.classList.add('session-timeline-mermaid__interactive')
-            target.addEventListener('click', () => {
-              const item = interactionsRef.current.get(interaction.id)
-              if (!item) return
-              console.warn(item.payload)
-            })
-          }
-        }
-      }
-      if (typeof bindFunctions === 'function') {
-        bindFunctions(container)
-      }
-    }
-    render()
-    return () => {
-      cancelled = true
-    }
-  }, [diagram.interactions, isCompactLayout, mermaidCode, safeDiagramId])
-
-  React.useEffect(() => {
-    interactionsRef.current = new Map(
-      diagram.interactions.map((interaction) => [
-        interaction.id,
-        { label: interaction.label, payload: interaction.payload }
-      ])
-    )
-  }, [diagram.interactions])
-
-  return (
-    <div
-      ref={containerRef}
-      className={[
-        'session-timeline-panel',
-        `session-timeline-panel--${viewMode}`,
-        isCompactLayout ? 'session-timeline-panel--compact' : '',
-        className ?? ''
-      ].filter(Boolean).join(' ')}
-      style={style}
-    />
-  )
-}

package/src/components/chat/session-timeline-panel/mermaid.ts

@@ -1,4 +0,0 @@
-export * from './gantt'
-export * from './git-graph'
-export * from './types'
-export * from './utils'

package/src/components/chat/session-timeline-panel/types.ts

@@ -1,68 +0,0 @@
-export type TimelineEventType =
-  | 'tool__StartTasks'
-  | 'tool__AskUserQuestion'
-  | 'tool__Edit'
-  | 'tool__ResumeTask'
-  | 'user__Prompt'
-
-interface TimelineBaseEvent {
-  startTime: string
-  endTime: string
-}
-
-export type TimelineEvent =
-  & TimelineBaseEvent
-  & (
-    | {
-      type: 'tool__StartTasks'
-      tasks?: Record<string, Task>
-    }
-    | {
-      type: 'tool__AskUserQuestion'
-    }
-    | {
-      type: 'tool__Edit'
-    }
-    | {
-      type: 'tool__ResumeTask'
-    }
-    | {
-      type: 'user__Prompt'
-    }
-  )
-
-export interface Task {
-  startTime: string
-  endTime: string
-
-  description?: string
-  model?: string
-
-  events?: TimelineEvent[]
-}
-
-export type TimelineInteractionPayload =
-  | {
-    kind: 'event'
-    event: TimelineEvent
-  }
-  | {
-    kind: 'task'
-    name: string
-    task: Task
-  }
-
-export interface TimelineInteraction {
-  id: string
-  label: string
-  payload: TimelineInteractionPayload
-}
-
-export interface TimelineDiagramBuildOptions {
-  compact?: boolean
-}
-
-export interface TimelineDiagram {
-  code: string
-  interactions: TimelineInteraction[]
-}

package/src/components/chat/session-timeline-panel/utils.ts

@@ -1,20 +0,0 @@
-export function sanitizeId(value: string) {
-  return value.replace(/\W/g, '_')
-}
-
-export function parseTime(value: string) {
-  const [hours, minutes, seconds] = value.split(':').map(Number)
-  return (hours || 0) * 3600 + (minutes || 0) * 60 + (seconds || 0)
-}
-
-export function normalizeTime(value: string) {
-  const [hours, minutes, seconds] = value.split(':')
-  const normalizePart = (part?: string) => {
-    const parsed = Number.parseInt(part ?? '0', 10)
-    if (Number.isFinite(parsed)) {
-      return `${parsed}`.padStart(2, '0')
-    }
-    return '00'
-  }
-  return `${normalizePart(hours)}:${normalizePart(minutes)}:${normalizePart(seconds)}`
-}

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

@@ -1,112 +0,0 @@
-.chat-status-bar {
-  min-width: 0;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 0;
-  background-color: transparent;
-}
-
-.chat-status-bar__content {
-  min-width: 0;
-  flex: 1;
-  overflow-x: auto;
-  overflow-y: hidden;
-  overscroll-behavior-x: contain;
-  -webkit-overflow-scrolling: touch;
-  scroll-padding-inline: 12px;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-.chat-status-bar__actions {
-  --sender-control-height: 24px;
-  --sender-control-radius: 6px;
-  --sender-control-hover-bg: var(--nav-hover-bg, #f3f4f6);
-  --sender-control-active-bg: var(--nav-active-bg, #eff6ff);
-  --sender-control-hover-color: var(--text-color, #111827);
-
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 4px;
-  flex-shrink: 0;
-}
-
-.chat-status-bar__actions .sender-select-shell,
-.chat-status-bar__actions .adapter-select-tooltip-target {
-  height: var(--sender-control-height);
-}
-
-.chat-status-bar__actions .account-select,
-.chat-status-bar__actions .adapter-select {
-  color: var(--sub-text-color, #6b7280);
-}
-
-.chat-status-bar__actions .sender-select-shell:hover .account-select,
-.chat-status-bar__actions .account-select:not(.ant-select-disabled):hover,
-.chat-status-bar__actions .adapter-select:not(.ant-select-disabled):hover,
-.chat-status-bar__actions
-  .account-select:not(.ant-select-disabled).ant-select-focused,
-.chat-status-bar__actions
-  .adapter-select:not(.ant-select-disabled).ant-select-focused {
-  box-shadow: inset 0 0 0 1px var(--nav-hover-border, rgba(37, 99, 235, .14));
-}
-
-.chat-status-bar__actions
-  .account-select:not(.ant-select-disabled).ant-select-open,
-.chat-status-bar__actions
-  .adapter-select:not(.ant-select-disabled).ant-select-open {
-  background-color: var(--nav-active-bg, #eff6ff);
-  color: var(--nav-active-text, #2563eb);
-  box-shadow: inset 0 0 0 1px var(--nav-active-border, rgba(37, 99, 235, .22));
-}
-
-.chat-status-bar__actions
-  .account-select:not(.ant-select-disabled).ant-select-open
-  .ant-select-selection-item,
-.chat-status-bar__actions
-  .account-select:not(.ant-select-disabled).ant-select-open
-  .sender-select-arrow,
-.chat-status-bar__actions
-  .adapter-select:not(.ant-select-disabled).ant-select-open
-  .adapter-option__icon,
-.chat-status-bar__actions
-  .adapter-select:not(.ant-select-disabled).ant-select-open
-  .adapter-option__icon--fallback {
-  color: inherit;
-  opacity: 1;
-}
-
-.chat-status-bar--compact .chat-status-bar__content {
-  scroll-padding-inline: 8px;
-}
-
-.chat-status-bar--compact {
-  flex-wrap: nowrap;
-  align-items: center;
-  gap: 8px;
-
-  .chat-status-bar__content,
-  .chat-status-bar__actions {
-    width: auto;
-  }
-
-  .chat-status-bar__content {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .chat-status-bar__actions {
-    justify-content: flex-end;
-    flex-wrap: nowrap;
-    margin-left: auto;
-    max-width: none;
-  }
-}

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

@@ -1,87 +0,0 @@
-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'
-import { DraftGitControls } from '../git-controls/DraftGitControls'
-
-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()
-
-  return (
-    <div className={`chat-status-bar ${isCompactLayout ? 'chat-status-bar--compact' : ''}`}>
-      <div className='chat-status-bar__content'>
-        {sessionId != null && sessionId !== ''
-          ? <ChatGitControls compact={isCompactLayout} placement='topLeft' sessionId={sessionId} />
-          : (
-            <DraftGitControls
-              compact={isCompactLayout}
-              disabled={isCreating}
-              draft={draftWorkspace}
-              placement='topLeft'
-              onChange={onDraftWorkspaceChange}
-            />
-          )}
-      </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

@@ -1,191 +0,0 @@
-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>
-  )
-}