@vibe-forge/client 0.11.3 → 1.0.0

package/src/components/chat/ChatHeader.tsx

@@ -8,12 +8,12 @@ import { useAtomValue } from 'jotai'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { deleteSession, getApiErrorMessage, updateSession } from '../../api'
+import { ApiError, deleteSession, getApiErrorMessage, updateSession } from '../../api'
+import { useResponsiveLayout } from '../../hooks/use-responsive-layout'
 import { useQueryParams } from '../../hooks/useQueryParams'
 import { isSidebarCollapsedAtom, isSidebarResizingAtom } from '../../store/index'
 import { ConfigSectionPanel } from '../config'
 import type { FieldSpec } from '../config/configSchema'
-import { ChatGitControls } from './git-controls/ChatGitControls'
 import {
   formatToolLabel,
   getSessionAssetWarnings,
@@ -52,6 +52,8 @@ export function ChatHeader({
   lastUserMessage,
   activeView,
   isTerminalOpen,
+  onCreateSession,
+  onOpenSidebar,
   onViewChange,
   onToggleTerminal
 }: {
@@ -66,11 +68,14 @@ export function ChatHeader({
   lastUserMessage?: string
   activeView: ChatHeaderView
   isTerminalOpen: boolean
+  onCreateSession?: () => void
+  onOpenSidebar?: () => void
   onViewChange: (view: ChatHeaderView) => void
   onToggleTerminal: () => void
 }) {
   const { t } = useTranslation()
   const { message } = App.useApp()
+  const { isCompactLayout, isTouchInteraction } = useResponsiveLayout()
   const isSidebarCollapsed = useAtomValue(isSidebarCollapsedAtom)
   const isResizing = useAtomValue(isSidebarResizingAtom)
   const { searchParams, update: updateQuery } = useQueryParams<{ debug: string }>({
@@ -84,6 +89,8 @@ export function ChatHeader({
   const hasDebugQuery = searchParams.has('debug')
   const isDebugMode = searchParams.get('debug') === 'true'
   const shouldShowDebugButton = hasDebugQuery
+  const hasSession = sessionId != null && sessionId !== ''
+  const resolveTooltipTitle = (title: string) => isTouchInteraction ? undefined : title
 
   const summary = sessionInfo?.type === 'summary' ? sessionInfo.summary : null
   const title = (sessionInfo?.type === 'init' ? sessionInfo.title : null) ?? sessionTitle
@@ -105,6 +112,7 @@ export function ChatHeader({
     { value: 'timeline' as const, icon: 'timeline', title: t('chat.viewTimeline') },
     { value: 'settings' as const, icon: 'tune', title: t('chat.viewSettings') }
   ]
+  const activeViewItem = viewItems.find((item) => item.value === activeView) ?? viewItems[0]!
 
   const handleToggleStar = async () => {
     if (sessionId == null || sessionId === '') return
@@ -148,6 +156,37 @@ export function ChatHeader({
       }
     }
   ]
+  const compactViewItems: MenuProps['items'] = viewItems.map((item) => ({
+    key: `view:${item.value}`,
+    label: item.title,
+    icon: <span className={`material-symbols-rounded chat-header-icon ${activeView === item.value ? 'is-filled' : ''}`}>
+      {item.icon}
+    </span>,
+    onClick: () => {
+      onViewChange(item.value)
+    }
+  }))
+  const compactMoreItems: MenuProps['items'] = [
+    {
+      key: 'terminal',
+      label: t('chat.viewTerminal'),
+      icon: <span className={`material-symbols-rounded chat-header-icon ${isTerminalOpen ? 'is-filled' : ''}`}>
+        terminal
+      </span>,
+      onClick: onToggleTerminal
+    },
+    ...moreItems,
+    ...(shouldShowDebugButton
+      ? [{
+        key: 'debug',
+        label: isDebugMode ? t('chat.debugDisable') : t('chat.debugEnable'),
+        icon: <span className={`material-symbols-rounded chat-header-icon ${isDebugMode ? 'is-filled' : ''}`}>
+          bug_report
+        </span>,
+        onClick: toggleDebugMode
+      }]
+      : [])
+  ]
 
   useEffect(() => {
     return () => {
@@ -189,8 +228,40 @@ export function ChatHeader({
   }
 
   return (
-    <div className={`chat-header ${isSidebarCollapsed ? 'is-collapsed' : ''} ${isResizing ? 'is-resizing' : ''}`}>
+    <div
+      className={`chat-header ${isSidebarCollapsed ? 'is-collapsed' : ''} ${isResizing ? 'is-resizing' : ''} ${
+        isCompactLayout ? 'is-compact' : ''
+      }`}
+    >
       <div className='chat-header-main'>
+        {isCompactLayout && (
+          <div className='chat-header-leading-actions'>
+            {onOpenSidebar != null && (
+              <Tooltip title={resolveTooltipTitle(t('common.sessions'))}>
+                <Button
+                  type='text'
+                  className='chat-header-action-button'
+                  title={t('common.sessions')}
+                  aria-label={t('common.sessions')}
+                  onClick={onOpenSidebar}
+                  icon={<span className='chat-header-view-option material-symbols-rounded'>menu</span>}
+                />
+              </Tooltip>
+            )}
+            {onCreateSession != null && (
+              <Tooltip title={resolveTooltipTitle(t('common.newChat'))}>
+                <Button
+                  type='text'
+                  className={`chat-header-action-button ${!hasSession ? 'is-active' : ''}`}
+                  title={t('common.newChat')}
+                  aria-label={t('common.newChat')}
+                  onClick={onCreateSession}
+                  icon={<span className='chat-header-view-option material-symbols-rounded'>edit_square</span>}
+                />
+              </Tooltip>
+            )}
+          </div>
+        )}
         <div className='chat-header-info'>
           <div
             className='chat-header-title'
@@ -202,56 +273,92 @@ export function ChatHeader({
       </div>
 
       <div className='chat-header-actions'>
-        {sessionId != null && sessionId !== '' && (
-          <ChatGitControls sessionId={sessionId} />
-        )}
-        {viewItems.map(item => (
-          <Tooltip key={item.value} title={item.title}>
-            <Button
-              type='text'
-              className={`chat-header-action-button ${activeView === item.value ? 'is-active' : ''}`}
-              title={item.title}
-              aria-label={item.title}
-              onClick={() => {
-                onViewChange(item.value)
-              }}
-              icon={<span className='chat-header-view-option material-symbols-rounded'>{item.icon}</span>}
-            />
-          </Tooltip>
-        ))}
-        <Tooltip title={t('chat.viewTerminal')}>
-          <Button
-            type='text'
-            className={`chat-header-action-button ${isTerminalOpen ? 'is-active' : ''}`}
-            title={t('chat.viewTerminal')}
-            aria-label={t('chat.viewTerminal')}
-            onClick={onToggleTerminal}
-            icon={<span className='chat-header-view-option material-symbols-rounded'>terminal</span>}
-          />
-        </Tooltip>
-        {shouldShowDebugButton && (
-          <Tooltip title={isDebugMode ? t('chat.debugDisable') : t('chat.debugEnable')}>
-            <Button
-              type='text'
-              className={`chat-header-action-button ${isDebugMode ? 'is-debug-active' : ''}`}
-              title={isDebugMode ? t('chat.debugDisable') : t('chat.debugEnable')}
-              aria-label={isDebugMode ? t('chat.debugDisable') : t('chat.debugEnable')}
-              onClick={toggleDebugMode}
-              icon={<span className='chat-header-view-option material-symbols-rounded'>bug_report</span>}
-            />
-          </Tooltip>
-        )}
-        <Tooltip title={t('common.moreActions')}>
-          <Dropdown menu={{ items: moreItems }} placement='bottomRight' trigger={['click']}>
-            <Button
-              type='text'
-              className='chat-header-action-button'
-              title={t('common.moreActions')}
-              aria-label={t('common.moreActions')}
-              icon={<span className='chat-header-view-option material-symbols-rounded'>more_vert</span>}
-            />
-          </Dropdown>
-        </Tooltip>
+        {isCompactLayout
+          ? (
+            <>
+              {hasSession && (
+                <Tooltip title={resolveTooltipTitle(activeViewItem.title)}>
+                  <Dropdown menu={{ items: compactViewItems }} placement='bottomRight' trigger={['click']}>
+                    <Button
+                      type='text'
+                      className='chat-header-action-button'
+                      title={activeViewItem.title}
+                      aria-label={activeViewItem.title}
+                      icon={
+                        <span className='chat-header-view-option material-symbols-rounded'>
+                          {activeViewItem.icon}
+                        </span>
+                      }
+                    />
+                  </Dropdown>
+                </Tooltip>
+              )}
+              {hasSession && (
+                <Tooltip title={resolveTooltipTitle(t('common.moreActions'))}>
+                  <Dropdown menu={{ items: compactMoreItems }} placement='bottomRight' trigger={['click']}>
+                    <Button
+                      type='text'
+                      className='chat-header-action-button'
+                      title={t('common.moreActions')}
+                      aria-label={t('common.moreActions')}
+                      icon={<span className='chat-header-view-option material-symbols-rounded'>more_vert</span>}
+                    />
+                  </Dropdown>
+                </Tooltip>
+              )}
+            </>
+          )
+          : (
+            <>
+              {viewItems.map(item => (
+                <Tooltip key={item.value} title={resolveTooltipTitle(item.title)}>
+                  <Button
+                    type='text'
+                    className={`chat-header-action-button ${activeView === item.value ? 'is-active' : ''}`}
+                    title={item.title}
+                    aria-label={item.title}
+                    onClick={() => {
+                      onViewChange(item.value)
+                    }}
+                    icon={<span className='chat-header-view-option material-symbols-rounded'>{item.icon}</span>}
+                  />
+                </Tooltip>
+              ))}
+              <Tooltip title={resolveTooltipTitle(t('chat.viewTerminal'))}>
+                <Button
+                  type='text'
+                  className={`chat-header-action-button ${isTerminalOpen ? 'is-active' : ''}`}
+                  title={t('chat.viewTerminal')}
+                  aria-label={t('chat.viewTerminal')}
+                  onClick={onToggleTerminal}
+                  icon={<span className='chat-header-view-option material-symbols-rounded'>terminal</span>}
+                />
+              </Tooltip>
+              {shouldShowDebugButton && (
+                <Tooltip title={resolveTooltipTitle(isDebugMode ? t('chat.debugDisable') : t('chat.debugEnable'))}>
+                  <Button
+                    type='text'
+                    className={`chat-header-action-button ${isDebugMode ? 'is-debug-active' : ''}`}
+                    title={isDebugMode ? t('chat.debugDisable') : t('chat.debugEnable')}
+                    aria-label={isDebugMode ? t('chat.debugDisable') : t('chat.debugEnable')}
+                    onClick={toggleDebugMode}
+                    icon={<span className='chat-header-view-option material-symbols-rounded'>bug_report</span>}
+                  />
+                </Tooltip>
+              )}
+              <Tooltip title={resolveTooltipTitle(t('common.moreActions'))}>
+                <Dropdown menu={{ items: moreItems }} placement='bottomRight' trigger={['click']}>
+                  <Button
+                    type='text'
+                    className='chat-header-action-button'
+                    title={t('common.moreActions')}
+                    aria-label={t('common.moreActions')}
+                    icon={<span className='chat-header-view-option material-symbols-rounded'>more_vert</span>}
+                  />
+                </Dropdown>
+              </Tooltip>
+            </>
+          )}
       </div>
     </div>
   )
@@ -267,6 +374,7 @@ export function SessionSettingsPanel({
   onClose: () => void
 }) {
   const { t } = useTranslation()
+  const { isCompactLayout } = useResponsiveLayout()
   const { message, modal } = App.useApp()
   const { searchParams } = useQueryParams<{ debug: string }>({ keys: ['debug'] })
   const isDebugMode = searchParams.get('debug') === 'true'
@@ -318,6 +426,27 @@ export function SessionSettingsPanel({
   const toolGroups = useMemo(() => getSessionToolGroups(sessionInfo), [sessionInfo])
   const assetWarnings = useMemo(() => getSessionAssetWarnings(sessionInfo), [sessionInfo])
   const selectionWarnings = useMemo(() => getSessionSelectionWarnings(sessionInfo), [sessionInfo])
+
+  useEffect(() => {
+    if (!isCompactLayout || toolGroups.length === 0) {
+      return
+    }
+
+    setCollapsedToolGroupKeys((prev) => {
+      const next = { ...prev }
+      let changed = false
+
+      for (const group of toolGroups) {
+        if (!(group.key in next)) {
+          next[group.key] = true
+          changed = true
+        }
+      }
+
+      return changed ? next : prev
+    })
+  }, [isCompactLayout, toolGroups])
+
   const debugItems = useMemo<SessionDebugItem[]>(() => {
     const emptyValue = t('chat.timelineEmptyValue')
     const booleanValue = (value: boolean | undefined) =>
@@ -491,6 +620,12 @@ export function SessionSettingsPanel({
   }
 
   const handleDelete = () => {
+    const runDelete = async (force = false) => {
+      await deleteSession(sessionId, { force })
+      void message.success(t('common.deleteSuccess'))
+      onClose()
+    }
+
     modal.confirm({
       title: t('common.deleteSession'),
       content: t('common.deleteSessionConfirm'),
@@ -499,10 +634,25 @@ export function SessionSettingsPanel({
       cancelText: t('common.cancel'),
       onOk: async () => {
         try {
-          await deleteSession(sessionId)
-          void message.success(t('common.deleteSuccess'))
-          onClose()
+          await runDelete()
         } catch (err) {
+          if (err instanceof ApiError && err.code === 'session_worktree_not_clean') {
+            modal.confirm({
+              title: t('chat.sessionWorkspaceForceDeleteTitle'),
+              content: t('chat.sessionWorkspaceForceDeleteDescription'),
+              okText: t('common.delete'),
+              okType: 'danger',
+              cancelText: t('common.cancel'),
+              onOk: async () => {
+                try {
+                  await runDelete(true)
+                } catch (forceError) {
+                  void message.error(getApiErrorMessage(forceError, t('common.deleteFailed')))
+                }
+              }
+            })
+            return
+          }
           void message.error(getApiErrorMessage(err, t('common.deleteFailed')))
         }
       }

package/src/components/chat/ChatHistoryView.tsx

@@ -2,6 +2,7 @@ import { App } from 'antd'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useLocation } from 'react-router-dom'
+import useSWR from 'swr'
 
 import type {
   AskUserQuestionParams,
@@ -12,13 +13,19 @@ import type {
   SessionQueuedMessage,
   SessionQueuedMessageMode
 } from '@vibe-forge/core'
-import type { SessionInfo } from '@vibe-forge/types'
+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'
@@ -30,6 +37,7 @@ 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({
@@ -106,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
@@ -130,6 +148,7 @@ export function ChatHistoryView({
     effort,
     permissionMode,
     adapter: selectedAdapter,
+    workspaceDraft,
     onClearMessages
   })
   const initialScrollDoneRef = useRef(false)
@@ -235,6 +254,29 @@ export function ChatHistoryView({
     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])
@@ -296,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(() => {
@@ -531,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}
@@ -611,12 +656,18 @@ export function ChatHistoryView({
         )}
       </div>
 
-      {!session?.id && messages.length === 0 && historyStatusNotices.length === 0 && (
+      {shouldShowNewSessionGuide && !isCompactLayout && (
         <div className='new-session-guide-wrapper'>
           <NewSessionGuide />
         </div>
       )}
 
+      {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}
@@ -648,6 +699,7 @@ export function ChatHistoryView({
                 onSend={handleSend}
                 onSendContent={handleSendContent}
                 adapterLocked={session?.id != null}
+                sessionId={session?.id}
                 sessionStatus={isCreating ? 'running' : session?.status}
                 onInterrupt={interrupt}
                 onClear={clearMessages}
@@ -686,6 +738,15 @@ export function ChatHistoryView({
                 queueMode={queueMode}
                 onQueueModeChange={setQueueMode}
               />
+              <ChatStatusBar
+                draftWorkspace={workspaceDraft}
+                isCreating={isCreating}
+                sessionId={session?.id}
+                onDraftWorkspaceChange={(nextDraft) => {
+                  workspaceDraftDirtyRef.current = true
+                  setWorkspaceDraft(nextDraft)
+                }}
+              />
             </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'>