@vibe-forge/client 0.11.3 → 1.0.0

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>
+  )
+}

package/src/components/chat/terminal/ChatTerminalView.tsx

@@ -5,6 +5,7 @@ import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { DockPanel } from '#~/components/dock-panel/DockPanel'
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
 import { useTerminalInstance } from './@hooks/use-terminal-instance'
 import { useTerminalSession } from './@hooks/use-terminal-session'
 
@@ -21,6 +22,7 @@ export function ChatTerminalView({
   sessionId: string
 }) {
   const { t } = useTranslation()
+  const { isCompactLayout, isTouchInteraction } = useResponsiveLayout()
   const inputHandlerRef = React.useRef<(data: string) => void>(() => undefined)
   const resizeHandlerRef = React.useRef<(cols: number, rows: number) => void>(() => undefined)
   const [shellLabel, setShellLabel] = useState('zsh')
@@ -77,11 +79,15 @@ export function ChatTerminalView({
       code: lastExit.exitCode ?? 'null',
       signal: lastExit.signal ?? 'null'
     })
+  const isCompactView = isCompactLayout || isTouchInteraction
 
   return (
     <DockPanel
+      allowResize={!isCompactView}
       className='chat-terminal-view'
+      defaultHeight={isCompactView ? 208 : undefined}
       isOpen={isOpen}
+      maxHeight={isCompactView ? 320 : 520}
       title={t('chat.viewTerminal')}
       meta={shellLabel}
       closeLabel={t('common.close')}

package/src/components/chat/tools/core/ToolCallBox.scss

@@ -210,6 +210,7 @@
     padding: 0;
     overflow: hidden;
     background-color: var(--bg-color);
+    min-width: 0;
 
     .tool-call-box.result & {
       background-color: var(--bg-color);
@@ -218,6 +219,7 @@
 
     .tool-content {
       padding: 0;
+      min-width: 0;
     }
 
     .code-block-wrapper {
@@ -230,22 +232,26 @@
       flex-direction: column;
       gap: 8px;
       padding: 2px 0;
+      min-width: 0;
     }
 
     .tool-result-text {
       font-size: 13px;
       color: var(--text-color);
+      min-width: 0;
     }
 
     .tool-result-text-content {
       white-space: pre-wrap;
       line-height: 1.6;
+      overflow-wrap: anywhere;
     }
 
     .tool-result-image-wrapper {
       display: flex;
       flex-direction: column;
       gap: 6px;
+      min-width: 0;
     }
 
     .tool-result-image {
@@ -679,3 +685,16 @@
     }
   }
 }
+
+@media (max-width: 960px) {
+  .tool-group {
+    .tool-call-header,
+    .tool-result-header {
+      min-width: 0;
+    }
+
+    .tool-call-box--inline .tool-call-body-shell.expanded {
+      padding-left: 12px;
+    }
+  }
+}

package/src/components/chat/tools/core/ToolGroup.scss

@@ -114,13 +114,20 @@
     .msg-footer {
       display: flex;
       align-items: center;
+      flex-wrap: wrap;
       gap: 8px;
+      min-width: 0;
       font-size: 11px;
       color: var(--sub-text-color, #9ca3af);
 
+      > * {
+        min-width: 0;
+      }
+
       .timestamp {
         user-select: none;
         cursor: pointer;
+        overflow-wrap: anywhere;
       }
     }
   }
@@ -130,6 +137,31 @@
   }
 }
 
