@vibe-forge/client 0.11.2 → 1.0.0

package/src/components/chat/ChatHeader.scss

@@ -30,6 +30,13 @@
     min-width: 0;
   }
 
+  &-leading-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+  }
+
   &-title {
     font-weight: 600;
     color: var(--text-color);
@@ -41,6 +48,45 @@
   }
 }
 
+.chat-header.is-compact {
+  padding: 10px 12px 8px;
+  align-items: center;
+  gap: 8px;
+
+  .chat-header-main {
+    align-items: center;
+    gap: 8px;
+  }
+
+  .chat-header-leading-actions {
+    gap: 4px;
+  }
+
+  .chat-header-title {
+    line-height: 1.3;
+    white-space: nowrap;
+    display: block;
+  }
+
+  .chat-header-actions {
+    flex-shrink: 0;
+    margin-left: auto;
+    justify-content: flex-end;
+    flex-wrap: nowrap;
+  }
+
+  .chat-header-action-button.ant-btn.ant-btn-text {
+    width: 36px;
+    min-width: 36px;
+    height: 36px;
+    border-radius: 8px;
+
+    .chat-header-view-option.material-symbols-rounded {
+      font-size: 18px;
+    }
+  }
+}
+
 .chat-header-icon.material-symbols-rounded {
   font-size: 18px;
 }
@@ -49,6 +95,7 @@
   display: flex;
   align-items: center;
   gap: 4px;
+  min-width: 0;
 }
 
 .chat-header-action-button.ant-btn.ant-btn-text {
@@ -586,6 +633,146 @@ html.dark .chat-header-action-button.ant-btn.ant-btn-text {
   font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
 }
 
+@media (max-width: 768px) {
+  .session-settings-drawer {
+    gap: 10px;
+
+    .settings-section {
+      gap: 10px;
+
+      .section-header {
+        font-size: 11px;
+        letter-spacing: .08em;
+      }
+    }
+
+    &__form {
+      .config-view__field-row {
+        gap: 10px;
+        padding: 10px 12px;
+      }
+
+      .config-view__field-meta {
+        gap: 8px;
+      }
+
+      .config-view__field-title,
+      .config-view__field-desc {
+        white-space: normal;
+      }
+
+      .config-view__field-control {
+        min-width: 0;
+        width: 100%;
+      }
+
+      .config-view__array-list {
+        gap: 6px;
+      }
+
+      .config-view__array-item {
+        align-items: flex-start;
+      }
+
+      .config-view__icon-button--compact {
+        width: 30px;
+        min-width: 30px;
+        height: 30px;
+      }
+
+      .config-view__icon-button--full {
+        width: 100%;
+        min-width: 100%;
+        height: 36px;
+        justify-content: flex-start;
+        gap: 6px;
+        padding: 0 12px;
+        border-radius: 8px;
+        border: 1px dashed var(--border-color) !important;
+        background: var(--sub-bg-color) !important;
+        color: var(--sub-text-color) !important;
+        align-self: stretch;
+
+        &::after {
+          content: attr(aria-label);
+          font-size: 12px;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  .session-tool-groups {
+    gap: 10px;
+  }
+
+  .session-tool-group-card {
+    padding: 12px 12px 0;
+    border-radius: 12px;
+  }
+
+  .session-tool-group-card__header {
+    align-items: flex-start;
+    padding-bottom: 10px;
+  }
+
+  .session-tool-group-card__title {
+    gap: 8px;
+    font-size: 12px;
+
+    .material-symbols-rounded {
+      width: 24px;
+      height: 24px;
+      border-radius: 8px;
+      font-size: 14px;
+    }
+  }
+
+  .session-tool-group-card__meta {
+    gap: 6px;
+  }
+
+  .session-tool-group-card__count {
+    padding: 1px 6px;
+    font-size: 11px;
+  }
+
+  .session-tool-group-card__list {
+    max-height: none;
+    margin: 0 -12px;
+    padding: 0 12px;
+  }
+
+  .session-tool-row {
+    height: 34px;
+  }
+
+  .session-debug-panel {
+    padding: 0 10px;
+  }
+
+  .session-debug-row {
+    grid-template-columns: 72px minmax(0, 1fr);
+    gap: 8px;
+    height: auto;
+    min-height: 34px;
+    padding: 6px 0;
+  }
+
+  .settings-footer {
+    gap: 16px;
+    padding-top: 16px;
+
+    .danger-zone {
+      .delete-session-row {
+        flex-direction: column;
+        align-items: stretch;
+        padding: 12px;
+      }
+    }
+  }
+}
+
 html.dark {
   .session-settings-drawer {
     .settings-footer {

package/src/components/chat/ChatHeader.tsx

@@ -1,6 +1,6 @@
 import './ChatHeader.scss'
 
-import type { Session } from '@vibe-forge/core'
+import type { Session, SessionStatus } from '@vibe-forge/core'
 import type { SessionInfo } from '@vibe-forge/types'
 import { App, Button, Dropdown, Tooltip } from 'antd'
 import type { MenuProps } from 'antd'
@@ -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,
@@ -44,6 +44,7 @@ export function ChatHeader({
   sessionInfo,
   sessionId,
   sessionTitle,
+  sessionStatus,
   isStarred,
   isArchived,
   tags,
@@ -51,12 +52,15 @@ export function ChatHeader({
   lastUserMessage,
   activeView,
   isTerminalOpen,
+  onCreateSession,
+  onOpenSidebar,
   onViewChange,
   onToggleTerminal
 }: {
   sessionInfo: SessionInfo | null
   sessionId?: string
   sessionTitle?: string
+  sessionStatus?: SessionStatus
   isStarred?: boolean
   isArchived?: boolean
   tags?: string[]
@@ -64,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 }>({
@@ -82,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
@@ -103,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
@@ -146,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 () => {
@@ -187,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'
@@ -200,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>
   )
@@ -265,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'
@@ -316,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) =>
@@ -489,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'),
@@ -497,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')))
         }
       }