@vibe-forge/client 0.2.0-alpha.9 → 0.4.0

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

@@ -2,10 +2,11 @@ import './GetTaskInfoTool.scss'
 
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import type { ToolInputs } from '@vibe-forge/core'
 
+import { ToolCallBox } from '../core/ToolCallBox'
 import { defineToolRender } from '../defineToolRender'
-import { ToolCallBox } from '../../ToolCallBox'
-import { TaskToolCard } from './components/TaskToolCard'
+import { TaskRow } from './components/TaskRow'
 
 interface TaskResult {
   taskId: string
@@ -22,7 +23,7 @@ interface TaskResult {
 export const GetTaskInfoTool = defineToolRender(({ item, resultItem }) => {
   const { t } = useTranslation()
 
-  const input = (item.input != null ? item.input : {}) as { taskId?: string }
+  const input = (item.input != null ? item.input : {}) as Partial<ToolInputs['GetTaskInfo']>
   const inputTaskId = input.taskId
 
   const taskResult = useMemo(() => {
@@ -34,18 +35,23 @@ export const GetTaskInfoTool = defineToolRender(({ item, resultItem }) => {
     return parsed[0] ?? null
   }, [resultItem?.content])
 
-  const logs = taskResult?.logs ?? []
-  const metaChips = taskResult ? (() => {
-    const { exitCode, ...cardMeta } = taskResult
-    return [
-      cardMeta.adapter,
-      cardMeta.type === 'default' ? undefined : cardMeta.type,
-      cardMeta.name,
-      cardMeta.status,
-      exitCode != null ? t('chat.tools.taskExitCode', { code: exitCode }) : undefined,
-      cardMeta.background === false ? t('chat.tools.startTasksForeground') : cardMeta.background === true ? t('chat.tools.startTasksBackground') : undefined
-    ]
-  })() : []
+  const metaChips = taskResult
+    ? (() => {
+      const { exitCode, ...cardMeta } = taskResult
+      return [
+        cardMeta.adapter,
+        cardMeta.type === 'default' ? undefined : cardMeta.type,
+        cardMeta.name,
+        cardMeta.status,
+        exitCode != null ? t('chat.tools.taskExitCode', { code: exitCode }) : undefined,
+        cardMeta.background === false
+          ? t('chat.tools.startTasksForeground')
+          : cardMeta.background === true
+          ? t('chat.tools.startTasksBackground')
+          : undefined
+      ]
+    })()
+    : []
   const titleFallback = t('chat.tools.task')
 
   return (
@@ -53,33 +59,37 @@ export const GetTaskInfoTool = defineToolRender(({ item, resultItem }) => {
       <ToolCallBox
         defaultExpanded={true}
         header={
-          <div className='get-task-info-tool__header'>
-            <span className='material-symbols-rounded get-task-info-tool__icon'>info</span>
-            <span className='get-task-info-tool__title'>{t('chat.tools.getTaskInfo')}</span>
-            <span className='get-task-info-tool__count'>{taskResult ? 1 : 0}</span>
+          <div className='tool-header-content'>
+            <span className='material-symbols-rounded tool-header-icon'>info</span>
+            <span className='tool-header-title'>{t('chat.tools.getTaskInfo')}</span>
+            <span className='tool-header-chip'>{taskResult ? 1 : 0}</span>
           </div>
         }
         content={
           <div className='tool-content'>
-            {taskResult ? (
-              (() => {
-                const { taskId, exitCode, ...cardProps } = taskResult
-                return (
-                  <TaskToolCard
-                    {...cardProps}
-                    logs={logs}
-                    sessionId={taskId || inputTaskId}
-                    titleFallback={titleFallback}
-                    metaChips={metaChips}
-                    showExecutionIcon={false}
-                  />
-                )
-              })()
-            ) : (
-              <div className='get-task-info-tool__empty'>
-                {t('chat.tools.startTasksEmpty')}
-              </div>
-            )}
+            {taskResult
+              ? (
+                (() => {
+                  const { taskId, exitCode, ...cardProps } = taskResult
+                  return (
+                    <TaskRow
+                      description={cardProps.description}
+                      status={cardProps.status}
+                      background={cardProps.background}
+                      sessionId={taskId || inputTaskId}
+                      logs={cardProps.logs}
+                      titleFallback={titleFallback}
+                      metaChips={metaChips}
+                      showExecutionIcon={false}
+                    />
+                  )
+                })()
+              )
+              : (
+                <div className='get-task-info-tool__empty'>
+                  {t('chat.tools.startTasksEmpty')}
+                </div>
+              )}
           </div>
         }
       />

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

@@ -13,40 +13,15 @@
     );
   }
 
-  &__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;
+    padding: 0;
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 0;
   }
 
   &__empty {
-    padding: 10px 12px;
+    padding: 8px 10px;
     border: 1px dashed var(--border-color);
     border-radius: 8px;
     font-size: 12px;

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

@@ -3,9 +3,9 @@ import './ListTasksTool.scss'
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { ToolCallBox } from '../../ToolCallBox'
+import { ToolCallBox } from '../core/ToolCallBox'
 import { defineToolRender } from '../defineToolRender'
-import { TaskToolCard } from './components/TaskToolCard'
+import { TaskRow } from './components/TaskRow'
 
 interface TaskResult {
   taskId: string
@@ -35,10 +35,10 @@ export const ListTasksTool = defineToolRender(({ resultItem }) => {
       <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 className='tool-header-content'>
+            <span className='material-symbols-rounded tool-header-icon'>list_alt</span>
+            <span className='tool-header-title'>{t('chat.tools.listTasks')}</span>
+            <span className='tool-header-chip'>{taskResults.length}</span>
           </div>
         }
         content={
@@ -59,10 +59,13 @@ export const ListTasksTool = defineToolRender(({ resultItem }) => {
                     : undefined
                 ]
                 return (
-                  <TaskToolCard
+                  <TaskRow
                     key={taskId}
-                    {...cardProps}
+                    description={cardProps.description}
+                    status={cardProps.status}
+                    background={cardProps.background}
                     sessionId={taskId}
+                    logs={cardProps.logs}
                     titleFallback={t('chat.tools.task')}
                     metaChips={metaChips}
                     showExecutionIcon={false}

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

@@ -13,40 +13,15 @@
     );
   }
 
-  &__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;
+    padding: 0;
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 0;
   }
 
   &__empty {
-    padding: 10px 12px;
+    padding: 8px 10px;
     border: 1px dashed var(--border-color);
     border-radius: 8px;
     font-size: 12px;

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

@@ -2,18 +2,13 @@ import './StartTasksTool.scss'
 
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import type { ToolInputs } from '@vibe-forge/core'
 
-import { ToolCallBox } from '../../ToolCallBox'
+import { ToolCallBox } from '../core/ToolCallBox'
 import { defineToolRender } from '../defineToolRender'
-import { TaskToolCard } from './components/TaskToolCard'
+import { TaskRow } from './components/TaskRow'
 
-interface StartTask {
-  description?: string
-  type?: 'default' | 'spec' | 'entity'
-  name?: string
-  adapter?: string
-  background?: boolean
-}
+type StartTask = ToolInputs['StartTasks']['tasks'][number]
 
 interface TaskResult {
   taskId: string
@@ -30,7 +25,7 @@ interface TaskResult {
 export const StartTasksTool = defineToolRender(({ item, resultItem }) => {
   const { t } = useTranslation()
 
-  const input = (item.input != null ? item.input : {}) as { tasks?: StartTask[] }
+  const input = (item.input != null ? item.input : {}) as Partial<ToolInputs['StartTasks']>
   const tasks = Array.isArray(input.tasks) ? input.tasks : []
 
   const parsedResult = useMemo(() => {
@@ -50,10 +45,10 @@ export const StartTasksTool = defineToolRender(({ item, resultItem }) => {
       <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 className='tool-header-content'>
+            <span className='material-symbols-rounded tool-header-icon'>playlist_add</span>
+            <span className='tool-header-title'>{t('chat.tools.startTasks')}</span>
+            <span className='tool-header-chip'>{tasks.length}</span>
           </div>
         }
         content={
@@ -62,7 +57,6 @@ export const StartTasksTool = defineToolRender(({ item, resultItem }) => {
               {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,
@@ -70,10 +64,13 @@ export const StartTasksTool = defineToolRender(({ item, resultItem }) => {
                 ]
 
                 return (
-                  <TaskToolCard
+                  <TaskRow
                     key={idx}
-                    {...cardProps}
+                    description={description}
+                    status={status}
+                    background={background}
                     sessionId={taskId}
+                    logs={logs}
                     titleFallback={t('chat.tools.startTasks')}
                     metaChips={metaChips}
                     showExecutionIcon={true}

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

@@ -0,0 +1,105 @@
+.task-row {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 6px;
+  min-width: 0;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.task-row:last-child {
+  border-bottom: none;
+}
+
+.task-row__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.task-row__left {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.task-row__status-icon {
+  font-size: 16px;
+  color: var(--sub-text-color);
+}
+
+.task-row__status-icon.running {
+  color: var(--primary-color);
+}
+
+.task-row__status-icon.completed {
+  color: var(--success-color);
+}
+
+.task-row__status-icon.failed {
+  color: var(--danger-color);
+}
+
+.task-row__execution-icon {
+  font-size: 16px;
+  color: var(--sub-text-color);
+}
+
+.task-row__execution-icon--foreground {
+  color: var(--primary-color);
+}
+
+.task-row__execution-icon--background {
+  color: var(--sub-text-color);
+}
+
+.task-row__title {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  color: var(--text-color);
+}
+
+.task-row__session-link {
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font-size: 11px;
+  color: var(--primary-color);
+  font-family: var(--font-mono);
+  flex-shrink: 0;
+}
+
+.task-row__session-link:hover {
+  text-shadow: 0 0 .5px currentColor;
+}
+
+.task-row__meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.task-row__meta-chip {
+  padding: 1px 6px;
+  border: 1px solid var(--border-color);
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--sub-text-color);
+  background: var(--bg-color);
+  white-space: nowrap;
+}
+
+.task-row__logs {
+  width: 100%;
+}

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

@@ -0,0 +1,163 @@
+import './TaskRow.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 { MarkdownContent } from '#~/components/MarkdownContent'
+
+export interface TaskRowProps {
+  description?: string
+  status?: 'running' | 'completed' | 'failed'
+  logs?: string[] | null
+  sessionId?: string | null
+  titleFallback?: string
+  metaChips?: Array<string | null | undefined>
+  showExecutionIcon?: boolean
+  background?: boolean
+  foregroundLabel?: string
+  backgroundLabel?: string
+}
+
+function parseTaskDescription(description?: string): { title: string } {
+  if (!description) {
+    return { title: '' }
+  }
+  const lines = description.split('\n')
+  const title = lines[0] || ''
+  return { title }
+}
+
+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 TaskRow({
+  description,
+  status,
+  logs,
+  sessionId,
+  titleFallback,
+  metaChips,
+  showExecutionIcon,
+  background,
+  foregroundLabel,
+  backgroundLabel
+}: TaskRowProps) {
+  const navigate = useNavigate()
+  const [liveLogs, setLiveLogs] = useState<string[]>(logs ?? [])
+  const [liveStatus, setLiveStatus] = useState(status)
+  const seenMessageIdsRef = useRef<Set<string>>(new Set())
+  const { title } = parseTaskDescription(description)
+  const resolvedTitle = title || titleFallback || ''
+  const chips = (metaChips ?? []).filter((item): item is string => Boolean(item))
+  const isForeground = background === false
+  const executionClass = isForeground
+    ? 'task-row__execution-icon--foreground'
+    : 'task-row__execution-icon--background'
+  const executionLabel = isForeground ? foregroundLabel : backgroundLabel
+  const displaySessionId = sessionId != null && sessionId !== ''
+  const logText = useMemo(() => (liveLogs?.join('\n') ?? '').trim(), [liveLogs])
+
+  useEffect(() => {
+    setLiveLogs(logs ?? [])
+  }, [logs])
+
+  useEffect(() => {
+    setLiveStatus(status)
+  }, [status])
+
+  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' && data.session?.id === sessionId) {
+          const updatedStatus = data.session?.status as typeof status | undefined
+          if (updatedStatus) {
+            setLiveStatus(updatedStatus)
+          }
+        }
+      }
+    })
+    return () => {
+      cleanup?.()
+    }
+  }, [sessionId])
+
+  return (
+    <div className='task-row'>
+      <div className='task-row__header'>
+        <div className='task-row__left'>
+          <span className={`material-symbols-rounded task-row__status-icon ${liveStatus ?? 'help_outline'}`}>
+            {getStatusIcon(liveStatus)}
+          </span>
+          {showExecutionIcon && (
+            <span
+              className={`material-symbols-rounded task-row__execution-icon ${executionClass}`}
+              title={executionLabel}
+            >
+              {isForeground ? 'desktop_windows' : 'schedule'}
+            </span>
+          )}
+        </div>
+        <span className='task-row__title'>{resolvedTitle}</span>
+        {displaySessionId && (
+          <button
+            type='button'
+            className='task-row__session-link'
+            onClick={() => navigate(`/session/${sessionId}`)}
+          >
+            {sessionId}
+          </button>
+        )}
+        {chips.length > 0 && (
+          <div className='task-row__meta'>
+            {chips.map((item) => (
+              <span className='task-row__meta-chip' key={item}>{item}</span>
+            ))}
+          </div>
+        )}
+      </div>
+      {logText !== '' && (
+        <div className='task-row__logs'>
+          <MarkdownContent content={logText} />
+        </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/components/TaskToolCard.scss

@@ -1,8 +1,8 @@
 .task-tool-card {
   display: grid;
-  grid-template-columns: 24px minmax(0, 1fr);
-  gap: 12px;
-  padding: 12px;
+  grid-template-columns: 20px minmax(0, 1fr);
+  gap: 10px;
+  padding: 10px;
   border: 1px solid var(--border-color);
   border-radius: 8px;
   background: color-mix(
@@ -14,12 +14,12 @@
   &__left {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 6px;
     align-items: center;
   }
 
   &__status-icon {
-    font-size: 20px;
+    font-size: 18px;
     color: var(--sub-text-color);
     transition: color .2s ease;
 
@@ -41,7 +41,7 @@
   }
 
   &__execution-icon {
-    font-size: 20px;
+    font-size: 18px;
     color: var(--sub-text-color);
     transition: color .2s ease;
 
@@ -69,15 +69,15 @@
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
-    margin-bottom: 6px;
+    margin-bottom: 4px;
   }
 
   &__title {
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 600;
     color: var(--text-color);
     flex: 1;
-    margin-right: 12px;
+    margin-right: 8px;
   }
 
   &__session-id {
@@ -103,24 +103,24 @@
   }
 
   &__content {
-    font-size: 13px;
+    font-size: 12px;
     line-height: 1.5;
     color: var(--text-color);
-    margin-bottom: 8px;
+    margin-bottom: 6px;
   }
 
   &__meta {
-    margin: 6px 0;
+    margin: 4px 0;
     display: flex;
     flex-wrap: wrap;
-    gap: 6px;
+    gap: 4px;
   }
 
   &__meta-chip {
-    padding: 2px 6px;
+    padding: 1px 6px;
     border: 1px solid var(--border-color);
     border-radius: 999px;
-    font-size: 11px;
+    font-size: 10px;
     color: var(--sub-text-color);
     background: var(--bg-color);
   }