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

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

@@ -1,264 +0,0 @@
-import './EventList.scss'
-
-import { Input, Table } from 'antd'
-import type { ColumnsType } from 'antd/es/table'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-
-import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
-
-import type { Task, TimelineEvent } from './types'
-import { normalizeTime, parseTime } from './utils'
-
-interface TimelineListItem {
-  id: string
-  label: string
-  startTime: string
-  endTime: string
-  depth: number
-  input?: string
-  output?: string
-  payload?: TimelineEvent
-}
-
-interface TimelineLabels {
-  mainStart: string
-  mainEnd: string
-  startTasks: string
-  askUserQuestion: string
-  edit: string
-  resumeTask: string
-  userPrompt: string
-}
-
-const collectTimelineEntries = (task: Task, labels: TimelineLabels) => {
-  const entries: TimelineListItem[] = []
-  let counter = 0
-
-  const addEntry = (
-    label: string,
-    startTime: string,
-    endTime: string,
-    depth: number,
-    payload?: TimelineEvent
-  ) => {
-    entries.push({
-      id: `${label}-${startTime}-${endTime}-${counter}`,
-      label,
-      startTime,
-      endTime,
-      depth,
-      payload
-    })
-    counter += 1
-  }
-
-  const walkEvents = (events: TimelineEvent[], depth: number) => {
-    for (const event of events) {
-      if (event.type === 'tool__StartTasks') {
-        addEntry(labels.startTasks, event.startTime, event.endTime, depth, event)
-      } else if (event.type === 'tool__AskUserQuestion') {
-        addEntry(labels.askUserQuestion, event.startTime, event.endTime, depth, event)
-      } else if (event.type === 'tool__Edit') {
-        addEntry(labels.edit, event.startTime, event.endTime, depth, event)
-      } else if (event.type === 'tool__ResumeTask') {
-        addEntry(labels.resumeTask, event.startTime, event.endTime, depth, event)
-      } else if (event.type === 'user__Prompt') {
-        addEntry(labels.userPrompt, event.startTime, event.endTime, depth, event)
-      }
-    }
-  }
-
-  addEntry(labels.mainStart, task.startTime, task.startTime, 0)
-  walkEvents(task.events ?? [], 0)
-  addEntry(labels.mainEnd, task.endTime, task.endTime, 0)
-
-  return entries
-    .map((entry, index) => ({ ...entry, index }))
-    .sort((a, b) => {
-      const diff = parseTime(a.startTime) - parseTime(b.startTime)
-      if (diff !== 0) return diff
-      return a.index - b.index
-    })
-    .map(({ index: _index, ...entry }) => entry)
-}
-
-export function SessionTimelineEventList({ task }: { task: Task }) {
-  const { t } = useTranslation()
-  const { isCompactLayout } = useResponsiveLayout()
-  const [query, setQuery] = React.useState('')
-  const containerRef = React.useRef<HTMLDivElement | null>(null)
-  const [scrollY, setScrollY] = React.useState(240)
-  const labels = React.useMemo(() => ({
-    mainStart: t('chat.timeline.mainStart'),
-    mainEnd: t('chat.timeline.mainEnd'),
-    startTasks: t('chat.timeline.startTasks'),
-    askUserQuestion: t('chat.timeline.askUserQuestion'),
-    edit: t('chat.timeline.edit'),
-    resumeTask: t('chat.timeline.resumeTask'),
-    userPrompt: t('chat.timeline.userPrompt')
-  }), [t])
-  const items = React.useMemo(() => collectTimelineEntries(task, labels), [labels, task])
-  const filteredItems = React.useMemo(() => {
-    const keyword = query.trim().toLowerCase()
-    if (!keyword) return items
-    return items.filter((item) => {
-      const text = `${item.label} ${item.startTime} ${item.endTime}`.toLowerCase()
-      return text.includes(keyword)
-    })
-  }, [items, query])
-  const emptyValue = t('chat.timelineEmptyValue')
-  const renderTiming = React.useCallback((item: TimelineListItem) => {
-    const startTime = normalizeTime(item.startTime)
-    const endTime = normalizeTime(item.endTime)
-    return (
-      <span className='session-timeline-event-table__time'>
-        {startTime === endTime ? startTime : `${startTime} → ${endTime}`}
-      </span>
-    )
-  }, [])
-  const columns: ColumnsType<TimelineListItem> = React.useMemo(() => {
-    if (isCompactLayout) {
-      return [
-        {
-          title: t('chat.timelineEventName'),
-          key: 'summary',
-          render: (_value, item) => {
-            const detailItems = [
-              { key: t('chat.timelineInput'), value: item.input },
-              { key: t('chat.timelineOutput'), value: item.output }
-            ].filter((detail) => detail.value != null && detail.value !== '')
-
-            return (
-              <div className='session-timeline-event-table__summary'>
-                <span
-                  className='session-timeline-event-table__label'
-                  style={{ paddingLeft: `${item.depth * 12}px` }}
-                >
-                  {item.label}
-                </span>
-                {detailItems.length > 0 && (
-                  <div className='session-timeline-event-table__detail-list'>
-                    {detailItems.map((detail) => (
-                      <span className='session-timeline-event-table__detail-item' key={detail.key}>
-                        <span className='session-timeline-event-table__detail-key'>{detail.key}</span>
-                        <span className='session-timeline-event-table__detail-text'>{detail.value}</span>
-                      </span>
-                    ))}
-                  </div>
-                )}
-              </div>
-            )
-          }
-        },
-        {
-          title: t('chat.timelineTiming'),
-          key: 'time',
-          width: 120,
-          render: (_value, item) => (
-            <span className='session-timeline-event-table__cell-timing'>
-              {renderTiming(item)}
-            </span>
-          )
-        }
-      ]
-    }
-
-    return [
-      {
-        title: t('chat.timelineEventName'),
-        key: 'label',
-        width: 180,
-        render: (_value, item) => (
-          <span
-            className='session-timeline-event-table__label'
-            style={{ paddingLeft: `${item.depth * 16}px` }}
-          >
-            {item.label}
-          </span>
-        )
-      },
-      {
-        title: t('chat.timelineInput'),
-        key: 'input',
-        width: 180,
-        render: (_value, item) => (
-          <span className='session-timeline-event-table__value'>
-            {item.input ?? emptyValue}
-          </span>
-        )
-      },
-      {
-        title: t('chat.timelineOutput'),
-        key: 'output',
-        width: 180,
-        render: (_value, item) => (
-          <span className='session-timeline-event-table__value'>
-            {item.output ?? emptyValue}
-          </span>
-        )
-      },
-      {
-        title: t('chat.timelineTiming'),
-        key: 'time',
-        width: 160,
-        render: (_value, item) => renderTiming(item)
-      }
-    ]
-  }, [emptyValue, isCompactLayout, renderTiming, t])
-
-  React.useEffect(() => {
-    const element = containerRef.current
-    if (!element) return
-    const update = () => {
-      const header = element.querySelector<HTMLElement>('.session-timeline-event-table__header')
-      const pagination = element.querySelector<HTMLElement>('.ant-table-pagination')
-      const headerHeight = header?.offsetHeight ?? 0
-      const paginationHeight = pagination?.offsetHeight ?? 0
-      const next = Math.max(160, element.clientHeight - headerHeight - paginationHeight - 16)
-      setScrollY((prev) => (prev === next ? prev : next))
-    }
-    update()
-    const observer = new ResizeObserver(update)
-    observer.observe(element)
-    return () => {
-      observer.disconnect()
-    }
-  }, [])
-
-  return (
-    <div ref={containerRef} className='session-timeline-event-table'>
-      <div className='session-timeline-event-table__header'>
-        <span className='session-timeline-event-table__title'>{t('chat.timeline.eventListTitle')}</span>
-        <Input
-          className='session-timeline-event-table__search'
-          allowClear
-          value={query}
-          onChange={(event) => setQuery(event.target.value)}
-          placeholder={t('chat.timeline.eventListSearch')}
-        />
-      </div>
-      <Table<TimelineListItem>
-        className='session-timeline-event-table__table'
-        size='small'
-        columns={columns}
-        dataSource={filteredItems}
-        rowKey='id'
-        onRow={(record) => ({
-          onClick: () => {
-            if (record.payload) {
-              console.warn(record.payload)
-            }
-          }
-        })}
-        pagination={{
-          pageSize: 20,
-          showSizeChanger: !isCompactLayout,
-          pageSizeOptions: ['10', '20', '50']
-        }}
-        scroll={{ y: scrollY }}
-        locale={{ emptyText: t('chat.timelineEmpty') }}
-      />
-    </div>
-  )
-}

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

