@vibe-forge/client 0.3.0 → 0.4.0

package/src/components/BenchmarkView/index.tsx

@@ -0,0 +1,197 @@
+import './BenchmarkView.scss'
+
+import { App } from 'antd'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
+
+import {
+  getBenchmarkResult,
+  getBenchmarkRun,
+  listBenchmarkCases,
+  listBenchmarkCategories,
+  startBenchmarkRun
+} from '#~/api.js'
+import { useQueryParams } from '#~/hooks/useQueryParams.js'
+import type { BenchmarkCase } from '@vibe-forge/core'
+
+import { BenchmarkCasePanel } from './BenchmarkCasePanel.js'
+import { BenchmarkSidebar } from './BenchmarkSidebar.js'
+import type { BenchmarkQueryParams } from './types.js'
+import { isTerminalRun } from './utils.js'
+
+export function BenchmarkView() {
+  const { t } = useTranslation()
+  const { message } = App.useApp()
+
+  // State
+  const [activeRunId, setActiveRunId] = useState('')
+  const [treeQuery, setTreeQuery] = useState('')
+  const [expandedKeys, setExpandedKeys] = useState<string[]>([])
+  const [checkedKeys, setCheckedKeys] = useState<string[]>([])
+
+  const { values, update } = useQueryParams<BenchmarkQueryParams>({
+    keys: ['category', 'title'],
+    defaults: { category: '', title: '' },
+    omit: {
+      category: (value: string) => value === '',
+      title: (value: string) => value === ''
+    }
+  })
+
+  // Data
+  const { data: categoriesData, mutate: mutateCategories } = useSWR(
+    '/api/benchmark/categories',
+    listBenchmarkCategories
+  )
+  const categories = categoriesData?.categories ?? []
+
+  const { data: casesData, mutate: mutateCases } = useSWR(
+    '/api/benchmark/cases',
+    () => listBenchmarkCases()
+  )
+  const cases = casesData?.cases ?? []
+
+  const selectedCase = useMemo<BenchmarkCase | null>(() => {
+    if (cases.length === 0) return null
+    const exact = cases.find(item => item.category === values.category && item.title === values.title)
+    if (exact) return exact
+    const sameCategoryFirst = values.category
+      ? cases.find(item => item.category === values.category) ?? null
+      : null
+    return sameCategoryFirst ?? cases[0] ?? null
+  }, [cases, values.category, values.title])
+
+  const { data: resultData, mutate: mutateResult } = useSWR(
+    selectedCase ? `/api/benchmark/results/${selectedCase.category}/${selectedCase.title}` : null,
+    () => getBenchmarkResult(selectedCase?.category ?? '', selectedCase?.title ?? '')
+  )
+  const latestResult = resultData?.result ?? selectedCase?.latestResult ?? null
+
+  const { data: runData, mutate: mutateRun } = useSWR(
+    activeRunId ? `/api/benchmark/runs/${activeRunId}` : null,
+    () => getBenchmarkRun(activeRunId),
+    { refreshInterval: activeRunId ? 2000 : 0 }
+  )
+  const activeRun = runData?.run
+
+  const progressPercent = useMemo(() => {
+    const totalCount = activeRun?.totalCount ?? 0
+    if (totalCount <= 0) return 0
+    const completedCount = activeRun?.completedCount ?? 0
+    return Math.min(100, Math.round((completedCount / totalCount) * 100))
+  }, [activeRun?.completedCount, activeRun?.totalCount])
+
+  // Handlers
+  const handleRunSpecificCase = useCallback(async (item: BenchmarkCase) => {
+    try {
+      const res = await startBenchmarkRun({ category: item.category, title: item.title })
+      setActiveRunId(res.run.runId)
+      void message.success(t('benchmark.runStarted'))
+    } catch {
+      void message.error(t('benchmark.runFailed'))
+    }
+  }, [message, t])
+
+  const handleRunCategory = useCallback(async (category: string) => {
+    try {
+      const res = await startBenchmarkRun({ category })
+      setActiveRunId(res.run.runId)
+      void message.success(t('benchmark.categoryRunStarted'))
+    } catch {
+      void message.error(t('benchmark.runFailed'))
+    }
+  }, [message, t])
+
+  const handleBatchRun = useCallback(async () => {
+    const caseKeys = checkedKeys.filter(k => k.startsWith('case:'))
+    const casesToRun = cases.filter(item => caseKeys.includes(`case:${item.category}/${item.title}`))
+    if (casesToRun.length === 0) {
+      for (const item of cases) {
+        try { await startBenchmarkRun({ category: item.category, title: item.title }) } catch { /* continue */ }
+      }
+      void message.success(t('benchmark.runStarted'))
+      return
+    }
+    let started = 0
+    for (const item of casesToRun) {
+      try {
+        await startBenchmarkRun({ category: item.category, title: item.title })
+        started++
+      } catch { /* continue */ }
+    }
+    if (started > 0) {
+      setCheckedKeys([])
+      void mutateCases()
+      void mutateCategories()
+      void message.success(t('benchmark.runStarted'))
+    }
+  }, [checkedKeys, cases, mutateCases, mutateCategories, message, t])
+
+  // Effects
+  useEffect(() => {
+    const nextKeys = categories.map(item => `category:${item.category}`)
+    setExpandedKeys((prev) => {
+      if (prev.length > 0 && treeQuery.trim() === '') return prev
+      return nextKeys
+    })
+  }, [categories, treeQuery])
+
+  useEffect(() => {
+    if (selectedCase == null) return
+    if (values.category !== selectedCase.category || values.title !== selectedCase.title) {
+      update({ category: selectedCase.category, title: selectedCase.title })
+    }
+  }, [selectedCase, update, values.category, values.title])
+
+  useEffect(() => {
+    if (!isTerminalRun(activeRun)) return
+    void mutateCases()
+    void mutateCategories()
+    void mutateResult()
+    if (activeRunId !== '') void mutateRun()
+    const summary = activeRun?.status === 'completed'
+      ? t('benchmark.runCompleted')
+      : t('benchmark.runFailed')
+    void message.info(summary)
+    setActiveRunId('')
+  }, [activeRun, activeRunId, message, mutateCases, mutateCategories, mutateResult, mutateRun, t])
+
+  const checkedCaseCount = checkedKeys.filter(k => k.startsWith('case:')).length
+
+  return (
+    <div className='benchmark-view'>
+      <div className='benchmark-view__left'>
+        <BenchmarkSidebar
+          cases={cases}
+          categories={categories}
+          selectedCase={selectedCase}
+          query={treeQuery}
+          expandedKeys={expandedKeys}
+          checkedKeys={checkedKeys}
+          checkedCaseCount={checkedCaseCount}
+          onQueryChange={setTreeQuery}
+          onExpandedKeysChange={setExpandedKeys}
+          onCheckedKeysChange={setCheckedKeys}
+          onSelectCase={(category, title) => update({ category, title })}
+          onRunCase={(item) => void handleRunSpecificCase(item)}
+          onRunCategory={(category) => void handleRunCategory(category)}
+          onBatchRun={() => void handleBatchRun()}
+        />
+      </div>
+
+      <div className='benchmark-view__divider' />
+
+      <div className='benchmark-view__right'>
+        <BenchmarkCasePanel
+          selectedCase={selectedCase}
+          latestResult={latestResult}
+          activeRun={activeRun}
+          activeRunId={activeRunId}
+          progressPercent={progressPercent}
+          onRunCase={() => void (selectedCase && handleRunSpecificCase(selectedCase))}
+        />
+      </div>
+    </div>
+  )
+}

