@vibe-forge/client 2.0.0 → 3.0.0-alpha.0

package/src/components/chat/git-controls/ChatGitControls.scss

@@ -76,6 +76,16 @@
   }
 }
 
+.chat-header-git__split-main.ant-btn.ant-btn-text .ant-btn-icon,
+.chat-header-git__split-toggle.ant-btn.ant-btn-text .ant-btn-icon,
+.chat-header-git__trigger.ant-btn.ant-btn-text .ant-btn-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-inline-end: 0;
+  line-height: 1;
+}
+
 .chat-header-git__split-main.ant-btn.ant-btn-text,
 .chat-header-git__trigger.ant-btn.ant-btn-text {
   min-width: 0;
@@ -167,7 +177,9 @@
 
   .chat-header-git__trigger-main {
     width: 100%;
+    height: 100%;
     justify-content: center;
+    align-items: center;
     gap: 0;
   }
 
@@ -188,6 +200,30 @@
     display: none;
   }
 
+  .chat-header-git__trigger-main {
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    gap: 0;
+  }
+
+  .chat-header-git__trigger-chevron {
+    display: none;
+  }
+}
+
+.chat-header-git__trigger.ant-btn.ant-btn-text.chat-header-git__trigger--environment.is-compact {
+  width: 24px;
+  min-width: 24px;
+  padding: 0;
+  justify-content: center;
+  gap: 0;
+
+  .chat-header-git__trigger-label {
+    display: none;
+  }
+
   .chat-header-git__trigger-main {
     width: 100%;
     justify-content: center;
@@ -207,6 +243,7 @@
     min-width: 24px;
     padding: 0;
     justify-content: center;
+    align-items: center;
     gap: 0;
     border-radius: 6px;
 
@@ -224,6 +261,7 @@
     min-width: 24px;
     padding: 0;
     justify-content: center;
+    align-items: center;
     border-top-left-radius: 6px;
     border-bottom-left-radius: 6px;
     border-top-right-radius: 6px;
@@ -231,6 +269,25 @@
   }
 }
 
+.chat-header-git__trigger.ant-btn.ant-btn-text.chat-header-git__trigger--worktree.is-compact
+  .chat-header-git__trigger-main
+  .material-symbols-rounded,
+.chat-header-git__trigger.ant-btn.ant-btn-text.chat-header-git__trigger--branch.is-compact
+  .chat-header-git__trigger-main
+  .material-symbols-rounded,
+.chat-header-git__split--operations.is-compact .material-symbols-rounded {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chat-header-git__trigger.ant-btn.ant-btn-text.chat-header-git__trigger--worktree.is-compact
+  .chat-header-git__trigger-chevron,
+.chat-header-git__trigger.ant-btn.ant-btn-text.chat-header-git__trigger--branch.is-compact
+  .chat-header-git__trigger-chevron {
+  display: none !important;
+}
+
 .chat-header-git__separator {
   width: 1px;
   height: 12px;
@@ -267,6 +324,10 @@
   width: 236px;
 }
 
+.chat-header-git__overlay--environment {
+  width: 236px;
+}
+
 .chat-header-git__overlay--worktree-root {
   width: 228px;
 }
@@ -438,6 +499,10 @@
   overflow: hidden;
 }
 
