@vibe-forge/client 0.4.0 → 0.6.0

package/src/components/{AutomationView → automation-view}/index.tsx

@@ -1,4 +1,4 @@
-import './AutomationView.scss'
+import './index.scss'
 
 import { App } from 'antd'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
@@ -10,6 +10,7 @@ import type { AutomationRule, AutomationRun } from '#~/api.js'
 import {
   createAutomationRule,
   deleteAutomationRule,
+  getApiErrorMessage,
   listAutomationRules,
   listAutomationRuns,
   runAutomationRule,
@@ -127,8 +128,8 @@ export function AutomationView() {
         void mutateRuns()
         setPanelMode('view')
       }
-    } catch {
-      void message.error(t('automation.saveFailed'))
+    } catch (error) {
+      void message.error(getApiErrorMessage(error, t('automation.saveFailed')))
     } finally {
       setSubmitting(false)
     }
@@ -143,8 +144,8 @@ export function AutomationView() {
       }
       void mutate()
       void message.success(t('automation.deleted'))
-    } catch {
-      void message.error(t('automation.deleteFailed'))
+    } catch (error) {
+      void message.error(getApiErrorMessage(error, t('automation.deleteFailed')))
     }
   }, [message, mutate, selectedRuleId, t])
 
@@ -157,8 +158,8 @@ export function AutomationView() {
         void mutateRuns()
         void navigate(`/session/${nextSessionId}`)
       }
-    } catch {
-      void message.error(t('automation.runFailed'))
+    } catch (error) {
+      void message.error(getApiErrorMessage(error, t('automation.runFailed')))
     }
   }, [message, mutateRuns, navigate, t])
 
@@ -166,8 +167,8 @@ export function AutomationView() {
     try {
       await updateAutomationRule(rule.id, { enabled })
       void mutate()
-    } catch {
-      void message.error(t('automation.toggleFailed'))
+    } catch (error) {
+      void message.error(getApiErrorMessage(error, t('automation.toggleFailed')))
     }
   }, [message, mutate, t])
 

package/src/components/{BenchmarkView → benchmark-view}/index.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 
 import {
+  getApiErrorMessage,
   getBenchmarkResult,
   getBenchmarkRun,
   listBenchmarkCases,
@@ -88,8 +89,8 @@ export function BenchmarkView() {
       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'))
+    } catch (error) {
+      void message.error(getApiErrorMessage(error, t('benchmark.runFailed')))
     }
   }, [message, t])
 
@@ -98,8 +99,8 @@ export function BenchmarkView() {
       const res = await startBenchmarkRun({ category })
       setActiveRunId(res.run.runId)
       void message.success(t('benchmark.categoryRunStarted'))
-    } catch {
-      void message.error(t('benchmark.runFailed'))
+    } catch (error) {
+      void message.error(getApiErrorMessage(error, t('benchmark.runFailed')))
     }
   }, [message, t])
 

package/src/components/chat/ChatHeader.tsx

@@ -7,7 +7,7 @@ import { useAtomValue } from 'jotai'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { deleteSession, updateSession } from '../../api'
+import { deleteSession, getApiErrorMessage, updateSession } from '../../api'
 import { isSidebarCollapsedAtom, isSidebarResizingAtom } from '../../store/index'
 import { ConfigSectionPanel } from '../config'
 import type { FieldSpec } from '../config/configSchema'
@@ -68,7 +68,7 @@ export function ChatHeader({
       await updateSession(sessionId, { isStarred: !isStarred })
       void message.success(isStarred ? t('common.unstarred') : t('common.starred'))
     } catch (err) {
-      void message.error(t('common.operationFailed'))
+      void message.error(getApiErrorMessage(err, t('common.operationFailed')))
     }
   }
 
@@ -78,7 +78,7 @@ export function ChatHeader({
       await updateSession(sessionId, { isArchived: !isArchived })
       void message.success(isArchived ? t('common.restored') : t('common.archived'))
     } catch (err) {
-      void message.error(t('common.operationFailed'))
+      void message.error(getApiErrorMessage(err, t('common.operationFailed')))
     }
   }
 
@@ -257,8 +257,8 @@ export function SessionSettingsPanel({
           tags: Array.isArray(currentValue.tags) ? currentValue.tags : []
         })
         lastSavedRef.current = currentSerialized
-      } catch {
-        void message.error(t('common.operationFailed'))
+      } catch (err) {
+        void message.error(getApiErrorMessage(err, t('common.operationFailed')))
       } finally {
         savingRef.current = false
       }