package/src/components/BenchmarkView/types.ts

@@ -0,0 +1,10 @@
+import type { BenchmarkCase } from '@vibe-forge/core'
+
+export interface BenchmarkQueryParams extends Record<string, string> {
+  category: string
+  title: string
+}
+
+export interface TreeNodeCase extends BenchmarkCase {
+  key: string
+}

package/src/components/BenchmarkView/utils.ts

@@ -0,0 +1,21 @@
+import type { BenchmarkResult, BenchmarkRunSummary } from '@vibe-forge/core'
+
+// ─── Formatting ───────────────────────────────────────────────────────────────
+
+export const isTerminalRun = (run?: BenchmarkRunSummary | null) =>
+  run?.status === 'completed' || run?.status === 'failed'
+
+export const formatTimestamp = (value?: string | null): string => {
+  if (!value) return '-'
+  return new Date(value).toLocaleString()
+}
+
+// ─── Result status helpers ────────────────────────────────────────────────────
+
+export const getResultStatusMeta = (result?: BenchmarkResult | null) => {
+  if (result == null) return { icon: 'radio_button_unchecked', statusKey: 'no-result' }
+  if (result.status === 'pass') return { icon: 'check_circle', statusKey: 'pass' }
+  if (result.status === 'partial') return { icon: 'rule', statusKey: 'partial' }
+  return { icon: 'cancel', statusKey: 'fail' }
+}
+

