@vibe-forge/client 0.11.2 → 1.0.0

package/src/components/chat/ChatHistoryView.tsx

@@ -1,25 +1,43 @@
 import { App } from 'antd'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useLocation } from 'react-router-dom'
-
-import type { AskUserQuestionParams, ChatMessage, ChatMessageContent, Session } from '@vibe-forge/core'
-import type { SessionInfo } from '@vibe-forge/types'
-
+import useSWR from 'swr'
+
+import type {
+  AskUserQuestionParams,
+  ChatMessage,
+  ChatMessageContent,
+  Session,
+  SessionMessageQueueState,
+  SessionQueuedMessage,
+  SessionQueuedMessageMode
+} from '@vibe-forge/core'
+import type { ConfigResponse, SessionInfo } from '@vibe-forge/types'
+
+import { getConfig } from '#~/api'
+import {
+  DEFAULT_CHAT_SESSION_WORKSPACE_DRAFT,
+  getChatSessionWorkspaceDraftFromConfig
+} from '#~/hooks/chat/chat-session-workspace-draft'
 import type { ChatEffort } from '#~/hooks/chat/use-chat-effort'
 import type { ModelSelectMenuGroup, ModelSelectOption } from '#~/hooks/chat/use-chat-model-adapter-selection'
 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 { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
+import { getLoopedIndex } from '#~/hooks/use-roving-focus-list'
 import { CurrentTodoList } from './CurrentTodoList'
 import { NewSessionGuide } from './NewSessionGuide'
+import { QueuedMessagesCard } from './QueuedMessagesCard'
 import { MessageItem } from './messages/MessageItem'
 import { MessageStatusNotice } from './messages/MessageStatusNotice'
 import type { ChatHistoryStatusNotice } from './messages/build-chat-history-status-notices'
 import { buildMessageTurns } from './messages/message-turns'
 import { processMessages } from './messages/message-utils'
+import { SenderInteractionPanel } from './sender/@components/sender-interaction-panel/SenderInteractionPanel'
 import { Sender } from './sender/Sender'
+import { ChatStatusBar } from './status-bar/ChatStatusBar'
 import { ToolGroup } from './tools/core/ToolGroup'
 
 export function ChatHistoryView({
@@ -30,6 +48,7 @@ export function ChatHistoryView({
   targetToolUseId,
   sessionInfo,
   historyStatusNotices,
+  queuedMessages,
   onRetryConnection,
   interactionRequest,
   onInteractionResponse,
@@ -64,6 +83,7 @@ export function ChatHistoryView({
   targetToolUseId?: string
   sessionInfo: SessionInfo | null
   historyStatusNotices: ChatHistoryStatusNotice[]
+  queuedMessages: SessionMessageQueueState
   onRetryConnection: () => void
   interactionRequest: { id: string; payload: AskUserQuestionParams } | null
   onInteractionResponse: (id: string, data: string | string[]) => void
@@ -94,6 +114,16 @@ export function ChatHistoryView({
   const { t } = useTranslation()
   const { message } = App.useApp()
   const location = useLocation()
+  const { isCompactLayout, isTouchInteraction } = useResponsiveLayout()
+  const { data: configRes } = useSWR<ConfigResponse>('/api/config', getConfig)
+  const configWorkspaceDraft = useMemo(
+    () => getChatSessionWorkspaceDraftFromConfig(configRes),
+    [configRes]
+  )
+  const workspaceDraftDirtyRef = useRef(false)
+  const [workspaceDraft, setWorkspaceDraft] = useState(() => ({
+    ...DEFAULT_CHAT_SESSION_WORKSPACE_DRAFT
+  }))
   const historyRenderCount = messages.length + historyStatusNotices.length
   const { messagesEndRef, messagesContainerRef, messagesContentRef, showScrollBottom, scrollToBottom } = useChatScroll({
     contentVersion: historyRenderCount
@@ -102,6 +132,10 @@ export function ChatHistoryView({
     isCreating,
     send,
     sendContent,
+    enqueueContent,
+    removeQueuedContent,
+    moveQueuedContent,
+    reorderQueuedContent,
     editMessage,
     forkMessage,
     interrupt,
@@ -114,6 +148,7 @@ export function ChatHistoryView({
     effort,
     permissionMode,
     adapter: selectedAdapter,
+    workspaceDraft,
     onClearMessages
   })
   const initialScrollDoneRef = useRef(false)
@@ -121,6 +156,10 @@ export function ChatHistoryView({
   const handledTargetScrollKeyRef = useRef('')
   const [editingMessageId, setEditingMessageId] = useState<string | null>(null)
   const [expandedTurnIds, setExpandedTurnIds] = useState<Set<string>>(new Set())
+  const [queueMode, setQueueMode] = useState<SessionQueuedMessageMode>('steer')
+  const [queuedDraft, setQueuedDraft] = useState<{ content: ChatMessageContent[] } | null>(null)
+  const [activeInteractionOptionIndex, setActiveInteractionOptionIndex] = useState(0)
+  const interactionOptions = interactionRequest?.payload.options ?? []
   const buildUserMessage = (content: string | ChatMessageContent[]): ChatMessage => {
     const id = globalThis.crypto?.randomUUID
       ? globalThis.crypto.randomUUID()
@@ -133,37 +172,78 @@ export function ChatHistoryView({
     }
   }
 
-  const handleSend = async (text: string) => {
+  const handleSendContent = async (content: ChatMessageContent[], mode?: SessionQueuedMessageMode) => {
+    const resolvedMode = mode ?? queueMode
+
+    if (session?.id && session.status === 'running') {
+      const didQueue = await enqueueContent(resolvedMode, content)
+      if (didQueue && queuedDraft != null) {
+        setQueuedDraft(null)
+        setQueueMode('steer')
+      }
+      return didQueue
+    }
+
     if (!session?.id) {
-      const optimisticMessage = buildUserMessage(text)
+      const optimisticMessage = buildUserMessage(content)
       setMessages((prev) => [...prev, optimisticMessage])
-      const didSend = await send(text)
+      const didSend = await sendContent(content, mode)
       if (!didSend) {
         setMessages((prev) => prev.filter((message) => message.id !== optimisticMessage.id))
       }
-      return
+      if (didSend && queuedDraft != null) {
+        setQueuedDraft(null)
+        setQueueMode('steer')
+      }
+      return didSend
     }
 
-    const didSend = await send(text)
+    const didSend = await sendContent(content, mode)
     if (didSend) {
-      setMessages((prev) => [...prev, buildUserMessage(text)])
+      setMessages((prev) => [...prev, buildUserMessage(content)])
+      if (queuedDraft != null) {
+        setQueuedDraft(null)
+        setQueueMode('steer')
+      }
     }
+    return didSend
   }
-  const handleSendContent = async (content: ChatMessageContent[]) => {
+
+  const handleSend = async (text: string, mode?: SessionQueuedMessageMode) => {
+    const resolvedMode = mode ?? queueMode
+
+    if (session?.id && session.status === 'running') {
+      const didQueue = await enqueueContent(resolvedMode, [{ type: 'text', text: text.trim() }])
+      if (didQueue && queuedDraft != null) {
+        setQueuedDraft(null)
+        setQueueMode('steer')
+      }
+      return didQueue
+    }
+
     if (!session?.id) {
-      const optimisticMessage = buildUserMessage(content)
+      const optimisticMessage = buildUserMessage(text)
       setMessages((prev) => [...prev, optimisticMessage])
-      const didSend = await sendContent(content)
+      const didSend = await send(text, mode)
       if (!didSend) {
         setMessages((prev) => prev.filter((message) => message.id !== optimisticMessage.id))
       }
-      return
+      if (didSend && queuedDraft != null) {
+        setQueuedDraft(null)
+        setQueueMode('steer')
+      }
+      return didSend
     }
 
-    const didSend = await sendContent(content)
+    const didSend = await send(text, mode)
     if (didSend) {
-      setMessages((prev) => [...prev, buildUserMessage(content)])
+      setMessages((prev) => [...prev, buildUserMessage(text)])
+      if (queuedDraft != null) {
+        setQueuedDraft(null)
+        setQueueMode('steer')
+      }
     }
+    return didSend
   }
   useEffect(() => {
     initialScrollDoneRef.current = false
@@ -171,7 +251,65 @@ export function ChatHistoryView({
     handledTargetScrollKeyRef.current = ''
     setEditingMessageId(null)
     setExpandedTurnIds(new Set())
+    setQueuedDraft(null)
+    setQueueMode('steer')
+  }, [session?.id])
+  useEffect(() => {
+    if (session?.id != null) {
+      return
+    }
+
+    workspaceDraftDirtyRef.current = false
+    setWorkspaceDraft({
+      ...configWorkspaceDraft
+    })
   }, [session?.id])
+  useEffect(() => {
+    if (session?.id != null) {
+      return
+    }
+
+    if (workspaceDraftDirtyRef.current) {
+      return
+    }
+
+    setWorkspaceDraft({
+      ...configWorkspaceDraft
+    })
+  }, [configWorkspaceDraft, session?.id])
+  useEffect(() => {
+    setActiveInteractionOptionIndex(0)
+  }, [interactionRequest?.id])
+  useEffect(() => {
+    if (interactionOptions.length === 0) {
+      setActiveInteractionOptionIndex(0)
+      return
+    }
+
+    setActiveInteractionOptionIndex((current) => Math.min(current, interactionOptions.length - 1))
+  }, [interactionOptions.length])
+
+  const handleMoveInteractionOption = useCallback((delta: number) => {
+    if (interactionOptions.length === 0) {
+      return
+    }
+
+    setActiveInteractionOptionIndex((current) => getLoopedIndex(current, delta, interactionOptions.length))
+  }, [interactionOptions.length])
+
+  const handleSubmitActiveInteractionOption = useCallback(() => {
+    if (interactionRequest == null) {
+      return
+    }
+
+    const option = interactionOptions[activeInteractionOptionIndex] ?? interactionOptions[0]
+    if (option == null) {
+      return
+    }
+
+    onInteractionResponse(interactionRequest.id, option.value ?? option.label)
+  }, [activeInteractionOptionIndex, interactionOptions, interactionRequest, onInteractionResponse])
+
   useEffect(() => {
     if (!initialScrollDoneRef.current && isReady && location.hash === '') {
       scrollToBottom('auto')
@@ -200,6 +338,7 @@ export function ChatHistoryView({
     }
   }
   const isInlineEditing = editingMessageId != null
+  const shouldShowNewSessionGuide = !session?.id && messages.length === 0 && historyStatusNotices.length === 0
   const renderItems = useMemo(() => processMessages(messages), [messages])
   const hashAnchorId = useMemo(() => decodeURIComponent(location.hash.replace(/^#/, '')), [location.hash])
   const targetAnchorId = useMemo(() => {
@@ -236,6 +375,38 @@ export function ChatHistoryView({
     }
     return null
   }, [renderItems])
+  const handleEditQueuedMessage = async (item: SessionQueuedMessage) => {
+    const removed = await removeQueuedContent(item.id)
+    if (!removed) {
+      return
+    }
+    setQueuedDraft({ content: item.content })
+    setQueueMode('steer')
+  }
+  const handleMoveQueuedMessage = async (item: SessionQueuedMessage, targetMode: SessionQueuedMessageMode) => {
+    await moveQueuedContent(item.id, targetMode)
+  }
+  const isPermissionInteraction = interactionRequest?.payload.kind === 'permission'
+  const interactionPanel = !isInlineEditing && interactionRequest != null
+    ? (
+      <SenderInteractionPanel
+        interactionRequest={interactionRequest}
+        activeOptionIndex={activeInteractionOptionIndex}
+        permissionContext={interactionRequest.payload.kind === 'permission'
+          ? interactionRequest.payload.permissionContext
+          : undefined}
+        deniedTools={interactionRequest.payload.kind === 'permission'
+          ? (interactionRequest.payload.permissionContext?.deniedTools ?? [])
+          : []}
+        reasons={interactionRequest.payload.kind === 'permission'
+          ? (interactionRequest.payload.permissionContext?.reasons ?? [])
+          : []}
+        onActiveOptionIndexChange={setActiveInteractionOptionIndex}
+        onMoveActiveOption={handleMoveInteractionOption}
+        onInteractionResponse={onInteractionResponse}
+      />
+    )
+    : null
 
   useEffect(() => {
     const hash = hashAnchorId
@@ -403,6 +574,8 @@ export function ChatHistoryView({
           originalMessage={item.originalMessage}
           sessionInfo={sessionInfo}
           isEditing={editingMessageId === item.originalMessage.id}
+          isCompactLayout={isCompactLayout}
+          isTouchInteraction={isTouchInteraction}
           isSessionBusy={isCreating || session?.status === 'running' ||
             session?.status === 'waiting_input'}
           showAssistantActions={item.anchorId === lastAssistantActionAnchorId}
@@ -483,47 +656,101 @@ export function ChatHistoryView({
         )}
       </div>
 
-      {!session?.id && messages.length === 0 && historyStatusNotices.length === 0 && (
+      {shouldShowNewSessionGuide && !isCompactLayout && (
         <div className='new-session-guide-wrapper'>
           <NewSessionGuide />
         </div>
       )}
 
-      <CurrentTodoList messages={messages} />
-      {!isInlineEditing && (
-        <div className='sender-container'>
-          <Sender
-            onSend={handleSend}
-            onSendContent={handleSendContent}
-            adapterLocked={session?.id != null}
-            sessionStatus={isCreating ? 'running' : session?.status}
-            onInterrupt={interrupt}
-            onClear={clearMessages}
-            sessionInfo={sessionInfo}
-            interactionRequest={interactionRequest}
-            onInteractionResponse={onInteractionResponse}
-            placeholder={placeholder}
-            modelMenuGroups={modelMenuGroups}
-            modelSearchOptions={modelSearchOptions}
-            recommendedModelOptions={recommendedModelOptions}
-            servicePreviewModelOptions={servicePreviewModelOptions}
-            onToggleRecommendedModel={onToggleRecommendedModel}
-            updatingRecommendedModelValue={updatingRecommendedModelValue}
-            selectedModel={selectedModel}
-            onModelChange={onModelChange}
-            effort={effort}
-            effortOptions={effortOptions}
-            onEffortChange={onEffortChange}
-            permissionMode={permissionMode}
-            permissionModeOptions={permissionModeOptions}
-            onPermissionModeChange={onPermissionModeChange}
-            selectedAdapter={selectedAdapter}
-            adapterOptions={adapterOptions}
-            onAdapterChange={onAdapterChange}
-            modelUnavailable={modelUnavailable}
-          />
+      {shouldShowNewSessionGuide && isCompactLayout && (
+        <div className='new-session-guide-wrapper is-compact-layout'>
+          <NewSessionGuide />
         </div>
       )}
+
+      <div className='chat-composer-stack'>
+        <div className='chat-composer-stack__inner'>
+          {isPermissionInteraction && interactionPanel}
+          <CurrentTodoList messages={messages} />
+          {!isInlineEditing && (
+            <QueuedMessagesCard
+              mode='next'
+              items={queuedMessages.next}
+              onMove={(item, targetMode) => void handleMoveQueuedMessage(item, targetMode)}
+              onDelete={(item) => void removeQueuedContent(item.id)}
+              onEdit={(item) => void handleEditQueuedMessage(item)}
+              onReorder={(ids) => reorderQueuedContent('next', ids)}
+            />
+          )}
+          {!isInlineEditing && (
+            <QueuedMessagesCard
+              mode='steer'
+              items={queuedMessages.steer}
+              onMove={(item, targetMode) => void handleMoveQueuedMessage(item, targetMode)}
+              onDelete={(item) => void removeQueuedContent(item.id)}
+              onEdit={(item) => void handleEditQueuedMessage(item)}
+              onReorder={(ids) => reorderQueuedContent('steer', ids)}
+            />
+          )}
+          {!isPermissionInteraction && interactionPanel}
+          {!isInlineEditing && (
+            <div className='sender-container'>
+              <Sender
+                onSend={handleSend}
+                onSendContent={handleSendContent}
+                adapterLocked={session?.id != null}
+                sessionId={session?.id}
+                sessionStatus={isCreating ? 'running' : session?.status}
+                onInterrupt={interrupt}
+                onClear={clearMessages}
+                sessionInfo={sessionInfo}
+                interactionRequest={interactionRequest}
+                onInteractionResponse={onInteractionResponse}
+                interactionOptionNavigation={interactionRequest != null && interactionOptions.length > 0
+                  ? {
+                    optionCount: interactionOptions.length,
+                    activeIndex: activeInteractionOptionIndex,
+                    onMove: handleMoveInteractionOption,
+                    onSubmit: handleSubmitActiveInteractionOption
+                  }
+                  : undefined}
+                initialContent={queuedDraft?.content}
+                placeholder={placeholder}
+                submitLabel={queuedDraft != null ? t('chat.queue.requeueMessage') : undefined}
+                modelMenuGroups={modelMenuGroups}
+                modelSearchOptions={modelSearchOptions}
+                recommendedModelOptions={recommendedModelOptions}
+                servicePreviewModelOptions={servicePreviewModelOptions}
+                onToggleRecommendedModel={onToggleRecommendedModel}
+                updatingRecommendedModelValue={updatingRecommendedModelValue}
+                selectedModel={selectedModel}
+                onModelChange={onModelChange}
+                effort={effort}
+                effortOptions={effortOptions}
+                onEffortChange={onEffortChange}
+                permissionMode={permissionMode}
+                permissionModeOptions={permissionModeOptions}
+                onPermissionModeChange={onPermissionModeChange}
+                selectedAdapter={selectedAdapter}
+                adapterOptions={adapterOptions}
+                onAdapterChange={onAdapterChange}
+                modelUnavailable={modelUnavailable}
+                queueMode={queueMode}
+                onQueueModeChange={setQueueMode}
+              />
+              <ChatStatusBar
+                draftWorkspace={workspaceDraft}
+                isCreating={isCreating}
+                sessionId={session?.id}
+                onDraftWorkspaceChange={(nextDraft) => {
+                  workspaceDraftDirtyRef.current = true
+                  setWorkspaceDraft(nextDraft)
+                }}
+              />
+            </div>
+          )}
+        </div>
+      </div>
     </>
   )
 }

package/src/components/chat/ChatTimelineView.scss

@@ -5,13 +5,26 @@
   min-height: 0;
   padding: 6px 12px 12px;
   overflow: auto;
+  min-width: 0;
+  overscroll-behavior: contain;
+}
+
+.chat-timeline-view__tabs {
+  display: none;
+}
+
+.chat-timeline-view__panel {
+  min-width: 0;
+  min-height: 0;
 }
 
 .session-timeline-section {
   display: flex;
   flex-direction: column;
   min-height: 0;
-  overflow: scroll;
+  min-width: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
 }
 
 .session-timeline-section--fixed {
@@ -31,11 +44,13 @@
   display: flex;
   flex-direction: column;
   min-height: 0;
+  min-width: 0;
   overflow: hidden;
 }
 
 .session-timeline-column--graph {
   overflow: auto;
+  overscroll-behavior: contain;
 }
 
 .session-timeline-column--events {
@@ -52,3 +67,81 @@
 .session-timeline-column > .session-timeline-event-table {
   flex: 1 1 auto;
 }
+
+@media (max-width: 960px) {
+  .chat-timeline-view {
+    padding: 6px 8px 8px;
+    gap: 12px;
+  }
+
+  .chat-timeline-view--compact {
+    gap: 8px;
+  }
+
+  .chat-timeline-view__tabs {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    width: 100%;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    overflow: hidden;
+    background: var(--bg-color);
+  }
+
+  .chat-timeline-view__tab {
+    min-width: 0;
+    min-height: 34px;
+    padding: 7px 6px;
+    border: 0;
+    border-right: 1px solid var(--border-color);
+    background: transparent;
+    color: var(--sub-text-color);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1.2;
+    text-align: center;
+
+    &:last-child {
+      border-right: 0;
+    }
+
+    &.is-active {
+      background: var(--nav-active-bg, #eff6ff);
+      color: var(--nav-active-text, #2563eb);
+    }
+  }
+
+  .chat-timeline-view__panel {
+    display: flex;
+    flex: 1 1 auto;
+  }
+
+  .chat-timeline-view__panel--diagram {
+    min-height: 320px;
+  }
+
+  .chat-timeline-view__panel > .session-timeline-panel,
+  .chat-timeline-view__panel > .session-timeline-event-table {
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .session-timeline-section {
+    overflow: visible;
+  }
+
+  .session-timeline-section--fixed {
+    flex-basis: auto;
+  }
+
+  .session-timeline-section--row {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .session-timeline-column--graph,
+  .session-timeline-column--events {
+    flex: 1 1 auto;
+  }
+}

package/src/components/chat/ChatTimelineView.tsx

@@ -1,9 +1,11 @@
 import './ChatTimelineView.scss'
 
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 
 import type { ChatMessage } from '@vibe-forge/core'
 
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
 import { SessionTimelinePanel } from './session-timeline-panel'
 import { SessionTimelineEventList } from './session-timeline-panel/EventList'
 import type { Task } from './session-timeline-panel/types'
@@ -134,6 +136,46 @@ export function ChatTimelineView({
 }: {
   messages: ChatMessage[]
 }) {
+  const { t } = useTranslation()
+  const { isCompactLayout } = useResponsiveLayout()
+  const [compactView, setCompactView] = React.useState<'events' | 'gantt' | 'git'>('events')
+
+  if (isCompactLayout) {
+    const compactViews = [
+      { key: 'events' as const, label: t('chat.timeline.eventListTitle') },
+      { key: 'gantt' as const, label: t('chat.timeline.viewGantt') },
+      { key: 'git' as const, label: t('chat.timeline.viewGit') }
+    ]
+    return (
+      <div className='chat-timeline-view chat-timeline-view--compact'>
+        <div className='chat-timeline-view__tabs' role='tablist' aria-label={t('chat.timelineTiming')}>
+          {compactViews.map((item) => (
+            <button
+              key={item.key}
+              type='button'
+              role='tab'
+              aria-selected={compactView === item.key}
+              className={`chat-timeline-view__tab ${compactView === item.key ? 'is-active' : ''}`}
+              onClick={() => setCompactView(item.key)}
+            >
+              {item.label}
+            </button>
+          ))}
+        </div>
+
+        <section
+          className={`chat-timeline-view__panel ${
+            compactView === 'events' ? 'chat-timeline-view__panel--events' : 'chat-timeline-view__panel--diagram'
+          }`}
+        >
+          {compactView === 'events' && <SessionTimelineEventList task={mockTimelineTask} />}
+          {compactView === 'gantt' && <SessionTimelinePanel task={mockTimelineTask} viewMode='gantt' />}
+          {compactView === 'git' && <SessionTimelinePanel task={mockTimelineTask} viewMode='git' />}
+        </section>
+      </div>
+    )
+  }
+
   return (
     <div className='chat-timeline-view'>
       <section className='session-timeline-section session-timeline-section--fixed'>