@vibe-forge/client 0.2.0-alpha.0

package/src/components/chat/tools/task/ListTasksTool.tsx

@@ -0,0 +1,83 @@
+import './ListTasksTool.scss'
+
+import React, { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { ToolCallBox } from '../../ToolCallBox'
+import { defineToolRender } from '../defineToolRender'
+import { TaskToolCard } from './components/TaskToolCard'
+
+interface TaskResult {
+  taskId: string
+  status?: 'running' | 'completed' | 'failed'
+  exitCode?: number | null
+  description?: string
+  type?: 'default' | 'spec' | 'entity'
+  name?: string | null
+  adapter?: string | null
+  background?: boolean
+  logs?: string[] | null
+}
+
+export const ListTasksTool = defineToolRender(({ resultItem }) => {
+  const { t } = useTranslation()
+
+  const taskResults = useMemo(() => {
+    if (!resultItem?.content) {
+      return []
+    }
+    const text = resultItem.content[0].text.trim()
+    return JSON.parse(text) as TaskResult[]
+  }, [resultItem?.content])
+
+  return (
+    <div className='tool-group list-tasks-tool'>
+      <ToolCallBox
+        defaultExpanded={true}
+        header={
+          <div className='list-tasks-tool__header'>
+            <span className='material-symbols-rounded list-tasks-tool__icon'>list_alt</span>
+            <span className='list-tasks-tool__title'>{t('chat.tools.listTasks')}</span>
+            <span className='list-tasks-tool__count'>{taskResults.length}</span>
+          </div>
+        }
+        content={
+          <div className='tool-content'>
+            <div className='list-tasks-tool__list'>
+              {taskResults.map((task) => {
+                const { taskId, exitCode, ...cardProps } = task
+                const metaChips = [
+                  cardProps.adapter,
+                  cardProps.type === 'default' ? undefined : cardProps.type,
+                  cardProps.name,
+                  cardProps.status,
+                  exitCode != null ? t('chat.tools.taskExitCode', { code: exitCode }) : undefined,
+                  cardProps.background === false
+                    ? t('chat.tools.startTasksForeground')
+                    : cardProps.background === true
+                    ? t('chat.tools.startTasksBackground')
+                    : undefined
+                ]
+                return (
+                  <TaskToolCard
+                    key={taskId}
+                    {...cardProps}
+                    sessionId={taskId}
+                    titleFallback={t('chat.tools.task')}
+                    metaChips={metaChips}
+                    showExecutionIcon={false}
+                  />
+                )
+              })}
+              {taskResults.length === 0 && (
+                <div className='list-tasks-tool__empty'>
+                  {t('chat.tools.listTasksEmpty')}
+                </div>
+              )}
+            </div>
+          </div>
+        }
+      />
+    </div>
+  )
+})

package/src/components/chat/tools/task/StartTasksTool.scss

@@ -0,0 +1,56 @@
+.start-tasks-tool {
+  border-color: color-mix(
+    in srgb,
+    var(--border-color) 55%,
+    var(--primary-color) 45%
+  );
+
+  & .tool-call-header {
+    background: linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--tag-bg) 80%, var(--primary-color) 20%),
+      var(--tag-bg)
+    );
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__icon {
+    font-size: 16px;
+  }
+
+  &__title {
+    font-weight: 600;
+  }
+
+  &__count {
+    margin-left: 4px;
+    padding: 1px 6px;
+    border: 1px solid var(--border-color);
+    border-radius: 999px;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--sub-text-color);
+    background: color-mix(in srgb, var(--bg-color) 70%, transparent 30%);
+  }
+
+  &__list {
+    padding: 10px 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__empty {
+    padding: 10px 12px;
+    border: 1px dashed var(--border-color);
+    border-radius: 8px;
+    font-size: 12px;
+    color: var(--sub-text-color);
+    background: var(--bg-color);
+  }
+}

package/src/components/chat/tools/task/StartTasksTool.tsx