package/src/components/Chat.tsx

@@ -1,40 +1,48 @@
 import './Chat.scss'
 
-import { useTranslation } from 'react-i18next'
-
-import type { Session } from '@vibe-forge/core'
+import type { ChatMessage, ChatMessageContent, Session } from '@vibe-forge/core'
 import { ChatHeader } from './chat/ChatHeader.js'
 import { ChatHistoryView } from './chat/ChatHistoryView.js'
 import { ChatSettingsView } from './chat/ChatSettingsView.js'
 import { ChatTimelineView } from './chat/ChatTimelineView.js'
-import { useChatModels } from './chat/useChatModels.js'
-import { useChatSession } from './chat/useChatSession.js'
+import { useChatSession } from '#~/hooks/chat/use-chat-session'
 
 export function Chat({
   session
 }: {
   session?: Session
 }) {
-  const { t } = useTranslation()
-  const { selectedModel, setSelectedModel, modelOptions, hasAvailableModels } = useChatModels()
   const {
     messages,
     sessionInfo,
     interactionRequest,
-    isCreating,
     isReady,
-    isThinking,
     activeView,
     setActiveView,
-    messagesEndRef,
-    messagesContainerRef,
-    showScrollBottom,
-    scrollToBottom,
-    send,
-    interrupt,
-    clearMessages,
-    handleInteractionResponse
-  } = useChatSession({ session, selectedModel, hasAvailableModels })
+    handleInteractionResponse,
+    setMessages,
+    placeholder,
+    modelOptions,
+    selectedModel,
+    modelForQuery,
+    setSelectedModel,
+    permissionMode,
+    setPermissionMode,
+    permissionModeOptions,
+    hasAvailableModels,
+    modelUnavailable
+  } = useChatSession({ session })
+  const buildUserMessage = (content: string | ChatMessageContent[]): ChatMessage => {
+    const id = globalThis.crypto?.randomUUID
+      ? globalThis.crypto.randomUUID()
+      : `local-${Date.now()}-${Math.random().toString(16).slice(2)}`
+    return {
+      id,
+      role: 'user' as const,
+      content,
+      createdAt: Date.now()
+    }
+  }
 
   return (
     <div className={`chat-container ${isReady ? 'ready' : ''} ${!session?.id ? 'is-new-session' : ''}`}>
@@ -59,26 +67,26 @@ export function Chat({
           messages={messages}
           session={session}
           sessionInfo={sessionInfo}
-          isCreating={isCreating}
-          showScrollBottom={showScrollBottom}
-          messagesContainerRef={messagesContainerRef}
-          messagesEndRef={messagesEndRef}
-          scrollToBottom={scrollToBottom}
           interactionRequest={interactionRequest}
           onInteractionResponse={handleInteractionResponse}
-          onSend={send}
-          onInterrupt={interrupt}
-          onClear={clearMessages}
-          placeholder={!session?.id ? t('chat.newSessionPlaceholder') : undefined}
+          onClearMessages={() => setMessages([])}
+          onSend={(text) => setMessages((prev) => [...prev, buildUserMessage(text)])}
+          onSendContent={(content) => setMessages((prev) => [...prev, buildUserMessage(content)])}
+          placeholder={placeholder}
           modelOptions={modelOptions}
           selectedModel={selectedModel}
+          modelForQuery={modelForQuery}
           onModelChange={setSelectedModel}
-          modelUnavailable={!hasAvailableModels}
+          permissionMode={permissionMode}
+          permissionModeOptions={permissionModeOptions}
+          onPermissionModeChange={setPermissionMode}
+          modelUnavailable={modelUnavailable}
+          hasAvailableModels={hasAvailableModels}
         />
       )}
 
       {activeView === 'timeline' && (
-        <ChatTimelineView messages={messages} isThinking={isThinking} />
+        <ChatTimelineView messages={messages} />
       )}
 
       {activeView === 'settings' && session?.id && (

package/src/components/{chat/CodeBlock.tsx → CodeBlock.tsx}

@@ -1,8 +1,10 @@
 import './CodeBlock.scss'
+
 import { useAtomValue } from 'jotai'
 import React, { useEffect, useState } from 'react'
 import { codeToHtml } from 'shiki'
-import { themeAtom } from '../../store'
+
+import { themeAtom } from '#~/store/index.js'
 
 export function CodeBlock({
   code,

package/src/components/ConfigView.tsx

@@ -45,6 +45,7 @@ export function ConfigView() {
       'general',
       'conversation',
       'modelServices',
+      'channels',
       'adapters',
       'plugins',
       'mcp',
@@ -66,6 +67,12 @@ export function ConfigView() {
       label: t('config.sections.modelServices'),
       value: currentSource?.modelServices
     },
+    {
+      key: 'channels',
+      icon: 'campaign',
+      label: t('config.sections.channels'),
+      value: currentSource?.channels
+    },
     {
       key: 'adapters',
       icon: 'settings_input_component',

package/src/components/{chat/MarkdownContent.tsx → MarkdownContent.tsx}

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
-import { CodeBlock } from './CodeBlock'
+import { CodeBlock } from '#~/components/CodeBlock'
 
 export function MarkdownContent({
   content

package/src/components/NavRail.tsx

@@ -108,6 +108,13 @@ export function NavRail({
       path: '/automation',
       active: currentPath === '/automation'
     },
+    {
+      key: 'benchmark',
+      icon: 'speed',
+      label: t('common.benchmark'),
+      path: '/benchmark',
+      active: currentPath === '/benchmark'
+    },
     {
       key: 'archive',
       icon: 'archive',

package/src/components/chat/ChatHeader.scss

@@ -64,22 +64,16 @@
 }
 
 .chat-header-view-group {
-  .ant-radio-button-wrapper {
-    height: 30px;
-    line-height: 28px;
-    padding: 0 12px;
-    font-size: 12px;
+  .ant-radio-button-wrapper .ant-radio-button-label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
   }
 }
 
-.chat-header-view-option {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-
-  .material-symbols-rounded {
-    font-size: 16px;
-  }
+.chat-header-view-option.material-symbols-rounded {
+  font-size: 16px;
 }
 
 .material-symbols-rounded.is-filled {
@@ -271,15 +265,27 @@
           &.archive-action {
             &:hover {
               border-color: var(--danger-color);
-              background-color: color-mix(in srgb, var(--danger-color) 12%, transparent);
+              background-color: color-mix(
+                in srgb,
+                var(--danger-color) 12%,
+                transparent
+              );
               color: var(--danger-color);
             }
             &.active {
-              background-color: color-mix(in srgb, var(--danger-color) 18%, transparent);
+              background-color: color-mix(
+                in srgb,
+                var(--danger-color) 18%,
+                transparent
+              );
               border-color: var(--danger-color);
               color: var(--danger-color);
               &:hover {
-                background-color: color-mix(in srgb, var(--danger-color) 24%, transparent);
+                background-color: color-mix(
+                  in srgb,
+                  var(--danger-color) 24%,
+                  transparent
+                );
               }
             }
           }
@@ -349,15 +355,27 @@ html.dark {
 
             &.archive-action {
               &:hover {
-                background-color: color-mix(in srgb, var(--danger-color) 22%, transparent);
+                background-color: color-mix(
+                  in srgb,
+                  var(--danger-color) 22%,
+                  transparent
+                );
                 color: var(--danger-color);
               }
               &.active {
-                background-color: color-mix(in srgb, var(--danger-color) 26%, transparent);
+                background-color: color-mix(
+                  in srgb,
+                  var(--danger-color) 26%,
+                  transparent
+                );
                 border-color: var(--danger-color);
                 color: var(--danger-color);
                 &:hover {
-                  background-color: color-mix(in srgb, var(--danger-color) 32%, transparent);
+                  background-color: color-mix(
+                    in srgb,
+                    var(--danger-color) 32%,
+                    transparent
+                  );
                 }
               }
             }

package/src/components/chat/ChatHeader.tsx

@@ -147,27 +147,24 @@ export function ChatHeader({
           options={[
             {
               label: (
-                <span className='chat-header-view-option'>
-                  <span className='material-symbols-rounded'>forum</span>
-                  <span>{t('chat.viewHistory')}</span>
+                <span className='chat-header-view-option material-symbols-rounded'>
+                  forum
                 </span>
               ),
               value: 'history'
             },
             {
               label: (
-                <span className='chat-header-view-option'>
-                  <span className='material-symbols-rounded'>timeline</span>
-                  <span>{t('chat.viewTimeline')}</span>
+                <span className='chat-header-view-option material-symbols-rounded'>
+                  timeline
                 </span>
               ),
               value: 'timeline'
             },
             {
               label: (
-                <span className='chat-header-view-option'>
-                  <span className='material-symbols-rounded'>tune</span>
-                  <span>{t('chat.viewSettings')}</span>
+                <span className='chat-header-view-option material-symbols-rounded'>
+                  tune
                 </span>
               ),
               value: 'settings'