@@ -292,7 +292,7 @@ export function SessionSettingsPanel({
           void message.success(t('common.deleteSuccess'))
           onClose()
         } catch (err) {
-          void message.error(t('common.deleteFailed'))
+          void message.error(getApiErrorMessage(err, t('common.deleteFailed')))
         }
       }
     })

package/src/components/chat/ChatHistoryView.tsx

@@ -1,20 +1,22 @@
 import React, { useEffect, useMemo, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
 
+import type { PermissionMode } from '#~/hooks/chat/use-chat-permission-mode'
+import { useChatScroll } from '#~/hooks/chat/use-chat-scroll'
+import { useChatSessionActions } from '#~/hooks/chat/use-chat-session-actions'
 import type { AskUserQuestionParams, ChatMessage, ChatMessageContent, Session, SessionInfo } from '@vibe-forge/core'
 import { CurrentTodoList } from './CurrentTodoList'
-import { MessageItem } from './Messages/MessageItem'
+import { MessageItem } from './messages/MessageItem'
+import { processMessages } from './messages/message-utils'
 import { NewSessionGuide } from './NewSessionGuide'
-import { Sender } from './Sender/Sender'
+import { Sender } from './sender/Sender'
 import { ToolGroup } from './tools/core/ToolGroup'
-import { processMessages } from './Messages/message-utils'
-import type { PermissionMode } from '#~/hooks/chat/use-chat-permission-mode'
-import { useChatScroll } from '#~/hooks/chat/use-chat-scroll'
-import { useChatSessionActions } from '#~/hooks/chat/use-chat-session-actions'
 
 interface ModelSelectOption {
   value: string
   label: React.ReactNode
   searchText: string
+  displayLabel: string
 }
 
 interface ModelSelectGroup {
@@ -27,11 +29,12 @@ export function ChatHistoryView({
   messages,
   session,
   sessionInfo,
+  connectionError,
+  onRetryConnection,
   interactionRequest,
   onInteractionResponse,
+  setMessages,
   onClearMessages,
-  onSend,
-  onSendContent,
   placeholder,
   modelOptions,
   selectedModel,
@@ -40,6 +43,9 @@ export function ChatHistoryView({
   permissionMode,
   permissionModeOptions,
   onPermissionModeChange,
+  selectedAdapter,
+  adapterOptions,
+  onAdapterChange,
   modelUnavailable,
   hasAvailableModels
 }: {
@@ -47,11 +53,12 @@ export function ChatHistoryView({
   messages: ChatMessage[]
   session?: Session
   sessionInfo: SessionInfo | null
+  connectionError?: string | null
+  onRetryConnection: () => void
   interactionRequest: { id: string; payload: AskUserQuestionParams } | null
   onInteractionResponse: (id: string, data: string | string[]) => void
+  setMessages: React.Dispatch<React.SetStateAction<ChatMessage[]>>
   onClearMessages: () => void
-  onSend: (text: string) => void
-  onSendContent: (content: ChatMessageContent[]) => void
   placeholder?: string
   modelOptions: ModelSelectGroup[]
   selectedModel?: string
@@ -60,9 +67,13 @@ export function ChatHistoryView({
   permissionMode: PermissionMode
   permissionModeOptions: Array<{ value: PermissionMode; label: React.ReactNode }>
   onPermissionModeChange: (mode: PermissionMode) => void
+  selectedAdapter?: string
+  adapterOptions: Array<{ value: string; label: React.ReactNode }>
+  onAdapterChange: (adapter: string) => void
   modelUnavailable: boolean
   hasAvailableModels: boolean
 }) {
+  const { t } = useTranslation()
   const { messagesEndRef, messagesContainerRef, messagesContentRef, showScrollBottom, scrollToBottom } = useChatScroll({
     messagesLength: messages.length
   })
@@ -71,18 +82,53 @@ export function ChatHistoryView({
     modelForQuery,
     hasAvailableModels,
     permissionMode,
+    adapter: selectedAdapter,
     onClearMessages
   })
   const initialScrollDoneRef = useRef(false)
+  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()
+    }
+  }
+
   const handleSend = async (text: string) => {
-    await send(text)
-    if (session?.id) {
-      onSend(text)
+    if (!session?.id) {
+      const optimisticMessage = buildUserMessage(text)
+      setMessages((prev) => [...prev, optimisticMessage])
+      const didSend = await send(text)
+      if (!didSend) {
+        setMessages((prev) => prev.filter((message) => message.id !== optimisticMessage.id))
+      }
+      return
+    }
+
+    const didSend = await send(text)
+    if (didSend) {
+      setMessages((prev) => [...prev, buildUserMessage(text)])
     }
   }
   const handleSendContent = async (content: ChatMessageContent[]) => {
-    await sendContent(content)
-    onSendContent(content)
+    if (!session?.id) {
+      const optimisticMessage = buildUserMessage(content)
+      setMessages((prev) => [...prev, optimisticMessage])
+      const didSend = await sendContent(content)
+      if (!didSend) {
+        setMessages((prev) => prev.filter((message) => message.id !== optimisticMessage.id))
+      }
+      return
+    }
+
+    const didSend = await sendContent(content)
+    if (didSend) {
+      setMessages((prev) => [...prev, buildUserMessage(content)])
+    }
   }
   useEffect(() => {
     initialScrollDoneRef.current = false
@@ -104,6 +150,12 @@ export function ChatHistoryView({
     <>
       <div className={`chat-messages ${isReady ? 'ready' : ''}`} ref={messagesContainerRef}>
         <div className='chat-messages-content' ref={messagesContentRef}>
+          {!session?.id && isCreating && (
+            <div className='chat-pending-session-banner'>
+              <span className='material-symbols-rounded'>hourglass_top</span>
+              <span>{t('common.creatingChat')}</span>
+            </div>
+          )}
           {renderItems.map((item, index) => {
             if (item.type === 'message') {
               return (
@@ -134,7 +186,7 @@ export function ChatHistoryView({
         )}
       </div>
 
-      {!session?.id && (
+      {!session?.id && messages.length === 0 && (
         <div className='new-session-guide-wrapper'>
           <NewSessionGuide />
         </div>
@@ -145,10 +197,13 @@ export function ChatHistoryView({
         <Sender
           onSend={handleSend}
           onSendContent={handleSendContent}
+          adapterLocked={session?.id != null}
           sessionStatus={isCreating ? 'running' : session?.status}
           onInterrupt={interrupt}
           onClear={clearMessages}
           sessionInfo={sessionInfo}
+          connectionError={connectionError}
+          onRetryConnection={onRetryConnection}
           interactionRequest={interactionRequest}
           onInteractionResponse={onInteractionResponse}
           placeholder={placeholder}
@@ -158,6 +213,9 @@ export function ChatHistoryView({
           permissionMode={permissionMode}
           permissionModeOptions={permissionModeOptions}
           onPermissionModeChange={onPermissionModeChange}
+          selectedAdapter={selectedAdapter}
+          adapterOptions={adapterOptions}
+          onAdapterChange={onAdapterChange}
           modelUnavailable={modelUnavailable}
         />
       </div>

package/src/components/chat/ChatTimelineView.tsx

@@ -4,9 +4,9 @@ import React from 'react'
 
 import type { ChatMessage } from '@vibe-forge/core'
 
-import { SessionTimelinePanel } from './SessionTimelinePanel'
-import { SessionTimelineEventList } from './SessionTimelinePanel/EventList'
-import type { Task } from './SessionTimelinePanel/types'
+import { SessionTimelinePanel } from './session-timeline-panel'
+import { SessionTimelineEventList } from './session-timeline-panel/EventList'
+import type { Task } from './session-timeline-panel/types'
 
 const mockTimelineTask: Task = {
   startTime: '09:40:00',

package/src/components/chat/CurrentTodoList.scss

@@ -1,4 +1,22 @@
 .current-todo-container {
+  --todo-panel-bg: var(--bg-color);
+  --todo-panel-muted-bg: var(--tag-bg);
+  --todo-panel-border: var(--border-color);
+  --todo-panel-hover-border: var(--primary-color);
+  --todo-panel-shadow: 0 2px 4px -1px rgba(0, 0, 0, .06);
+  --todo-overlay-shadow: 0 4px 12px rgba(0, 0, 0, .15);
+  --todo-track-bg: var(--tag-hover-bg);
+  --todo-text: var(--text-color);
+  --todo-sub-text: var(--sub-text-color);
+  --todo-pending-icon: var(--placeholder-color);
+  --todo-hover-bg: var(--tag-bg);
+  --todo-priority-high-bg: #fee2e2;
+  --todo-priority-high-text: #ef4444;
+  --todo-priority-medium-bg: #fef3c7;
+  --todo-priority-medium-text: #d97706;
+  --todo-priority-low-bg: #d1fae5;
+  --todo-priority-low-text: #10b981;
+
   position: relative;
   margin: 12px 24px 0 24px;
   z-index: 10;
@@ -9,31 +27,31 @@
     opacity: .6;
     .todo-progress-bar {
       cursor: default;
-      background: #f9fafb;
+      background: var(--todo-panel-muted-bg);
       box-shadow: none;
       &:hover {
-        border-color: #e5e7eb;
+        border-color: var(--todo-panel-border);
       }
       .progress-info .material-symbols-rounded {
-        color: #9ca3af;
+        color: var(--todo-pending-icon);
       }
     }
   }
 
   .todo-progress-bar {
-    background: white;
-    border: 1px solid #e5e7eb;
+    background: var(--todo-panel-bg);
+    border: 1px solid var(--todo-panel-border);
     border-radius: 8px;
     padding: 8px 16px;
     display: flex;
     align-items: center;
     gap: 12px;
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .06);
+    box-shadow: var(--todo-panel-shadow);
     cursor: pointer;
     transition: all .2s ease;
 
     &:hover {
-      border-color: #3b82f6;
+      border-color: var(--todo-panel-hover-border);
     }
 
     .progress-info {
@@ -44,26 +62,26 @@
 
       .material-symbols-rounded {
         font-size: 20px;
-        color: #3b82f6;
+        color: var(--primary-color);
       }
 
       .text {
         font-size: 13px;
         font-weight: 500;
-        color: #374151;
+        color: var(--todo-text);
       }
     }
 
     .progress-track {
       flex: 1;
       height: 6px;
-      background: #f3f4f6;
+      background: var(--todo-track-bg);
       border-radius: 3px;
       overflow: hidden;
 
       .progress-fill {
         height: 100%;
-        background: #3b82f6;
+        background: var(--primary-color);
         transition: width .3s ease;
       }
     }
@@ -73,12 +91,12 @@
       border: none;
       padding: 0;
       cursor: pointer;
-      color: #9ca3af;
+      color: var(--todo-pending-icon);
       display: flex;
       align-items: center;
 
       &:hover {
-        color: #374151;
+        color: var(--todo-text);
       }
     }
   }
@@ -88,10 +106,10 @@
     bottom: calc(100% + 8px);
     left: 0;
     right: 0;
-    background: white;
-    border: 1px solid #e5e7eb;
+    background: var(--todo-panel-bg);
+    border: 1px solid var(--todo-panel-border);
     border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
+    box-shadow: var(--todo-overlay-shadow);
     animation: slideUp .3s cubic-bezier(.4, 0, .2, 1);
     overflow: hidden;
     z-index: 100;
@@ -109,7 +127,7 @@
         transition: background-color .2s;
 
         &:hover {
-          background-color: #f9fafb;
+          background-color: var(--todo-hover-bg);
         }
 
         .icon {
@@ -130,21 +148,21 @@
 
         &.status-in_progress {
           .icon {
-            color: #3b82f6;
+            color: var(--primary-color);
             animation: spin 2s linear infinite;
           }
           .text {
-            color: #111827;
+            color: var(--todo-text);
             font-weight: 500;
           }
         }
 
         &.status-pending {
           .icon {
-            color: #9ca3af;
+            color: var(--todo-pending-icon);
           }
           .text {
-            color: #4b5563;
+            color: var(--todo-sub-text);
           }
         }
 
@@ -167,16 +185,16 @@
             font-weight: 600;
 
             &.high {
-              background: #fee2e2;
-              color: #ef4444;
+              background: var(--todo-priority-high-bg);
+              color: var(--todo-priority-high-text);
             }
             &.medium {
-              background: #fef3c7;
-              color: #d97706;
+              background: var(--todo-priority-medium-bg);
+              color: var(--todo-priority-medium-text);
             }
             &.low {
-              background: #d1fae5;
-              color: #10b981;
+              background: var(--todo-priority-low-bg);
+              color: var(--todo-priority-low-text);
             }
           }
         }
@@ -185,6 +203,17 @@
   }
 }
 
+html.dark .current-todo-container {
+  --todo-panel-shadow: 0 8px 24px rgba(0, 0, 0, .24);
+  --todo-overlay-shadow: 0 16px 36px rgba(0, 0, 0, .32);
+  --todo-priority-high-bg: rgba(248, 113, 113, .16);
+  --todo-priority-high-text: #fca5a5;
+  --todo-priority-medium-bg: rgba(245, 158, 11, .16);
+  --todo-priority-medium-text: #fcd34d;
+  --todo-priority-low-bg: rgba(45, 212, 191, .16);
+  --todo-priority-low-text: #5eead4;
+}
+
 @keyframes slideDown {
   from {
     opacity: 0;