@vibe-forge/client 0.3.0 → 0.4.0

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);
   }

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

@@ -6,7 +6,7 @@ import { useNavigate } from 'react-router-dom'
 import type { ChatMessage, WSEvent } from '@vibe-forge/core'
 
 import { connectionManager } from '#~/connectionManager.js'
-import { CodeBlock } from '../../../CodeBlock'
+import { CodeBlock } from '#~/components/CodeBlock'
 
 export interface TaskToolCardProps {
   description?: string
@@ -154,11 +154,13 @@ export function TaskToolCard({
             ))}
           </div>
         )}
-        <CodeBlock
-          hideHeader
-          code={logText}
-          lang='md'
-        />
+        {logText !== '' && (
+          <CodeBlock
+            hideHeader
+            code={logText}
+            lang='md'
+          />
+        )}
       </div>
     </div>
   )

package/src/components/config/ConfigSectionForm.tsx

@@ -20,6 +20,7 @@ import {
 import type { TranslationFn } from './configUtils'
 import {
   BooleanRecordEditor,
+  ChannelRecordEditor,
   KeyValueEditor,
   McpServersRecordEditor,
   ModelServicesRecordEditor,
@@ -49,7 +50,7 @@ export const SectionForm = ({
   if (fields.length === 0) {
     return <Empty description={t('common.noData')} image={null} />
   }
-  const directRecordSections = new Set(['modelServices', 'adapters', 'plugins', 'mcp'])
+  const directRecordSections = new Set(['modelServices', 'channels', 'adapters', 'plugins', 'mcp'])
 
   const modelServiceEntries = Object.entries(mergedModelServices)
   const modelServiceOptions: Array<{ value: string; label: ReactNode }> = modelServiceEntries.map(([key, entry]) => {
@@ -97,6 +98,7 @@ export const SectionForm = ({
 
   const getRecordKeyPlaceholder = (field: FieldSpec) => {
     if (sectionKey === 'modelServices') return t('config.editor.newModelServiceName')
+    if (sectionKey === 'channels') return t('config.editor.newChannelName')
     if (sectionKey === 'adapters') return t('config.editor.newAdapterName')
     if (sectionKey === 'plugins') {
       if (field.path.join('.') === 'extraKnownMarketplaces') return t('config.editor.newMarketplaceName')
@@ -247,6 +249,15 @@ export const SectionForm = ({
             keyPlaceholder={getRecordKeyPlaceholder(field)}
           />
         )
+      } else if (field.recordKind === 'channels') {
+        control = (
+          <ChannelRecordEditor
+            value={recordValue}
+            onChange={handleValueChange}
+            t={t}
+            keyPlaceholder={getRecordKeyPlaceholder(field)}
+          />
+        )
       } else if (field.recordKind === 'mcpServers') {
         control = (
           <McpServersRecordEditor

package/src/components/config/channelDefinitions.ts

@@ -0,0 +1,6 @@
+import { larkChannelDefinition } from '@vibe-forge/channel-lark'
+import type { ChannelDescriptor } from '@vibe-forge/core/channel'
+
+export const channelDefinitions: ChannelDescriptor[] = [
+  larkChannelDefinition
+]

package/src/components/config/configSchema.ts

@@ -9,7 +9,7 @@ export type FieldValueType =
   | 'record'
   | 'shortcut'
 
-export type RecordKind = 'json' | 'modelServices' | 'mcpServers' | 'boolean' | 'keyValue'
+export type RecordKind = 'json' | 'modelServices' | 'mcpServers' | 'boolean' | 'keyValue' | 'channels'
 
 export interface FieldOption {
   value: string
@@ -260,6 +260,15 @@ export const configSchema: Record<string, FieldSpec[]> = {
       icon: 'hub'
     }
   ],
+  channels: [
+    {
+      path: [],
+      type: 'record',
+      recordKind: 'channels',
+      defaultValue: {},
+      icon: 'campaign'
+    }
+  ],
   adapters: [
     {
       path: [],

package/src/components/config/recordEditors/ChannelRecordEditor.scss

@@ -0,0 +1 @@
+@use './RecordEditors.scss';