@vibe-forge/client 0.8.4 → 0.10.0

package/src/components/chat/ChatHeader.tsx

@@ -1,19 +1,44 @@
 import './ChatHeader.scss'
 
+import type { Session } from '@vibe-forge/core'
 import type { SessionInfo } from '@vibe-forge/types'
-import { App, Button, Dropdown, Radio } from 'antd'
+import { App, Button, Dropdown, Tooltip } from 'antd'
 import type { MenuProps } from 'antd'
 import { useAtomValue } from 'jotai'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { deleteSession, getApiErrorMessage, updateSession } from '../../api'
+import { useQueryParams } from '../../hooks/useQueryParams'
 import { isSidebarCollapsedAtom, isSidebarResizingAtom } from '../../store/index'
 import { ConfigSectionPanel } from '../config'
 import type { FieldSpec } from '../config/configSchema'
+import {
+  formatToolLabel,
+  getSessionAssetWarnings,
+  getSessionSelectionWarnings,
+  getSessionToolGroups
+} from './session-metadata'
 
 export type ChatHeaderView = 'history' | 'timeline' | 'settings'
 
+interface SessionDebugItem {
+  icon: string
+  key: string
+  label: string
+  value: string
+}
+
+const DEBUG_MONO_KEYS = new Set([
+  'sessionId',
+  'uuid',
+  'leafUuid',
+  'adapter',
+  'model',
+  'version',
+  'cwd'
+])
+
 export function ChatHeader({
   sessionInfo,
   sessionId,
@@ -24,7 +49,9 @@ export function ChatHeader({
   lastMessage,
   lastUserMessage,
   activeView,
-  onViewChange
+  isTerminalOpen,
+  onViewChange,
+  onToggleTerminal
 }: {
   sessionInfo: SessionInfo | null
   sessionId?: string
@@ -35,17 +62,28 @@ export function ChatHeader({
   lastMessage?: string
   lastUserMessage?: string
   activeView: ChatHeaderView
+  isTerminalOpen: boolean
   onViewChange: (view: ChatHeaderView) => void
+  onToggleTerminal: () => void
 }) {
   const { t } = useTranslation()
   const { message } = App.useApp()
   const isSidebarCollapsed = useAtomValue(isSidebarCollapsedAtom)
   const isResizing = useAtomValue(isSidebarResizingAtom)
-  const [editTitle, setEditTitle] = useState('')
+  const { searchParams, update: updateQuery } = useQueryParams<{ debug: string }>({
+    keys: ['debug'],
+    omit: {
+      debug: value => value === ''
+    }
+  })
+  const titleClickCountRef = useRef(0)
+  const titleClickTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const hasDebugQuery = searchParams.has('debug')
+  const isDebugMode = searchParams.get('debug') === 'true'
+  const shouldShowDebugButton = hasDebugQuery
 
   const summary = sessionInfo?.type === 'summary' ? sessionInfo.summary : null
   const title = (sessionInfo?.type === 'init' ? sessionInfo.title : null) ?? sessionTitle
-  const cwd = sessionInfo?.type === 'init' ? sessionInfo.cwd : null
   const displayTitle = (title != null && title !== '')
     ? title
     : (summary != null && summary !== '')
@@ -55,12 +93,15 @@ export function ChatHeader({
     : (lastMessage != null && lastMessage !== '')
     ? lastMessage
     : t('common.newChat')
+  const toggleDebugMode = () => {
+    updateQuery({ debug: isDebugMode ? 'false' : 'true' })
+  }
 
-  useEffect(() => {
-    if (title != null && title !== '') {
-      setEditTitle(title)
-    }
-  }, [title])
+  const viewItems = [
+    { value: 'history' as const, icon: 'forum', title: t('chat.viewHistory') },
+    { value: 'timeline' as const, icon: 'timeline', title: t('chat.viewTimeline') },
+    { value: 'settings' as const, icon: 'tune', title: t('chat.viewSettings') }
+  ]
 
   const handleToggleStar = async () => {
     if (sessionId == null || sessionId === '') return
@@ -86,7 +127,7 @@ export function ChatHeader({
     {
       key: 'star',
       label: isStarred ? t('common.unstar') : t('common.star'),
-      icon: <span className={`material-symbols-rounded ${isStarred ? 'is-filled' : ''}`} style={{ fontSize: '18px' }}>
+      icon: <span className={`material-symbols-rounded chat-header-icon ${isStarred ? 'is-filled' : ''}`}>
         {isStarred ? 'star' : 'star_border'}
       </span>,
       onClick: () => {
@@ -96,7 +137,7 @@ export function ChatHeader({
     {
       key: 'archive',
       label: isArchived ? t('common.restore') : t('common.archive'),
-      icon: <span className='material-symbols-rounded' style={{ fontSize: '18px' }}>
+      icon: <span className='material-symbols-rounded chat-header-icon'>
         {isArchived ? 'unarchive' : 'archive'}
       </span>,
       onClick: () => {
@@ -105,97 +146,125 @@ export function ChatHeader({
     }
   ]
 
+  useEffect(() => {
+    return () => {
+      if (titleClickTimerRef.current != null) {
+        clearTimeout(titleClickTimerRef.current)
+      }
+    }
+  }, [])
+
+  const handleTitleClick = () => {
+    if (titleClickTimerRef.current != null) {
+      clearTimeout(titleClickTimerRef.current)
+    }
+
+    titleClickCountRef.current += 1
+
+    if (titleClickCountRef.current >= 5) {
+      titleClickCountRef.current = 0
+      titleClickTimerRef.current = null
+      toggleDebugMode()
+      // eslint-disable-next-line no-console
+      console.log('Session Full Info:', {
+        sessionId,
+        sessionTitle,
+        isStarred,
+        isArchived,
+        tags,
+        lastMessage,
+        lastUserMessage,
+        sessionInfo
+      })
+      return
+    }
+
+    titleClickTimerRef.current = setTimeout(() => {
+      titleClickCountRef.current = 0
+      titleClickTimerRef.current = null
+    }, 500)
+  }
+
   return (
     <div className={`chat-header ${isSidebarCollapsed ? 'is-collapsed' : ''} ${isResizing ? 'is-resizing' : ''}`}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: '12px', flex: 1, minWidth: 0 }}>
+      <div className='chat-header-main'>
         <div className='chat-header-info'>
-          <div className='chat-header-title'>
-            {displayTitle}
-          </div>
           <div
-            className='chat-header-subtitle'
-            onDoubleClick={() => {
-              // eslint-disable-next-line no-console
-              console.log('Session Full Info:', {
-                sessionId,
-                sessionTitle,
-                isStarred,
-                isArchived,
-                tags,
-                lastMessage,
-                lastUserMessage,
-                sessionInfo
-              })
-            }}
-            style={{ cursor: 'pointer', userSelect: 'all' }}
+            className='chat-header-title'
+            onClick={handleTitleClick}
           >
-            {sessionId ?? t('chat.selectModel')}
+            {displayTitle}
           </div>
         </div>
       </div>
 
       <div className='chat-header-actions'>
-        <Radio.Group
-          className='chat-header-view-group'
-          value={activeView}
-          optionType='button'
-          buttonStyle='solid'
-          size='small'
-          onChange={(event) => {
-            onViewChange(event.target.value as ChatHeaderView)
-          }}
-          options={[
-            {
-              label: (
-                <span className='chat-header-view-option material-symbols-rounded'>
-                  forum
-                </span>
-              ),
-              value: 'history'
-            },
-            {
-              label: (
-                <span className='chat-header-view-option material-symbols-rounded'>
-                  timeline
-                </span>
-              ),
-              value: 'timeline'
-            },
-            {
-              label: (
-                <span className='chat-header-view-option material-symbols-rounded'>
-                  tune
-                </span>
-              ),
-              value: 'settings'
-            }
-          ]}
-        />
-        <div className='chat-header-divider' />
-        <Dropdown menu={{ items: moreItems }} placement='bottomRight' trigger={['click']}>
+        {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'
-            icon={<span className='material-symbols-rounded'>more_vert</span>}
+            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>}
           />
-        </Dropdown>
+        </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>
       </div>
     </div>
   )
 }
 
 export function SessionSettingsPanel({
-  sessionId,
-  initialTitle,
-  initialTags = [],
+  session,
+  sessionInfo,
   onClose
 }: {
-  sessionId: string
-  initialTitle?: string
-  initialTags?: string[]
+  session: Session
+  sessionInfo: SessionInfo | null
   onClose: () => void
 }) {
   const { t } = useTranslation()
   const { message, modal } = App.useApp()
+  const { searchParams } = useQueryParams<{ debug: string }>({ keys: ['debug'] })
+  const isDebugMode = searchParams.get('debug') === 'true'
+  const sessionId = session.id
   const fields = useMemo<FieldSpec[]>(() => [
     {
       path: ['title'],
@@ -214,10 +283,11 @@ export function SessionSettingsPanel({
     }
   ], [])
   const initialValue = useMemo(() => ({
-    title: initialTitle ?? '',
-    tags: initialTags
-  }), [initialTags, initialTitle])
+    title: session.title ?? '',
+    tags: session.tags ?? []
+  }), [session.tags, session.title])
   const [draft, setDraft] = useState(initialValue)
+  const [collapsedToolGroupKeys, setCollapsedToolGroupKeys] = useState<Record<string, boolean>>({})
   const draftsRef = useRef(initialValue)
   const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const savingRef = useRef(false)
@@ -239,6 +309,141 @@ export function SessionSettingsPanel({
     }
   }, [])
 
+  const toolGroups = useMemo(() => getSessionToolGroups(sessionInfo), [sessionInfo])
+  const assetWarnings = useMemo(() => getSessionAssetWarnings(sessionInfo), [sessionInfo])
+  const selectionWarnings = useMemo(() => getSessionSelectionWarnings(sessionInfo), [sessionInfo])
+  const debugItems = useMemo<SessionDebugItem[]>(() => {
+    const emptyValue = t('chat.timelineEmptyValue')
+    const booleanValue = (value: boolean | undefined) =>
+      value ? t('chat.debugEnabledValue') : t('chat.debugDisabledValue')
+    const tags = session.tags ?? []
+    const items: SessionDebugItem[] = [
+      {
+        key: 'sessionId',
+        label: t('chat.debugSessionId'),
+        value: session.id,
+        icon: 'fingerprint'
+      },
+      {
+        key: 'view',
+        label: t('chat.debugView'),
+        value: t('chat.viewSettings'),
+        icon: 'tune'
+      },
+      {
+        key: 'starred',
+        label: t('chat.debugStarred'),
+        value: booleanValue(session.isStarred),
+        icon: 'star'
+      },
+      {
+        key: 'archived',
+        label: t('chat.debugArchived'),
+        value: booleanValue(session.isArchived),
+        icon: 'archive'
+      }
+    ]
+
+    if (tags.length > 0) {
+      items.push({
+        key: 'tags',
+        label: t('chat.debugTags'),
+        value: tags.join(', '),
+        icon: 'sell'
+      })
+    }
+
+    if (sessionInfo?.type === 'init') {
+      items.push(
+        {
+          key: 'type',
+          label: t('chat.debugType'),
+          value: sessionInfo.type,
+          icon: 'deployed_code'
+        },
+        {
+          key: 'uuid',
+          label: t('chat.debugUuid'),
+          value: sessionInfo.uuid,
+          icon: 'tag'
+        },
+        {
+          key: 'adapter',
+          label: t('chat.debugAdapter'),
+          value: sessionInfo.adapter ?? emptyValue,
+          icon: 'extension'
+        },
+        {
+          key: 'model',
+          label: t('chat.debugModel'),
+          value: sessionInfo.model,
+          icon: 'model_training'
+        },
+        {
+          key: 'effort',
+          label: t('chat.debugEffort'),
+          value: sessionInfo.effort ?? emptyValue,
+          icon: 'psychology'
+        },
+        {
+          key: 'version',
+          label: t('chat.debugVersion'),
+          value: sessionInfo.version,
+          icon: 'deployed_code_update'
+        },
+        {
+          key: 'tools',
+          label: t('chat.debugTools'),
+          value: String(sessionInfo.tools.length),
+          icon: 'handyman'
+        },
+        {
+          key: 'agents',
+          label: t('chat.debugAgents'),
+          value: String(sessionInfo.agents.length),
+          icon: 'hub'
+        },
+        {
+          key: 'cwd',
+          label: t('chat.debugCwd'),
+          value: sessionInfo.cwd,
+          icon: 'folder_open'
+        }
+      )
+    }
+
+    if (sessionInfo?.type === 'summary') {
+      items.push(
+        {
+          key: 'type',
+          label: t('chat.debugType'),
+          value: sessionInfo.type,
+          icon: 'deployed_code'
+        },
+        {
+          key: 'leafUuid',
+          label: t('chat.debugLeafUuid'),
+          value: sessionInfo.leafUuid,
+          icon: 'call_split'
+        }
+      )
+    }
+    return items
+  }, [session.id, session.isArchived, session.isStarred, session.tags, sessionInfo, t])
+
+  const formatSelectionWarning = (warning: (typeof selectionWarnings)[number]) => {
+    const reason = warning.reason === 'excluded'
+      ? t('chat.selectionWarningReasonExcluded')
+      : t('chat.selectionWarningReasonNotIncluded')
+
+    return t('chat.selectionWarningFallback', {
+      adapter: warning.adapter,
+      requestedModel: warning.requestedModel,
+      resolvedModel: warning.resolvedModel,
+      reason
+    })
+  }
+
   const scheduleSave = (nextValue: { title: string; tags: string[] }) => {
     const serialized = JSON.stringify(nextValue ?? {})
     if (lastSavedRef.current === serialized) return
@@ -298,6 +503,13 @@ export function SessionSettingsPanel({
     })
   }
 
+  const toggleToolGroup = (key: string) => {
+    setCollapsedToolGroupKeys((prev) => ({
+      ...prev,
+      [key]: !prev[key]
+    }))
+  }
+
   return (
     <div className='session-settings-drawer'>
       <ConfigSectionPanel
@@ -314,6 +526,108 @@ export function SessionSettingsPanel({
         className='session-settings-drawer__form'
       />
 
+      <div className='settings-section session-runtime-section'>
+        <div className='section-header'>
+          <span className='material-symbols-rounded'>build</span>
+          <span>{t('chat.availableTools')}</span>
+        </div>
+
+        {selectionWarnings.length > 0 && (
+          <div className='session-info-note-list'>
+            <div className='session-info-note-list__title'>{t('chat.selectionWarningsTitle')}</div>
+            {selectionWarnings.map((warning, index) => (
+              <div
+                key={`${warning.adapter}:${warning.requestedModel}:${warning.resolvedModel}:${index}`}
+                className='session-info-note session-info-note--warning'
+              >
+                <span className='material-symbols-rounded'>warning</span>
+                <span>{formatSelectionWarning(warning)}</span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {assetWarnings.length > 0 && (
+          <div className='session-info-note-list'>
+            <div className='session-info-note-list__title'>{t('chat.assetWarningsTitle')}</div>
+            {assetWarnings.map((warning) => (
+              <div key={warning.assetId} className='session-info-note'>
+                <span className='material-symbols-rounded'>warning</span>
+                <div className='session-info-note__content'>
+                  <code>{warning.assetId}</code>
+                  <span>{warning.reason}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {toolGroups.length > 0
+          ? (
+            <div className='session-tool-groups'>
+              {toolGroups.map((group) => (
+                <div key={group.key} className='session-tool-group-card'>
+                  <button
+                    type='button'
+                    className='session-tool-group-card__header'
+                    onClick={() => toggleToolGroup(group.key)}
+                  >
+                    <div className='session-tool-group-card__title'>
+                      <span className='material-symbols-rounded'>{group.icon}</span>
+                      <span>{t(group.labelKey)}</span>
+                    </div>
+                    <div className='session-tool-group-card__meta'>
+                      <span className='session-tool-group-card__count'>{group.tools.length}</span>
+                      <span className='material-symbols-rounded session-tool-group-card__expand'>
+                        {collapsedToolGroupKeys[group.key] ? 'expand_more' : 'expand_less'}
+                      </span>
+                    </div>
+                  </button>
+                  {!collapsedToolGroupKeys[group.key] && (
+                    <div className='session-tool-group-card__list'>
+                      {group.tools.map(tool => (
+                        <div key={tool} className='session-tool-row' title={formatToolLabel(tool)}>
+                          <span className='session-tool-row__dot' />
+                          <code>{formatToolLabel(tool)}</code>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )
+          : (
+            <div className='session-settings-empty'>
+              {t('chat.availableToolsEmpty')}
+            </div>
+          )}
+      </div>
+
+      {isDebugMode && debugItems.length > 0 && (
+        <div className='settings-section session-debug-section'>
+          <div className='section-header'>
+            <span className='material-symbols-rounded'>bug_report</span>
+            <span>{t('chat.debugSectionTitle')}</span>
+          </div>
+
+          <div className='session-debug-panel'>
+            <div className='session-debug-list'>
+              {debugItems.map(item => (
+                <div key={item.key} className='session-debug-row'>
+                  <span className='session-debug-row__label'>{item.label}</span>
+                  <span
+                    className={`session-debug-row__value ${DEBUG_MONO_KEYS.has(item.key) ? 'is-mono' : ''}`}
+                  >
+                    {item.value}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+
       <div className='settings-footer'>
         <div className='danger-zone'>
           <div className='delete-session-row'>