@vibe-forge/client 0.5.0 → 0.6.0

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,
@@ -50,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
@@ -69,6 +73,7 @@ export function ChatHistoryView({
   modelUnavailable: boolean
   hasAvailableModels: boolean
 }) {
+  const { t } = useTranslation()
   const { messagesEndRef, messagesContainerRef, messagesContentRef, showScrollBottom, scrollToBottom } = useChatScroll({
     messagesLength: messages.length
   })
@@ -81,15 +86,49 @@ export function ChatHistoryView({
     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
@@ -111,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 (
@@ -141,7 +186,7 @@ export function ChatHistoryView({
         )}
       </div>
 
-      {!session?.id && (
+      {!session?.id && messages.length === 0 && (
         <div className='new-session-guide-wrapper'>
           <NewSessionGuide />
         </div>
@@ -152,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}

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;

package/src/components/chat/{Sender → sender}/Sender.scss

@@ -37,6 +37,54 @@
     color: var(--placeholder-color);
     font-size: 12px;
   }
+
+  .connection-error-banner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 8px;
+    padding: 10px 12px;
+    border-radius: 10px;
+    border: 1px solid rgba(220, 38, 38, .2);
+    background: linear-gradient(
+      135deg,
+      rgba(254, 242, 242, .95),
+      rgba(255, 255, 255, .92)
+    );
+  }
+
+  .connection-error-content {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    min-width: 0;
+
+    .material-symbols-rounded {
+      color: #dc2626;
+      font-size: 18px;
+      line-height: 1;
+      margin-top: 1px;
+    }
+  }
+
+  .connection-error-copy {
+    min-width: 0;
+  }
+
+  .connection-error-title {
+    color: #991b1b;
+    font-size: 12px;
+    font-weight: 600;
+  }
+
+  .connection-error-message {
+    margin-top: 2px;
+    color: #7f1d1d;
+    font-size: 12px;
+    line-height: 1.4;
+    word-break: break-word;
+  }
 }
 
 .file-input-hidden {
@@ -103,27 +151,49 @@
       display: flex;
       align-items: center;
       gap: 4px;
-      margin-left: 4px;
-      padding-left: 8px;
-      border-left: 2px solid var(--border-color);
+      margin-left: 6px;
+      padding-left: 10px;
+      border-left: 1px solid var(--border-color);
       border-radius: 1px;
       position: relative;
-      height: 14px;
+      height: auto;
       align-self: center;
 
+      .ant-cascader {
+        display: block;
+      }
+
       .info-item {
         display: flex;
         align-items: center;
-        gap: 4px;
-        font-size: 13px;
+        gap: 8px;
+        min-height: 28px;
+        font-size: 12px;
         color: var(--sub-text-color, #9ca3af);
-        background-color: transparent;
-        padding: 2px 4px;
-        border-radius: 4px;
+        background: linear-gradient(180deg, var(--bg-color), var(--tag-hover-bg, #f3f4f6));
+        border: 1px solid var(--border-color);
+        padding: 0 6px 0 8px;
+        border-radius: 10px;
         white-space: nowrap;
-        max-width: 150px;
+        max-width: 170px;
         cursor: pointer;
-        transition: all .2s;
+        transition: all .2s ease;
+
+        .info-item-leading {
+          width: 18px;
+          height: 18px;
+          border-radius: 6px;
+          background: rgba(99, 102, 241, .12);
+          color: var(--primary-color, #6366f1);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+
+          .material-symbols-rounded {
+            font-size: 14px;
+          }
+        }
 
         .material-symbols-rounded {
           font-size: 18px;
@@ -132,19 +202,24 @@
         .info-text {
           overflow: hidden;
           text-overflow: ellipsis;
-          font-weight: 400;
+          font-weight: 600;
+          color: var(--text-color);
         }
 
         .arrow-icon {
-          font-size: 16px;
+          font-size: 18px;
           color: var(--sub-text-color, #9ca3af);
+          background: var(--tag-hover-bg, #f3f4f6);
+          border-radius: 999px;
           transition: transform .2s;
         }
 
         &:hover, &.active {
-          color: #3b82f6;
+          color: var(--primary-color, #6366f1);
+          border-color: rgba(99, 102, 241, .3);
+          box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
           .arrow-icon {
-            color: #3b82f6;
+            color: var(--primary-color, #6366f1);
           }
         }
 
@@ -153,60 +228,6 @@
         }
       }
 
-      .tools-list-popup {
-        position: absolute;
-        bottom: calc(100% + 12px);
-        left: 12px;
-        background: var(--bg-color);
-        border: 1px solid var(--border-color);
-        border-radius: 12px;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
-        min-width: 200px;
-        max-height: 300px;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-        z-index: 100;
-        animation: slideUp .2s ease-out;
-
-        .popup-header {
-          padding: 10px 12px;
-          font-size: 12px;
-          font-weight: 600;
-          color: var(--sub-text-color, #9ca3af);
-          border-bottom: 1px solid var(--border-color);
-          background: var(--tag-bg, #f9fafb);
-        }
-
-        .popup-content {
-          padding: 6px;
-          overflow-y: auto;
-
-          .tool-item {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 8px 10px;
-            border-radius: 6px;
-            color: var(--text-color);
-            transition: all .2s;
-
-            .material-symbols-rounded {
-              font-size: 18px;
-              color: #3b82f6;
-            }
-
-            .tool-name {
-              font-size: 13px;
-            }
-
-            &:hover {
-              background-color: var(--tag-hover-bg, #f3f4f6);
-              color: var(--text-color);
-            }
-          }
-        }
-      }
     }
   }
 
@@ -267,6 +288,117 @@
   }
 }
 
+.sender-tools-cascader-popup {
+  .ant-cascader-menus {
+    background: var(--bg-color);
+    border: 1px solid var(--border-color);
+    border-radius: 14px;
+    overflow: hidden;
+    box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
+  }
+
+  .ant-cascader-menu {
+    min-width: 240px;
+    max-height: 320px;
+    padding: 8px;
+    background: var(--bg-color);
+    border-inline-end: 1px solid var(--border-color);
+  }
+
+  .ant-cascader-menu:first-child {
+    background: var(--sub-bg-color);
+  }
+
+  .ant-cascader-menu:last-child {
+    border-inline-end: none;
+  }
+
+  .ant-cascader-menu-item {
+    min-height: 40px;
+    padding: 8px 10px;
+    border-radius: 10px;
+    color: var(--text-color);
+    font-size: 13px;
+    transition: all .18s ease;
+  }
+
+  .ant-cascader-menu-item-content {
+    min-width: 0;
+  }
+
+  .ant-cascader-menu-item-expand-icon {
+    color: var(--sub-text-color);
+  }
+
+  .ant-cascader-menu-item:hover,
+  .ant-cascader-menu-item-active,
+  .ant-cascader-menu-item-expand {
+    background-color: var(--tag-hover-bg, #f3f4f6);
+  }
+
+  .sender-tool-group-option,
+  .sender-tool-option {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+    width: 100%;
+  }
+
+  .sender-tool-group-option__icon {
+    width: 20px;
+    height: 20px;
+    border-radius: 7px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(99, 102, 241, .12);
+    color: var(--primary-color, #6366f1);
+    font-size: 14px;
+    flex-shrink: 0;
+  }
+
+  .sender-tool-group-option__text {
+    flex: 1;
+    min-width: 0;
+    font-weight: 600;
+    color: var(--text-color);
+  }
+
+  .sender-tool-group-option__count {
+    flex-shrink: 0;
+    min-width: 22px;
+    padding: 1px 6px;
+    border-radius: 999px;
+    background: var(--bg-color);
+    border: 1px solid var(--border-color);
+    color: var(--sub-text-color);
+    font-size: 11px;
+    line-height: 1.4;
+    text-align: center;
+  }
+
+  .sender-tool-option__dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 999px;
+    background: var(--primary-color, #6366f1);
+    box-shadow: 0 0 0 4px rgba(99, 102, 241, .12);
+    flex-shrink: 0;
+    margin-left: 2px;
+  }
+
+  .sender-tool-option__text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 12px;
+    font-family: ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+      'Courier New', monospace;
+    letter-spacing: .01em;
+  }
+}
+
 .adapter-select,
 .model-select,
 .permission-mode-select {
@@ -315,7 +447,6 @@
 
 .model-select {
   min-width: 160px;
-
 }
 
 .permission-mode-select {
@@ -362,7 +493,6 @@
     min-height: 14px;
     line-height: 1;
   }
-
 }
 
 .adapter-option {