@@ -1,193 +0,0 @@
-import type { Task, TimelineDiagram, TimelineDiagramBuildOptions, TimelineEvent, TimelineInteraction } from './types'
-import { normalizeTime, parseTime } from './utils'
-
-interface GanttItem {
-  id: string
-  label: string
-  start: string
-  end?: string
-  sectionId: string
-  sectionLabel: string
-  type: 'task'
-  interaction?: TimelineInteraction
-}
-
-interface GanttLabels {
-  ganttTitle: string
-  ganttMainSection: string
-  ganttTasksSection: string
-  resumeTask: string
-  userPrompt: string
-}
-
-function createGanttItemIdFactory() {
-  let seq = 0
-  return (prefix: string) => `${prefix}_${seq++}`
-}
-
-const COMPACT_GANTT_LABEL_MAX_LENGTH = 18
-
-const truncateTaskLabel = (value: string, maxLength: number, suffix = '') => {
-  if (value.length + suffix.length <= maxLength) {
-    return `${value}${suffix}`
-  }
-
-  const availableLength = Math.max(4, maxLength - suffix.length - 1)
-  return `${value.slice(0, availableLength).trimEnd()}…${suffix}`
-}
-
-function collectGanttItems(task: Task, labels: GanttLabels, options?: TimelineDiagramBuildOptions) {
-  const nextId = createGanttItemIdFactory()
-  const nextSectionId = createGanttItemIdFactory()
-  const interactions: TimelineInteraction[] = []
-  const items: GanttItem[] = []
-  const blankSectionLabel = '\u200B'
-  let blankSectionSequence = 0
-  const nextBlankSectionLabel = () => {
-    blankSectionSequence += 1
-    return blankSectionLabel.repeat(blankSectionSequence)
-  }
-
-  const addInteraction = (interaction: TimelineInteraction) => {
-    interactions.push(interaction)
-  }
-
-  const collectTaskSegments = (taskItem: Task) => {
-    const segments: Array<{ start: string; end: string }> = [
-      { start: taskItem.startTime, end: taskItem.endTime }
-    ]
-    const events = taskItem.events ?? []
-    const askIndex = events.findIndex((event) => event.type === 'tool__AskUserQuestion')
-    if (askIndex < 0) return segments
-    const askEvent = events[askIndex]
-    const askStartTime = parseTime(askEvent.startTime) <= parseTime(askEvent.endTime)
-      ? askEvent.startTime
-      : askEvent.endTime
-    const askEndTime = parseTime(askEvent.startTime) <= parseTime(askEvent.endTime)
-      ? askEvent.endTime
-      : askEvent.startTime
-    if (parseTime(askEndTime) <= parseTime(askStartTime)) return segments
-    segments[segments.length - 1] = {
-      start: segments[segments.length - 1].start,
-      end: askStartTime
-    }
-    segments.push({
-      start: askEndTime,
-      end: taskItem.endTime
-    })
-    return segments
-  }
-
-  const walkEvents = (events: TimelineEvent[]) => {
-    for (let index = 0; index < events.length; index += 1) {
-      const event = events[index]
-      const { type, startTime, endTime } = event
-      switch (type) {
-        case 'tool__StartTasks': {
-          const { tasks = {} } = event
-          const startTasksSectionId = nextSectionId('section')
-          const startTasksSectionLabel = nextBlankSectionLabel()
-          for (const [taskName, task] of Object.entries(tasks)) {
-            const segments = collectTaskSegments(task)
-            segments.forEach((segment, segmentIndex) => {
-              const itemId = nextId('task')
-              const segmentSuffix = segments.length > 1 ? ` ·${segmentIndex + 1}` : ''
-              const label = options?.compact
-                ? truncateTaskLabel(taskName, COMPACT_GANTT_LABEL_MAX_LENGTH, segmentSuffix)
-                : `${taskName}${segmentSuffix}`
-              const interaction: TimelineInteraction = {
-                id: itemId,
-                label: taskName,
-                payload: {
-                  kind: 'task',
-                  name: taskName,
-                  task
-                }
-              }
-              items.push({
-                id: itemId,
-                label,
-                start: normalizeTime(segment.start),
-                end: normalizeTime(segment.end),
-                sectionId: startTasksSectionId,
-                sectionLabel: startTasksSectionLabel,
-                type: 'task',
-                interaction
-              })
-              addInteraction(interaction)
-            })
-            const { events: taskEvents = [] } = task
-            if (taskEvents.length > 0) {
-              walkEvents(taskEvents)
-            }
-          }
-          break
-        }
-        case 'tool__ResumeTask': {
-          break
-        }
-        case 'user__Prompt': {
-          break
-        }
-        default:
-          break
-      }
-    }
-  }
-
-  const mainItemId = nextId('main')
-  const mainSectionId = nextSectionId('section')
-  items.push({
-    id: mainItemId,
-    label: labels.ganttMainSection,
-    start: normalizeTime(task.startTime),
-    end: normalizeTime(task.endTime),
-    sectionId: mainSectionId,
-    sectionLabel: labels.ganttMainSection,
-    type: 'task'
-  })
-  walkEvents(task.events ?? [])
-  return {
-    items,
-    interactions
-  }
-}
-
-function buildGanttLines(items: GanttItem[]) {
-  const lines = [
-    'gantt',
-    'dateFormat HH:mm:ss',
-    'axisFormat %H:%M:%S'
-  ]
-
-  const sections = new Map<string, { label: string; items: GanttItem[] }>()
-  for (const item of items) {
-    if (!sections.has(item.sectionId)) {
-      sections.set(item.sectionId, { label: item.sectionLabel, items: [] })
-    }
-    sections.get(item.sectionId)?.items.push(item)
-  }
-
-  for (const section of sections.values()) {
-    lines.push(section.label ? `section ${section.label}` : 'section')
-    for (const item of section.items) {
-      if (item.end) {
-        lines.push(`${item.label} :${item.id}, ${item.start}, ${item.end}`)
-      }
-    }
-  }
-
-  return lines.join('\n')
-}
-
-export function buildGantt(
-  task: Task,
-  labels: GanttLabels,
-  options?: TimelineDiagramBuildOptions
-): TimelineDiagram {
-  const { items, interactions } = collectGanttItems(task, labels, options)
-  return {
-    code: buildGanttLines(items),
-    interactions
-  }
-}