@vibe-forge/client 0.2.0-alpha.0

package/src/components/chat/SessionTimelinePanel/git-graph.ts

@@ -0,0 +1,518 @@
+import type { Task, TimelineDiagram, TimelineEvent, TimelineEventType, TimelineInteraction, TimelineInteractionPayload } from './types'
+import { parseTime, sanitizeId } from './utils'
+
+interface MermaidLabels {
+  mainStart: string
+  mainEnd: string
+  startTasks: string
+  allTasksDone: string
+  askUserQuestion: string
+  edit: string
+  resumeTask: string
+  userPrompt: string
+  userAnswer: string
+  receiveReply: string
+  taskStart: string
+  taskEnd: string
+  ganttTitle: string
+  ganttMainSection: string
+  ganttTasksSection: string
+}
+
+interface MermaidCommitTarget {
+  branchName?: string
+  priority?: number
+}
+
+type TimelineOp =
+  | {
+    kind: 'commit'
+    time: string
+    branch: string
+    commitId: string
+    action?: string
+    priority: number
+    seq: number
+  }
+  | {
+    kind: 'branch'
+    time: string
+    baseBranch: string
+    name: string
+    priority: number
+    seq: number
+  }
+  | {
+    kind: 'merge'
+    time: string
+    target: string
+    source: string
+    mergeId?: string
+    action?: string
+    priority: number
+    seq: number
+  }
+
+interface MermaidLatestCommit {
+  id: string
+  branch: string
+  time: string
+  seq: number
+}
+
+interface MermaidRuntime {
+  curBranch: string | undefined
+  labels: MermaidLabels
+  lines: string[]
+  ops: TimelineOp[]
+  interactions: TimelineInteraction[]
+  commit: (commitId: string, action?: string) => string
+  branch: (name: string) => void
+  checkout: (name: string) => void
+  merge: (
+    name: string,
+    id?: string,
+    action?: string,
+    options?: {
+      branchName?: string
+      time?: string
+      seq?: number
+    }
+  ) => void
+  addCommit: (
+    timeId: string,
+    action?: string,
+    options?: MermaidCommitTarget,
+    payload?: TimelineInteractionPayload
+  ) => string
+  addBranch: (time: string, baseBranch: string, name: string, priority: number) => void
+  addMerge: (
+    time: string,
+    target: string,
+    source: string,
+    action: string,
+    priority: number,
+    payload?: TimelineInteractionPayload
+  ) => string
+  ensureBranch: (name: string) => void
+  normalizeCommitId: (value: string) => string
+  allocateCommitId: (baseId: string) => string
+  findLatestCommitId: (branchName?: string) => { id: string; branch: string } | undefined
+  resumeCommitIds: Map<string, string>
+  parentByBranch: Map<string, string>
+}
+
+function formatTag(action?: string) {
+  if (!action) return undefined
+  return action.replace(/"/g, "'")
+}
+
+function createCommitIdAllocator(usedCommitIds: Set<string>) {
+  const normalizeCommitId = (value: string) => value.replace(/\s+/g, '_')
+  const allocateCommitId = (baseId: string) => {
+    let finalId = baseId
+    let bump = 1
+    while (usedCommitIds.has(finalId)) {
+      finalId = `${baseId}_${bump}`
+      bump += 1
+    }
+    usedCommitIds.add(finalId)
+    return finalId
+  }
+  return {
+    normalizeCommitId,
+    allocateCommitId
+  }
+}
+
+function getEventTitle(labels: MermaidLabels, type: TimelineEventType) {
+  switch (type) {
+    case 'tool__StartTasks':
+      return labels.startTasks
+    case 'tool__AskUserQuestion':
+      return labels.askUserQuestion
+    case 'tool__Edit':
+      return labels.edit
+    case 'tool__ResumeTask':
+      return labels.resumeTask
+    case 'user__Prompt':
+      return labels.userPrompt
+    default:
+      return type
+  }
+}
+
+function getOpBranchName(op: TimelineOp) {
+  switch (op.kind) {
+    case 'merge':
+      return op.target
+    case 'branch':
+      return op.name
+    default:
+      return op.branch
+  }
+}
+
+function sortTimelineOps(ops: TimelineOp[]) {
+  return [...ops].sort((a, b) => {
+    const timeDiff = parseTime(a.time) - parseTime(b.time)
+    if (timeDiff !== 0) return timeDiff
+    if (a.priority !== b.priority) return a.priority - b.priority
+    const branchA = getOpBranchName(a)
+    const branchB = getOpBranchName(b)
+    if (branchA !== branchB) return branchA.localeCompare(branchB)
+    return a.seq - b.seq
+  })
+}
+
+function createMermaidRuntime(labels: MermaidLabels): MermaidRuntime {
+  const lines: string[] = ['gitGraph TB:']
+  const createdBranches = new Set<string>()
+  const usedCommitIds = new Set<string>()
+  const { normalizeCommitId, allocateCommitId } = createCommitIdAllocator(usedCommitIds)
+
+  const resumeCommitIds = new Map<string, string>()
+  const latestCommitIds = new Map<string, string>()
+  const commitBranchById = new Map<string, string>()
+  const parentByBranch = new Map<string, string>()
+  let globalLatestCommit: MermaidLatestCommit | undefined
+
+  let curBranch: string | undefined
+  let opSeq = 0
+  const ops: TimelineOp[] = []
+  const interactions: TimelineInteraction[] = []
+
+  const commit = (commitId: string, action?: string) => {
+    const safeAction = formatTag(action)
+    if (safeAction) {
+      lines.push(`commit id:"${commitId}" tag:"${safeAction}"`)
+    } else {
+      lines.push(`commit id:"${commitId}"`)
+    }
+    return commitId
+  }
+
+  const updateGlobalLatestCommit = (commitId: string, branchName: string, time: string, seq: number) => {
+    if (!globalLatestCommit) {
+      globalLatestCommit = {
+        id: commitId,
+        branch: branchName,
+        time,
+        seq
+      }
+      return
+    }
+    const timeDiff = parseTime(time) - parseTime(globalLatestCommit.time)
+    if (timeDiff > 0 || (timeDiff === 0 && seq > globalLatestCommit.seq)) {
+      globalLatestCommit = {
+        id: commitId,
+        branch: branchName,
+        time,
+        seq
+      }
+    }
+  }
+
+  const findLatestCommitIdByBranch = (branchName: string) => {
+    let cursor: string | undefined = branchName
+    while (cursor) {
+      const commitId = latestCommitIds.get(cursor)
+      if (commitId) {
+        return {
+          id: commitId,
+          branch: commitBranchById.get(commitId) ?? cursor
+        }
+      }
+      const parent = parentByBranch.get(cursor)
+      if (!parent || parent === cursor) break
+      cursor = parent
+    }
+    return undefined
+  }
+
+  const findLatestCommitId = (branchName?: string) => {
+    if (branchName) return findLatestCommitIdByBranch(branchName)
+    if (!globalLatestCommit) return undefined
+    return {
+      id: globalLatestCommit.id,
+      branch: globalLatestCommit.branch
+    }
+  }
+
+  const addCommit = (
+    timeId: string,
+    action?: string,
+    options?: MermaidCommitTarget,
+    payload?: TimelineInteractionPayload
+  ) => {
+    const baseId = normalizeCommitId(timeId)
+    const commitId = allocateCommitId(baseId)
+    if (options?.branchName && typeof options.priority === 'number') {
+      ops.push({
+        kind: 'commit',
+        time: timeId,
+        branch: options.branchName,
+        commitId,
+        action,
+        priority: options.priority,
+        seq: opSeq++
+      })
+      latestCommitIds.set(options.branchName, commitId)
+      commitBranchById.set(commitId, options.branchName)
+      updateGlobalLatestCommit(commitId, options.branchName, timeId, opSeq - 1)
+      if (payload) {
+        interactions.push({
+          id: commitId,
+          label: action ?? commitId,
+          payload
+        })
+      }
+      return commitId
+    }
+    if (payload) {
+      interactions.push({
+        id: commitId,
+        label: action ?? commitId,
+        payload
+      })
+    }
+    return commit(commitId, action)
+  }
+
+  const branch = (name: string) => {
+    if (createdBranches.has(name)) return
+    createdBranches.add(name)
+    curBranch = name
+    lines.push(`branch ${name}`)
+  }
+
+  const checkout = (name: string) => {
+    curBranch = name
+    lines.push(`checkout ${name}`)
+  }
+
+  const merge = (
+    name: string,
+    id?: string,
+    action?: string,
+    options?: {
+      branchName?: string
+      time?: string
+      seq?: number
+    }
+  ) => {
+    const items: string[] = []
+    if (id) {
+      items.push(`id:"${id}"`)
+    }
+    if (action) {
+      items.push(`tag:"${action}"`)
+    }
+    lines.push(`merge ${name} ${items.join(' ')}`)
+    if (id && options?.branchName && options.time && typeof options.seq === 'number') {
+      latestCommitIds.set(options.branchName, id)
+      commitBranchById.set(id, options.branchName)
+      updateGlobalLatestCommit(id, options.branchName, options.time, options.seq)
+    }
+  }
+
+  const addBranch = (time: string, baseBranch: string, name: string, priority: number) => {
+    ops.push({
+      kind: 'branch',
+      time,
+      baseBranch,
+      name,
+      priority,
+      seq: opSeq++
+    })
+  }
+
+  const addMerge = (
+    time: string,
+    target: string,
+    source: string,
+    action: string,
+    priority: number,
+    payload?: TimelineInteractionPayload
+  ) => {
+    const baseId = normalizeCommitId(time)
+    const mergeId = allocateCommitId(baseId)
+    ops.push({
+      kind: 'merge',
+      time,
+      target,
+      source,
+      action,
+      mergeId,
+      priority,
+      seq: opSeq++
+    })
+    if (payload) {
+      interactions.push({
+        id: mergeId,
+        label: action,
+        payload
+      })
+    }
+    return mergeId
+  }
+
+  const mainBranch = 'main'
+  const ensureBranch = (name: string) => {
+    if (name === mainBranch) return
+    branch(name)
+  }
+
+  return {
+    get curBranch() {
+      return curBranch
+    },
+    labels,
+    lines,
+    ops,
+    interactions,
+    commit,
+    branch,
+    checkout,
+    merge,
+    addCommit,
+    addBranch,
+    addMerge,
+    ensureBranch,
+    normalizeCommitId,
+    allocateCommitId,
+    findLatestCommitId,
+    resumeCommitIds,
+    parentByBranch
+  }
+}
+
+function walkTimelineEvents(
+  events: TimelineEvent[],
+  activeBranch: string,
+  parentBranch: string,
+  runtime: MermaidRuntime
+) {
+  const {
+    labels,
+    addCommit,
+    addBranch,
+    addMerge,
+    parentByBranch,
+    resumeCommitIds
+  } = runtime
+  for (const event of events) {
+    const { type, startTime, endTime } = event
+    switch (type) {
+      case 'tool__StartTasks': {
+        addCommit(startTime, labels.taskStart, { branchName: activeBranch, priority: 10 }, {
+          kind: 'event',
+          event
+        })
+        const { tasks = {} } = event
+        for (const [taskName, task] of Object.entries(tasks)) {
+          const taskBranch = sanitizeId(taskName)
+          parentByBranch.set(taskBranch, activeBranch)
+          addBranch(startTime, activeBranch, taskBranch, 15)
+          addCommit(task.startTime, labels.taskStart, { branchName: taskBranch, priority: 16 }, {
+            kind: 'task',
+            name: taskName,
+            task
+          })
+          const { events: taskEvents = [] } = task
+          if (taskEvents.length > 0) {
+            walkTimelineEvents(taskEvents, taskBranch, activeBranch, runtime)
+          }
+          addCommit(task.endTime, labels.taskEnd, { branchName: taskBranch, priority: 60 })
+        }
+        addCommit(endTime, labels.allTasksDone, { branchName: activeBranch, priority: 70 })
+        break
+      }
+      case 'tool__AskUserQuestion':
+        addCommit(startTime, labels.askUserQuestion, { branchName: activeBranch, priority: 20 }, {
+          kind: 'event',
+          event
+        })
+        addMerge(endTime, parentBranch, activeBranch, labels.userAnswer, 80, {
+          kind: 'event',
+          event
+        })
+        break
+      case 'tool__Edit':
+        addCommit(startTime, getEventTitle(labels, type), { branchName: activeBranch, priority: 30 }, {
+          kind: 'event',
+          event
+        })
+        break
+      case 'tool__ResumeTask': {
+        const commitId = addCommit(startTime, getEventTitle(labels, type), {
+          branchName: activeBranch,
+          priority: 40
+        }, {
+          kind: 'event',
+          event
+        })
+        resumeCommitIds.set(activeBranch, commitId)
+        break
+      }
+      case 'user__Prompt':
+        addMerge(startTime, activeBranch, '<prev_branch>', getEventTitle(labels, type), 50, {
+          kind: 'event',
+          event
+        })
+        break
+      default:
+        addCommit(endTime, getEventTitle(labels, type), { branchName: activeBranch, priority: 55 }, {
+          kind: 'event',
+          event
+        })
+        break
+    }
+  }
+}
+
+function applyTimelineOps(runtime: MermaidRuntime) {
+  const sortedOps = sortTimelineOps(runtime.ops)
+  for (const op of sortedOps) {
+    switch (op.kind) {
+      case 'commit':
+        runtime.ensureBranch(op.branch)
+        runtime.checkout(op.branch)
+        runtime.commit(op.commitId, op.action)
+        break
+      case 'branch':
+        runtime.checkout(op.baseBranch)
+        runtime.ensureBranch(op.name)
+        break
+      case 'merge': {
+        if (op.source === '<prev_branch>') {
+          op.source = runtime.curBranch!
+        }
+        runtime.ensureBranch(op.target)
+        runtime.ensureBranch(op.source)
+        runtime.checkout(op.target)
+        runtime.merge(op.source, op.mergeId, op.action, {
+          branchName: op.target,
+          time: op.time,
+          seq: op.seq
+        })
+        break
+      }
+    }
+  }
+}
+
+export function buildGitGraph(task: Task, labels: MermaidLabels): TimelineDiagram {
+  const runtime = createMermaidRuntime(labels)
+  const mainBranch = 'main'
+  runtime.checkout(mainBranch)
+  runtime.addCommit(task.startTime, labels.mainStart)
+  walkTimelineEvents(task.events ?? [], mainBranch, mainBranch, runtime)
+  applyTimelineOps(runtime)
+  runtime.checkout(mainBranch)
+  runtime.addCommit(task.endTime, labels.mainEnd)
+  return {
+    code: runtime.lines.join('\n'),
+    interactions: runtime.interactions
+  }
+}

package/src/components/chat/SessionTimelinePanel/index.scss

@@ -0,0 +1,28 @@
+.session-timeline-panel {
+  display: flex;
+  align-content: center;
+}
+
+.session-timeline-mermaid__svg {
+  height: 100%;
+  white-space: nowrap;
+  overflow-x: auto;
+  user-select: none;
+}
+
+.session-timeline-mermaid__svg svg,
+.session-timeline-mermaid__svg text,
+.session-timeline-mermaid__svg tspan {
+  user-select: none;
+  pointer-events: none;
+}
+
+.session-timeline-mermaid__interactive {
+  cursor: pointer;
+  transition: filter 0.2s ease, opacity 0.2s ease;
+}
+
+.session-timeline-mermaid__interactive:hover {
+  filter: drop-shadow(0 0 6px var(--primary-color));
+  opacity: 0.9;
+}

package/src/components/chat/SessionTimelinePanel/index.tsx

@@ -0,0 +1,121 @@
+import './index.scss'
+
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { buildGantt, buildGitGraph } from './mermaid'
+import type { Task } from './types'
+
+export interface SessionTimelinePanelProps {
+  task: Task
+  viewMode: 'git' | 'gantt'
+  className?: string
+  style?: React.CSSProperties
+}
+
+export function SessionTimelinePanel(props: SessionTimelinePanelProps) {
+  const {
+    task,
+    viewMode,
+    className,
+    style
+  } = props
+  const containerRef = React.useRef<HTMLDivElement | null>(null)
+  const { t } = useTranslation()
+  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 diagram = React.useMemo(() => {
+    if (viewMode === 'gantt') {
+      return buildGantt(task, labels)
+    }
+    return buildGitGraph(task, labels)
+  }, [labels, 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
+        },
+        gitGraph: {},
+        gantt: {
+          topAxis: true,
+          displayMode: 'compact',
+          gridLineStartPadding: 0,
+          leftPadding: 16,
+          rightPadding: 16
+        }
+      })
+      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, 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}${className ? ` ${className}` : ''}`}
+      style={style}
+    />
+  )
+}

package/src/components/chat/SessionTimelinePanel/mermaid.ts

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