@@ -0,0 +1,96 @@
+import './StartTasksTool.scss'
+
+import React, { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { ToolCallBox } from '../../ToolCallBox'
+import { defineToolRender } from '../defineToolRender'
+import { TaskToolCard } from './components/TaskToolCard'
+
+interface StartTask {
+  description?: string
+  type?: 'default' | 'spec' | 'entity'
+  name?: string
+  adapter?: string
+  background?: boolean
+}
+
+interface TaskResult {
+  taskId: string
+  status?: 'running' | 'completed' | 'failed'
+  exitCode?: number | null
+  description?: string
+  type?: 'default' | 'spec' | 'entity'
+  name?: string | null
+  adapter?: string | null
+  background?: boolean
+  logs?: string[] | null
+}
+
+export const StartTasksTool = defineToolRender(({ item, resultItem }) => {
+  const { t } = useTranslation()
+
+  const input = (item.input != null ? item.input : {}) as { tasks?: StartTask[] }
+  const tasks = Array.isArray(input.tasks) ? input.tasks : []
+
+  const parsedResult = useMemo(() => {
+    if (!resultItem?.content) {
+      return { taskResults: null }
+    }
+    const text = resultItem.content[0].text.trim()
+    return {
+      taskResults: JSON.parse(text) as TaskResult[]
+    }
+  }, [resultItem?.content])
+
+  const { taskResults } = parsedResult
+
+  return (
+    <div className='tool-group start-tasks-tool'>
+      <ToolCallBox
+        defaultExpanded={true}
+        header={
+          <div className='start-tasks-tool__header'>
+            <span className='material-symbols-rounded start-tasks-tool__icon'>playlist_add</span>
+            <span className='start-tasks-tool__title'>{t('chat.tools.startTasks')}</span>
+            <span className='start-tasks-tool__count'>{tasks.length}</span>
+          </div>
+        }
+        content={
+          <div className='tool-content'>
+            <div className='start-tasks-tool__list'>
+              {tasks.map((task, idx) => {
+                const { description, type, name, adapter, background } = task
+                const { status, taskId, logs = [] } = taskResults?.[idx] ?? {}
+                const cardProps = { description, status, logs, adapter, type, name, background }
+                const metaChips = [
+                  adapter,
+                  type === 'default' ? undefined : type,
+                  name
+                ]
+
+                return (
+                  <TaskToolCard
+                    key={idx}
+                    {...cardProps}
+                    sessionId={taskId}
+                    titleFallback={t('chat.tools.startTasks')}
+                    metaChips={metaChips}
+                    showExecutionIcon={true}
+                    foregroundLabel={t('chat.tools.startTasksForeground')}
+                    backgroundLabel={t('chat.tools.startTasksBackground')}
+                  />
+                )
+              })}
+              {tasks.length === 0 && (
+                <div className='start-tasks-tool__empty'>
+                  {t('chat.tools.startTasksEmpty')}
+                </div>
+              )}
+            </div>
+          </div>
+        }
+      />
+    </div>
+  )
+})

package/src/components/chat/tools/task/components/TaskToolCard.scss

@@ -0,0 +1,127 @@
+.task-tool-card {
+  display: grid;
+  grid-template-columns: 24px minmax(0, 1fr);
+  gap: 12px;
+  padding: 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: color-mix(
+    in srgb,
+    var(--bg-color) 92%,
+    var(--primary-color) 8%
+  );
+
+  &__left {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+  }
+
+  &__status-icon {
+    font-size: 20px;
+    color: var(--sub-text-color);
+    transition: color .2s ease;
+
+    &:hover {
+      color: var(--text-color);
+    }
+
+    &.running {
+      color: var(--primary-color);
+    }
+
+    &.completed {
+      color: var(--success-color);
+    }
+
+    &.failed {
+      color: var(--danger-color);
+    }
+  }
+
+  &__execution-icon {
+    font-size: 20px;
+    color: var(--sub-text-color);
+    transition: color .2s ease;
+
+    &:hover {
+      color: var(--text-color);
+    }
+
+    &--background {
+      color: var(--sub-text-color);
+    }
+
+    &--foreground {
+      color: var(--warning-color);
+    }
+  }
+
+  &__main {
+    > .code-block-wrapper {
+      border-radius: 8px;
+      overflow: hidden;
+    }
+  }
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 6px;
+  }
+
+  &__title {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-color);
+    flex: 1;
+    margin-right: 12px;
+  }
+
+  &__session-id {
+    font-size: 11px;
+    color: var(--sub-text-color);
+    opacity: .6;
+    font-family: monospace;
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  &__session-link {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    text-align: right;
+
+    &:hover {
+      color: var(--text-color);
+      opacity: 1;
+    }
+  }
+
+  &__content {
+    font-size: 13px;
+    line-height: 1.5;
+    color: var(--text-color);
+    margin-bottom: 8px;
+  }
+
+  &__meta {
+    margin: 6px 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  &__meta-chip {
+    padding: 2px 6px;
+    border: 1px solid var(--border-color);
+    border-radius: 999px;
+    font-size: 11px;
+    color: var(--sub-text-color);
+    background: var(--bg-color);
+  }
+}

package/src/components/chat/tools/task/components/TaskToolCard.tsx

@@ -0,0 +1,177 @@
+import './TaskToolCard.scss'
+
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import type { ChatMessage, WSEvent } from '@vibe-forge/core'
+
+import { connectionManager } from '#~/connectionManager.js'
+import { CodeBlock } from '../../../CodeBlock'
+
+export interface TaskToolCardProps {
+  description?: string
+  status?: 'running' | 'completed' | 'failed'
+  logs?: string[] | null
+  adapter?: string | null
+  type?: 'default' | 'spec' | 'entity'
+  name?: string | null
+  background?: boolean
+  sessionId?: string | null
+  titleFallback?: string
+  metaChips?: Array<string | null | undefined>
+  showExecutionIcon?: boolean
+  foregroundLabel?: string
+  backgroundLabel?: string
+}
+
+function parseTaskDescription(description?: string): { title: string; content: string } {
+  if (!description) {
+    return { title: '', content: '' }
+  }
+  const lines = description.split('\n')
+  const title = lines[0] || ''
+  const content = lines.slice(1).join('\n').trim()
+  return { title, content }
+}
+
+function getStatusIcon(status?: string): string {
+  switch (status) {
+    case 'running':
+      return 'play_circle'
+    case 'completed':
+      return 'check_circle'
+    case 'failed':
+      return 'error'
+    default:
+      return 'help_outline'
+  }
+}
+
+export function TaskToolCard({
+  description,
+  status,
+  logs,
+  background,
+  sessionId,
+  titleFallback,
+  metaChips,
+  showExecutionIcon,
+  foregroundLabel,
+  backgroundLabel
+}: TaskToolCardProps) {
+  const navigate = useNavigate()
+  const [liveLogs, setLiveLogs] = useState<string[]>(logs ?? [])
+  const [liveStatus, setLiveStatus] = useState(status)
+  const seenMessageIdsRef = useRef<Set<string>>(new Set())
+
+  useEffect(() => {
+    setLiveLogs(logs ?? [])
+  }, [logs])
+
+  useEffect(() => {
+    setLiveStatus(status)
+  }, [status])
+
+  const { title, content } = parseTaskDescription(description)
+  const logText = useMemo(() => (liveLogs?.join('\n') ?? '').trim(), [liveLogs])
+  const resolvedTitle = title || titleFallback || ''
+  const chips = (metaChips ?? []).filter((item): item is string => Boolean(item))
+  const isForeground = background === false
+  const executionClass = isForeground
+    ? 'task-tool-card__execution-icon--foreground'
+    : 'task-tool-card__execution-icon--background'
+  const executionLabel = isForeground ? foregroundLabel : backgroundLabel
+  const displaySessionId = sessionId != null && sessionId !== ''
+
+  useEffect(() => {
+    if (!sessionId) return
+    const cleanup = connectionManager.connect(sessionId, {
+      onMessage(data: WSEvent) {
+        if (data.type === 'message') {
+          const message = data.message as ChatMessage
+          if (message.id && seenMessageIdsRef.current.has(message.id)) {
+            return
+          }
+          if (message.id) {
+            seenMessageIdsRef.current.add(message.id)
+          }
+          const text = extractMessageText(message)
+          if (text !== '') {
+            setLiveLogs((prev) => [...prev, text])
+          }
+        } else if (data.type === 'session_updated') {
+          if (data.session?.id === sessionId) {
+            const updatedStatus = data.session?.status as typeof status | undefined
+            if (updatedStatus) {
+              setLiveStatus(updatedStatus)
+            }
+          }
+        }
+      }
+    })
+    return () => {
+      cleanup?.()
+    }
+  }, [sessionId])
+
+  return (
+    <div className='task-tool-card'>
+      <div className='task-tool-card__left'>
+        <span className={`material-symbols-rounded task-tool-card__status-icon ${liveStatus ?? 'help_outline'}`}>
+          {getStatusIcon(liveStatus)}
+        </span>
+        {showExecutionIcon && (
+          <span
+            className={`material-symbols-rounded task-tool-card__execution-icon ${executionClass}`}
+            title={executionLabel}
+          >
+            {isForeground ? 'desktop_windows' : 'schedule'}
+          </span>
+        )}
+      </div>
+      <div className='task-tool-card__main'>
+        <div className='task-tool-card__header'>
+          <div className='task-tool-card__title'>{resolvedTitle}</div>
+          {displaySessionId && (
+            <button
+              type='button'
+              className='task-tool-card__session-id task-tool-card__session-link'
+              onClick={() => navigate(`/session/${sessionId}`)}
+            >
+              {sessionId}
+            </button>
+          )}
+        </div>
+        {content && (
+          <div className='task-tool-card__content'>
+            {content}
+          </div>
+        )}
+        {chips.length > 0 && (
+          <div className='task-tool-card__meta'>
+            {chips.map((item) => (
+              <span className='task-tool-card__meta-chip' key={item}>{item}</span>
+            ))}
+          </div>
+        )}
+        <CodeBlock
+          hideHeader
+          code={logText}
+          lang='md'
+        />
+      </div>
+    </div>
+  )
+}
+
+function extractMessageText(message: ChatMessage): string {
+  if (typeof message.content === 'string') {
+    return message.content
+  }
+  if (Array.isArray(message.content)) {
+    return message.content
+      .map((c) => (c.type === 'text' ? c.text : ''))
+      .join('')
+  }
+  return ''
+}

package/src/components/chat/tools/task/index.ts

@@ -0,0 +1,15 @@
+import { defineToolRenders } from '../defineToolRender'
+import { GetTaskInfoTool } from './GetTaskInfoTool'
+import { ListTasksTool } from './ListTasksTool'
+import { StartTasksTool } from './StartTasksTool'
+
+export const taskToolRenders = defineToolRenders({
+  StartTasks: StartTasksTool,
+  GetTaskInfo: GetTaskInfoTool,
+  ListTasks: ListTasksTool
+}, {
+  namespace: 'mcp__VibeForge__'
+})
+
+export { GetTaskInfoTool, ListTasksTool, StartTasksTool }
+export { TaskToolCard } from './components/TaskToolCard'