@vibe-forge/client 0.11.3 → 2.0.0

package/src/components/chat/sender/@components/sender-toolbar/SenderSelectShared.scss

@@ -116,3 +116,24 @@
 .adapter-select-tooltip-target--locked {
   cursor: help;
 }
+
+@media (max-width: 960px) {
+  .sender-select-arrow {
+    font-size: 16px;
+  }
+
+  .model-select,
+  .effort-select,
+  .adapter-select {
+    font-size: 11px;
+
+    .ant-select-selector {
+      padding: 0 0 0 6px !important;
+    }
+
+    .ant-select-selection-item,
+    .ant-select-selection-placeholder {
+      font-size: 11px !important;
+    }
+  }
+}

package/src/components/chat/sender/@components/sender-toolbar/SenderToolbar.scss

@@ -15,6 +15,7 @@
   align-items: center;
   gap: 12px;
   margin: 4px -6px -6px;
+  min-width: 0;
 
   .toolbar-left {
     display: flex;
@@ -29,6 +30,7 @@
     align-items: center;
     gap: 4px;
     flex-shrink: 0;
+    min-width: 0;
   }
 
   .toolbar-right--inline-edit {
@@ -92,8 +94,69 @@
 
 @media (max-width: 960px) {
   .chat-input-toolbar {
+    --sender-control-height: 24px;
+
+    gap: 6px;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin-top: 6px;
+    row-gap: 6px;
+
+    .toolbar-left {
+      gap: 6px;
+      flex-wrap: wrap;
+      width: 100%;
+    }
+
+    .toolbar-right {
+      gap: 6px;
+      margin-left: auto;
+      max-width: 100%;
+    }
+
     .toolbar-btn__text {
       display: none;
     }
+
+    .toolbar-btn {
+      min-height: var(--sender-control-height);
+
+      .material-symbols-rounded {
+        font-size: 16px;
+      }
+    }
+
+    .toolbar-btn__icon-shell {
+      width: var(--sender-control-height);
+      height: var(--sender-control-height);
+    }
+
+    .toolbar-right--inline-edit {
+      width: 100%;
+      justify-content: flex-end;
+    }
+  }
+
+  .sender-select-shell,
+  .sender-control-tooltip-target,
+  .adapter-select-tooltip-target {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .model-select,
+  .effort-select {
+    max-width: min(100%, 196px);
+  }
+
+  .model-select .ant-select-selection-item,
+  .model-select .ant-select-selection-placeholder,
+  .effort-select .ant-select-selection-item,
+  .effort-select .ant-select-selection-placeholder {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }

package/src/components/chat/sender/@core/get-sender-runtime-state.ts

@@ -8,7 +8,7 @@ export const getSenderRuntimeState = (
   const isThinking = !isInlineEdit && props.sessionStatus === 'running'
   const isBusy = isThinking || props.submitLoading === true
   const supportsEffort = props.selectedAdapter === 'codex' || props.selectedAdapter === 'claude-code' ||
-    props.selectedAdapter === 'opencode'
+    props.selectedAdapter === 'copilot' || props.selectedAdapter === 'opencode'
 
   return { isInlineEdit, isMac, isThinking, isBusy, supportsEffort }
 }

package/src/components/chat/sender/@hooks/use-model-select-browser.tsx

@@ -4,6 +4,7 @@ import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import type { ModelSelectMenuGroup, ModelSelectOption } from '#~/hooks/chat/use-chat-model-adapter-selection'
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
 
 import { ModelSelectOptionLabel } from '../@components/model-select/ModelSelectOptionLabel'
 
@@ -27,6 +28,7 @@ export const useModelSelectBrowser = ({
   onSelectModel: (value: string) => void
 }) => {
   const { t } = useTranslation()
+  const { isTouchInteraction } = useResponsiveLayout()
 
   const renderCompactModelMenuLabel = useCallback((option: ModelSelectOption) => {
     return (
@@ -175,13 +177,13 @@ export const useModelSelectBrowser = ({
           mode='vertical'
           selectable
           selectedKeys={selectedModelMenuKeys}
-          triggerSubMenuAction='hover'
+          triggerSubMenuAction={isTouchInteraction ? 'click' : 'hover'}
           items={modelMenuItems}
           onClick={handleModelMenuClick}
         />
       </div>
     )
-  }, [hasModelSearchQuery, handleModelMenuClick, modelMenuItems, selectedModelMenuKeys])
+  }, [hasModelSearchQuery, handleModelMenuClick, isTouchInteraction, modelMenuItems, selectedModelMenuKeys])
 
   return {
     renderModelPopup

package/src/components/chat/sender/@types/sender-props.ts

@@ -25,6 +25,7 @@ export interface SenderProps {
   sessionStatus?: SessionStatus
   onInterrupt: () => void
   onClear?: () => void
+  sessionId?: string
   sessionInfo?: SessionInfo | null
   interactionRequest?: { id: string; payload: AskUserQuestionParams } | null
   onInteractionResponse?: (id: string, data: string | string[]) => void

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

@@ -24,7 +24,7 @@
   &:focus-within {
     border-color: #3b82f6;
     background-color: var(--input-focus-bg, #f9fafb);
-    box-shadow: 0 0 0 2px rgba(59, 130, 246, .1);
+    box-shadow: none;
   }
 
   .chat-input-monaco {

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

@@ -28,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}

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