+.chat-header-git__empty--environment {
+  padding: 10px 0 4px;
+}
+
 .chat-header-git__sections {
   display: flex;
   flex-direction: column;

package/src/components/chat/git-controls/DraftGitControls.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import type { ChatSessionWorkspaceDraft } from '#~/hooks/chat/chat-session-workspace-draft'
 
 import { BranchSwitcherDropdown } from './BranchSwitcherDropdown'
+import { DraftWorktreeEnvironmentDropdown } from './DraftWorktreeEnvironmentDropdown'
 import { GitWorktreeDropdown } from './GitWorktreeDropdown'
 import { useChatDraftGitControls } from './use-chat-draft-git-controls'
 
@@ -52,6 +53,19 @@ export function DraftGitControls({
               }}
             />
 
+            <DraftWorktreeEnvironmentDropdown
+              compact={compact}
+              disabled={disabled}
+              placement={placement}
+              value={draft.worktreeEnvironment}
+              onChange={(worktreeEnvironment) => {
+                onChange({
+                  ...draft,
+                  worktreeEnvironment
+                })
+              }}
+            />
+
             <BranchSwitcherDropdown
               availableLocalBranches={git.availableLocalBranches}
               branchQuery={git.branchQuery}

package/src/components/chat/git-controls/DraftWorktreeEnvironmentDropdown.tsx

@@ -0,0 +1,115 @@
+import { Button, Dropdown, Empty } from 'antd'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
+
+import { listWorktreeEnvironments } from '#~/api'
+import { toDisplayEnvironmentName, toEnvironmentReference } from '#~/components/config/worktree-environment-panel-model'
+
+export function DraftWorktreeEnvironmentDropdown({
+  compact = false,
+  disabled = false,
+  value,
+  placement = 'topLeft',
+  onChange
+}: {
+  compact?: boolean
+  disabled?: boolean
+  value?: string
+  placement?: 'bottomLeft' | 'topLeft'
+  onChange: (value?: string) => void
+}) {
+  const { t } = useTranslation()
+  const { data } = useSWR('worktree-environments', listWorktreeEnvironments, { revalidateOnFocus: false })
+  const environments = data?.environments ?? []
+  const selectedEnvironment = environments.find(environment => (
+    toEnvironmentReference(environment) === value || environment.id === value
+  ))
+  const triggerLabel = selectedEnvironment != null
+    ? toDisplayEnvironmentName(selectedEnvironment.id)
+    : value != null && value !== ''
+    ? toDisplayEnvironmentName(value)
+    : t('chat.sessionWorkspaceEnvironmentDefault')
+  const hasEnvironments = environments.length > 0
+
+  const menuRows = useMemo(() => (
+    <div className='chat-header-git__overlay chat-header-git__overlay--environment'>
+      <button
+        type='button'
+        className={`chat-header-git__menu-row ${value == null || value === '' ? 'is-active' : ''}`}
+        disabled={disabled}
+        onClick={() => onChange(undefined)}
+      >
+        <span className='chat-header-git__menu-row-main'>
+          <span className='chat-header-git__row-icon material-symbols-rounded'>settings_suggest</span>
+          <span className='chat-header-git__menu-row-title'>
+            {t('chat.sessionWorkspaceEnvironmentDefault')}
+          </span>
+        </span>
+      </button>
+
+      {hasEnvironments
+        ? environments.map((environment) => {
+          const environmentReference = toEnvironmentReference(environment)
+          const isActive = environmentReference === value || environment.id === value
+          return (
+            <button
+              type='button'
+              key={`${environment.source}:${environment.id}`}
+              className={`chat-header-git__menu-row ${isActive ? 'is-active' : ''}`}
+              disabled={disabled}
+              title={environment.path}
+              onClick={() => onChange(environmentReference)}
+            >
+              <span className='chat-header-git__menu-row-main'>
+                <span className='chat-header-git__row-icon material-symbols-rounded'>
+                  {environment.isLocal ? 'person' : 'folder'}
+                </span>
+                <span className='chat-header-git__menu-row-title'>
+                  {toDisplayEnvironmentName(environment.id)}
+                </span>
+              </span>
+              <span className='chat-header-git__menu-row-trailing'>
+                <span className='chat-header-git__menu-row-value'>
+                  {environment.isLocal
+                    ? t('chat.sessionWorkspaceEnvironmentLocal')
+                    : t('chat.sessionWorkspaceEnvironmentProject')}
+                </span>
+              </span>
+            </button>
+          )
+        })
+        : (
+          <div className='chat-header-git__empty chat-header-git__empty--environment'>
+            <Empty
+              image={Empty.PRESENTED_IMAGE_SIMPLE}
+              description={t('chat.sessionWorkspaceNoEnvironments')}
+            />
+          </div>
+        )}
+    </div>
+  ), [disabled, environments, hasEnvironments, onChange, t, value])
+
+  return (
+    <Dropdown
+      placement={placement}
+      trigger={['click']}
+      dropdownRender={() => menuRows}
+    >
+      <Button
+        type='text'
+        disabled={disabled}
+        className={`chat-header-git__trigger chat-header-git__trigger--environment ${compact ? 'is-compact' : ''}`
+          .trim()}
+        title={selectedEnvironment?.path ?? triggerLabel}
+        aria-label={t('chat.sessionWorkspaceEnvironment')}
+      >
+        <span className='chat-header-git__trigger-main'>
+          <span className='material-symbols-rounded'>deployed_code</span>
+          <span className='chat-header-git__trigger-label'>{triggerLabel}</span>
+        </span>
+        <span className='chat-header-git__trigger-chevron material-symbols-rounded'>expand_more</span>
+      </Button>
+    </Dropdown>
+  )
+}

package/src/components/chat/messages/MessageItem.tsx

@@ -29,6 +29,7 @@ interface MessageItemProps {
   sessionId?: string
   sessionInfo?: SessionInfo | null
   isSessionBusy: boolean
+  hideActionButtons: boolean
   isEditing: boolean
   isCompactLayout: boolean
   isTouchInteraction: boolean
@@ -54,6 +55,7 @@ function MessageItemComponent({
   sessionId,
   sessionInfo,
   isSessionBusy,
+  hideActionButtons,
   isEditing,
   isCompactLayout,
   isTouchInteraction,
@@ -83,8 +85,11 @@ function MessageItemComponent({
   const canRecall = isPersistedMessage && !isSessionBusy && isUser
   const canFork = isPersistedMessage && !isSessionBusy && isUser
   const canCopy = copyableText != null
-  const shouldShowAssistantActions = !isUser && showAssistantActions
+  const shouldShowAssistantActions = !hideActionButtons && !isUser && showAssistantActions
   const showCompactActionMenu = isCompactLayout || isTouchInteraction
+  const shouldShowCompactActionMenu = !hideActionButtons &&
+    showCompactActionMenu &&
+    (isUser || shouldShowAssistantActions)
 
   useEffect(() => {
     setIsSubmitting(false)
@@ -114,6 +119,15 @@ function MessageItemComponent({
     }
   }, [isActionsVisible])
 
+  useEffect(() => {
+    if (!hideActionButtons) {
+      return
+    }
+
+    setIsActionsVisible(false)
+    setPendingConfirmAction(null)
+  }, [hideActionButtons])
+
   useEffect(() => {
     if (pendingConfirmAction == null) {
       return
@@ -276,7 +290,7 @@ function MessageItemComponent({
   }
 
   const handleActionsPointerEnter = () => {
-    if (!isUser || isEditing) {
+    if (!isUser || isEditing || hideActionButtons) {
       return
     }
 
@@ -296,7 +310,7 @@ function MessageItemComponent({
   }
 
   const handleActionsPointerLeave = () => {
-    if (!isUser) {
+    if (!isUser || hideActionButtons) {
       return
     }
 
@@ -440,14 +454,14 @@ function MessageItemComponent({
         className={`${isUser ? 'chat-message-user' : 'chat-message-assistant'} ${isEditing ? 'is-editing' : ''} ${
           !isFirstInGroup ? 'consecutive' : ''
         } ${isActionsVisible ? 'is-actions-visible' : ''} ${isTargeted ? 'is-targeted' : ''} ${
-          showCompactActionMenu ? 'has-compact-menu' : ''
+          shouldShowCompactActionMenu ? 'has-compact-menu' : ''
         }`}
         data-message-id={originalMessage.id}
         onPointerEnter={handleActionsPointerEnter}
         onPointerLeave={handleActionsPointerLeave}
       >
         <div className={`message-body-container ${isEditing ? 'is-editing' : ''}`}>
-          {isUser && !isEditing && !showCompactActionMenu && (
+          {isUser && !isEditing && !showCompactActionMenu && !hideActionButtons && (
             <div className='message-side-actions'>
               {actionButtons}
             </div>
@@ -477,7 +491,7 @@ function MessageItemComponent({
           </div>
           {!isEditing && (
             <MessageFooter msg={originalMessage} isUser={isUser}>
-              {showCompactActionMenu
+              {shouldShowCompactActionMenu
                 ? compactActionMenu
                 : shouldShowAssistantActions
                 ? actionButtons
@@ -495,6 +509,7 @@ const areMessageItemPropsEqual = (prev: MessageItemProps, next: MessageItemProps
     prev.isFirstInGroup === next.isFirstInGroup &&
     prev.isTargeted === next.isTargeted &&
     prev.isSessionBusy === next.isSessionBusy &&
+    prev.hideActionButtons === next.hideActionButtons &&
     prev.isEditing === next.isEditing &&
     prev.isCompactLayout === next.isCompactLayout &&
     prev.isTouchInteraction === next.isTouchInteraction &&

package/src/components/chat/messages/MessageStatusNotice.tsx

@@ -7,12 +7,20 @@ import type { ChatHistoryStatusNotice } from './build-chat-history-status-notice
 
 export function MessageStatusNotice({
   notice,
-  onRetryConnection
+  onRetryConnection,
+  onRetrySessionCreation
 }: {
   notice: ChatHistoryStatusNotice
   onRetryConnection: () => void
+  onRetrySessionCreation?: () => void
 }) {
   const { t } = useTranslation()
+  const actionLabel = notice.action === 'retry-session-creation'
+    ? t('chat.retrySessionCreation')
+    : t('chat.retryConnection')
+  const handleAction = notice.action === 'retry-session-creation'
+    ? onRetrySessionCreation
+    : onRetryConnection
 
   return (
     <div className={`message-status-notice message-status-notice--${notice.tone} ${notice.isMock ? 'is-mock' : ''}`}>
@@ -34,10 +42,10 @@ export function MessageStatusNotice({
           {notice.detail != null && notice.detail !== '' && (
             <div className='message-status-notice__detail'>{notice.detail}</div>
           )}
-          {notice.action === 'retry-connection' && (
+          {notice.action != null && handleAction != null && (
             <div className='message-status-notice__actions'>
-              <Button size='small' onClick={onRetryConnection}>
-                {t('chat.retryConnection')}
+              <Button size='small' onClick={handleAction}>
+                {actionLabel}
               </Button>
             </div>
           )}

package/src/components/chat/messages/build-chat-history-status-notices.ts

@@ -3,7 +3,7 @@ import type { ChatErrorState } from '#~/hooks/chat/interaction-state'
 type Translate = (key: string, options?: Record<string, unknown>) => string
 
 export interface ChatHistoryStatusNotice {
-  action?: 'retry-connection'
+  action?: 'retry-connection' | 'retry-session-creation'
   detail?: string
   icon: string
   id: string
@@ -51,18 +51,23 @@ const createSessionNotice = (
   t: Translate,
   state: ChatErrorState,
   isMock = false
-): ChatHistoryStatusNotice => ({
-  detail: t('chat.sessionErrorHelp'),
-  icon: 'error',
-  id: isMock ? 'mock-session-error' : 'session-error',
-  isMock,
-  message: state.message,
-  meta: state.code != null && state.code !== ''
-    ? t('chat.sessionErrorCode', { code: state.code })
-    : undefined,
-  tone: 'error',
-  title: t('chat.sessionErrorTitle')
-})
+): ChatHistoryStatusNotice => {
+  const isCreateFailure = state.action === 'retry-session-creation'
+
+  return {
+    ...(isMock || state.action == null ? {} : { action: state.action }),
+    detail: isCreateFailure ? t('chat.sessionCreateFailedHelp') : t('chat.sessionErrorHelp'),
+    icon: 'error',
+    id: isMock ? 'mock-session-error' : isCreateFailure ? 'session-create-failed' : 'session-error',
+    isMock,
+    message: state.message,
+    ...(!isCreateFailure && state.code != null && state.code !== ''
+      ? { meta: t('chat.sessionErrorCode', { code: state.code }) }
+      : {}),
+    tone: 'error',
+    title: isCreateFailure ? t('chat.sessionCreateFailedTitle') : t('chat.sessionErrorTitle')
+  }
+}
 
 export const buildChatHistoryStatusNotices = ({
   errorState,

package/src/components/chat/messages/message-action-utils.ts

@@ -0,0 +1,29 @@
+import type { ChatRenderItem } from './message-utils'
+
+export function getLastMessageAnchorId(renderItems: ChatRenderItem[]) {
+  for (let index = renderItems.length - 1; index >= 0; index -= 1) {
+    const item = renderItems[index]
+    if (item?.type === 'message') {
+      return item.anchorId
+    }
+  }
+
+  return null
+}
+
+export function getLastAssistantActionAnchorId(renderItems: ChatRenderItem[]) {
+  const lastItem = renderItems[renderItems.length - 1]
+  if (lastItem?.type === 'tool-group') {
+    return null
+  }
+
+  for (let index = renderItems.length - 1; index >= 0; index -= 1) {
+    const item = renderItems[index]
+    if (item == null) continue
+    if (item.type === 'tool-group') continue
+    if (item.message.role === 'user') continue
+    return item.anchorId
+  }
+
+  return null
+}

package/src/components/chat/new-session-guide-config.ts

@@ -0,0 +1,19 @@
+export {
+  buildConversationStarterInitialContent,
+  buildConversationStarterTargetDraft,
+  buildConversationStarterWorkspacePatch,
+  normalizeConversationStarterMode
+} from './conversation-starter-apply'
+
+export {
+  buildConversationStarterListItems,
+  getNewSessionGuideData,
+  partitionConversationStarterListItems
+} from './new-session-guide-items'
+
+export type {
+  ConversationStarterCollectionKey,
+  ConversationStarterListItem,
+  NewSessionGuideData,
+  PartitionConversationStarterListItemsResult
+} from './new-session-guide-items'

package/src/components/chat/new-session-guide-items.ts

@@ -0,0 +1,172 @@
+import type { ConfigResponse, ConversationStarterConfig } from '@vibe-forge/types'
+
+import { collectVisibleRecentKeys, filterUniqueStrings, orderItemsByPriorityKeys } from './new-session-guide-list-order'
+
+export interface NewSessionGuideData {
+  announcements: string[]
+  startupPresets: ConversationStarterConfig[]
+  builtinActions: ConversationStarterConfig[]
+}
+
+export type ConversationStarterCollectionKey = 'startupPresets' | 'builtinActions'
+
+export interface ConversationStarterListItem {
+  key: string
+  order: number
+  source: ConversationStarterCollectionKey
+  sourceIndex: number
+  starter: ConversationStarterConfig
+}
+
+export interface PartitionConversationStarterListItemsResult {
+  isSearchMode: boolean
+  favorites: ConversationStarterListItem[]
+  recentKeys: string[]
+  visibleRemaining: ConversationStarterListItem[]
+  totalRemainingCount: number
+  hiddenRemainingCount: number
+}
+
+const trimText = (value: string | undefined) => value?.trim() ?? ''
+
+export const getNewSessionGuideData = (configRes?: ConfigResponse): NewSessionGuideData => {
+  const general = configRes?.sources?.merged?.general
+  const conversation = configRes?.sources?.merged?.conversation
+
+  return {
+    announcements: general?.announcements ?? [],
+    startupPresets: conversation?.startupPresets ?? [],
+    builtinActions: conversation?.builtinActions ?? []
+  }
+}
+
+const buildConversationStarterListItemKey = (
+  starter: ConversationStarterConfig,
+  source: ConversationStarterCollectionKey,
+  sourceIndex: number
+) => {
+  const id = trimText(starter.id)
+  if (id !== '') {
+    return `${source}:${id}`
+  }
+
+  const fingerprint = [
+    trimText(starter.title),
+    trimText(starter.target),
+    trimText(starter.prompt)
+  ].filter(value => value !== '')
+
+  if (fingerprint.length > 0) {
+    return `${source}:${fingerprint.join('|')}`
+  }
+
+  return `${source}:index:${sourceIndex}`
+}
+
+export const buildConversationStarterListItems = (
+  startupPresets: ConversationStarterConfig[],
+  builtinActions: ConversationStarterConfig[]
+): ConversationStarterListItem[] => {
+  let order = 0
+
+  return [
+    ...startupPresets.map((starter, sourceIndex) => ({
+      key: buildConversationStarterListItemKey(starter, 'startupPresets', sourceIndex),
+      order: order++,
+      source: 'startupPresets' as const,
+      sourceIndex,
+      starter
+    })),
+    ...builtinActions.map((starter, sourceIndex) => ({
+      key: buildConversationStarterListItemKey(starter, 'builtinActions', sourceIndex),
+      order: order++,
+      source: 'builtinActions' as const,
+      sourceIndex,
+      starter
+    }))
+  ]
+}
+
+const normalizeSearchQuery = (value: string) => value.trim().toLowerCase()
+
+const buildConversationStarterSearchText = (item: ConversationStarterListItem) => {
+  const { starter } = item
+
+  return [
+    trimText(starter.title),
+    trimText(starter.description),
+    trimText(starter.prompt),
+    trimText(starter.target),
+    trimText(starter.targetLabel),
+    trimText(starter.targetDescription),
+    trimText(starter.model),
+    ...(starter.files?.map(path => trimText(path)) ?? []),
+    ...(starter.rules?.map(rule => trimText(rule)) ?? []),
+    ...(starter.skills?.map(skill => trimText(skill)) ?? [])
+  ]
+    .filter(value => value !== '')
+    .join(' ')
+    .toLowerCase()
+}
+
+export const partitionConversationStarterListItems = ({
+  items,
+  favoriteKeys,
+  recentKeys,
+  query,
+  remainingLimit
+}: {
+  items: ConversationStarterListItem[]
+  favoriteKeys: string[]
+  recentKeys: string[]
+  query: string
+  remainingLimit: number
+}): PartitionConversationStarterListItemsResult => {
+  const normalizedQuery = normalizeSearchQuery(query)
+  if (normalizedQuery !== '') {
+    const searchTerms = normalizedQuery.split(/\s+/).filter(term => term !== '')
+    const matchedItems = items.filter((item) => {
+      const searchText = buildConversationStarterSearchText(item)
+      return searchTerms.every(term => searchText.includes(term))
+    })
+
+    return {
+      isSearchMode: true,
+      favorites: [],
+      recentKeys: [],
+      visibleRemaining: matchedItems,
+      totalRemainingCount: matchedItems.length,
+      hiddenRemainingCount: 0
+    }
+  }
+
+  const favoriteSet = new Set(filterUniqueStrings(favoriteKeys))
+  const itemByKey = new Map(items.map(item => [item.key, item]))
+  const recentKeysByPriority = collectVisibleRecentKeys(recentKeys, new Set(itemByKey.keys()), 3)
+
+  const favorites = orderItemsByPriorityKeys(
+    items.filter(item => favoriteSet.has(item.key)),
+    recentKeysByPriority
+  )
+  const favoriteKeySet = new Set(favorites.map(item => item.key))
+  const recentRemainingKeys = recentKeysByPriority.filter(key => !favoriteKeySet.has(key))
+  const hiddenKeySet = new Set([...favoriteKeySet, ...recentRemainingKeys])
+  const remaining = orderItemsByPriorityKeys(
+    items.filter(item => !hiddenKeySet.has(item.key)),
+    []
+  )
+  const safeLimit = Math.max(0, remainingLimit)
+  const visibleRemaining = [
+    ...recentRemainingKeys.map(key => itemByKey.get(key)).filter(Boolean),
+    ...remaining
+  ] as ConversationStarterListItem[]
+
+  return {
+    isSearchMode: false,
+    favorites,
+    recentKeys: recentKeysByPriority,
+    visibleRemaining: visibleRemaining.slice(0, safeLimit),
+    totalRemainingCount: visibleRemaining.length,
+    hiddenRemainingCount: Math.max(0, visibleRemaining.length - safeLimit)
+  }
+}