+@media (max-width: 960px) {
+  .tool-group-container {
+    scroll-margin-top: 64px;
+
+    .tool-group-footer-wrapper {
+      margin-top: 2px;
+
+      .msg-footer {
+        gap: 6px;
+        font-size: 10px;
+      }
+    }
+
+    &.is-anchor-target {
+      border-radius: 8px;
+    }
+  }
+}
+
+@media (hover: none), (pointer: coarse) {
+  .tool-group-container .tool-group-footer-wrapper {
+    opacity: 1;
+  }
+}
+
 html.dark .tool-group-container .tool-group-wrapper.card-style {
   .tool-group-header {
     &:hover {

package/src/components/chat/tools/task/components/TaskToolCard.scss

@@ -59,6 +59,8 @@
   }
 
   &__main {
+    min-width: 0;
+
     > .code-block-wrapper {
       border-radius: 8px;
       overflow: hidden;
@@ -70,6 +72,8 @@
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 4px;
+    gap: 8px;
+    min-width: 0;
   }
 
   &__title {
@@ -77,7 +81,8 @@
     font-weight: 600;
     color: var(--text-color);
     flex: 1;
-    margin-right: 8px;
+    min-width: 0;
+    overflow-wrap: anywhere;
   }
 
   &__session-id {
@@ -86,6 +91,10 @@
     opacity: .6;
     font-family: monospace;
     user-select: none;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
     white-space: nowrap;
   }
 
@@ -95,6 +104,7 @@
     cursor: pointer;
     padding: 0;
     text-align: right;
+    min-width: 0;
 
     &:hover {
       color: var(--text-color);
@@ -125,3 +135,51 @@
     background: var(--bg-color);
   }
 }
+
+@media (max-width: 960px) {
+  .task-tool-card {
+    grid-template-columns: 18px minmax(0, 1fr);
+    gap: 8px;
+    padding: 8px;
+
+    &__left {
+      gap: 4px;
+    }
+
+    &__status-icon,
+    &__execution-icon {
+      font-size: 16px;
+    }
+
+    &__header {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 4px;
+    }
+
+    &__title {
+      font-size: 12px;
+      line-height: 1.4;
+    }
+
+    &__session-link {
+      align-self: flex-start;
+      text-align: left;
+    }
+
+    &__session-id {
+      width: 100%;
+      font-size: 10px;
+    }
+
+    &__content {
+      font-size: 11px;
+      margin-bottom: 4px;
+    }
+
+    &__meta {
+      gap: 3px;
+      margin: 2px 0 4px;
+    }
+  }
+}

package/src/components/config/ConfigEditors.scss

@@ -8,12 +8,16 @@
   display: flex;
   align-items: center;
   gap: 8px;
+  padding: var(--subpage-tertiary-padding);
+  border: var(--subpage-tertiary-border);
+  border-radius: var(--subpage-tertiary-radius);
+  background: var(--subpage-tertiary-bg);
 }
 
 .config-view__complex-editor {
-  border-radius: 10px;
-  border: 1px solid var(--code-border);
-  background: var(--code-bg);
+  border-radius: var(--subpage-tertiary-radius);
+  border: var(--subpage-tertiary-border);
+  background: var(--subpage-tertiary-bg);
   color: var(--text-color);
   font-family:
     ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
@@ -26,13 +30,14 @@
 }
 
 .config-view__icon-button {
-  width: 32px;
-  height: 32px;
-  min-width: 32px;
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
   padding: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  border-radius: 6px;
 }
 
 .config-view__icon-button--compact {
@@ -44,6 +49,7 @@
 .config-view__icon-button--full {
   width: 100%;
   min-width: 100%;
+  height: 30px;
 }
 
 .config-view__array-add {
@@ -63,3 +69,11 @@
 .config-view__array-add-inputs .ant-input-affix-wrapper {
   flex: 1;
 }
+
+.config-view__array-item .ant-input,
+.config-view__array-item .ant-input-affix-wrapper,
+.config-view__array-add-inputs .ant-input,
+.config-view__array-add-inputs .ant-input-affix-wrapper {
+  border-radius: 6px !important;
+  min-height: 30px;
+}

package/src/components/config/ConfigFieldRow.scss

@@ -3,31 +3,28 @@
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  padding: 12px 14px;
-  border-radius: 0;
-  border: 1px solid var(--border-color);
-  border-bottom: none;
-  background-color: var(--sub-bg-color);
+  padding: var(--subpage-tertiary-padding);
+  border-radius: var(--subpage-tertiary-radius);
+  border: var(--subpage-tertiary-border);
+  background-color: var(--subpage-tertiary-bg);
+  transition: border-color .2s ease, background-color .2s ease;
   &.config-view__collapse-group {
     padding: 0;
     gap: 0;
+    overflow: hidden;
     > .ant-collapse-item {
       width: 100%;
-      border-bottom: 1px solid var(--border-color);
+      border-bottom: none;
       .ant-collapse-header-text {
         flex-grow: 1;
       }
     }
   }
 }
-.config-view__field-row:first-child {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-}
-.config-view__field-row:last-child {
-  border-bottom-left-radius: 8px;
-  border-bottom-right-radius: 8px;
-  border-bottom: 1px solid var(--border-color);
+
+.config-view__field-row:hover {
+  border-color: var(--subpage-tertiary-hover-border);
+  background-color: var(--subpage-tertiary-hover-bg);
 }
 
 .config-view__field-row--stacked {
@@ -60,8 +57,9 @@
 }
 
 .config-view__field-title {
-  font-size: 13px;
-  font-weight: 600;
+  font-size: 12px;
+  line-height: 1.35;
+  font-weight: 500;
   color: var(--text-color);
   white-space: nowrap;
   overflow: hidden;
@@ -69,7 +67,7 @@
 }
 
 .config-view__field-desc {
-  font-size: 12px;
+  font-size: 11px;
   color: var(--sub-text-color);
   white-space: nowrap;
   overflow: hidden;
@@ -87,6 +85,20 @@
   width: 100%;
 }
 
+.config-view__field-control .ant-btn,
+.config-view__field-control .ant-input,
+.config-view__field-control .ant-input-affix-wrapper,
+.config-view__field-control .ant-input-number,
+.config-view__field-control .ant-select-selector {
+  border-radius: 6px !important;
+}
+
+.config-view__field-control .ant-input,
+.config-view__field-control .ant-input-affix-wrapper,
+.config-view__field-control .ant-select-selector {
+  min-height: 30px;
+}
+
 .config-view__field-control .ant-input-textarea {
   width: 100%;
 }
@@ -95,3 +107,31 @@
   font-size: 16px;
   color: var(--sub-text-color);
 }
+
+@media (max-width: 960px) {
+  .config-view__field-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .config-view__field-meta {
+    align-items: flex-start;
+  }
+
+  .config-view__field-title,
+  .config-view__field-desc {
+    white-space: normal;
+  }
+
+  .config-view__field-control {
+    min-width: 0;
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .config-view__field-control > * {
+    flex: 1 1 auto;
+    width: 100%;
+  }
+}

package/src/components/config/ConfigSectionForm.scss

@@ -1,12 +1,13 @@
 .config-view__field-stack {
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: 16px;
 }
 
 .config-view__field-list {
   display: flex;
   flex-direction: column;
+  gap: 8px;
 }
 
 .config-view__subsection {
@@ -26,6 +27,7 @@
 .config-view__subsection-body {
   display: flex;
   flex-direction: column;
+  gap: 8px;
 }
 
 .config-view__slider {
@@ -35,11 +37,15 @@
 .config-view__collapse-group {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 0;
 }
 
 .config-view__collapse-group .ant-collapse-header {
-  padding: 0;
+  padding: 12px 14px !important;
+}
+
+.config-view__collapse-group .ant-collapse-content-box {
+  padding: 0 12px 12px !important;
 }
 
 .config-view__collapse-header {
@@ -74,7 +80,7 @@
 
 .config-view__multiline-input {
   width: 100%;
-  border-radius: 10px;
+  border-radius: 6px;
 }
 
 .config-view__option {