@vibe-forge/client 0.11.2 → 1.0.0

package/src/components/chat/sender/Sender.tsx

@@ -1,10 +1,8 @@
 import './Sender.scss'
 
-import { ThinkingStatus } from '#~/components/chat/ThinkingStatus'
 import { useSenderController } from '#~/components/chat/sender/@hooks/use-sender-controller'
 
 import { SenderBody } from './@components/sender-body/SenderBody'
-import { SenderInteractionPanel } from './@components/sender-interaction-panel/SenderInteractionPanel'
 import type { SenderProps } from './@types/sender-props'
 
 export function Sender(props: SenderProps) {
@@ -18,16 +16,6 @@ export function Sender(props: SenderProps) {
         controller.isInlineEdit ? 'chat-input-wrapper--inline-edit' : ''
       ].filter(Boolean).join(' ')}
     >
-      {controller.isThinking && <ThinkingStatus />}
-      {!controller.isInlineEdit && controller.interactionRequest != null && (
-        <SenderInteractionPanel
-          interactionRequest={controller.interactionRequest}
-          permissionContext={controller.permissionContext}
-          deniedTools={controller.deniedTools}
-          reasons={controller.reasons}
-          onInteractionResponse={controller.interactionResponse}
-        />
-      )}
       {!controller.hideSender && (
         <SenderBody
           isInlineEdit={controller.isInlineEdit}
@@ -40,6 +28,7 @@ export function Sender(props: SenderProps) {
           onRemovePendingFile={(path) =>
             controller.composer.setPendingFiles(prev => prev.filter(file => file.path !== path))}
           editorRef={controller.editorRef}
+          sessionId={props.sessionId}
           sessionInfo={props.sessionInfo}
           placeholder={controller.placeholder}
           input={controller.composer.input}
@@ -47,6 +36,8 @@ export function Sender(props: SenderProps) {
           onCursorChange={controller.onCursorChange}
           onKeyDown={controller.handleKeyDown}
           onPaste={controller.attachments.handlePaste}
+          secondarySendShortcut={controller.secondarySendShortcut}
+          onSecondarySendShortcut={controller.onSecondarySendShortcut}
           resolveCompletionMatch={controller.completion.resolveCompletionMatch}
           resolveTokenDecorations={controller.completion.resolveTokenDecorations}
           toolbarState={controller.toolbar.toolbarState}

package/src/components/chat/session-timeline-panel/EventList.scss

@@ -12,12 +12,14 @@
   align-items: center;
   justify-content: space-between;
   gap: 12px;
+  min-width: 0;
 }
 
 .session-timeline-event-table__title {
   font-size: 13px;
   font-weight: 600;
   color: var(--text-color);
+  min-width: 0;
 }
 
 .session-timeline-event-table__search {
@@ -28,6 +30,7 @@
 .session-timeline-event-table__table {
   flex: 1 1 auto;
   min-height: 0;
+  min-width: 0;
 }
 
 .session-timeline-event-table__table .ant-table {
@@ -40,6 +43,12 @@
 
 .session-timeline-event-table__table .ant-table-body {
   overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+}
+
+.session-timeline-event-table__table .ant-table-pagination {
+  margin: 8px 0 0;
 }
 
 .session-timeline-event-table__time {
@@ -55,4 +64,83 @@
 
 .session-timeline-event-table__value {
   color: var(--sub-text-color);
+  overflow-wrap: anywhere;
+}
+
+.session-timeline-event-table__summary {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.session-timeline-event-table__detail-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.session-timeline-event-table__detail-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  min-width: 0;
+}
+
+.session-timeline-event-table__detail-key {
+  flex: 0 0 auto;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--sub-text-color);
+}
+
+.session-timeline-event-table__detail-text {
+  min-width: 0;
+  color: var(--sub-text-color);
+  font-size: 11px;
+  overflow-wrap: anywhere;
+}
+
+.session-timeline-event-table__cell-timing {
+  display: inline-flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+@media (max-width: 960px) {
+  .session-timeline-event-table {
+    gap: 10px;
+    padding-top: 8px;
+  }
+
+  .session-timeline-event-table__header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+  }
+
+  .session-timeline-event-table__search {
+    width: 100%;
+    max-width: none;
+  }
+
+  .session-timeline-event-table__table .ant-table-thead > tr > th,
+  .session-timeline-event-table__table .ant-table-tbody > tr > td {
+    padding: 8px;
+    font-size: 12px;
+  }
+
+  .session-timeline-event-table__table .ant-table-pagination {
+    row-gap: 6px;
+  }
+
+  .session-timeline-event-table__label {
+    line-height: 1.4;
+  }
+
+  .session-timeline-event-table__time {
+    font-size: 11px;
+    white-space: nowrap;
+  }
 }

package/src/components/chat/session-timeline-panel/EventList.tsx

@@ -5,6 +5,8 @@ import type { ColumnsType } from 'antd/es/table'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
+
 import type { Task, TimelineEvent } from './types'
 import { normalizeTime, parseTime } from './utils'
 
@@ -83,6 +85,7 @@ const collectTimelineEntries = (task: Task, labels: TimelineLabels) => {
 
 export function SessionTimelineEventList({ task }: { task: Task }) {
   const { t } = useTranslation()
+  const { isCompactLayout } = useResponsiveLayout()
   const [query, setQuery] = React.useState('')
   const containerRef = React.useRef<HTMLDivElement | null>(null)
   const [scrollY, setScrollY] = React.useState(240)
@@ -105,55 +108,104 @@ export function SessionTimelineEventList({ task }: { task: Task }) {
     })
   }, [items, query])
   const emptyValue = t('chat.timelineEmptyValue')
-  const columns: ColumnsType<TimelineListItem> = React.useMemo(() => [
-    {
-      title: t('chat.timelineEventName'),
-      key: 'label',
-      width: 180,
-      render: (_value, item) => (
-        <span
-          className='session-timeline-event-table__label'
-          style={{ paddingLeft: `${item.depth * 16}px` }}
-        >
-          {item.label}
-        </span>
-      )
-    },
-    {
-      title: t('chat.timelineInput'),
-      key: 'input',
-      width: 180,
-      render: (_value, item) => (
-        <span className='session-timeline-event-table__value'>
-          {item.input ?? emptyValue}
-        </span>
-      )
-    },
-    {
-      title: t('chat.timelineOutput'),
-      key: 'output',
-      width: 180,
-      render: (_value, item) => (
-        <span className='session-timeline-event-table__value'>
-          {item.output ?? emptyValue}
-        </span>
-      )
-    },
-    {
-      title: t('chat.timelineTiming'),
-      key: 'time',
-      width: 160,
-      render: (_value, item) => {
-        const startTime = normalizeTime(item.startTime)
-        const endTime = normalizeTime(item.endTime)
-        return (
-          <span className='session-timeline-event-table__time'>
-            {startTime === endTime ? startTime : `${startTime} → ${endTime}`}
+  const renderTiming = React.useCallback((item: TimelineListItem) => {
+    const startTime = normalizeTime(item.startTime)
+    const endTime = normalizeTime(item.endTime)
+    return (
+      <span className='session-timeline-event-table__time'>
+        {startTime === endTime ? startTime : `${startTime} → ${endTime}`}
+      </span>
+    )
+  }, [])
+  const columns: ColumnsType<TimelineListItem> = React.useMemo(() => {
+    if (isCompactLayout) {
+      return [
+        {
+          title: t('chat.timelineEventName'),
+          key: 'summary',
+          render: (_value, item) => {
+            const detailItems = [
+              { key: t('chat.timelineInput'), value: item.input },
+              { key: t('chat.timelineOutput'), value: item.output }
+            ].filter((detail) => detail.value != null && detail.value !== '')
+
+            return (
+              <div className='session-timeline-event-table__summary'>
+                <span
+                  className='session-timeline-event-table__label'
+                  style={{ paddingLeft: `${item.depth * 12}px` }}
+                >
+                  {item.label}
+                </span>
+                {detailItems.length > 0 && (
+                  <div className='session-timeline-event-table__detail-list'>
+                    {detailItems.map((detail) => (
+                      <span className='session-timeline-event-table__detail-item' key={detail.key}>
+                        <span className='session-timeline-event-table__detail-key'>{detail.key}</span>
+                        <span className='session-timeline-event-table__detail-text'>{detail.value}</span>
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )
+          }
+        },
+        {
+          title: t('chat.timelineTiming'),
+          key: 'time',
+          width: 120,
+          render: (_value, item) => (
+            <span className='session-timeline-event-table__cell-timing'>
+              {renderTiming(item)}
+            </span>
+          )
+        }
+      ]
+    }
+
+    return [
+      {
+        title: t('chat.timelineEventName'),
+        key: 'label',
+        width: 180,
+        render: (_value, item) => (
+          <span
+            className='session-timeline-event-table__label'
+            style={{ paddingLeft: `${item.depth * 16}px` }}
+          >
+            {item.label}
           </span>
         )
+      },
+      {
+        title: t('chat.timelineInput'),
+        key: 'input',
+        width: 180,
+        render: (_value, item) => (
+          <span className='session-timeline-event-table__value'>
+            {item.input ?? emptyValue}
+          </span>
+        )
+      },
+      {
+        title: t('chat.timelineOutput'),
+        key: 'output',
+        width: 180,
+        render: (_value, item) => (
+          <span className='session-timeline-event-table__value'>
+            {item.output ?? emptyValue}
+          </span>
+        )
+      },
+      {
+        title: t('chat.timelineTiming'),
+        key: 'time',
+        width: 160,
+        render: (_value, item) => renderTiming(item)
       }
-    }
-  ], [emptyValue, t])
+    ]
+  }, [emptyValue, isCompactLayout, renderTiming, t])
 
   React.useEffect(() => {
     const element = containerRef.current
@@ -201,7 +253,7 @@ export function SessionTimelineEventList({ task }: { task: Task }) {
         })}
         pagination={{
           pageSize: 20,
-          showSizeChanger: true,
+          showSizeChanger: !isCompactLayout,
           pageSizeOptions: ['10', '20', '50']
         }}
         scroll={{ y: scrollY }}

package/src/components/chat/session-timeline-panel/gantt.ts

@@ -1,4 +1,4 @@
-import type { Task, TimelineDiagram, TimelineEvent, TimelineInteraction } from './types'
+import type { Task, TimelineDiagram, TimelineDiagramBuildOptions, TimelineEvent, TimelineInteraction } from './types'
 import { normalizeTime, parseTime } from './utils'
 
 interface GanttItem {
@@ -25,7 +25,18 @@ function createGanttItemIdFactory() {
   return (prefix: string) => `${prefix}_${seq++}`
 }
 
-function collectGanttItems(task: Task, labels: GanttLabels) {
+const COMPACT_GANTT_LABEL_MAX_LENGTH = 18
+
+const truncateTaskLabel = (value: string, maxLength: number, suffix = '') => {
+  if (value.length + suffix.length <= maxLength) {
+    return `${value}${suffix}`
+  }
+
+  const availableLength = Math.max(4, maxLength - suffix.length - 1)
+  return `${value.slice(0, availableLength).trimEnd()}…${suffix}`
+}
+
+function collectGanttItems(task: Task, labels: GanttLabels, options?: TimelineDiagramBuildOptions) {
   const nextId = createGanttItemIdFactory()
   const nextSectionId = createGanttItemIdFactory()
   const interactions: TimelineInteraction[] = []
@@ -80,9 +91,10 @@ function collectGanttItems(task: Task, labels: GanttLabels) {
             const segments = collectTaskSegments(task)
             segments.forEach((segment, segmentIndex) => {
               const itemId = nextId('task')
-              const label = segments.length > 1
-                ? `${taskName} - ${segmentIndex}`
-                : taskName
+              const segmentSuffix = segments.length > 1 ? ` ·${segmentIndex + 1}` : ''
+              const label = options?.compact
+                ? truncateTaskLabel(taskName, COMPACT_GANTT_LABEL_MAX_LENGTH, segmentSuffix)
+                : `${taskName}${segmentSuffix}`
               const interaction: TimelineInteraction = {
                 id: itemId,
                 label: taskName,
@@ -168,8 +180,12 @@ function buildGanttLines(items: GanttItem[]) {
   return lines.join('\n')
 }
 
-export function buildGantt(task: Task, labels: GanttLabels): TimelineDiagram {
-  const { items, interactions } = collectGanttItems(task, labels)
+export function buildGantt(
+  task: Task,
+  labels: GanttLabels,
+  options?: TimelineDiagramBuildOptions
+): TimelineDiagram {
+  const { items, interactions } = collectGanttItems(task, labels, options)
   return {
     code: buildGanttLines(items),
     interactions

package/src/components/chat/session-timeline-panel/git-graph.ts

@@ -1,6 +1,7 @@
 import type {
   Task,
   TimelineDiagram,
+  TimelineDiagramBuildOptions,
   TimelineEvent,
   TimelineEventType,
   TimelineInteraction,
@@ -509,7 +510,11 @@ function applyTimelineOps(runtime: MermaidRuntime) {
   }
 }
 
-export function buildGitGraph(task: Task, labels: MermaidLabels): TimelineDiagram {
+export function buildGitGraph(
+  task: Task,
+  labels: MermaidLabels,
+  _options?: TimelineDiagramBuildOptions
+): TimelineDiagram {
   const runtime = createMermaidRuntime(labels)
   const mainBranch = 'main'
   runtime.checkout(mainBranch)

package/src/components/chat/session-timeline-panel/index.scss

@@ -1,12 +1,19 @@
 .session-timeline-panel {
   display: flex;
   align-content: center;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable both-edges;
 }
 
 .session-timeline-mermaid__svg {
+  display: block;
   height: 100%;
+  min-width: max-content;
   white-space: nowrap;
-  overflow-x: auto;
   user-select: none;
 }
 
@@ -26,3 +33,9 @@
   filter: drop-shadow(0 0 6px var(--primary-color));
   opacity: .9;
 }
+
+@media (max-width: 960px) {
+  .session-timeline-panel {
+    padding-bottom: 4px;
+  }
+}

package/src/components/chat/session-timeline-panel/index.tsx

@@ -3,6 +3,7 @@ import './index.scss'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
 import { buildGantt, buildGitGraph } from './mermaid'
 import type { Task } from './types'
 
@@ -13,6 +14,57 @@ export interface SessionTimelinePanelProps {
   style?: React.CSSProperties
 }
 
+const getCompactTimelineLabels = <
+  T extends {
+    allTasksDone: string
+    askUserQuestion: string
+    ganttMainSection: string
+    mainEnd: string
+    mainStart: string
+    receiveReply: string
+    resumeTask: string
+    startTasks: string
+    taskEnd: string
+    taskStart: string
+    userAnswer: string
+    userPrompt: string
+  },
+>(labels: T, isZh: boolean) => {
+  if (isZh) {
+    return {
+      ...labels,
+      mainStart: '启动',
+      mainEnd: '结束',
+      startTasks: '任务',
+      allTasksDone: '完成',
+      askUserQuestion: '提问',
+      resumeTask: '继续',
+      userPrompt: '提示',
+      userAnswer: '回答',
+      receiveReply: '回复',
+      taskStart: '开始',
+      taskEnd: '结束',
+      ganttMainSection: '主'
+    }
+  }
+
+  return {
+    ...labels,
+    mainStart: 'Start',
+    mainEnd: 'End',
+    startTasks: 'Tasks',
+    allTasksDone: 'Done',
+    askUserQuestion: 'Ask',
+    resumeTask: 'Resume',
+    userPrompt: 'Prompt',
+    userAnswer: 'Answer',
+    receiveReply: 'Reply',
+    taskStart: 'Start',
+    taskEnd: 'End',
+    ganttMainSection: 'Main'
+  }
+}
+
 export function SessionTimelinePanel(props: SessionTimelinePanelProps) {
   const {
     task,
@@ -21,7 +73,8 @@ export function SessionTimelinePanel(props: SessionTimelinePanelProps) {
     style
   } = props
   const containerRef = React.useRef<HTMLDivElement | null>(null)
-  const { t } = useTranslation()
+  const { t, i18n } = useTranslation()
+  const { isCompactLayout } = useResponsiveLayout()
   const labels = React.useMemo(() => ({
     mainStart: t('chat.timeline.mainStart'),
     mainEnd: t('chat.timeline.mainEnd'),
@@ -39,12 +92,19 @@ export function SessionTimelinePanel(props: SessionTimelinePanelProps) {
     ganttMainSection: t('chat.timeline.ganttMainSection'),
     ganttTasksSection: t('chat.timeline.ganttTasksSection')
   }), [t])
+  const diagramLabels = React.useMemo(
+    () =>
+      isCompactLayout
+        ? getCompactTimelineLabels(labels, i18n.resolvedLanguage?.startsWith('zh') === true)
+        : labels,
+    [i18n.resolvedLanguage, isCompactLayout, labels]
+  )
   const diagram = React.useMemo(() => {
     if (viewMode === 'gantt') {
-      return buildGantt(task, labels)
+      return buildGantt(task, diagramLabels, { compact: isCompactLayout })
     }
-    return buildGitGraph(task, labels)
-  }, [labels, task, viewMode])
+    return buildGitGraph(task, diagramLabels, { compact: isCompactLayout })
+  }, [diagramLabels, isCompactLayout, task, viewMode])
   const diagramId = React.useId()
   const safeDiagramId = React.useMemo(() => diagramId.replace(/\W/g, '_'), [diagramId])
   const interactionsRef = React.useRef(new Map<string, { label: string; payload: unknown }>())
@@ -60,15 +120,26 @@ export function SessionTimelinePanel(props: SessionTimelinePanelProps) {
         startOnLoad: false,
         securityLevel: 'loose',
         themeVariables: {
-          fontFamily
+          fontFamily,
+          fontSize: isCompactLayout ? '12px' : '14px'
         },
-        gitGraph: {},
+        gitGraph: isCompactLayout
+          ? {
+            rotateCommitLabel: false,
+            showBranches: false
+          }
+          : {},
         gantt: {
           topAxis: true,
           displayMode: 'compact',
           gridLineStartPadding: 0,
-          leftPadding: 16,
-          rightPadding: 16
+          leftPadding: isCompactLayout ? 8 : 16,
+          rightPadding: isCompactLayout ? 8 : 16,
+          topPadding: isCompactLayout ? 28 : 36,
+          barHeight: isCompactLayout ? 16 : 20,
+          barGap: isCompactLayout ? 3 : 4,
+          fontSize: isCompactLayout ? 10 : 11,
+          sectionFontSize: isCompactLayout ? 10 : 11
         }
       })
       if (cancelled) return
@@ -100,7 +171,7 @@ export function SessionTimelinePanel(props: SessionTimelinePanelProps) {
     return () => {
       cancelled = true
     }
-  }, [diagram.interactions, mermaidCode, safeDiagramId])
+  }, [diagram.interactions, isCompactLayout, mermaidCode, safeDiagramId])
 
   React.useEffect(() => {
     interactionsRef.current = new Map(
@@ -114,7 +185,12 @@ export function SessionTimelinePanel(props: SessionTimelinePanelProps) {
   return (
     <div
       ref={containerRef}
-      className={`session-timeline-panel session-timeline-panel--${viewMode}${className ? ` ${className}` : ''}`}
+      className={[
+        'session-timeline-panel',
+        `session-timeline-panel--${viewMode}`,
+        isCompactLayout ? 'session-timeline-panel--compact' : '',
+        className ?? ''
+      ].filter(Boolean).join(' ')}
       style={style}
     />
   )

package/src/components/chat/session-timeline-panel/types.ts

@@ -58,6 +58,10 @@ export interface TimelineInteraction {
   payload: TimelineInteractionPayload
 }
 
+export interface TimelineDiagramBuildOptions {
+  compact?: boolean
+}
+
 export interface TimelineDiagram {
   code: string
   interactions: TimelineInteraction[]

package/src/components/chat/status-bar/ChatStatusBar.scss

@@ -0,0 +1,27 @@
+.chat-status-bar {
+  min-width: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  background-color: transparent;
+}
+
+.chat-status-bar__content {
+  min-width: 0;
+  flex: 1;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  -webkit-overflow-scrolling: touch;
+  scroll-padding-inline: 12px;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.chat-status-bar--compact .chat-status-bar__content {
+  scroll-padding-inline: 8px;
+}

package/src/components/chat/status-bar/ChatStatusBar.tsx

@@ -0,0 +1,39 @@
+import './ChatStatusBar.scss'
+
+import type { ChatSessionWorkspaceDraft } from '#~/hooks/chat/chat-session-workspace-draft'
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
+
+import { ChatGitControls } from '../git-controls/ChatGitControls'
+import { DraftGitControls } from '../git-controls/DraftGitControls'
+
+export function ChatStatusBar({
+  draftWorkspace,
+  isCreating,
+  sessionId,
+  onDraftWorkspaceChange
+}: {
+  draftWorkspace: ChatSessionWorkspaceDraft
+  isCreating: boolean
+  sessionId?: string
+  onDraftWorkspaceChange: (nextDraft: ChatSessionWorkspaceDraft) => void
+}) {
+  const { isCompactLayout } = useResponsiveLayout()
+
+  return (
+    <div className={`chat-status-bar ${isCompactLayout ? 'chat-status-bar--compact' : ''}`}>
+      <div className='chat-status-bar__content'>
+        {sessionId != null && sessionId !== ''
+          ? <ChatGitControls compact={isCompactLayout} placement='topLeft' sessionId={sessionId} />
+          : (
+            <DraftGitControls
+              compact={isCompactLayout}
+              disabled={isCreating}
+              draft={draftWorkspace}
+              placement='topLeft'
+              onChange={onDraftWorkspaceChange}
+            />
+          )}
+      </div>
+    </div>
+  )
+}