@vibe-forge/client 0.11.3 → 1.0.0

package/src/components/chat/git-controls/use-chat-git-controls.ts

@@ -1,16 +1,21 @@
+/* eslint-disable max-lines */
+
 import { App } from 'antd'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 
-import type { GitBranchListResult, GitBranchSummary, GitRepositoryState } from '@vibe-forge/types'
+import type { GitBranchListResult, GitBranchSummary, GitRepositoryState, SessionWorkspace } from '@vibe-forge/types'
 
 import {
   checkoutSessionGitBranch,
   createSessionGitBranch,
+  createSessionManagedWorktree,
   getApiErrorMessage,
   getSessionGitState,
-  listSessionGitBranches
+  getSessionWorkspace,
+  listSessionGitBranches,
+  transferSessionWorkspaceToLocal
 } from '#~/api'
 
 import { filterGitBranches, getGitBranchViewState, hasExactGitBranchMatch } from './git-branch-utils'
@@ -20,7 +25,15 @@ import { useChatGitCommit } from './use-chat-git-commit'
 import { useChatGitPushState } from './use-chat-git-push-state'
 import { useChatGitWorktrees } from './use-chat-git-worktrees'
 
-type GitActionKind = 'branch-create' | 'branch-switch' | 'commit' | 'commit-and-push' | 'push' | 'sync'
+type GitActionKind =
+  | 'branch-create'
+  | 'branch-switch'
+  | 'commit'
+  | 'commit-and-push'
+  | 'push'
+  | 'sync'
+  | 'workspace-create'
+  | 'workspace-transfer'
 
 export function useChatGitControls(sessionId: string) {
   const { t } = useTranslation()
@@ -32,6 +45,11 @@ export function useChatGitControls(sessionId: string) {
   const [pendingAction, setPendingAction] = useState<GitActionKind | null>(null)
   const push = useChatGitPushState()
 
+  const { data: workspaceData, mutate: mutateWorkspaceData } = useSWR<{ workspace: SessionWorkspace }>(
+    ['session-workspace', sessionId],
+    () => getSessionWorkspace(sessionId),
+    { revalidateOnFocus: false }
+  )
   const { data: repoState, mutate: mutateRepoState } = useSWR<GitRepositoryState>(
     ['session-git-state', sessionId],
     () => getSessionGitState(sessionId),
@@ -75,6 +93,15 @@ export function useChatGitControls(sessionId: string) {
     }
   }
 
+  const refreshWorkspaceState = async (nextWorkspace?: SessionWorkspace) => {
+    if (nextWorkspace != null) {
+      await mutateWorkspaceData({ workspace: nextWorkspace }, { revalidate: false })
+      return
+    }
+
+    await mutateWorkspaceData()
+  }
+
   const commit = useChatGitCommit({
     closeOperationsMenu: () => setOperationsMenuOpen(false),
     refreshGitState,
@@ -116,6 +143,26 @@ export function useChatGitControls(sessionId: string) {
       task
     })
 
+  const runWorkspaceMutation = async (
+    action: Extract<GitActionKind, 'workspace-create' | 'workspace-transfer'>,
+    task: () => Promise<{ workspace: SessionWorkspace }>,
+    successMessage: string,
+    onSuccess?: () => void
+  ) => {
+    setPendingAction(action)
+    try {
+      const result = await task()
+      await refreshWorkspaceState(result.workspace)
+      await refreshGitState()
+      onSuccess?.()
+      void message.success(successMessage)
+    } catch (error) {
+      void message.error(getApiErrorMessage(error, t('common.operationFailed')))
+    } finally {
+      setPendingAction(null)
+    }
+  }
+
   const closeBranchMenu = () => {
     setBranchMenuOpen(false)
     setBranchQuery('')
@@ -163,6 +210,29 @@ export function useChatGitControls(sessionId: string) {
     })
   }
 
+  const handleCreateManagedWorktree = () => {
+    void runWorkspaceMutation(
+      'workspace-create',
+      () => createSessionManagedWorktree(sessionId),
+      t('chat.sessionWorkspaceCreateWorktreeSuccess'),
+      () => {
+        worktree.setWorktreeMenuOpen(false)
+        setBranchMenuOpen(false)
+      }
+    )
+  }
+
+  const handleTransferWorkspaceToLocal = () => {
+    void runWorkspaceMutation(
+      'workspace-transfer',
+      () => transferSessionWorkspaceToLocal(sessionId),
+      t('chat.sessionWorkspaceTransferToLocalSuccess'),
+      () => {
+        worktree.setWorktreeMenuOpen(false)
+      }
+    )
+  }
+
   return {
     branchMenuOpen,
     branchQuery,
@@ -170,8 +240,10 @@ export function useChatGitControls(sessionId: string) {
     currentBranchLabel,
     handleBranchSwitch,
     handleCreateBranch,
+    handleCreateManagedWorktree,
     handleOpenPushModal,
     handlePush,
+    handleTransferWorkspaceToLocal,
     hasBranchResults,
     isBranchListLoading,
     isBusy,
@@ -183,6 +255,7 @@ export function useChatGitControls(sessionId: string) {
     pushModalOpen: push.pushModalOpen,
     remoteBranches,
     repoState,
+    workspace: workspaceData?.workspace,
     runMutation,
     showWorktreeButton: worktree.showWorktreeButton,
     worktreeMenuOpen: worktree.worktreeMenuOpen,

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

@@ -21,6 +21,7 @@ interface MessageContextMenuProps {
   isEditing: boolean
   message: ChatMessage
   sessionId?: string
+  trigger?: ('click' | 'contextMenu')[]
   onFork: () => void
   onRecall: () => void
   onStartEditing: () => void
@@ -39,6 +40,7 @@ export function MessageContextMenu({
   isEditing,
   message: sourceMessage,
   sessionId,
+  trigger = ['contextMenu'],
   onFork,
   onRecall,
   onStartEditing
@@ -86,7 +88,7 @@ export function MessageContextMenu({
 
   return (
     <Dropdown
-      trigger={['contextMenu']}
+      trigger={trigger}
       open={open}
       onOpenChange={(nextOpen) => {
         setOpen(nextOpen)

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

@@ -34,10 +34,22 @@
     margin-top: 4px;
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
     gap: 8px;
+    min-width: 0;
     font-size: 11px;
     color: var(--sub-text-color, #9ca3af);
 
+    > * {
+      min-width: 0;
+    }
+
+    .msg-model,
+    .msg-usage,
+    .timestamp {
+      overflow-wrap: anywhere;
+    }
+
     .timestamp {
       user-select: none;
       cursor: pointer;
@@ -141,6 +153,13 @@
   }
 }
 
+.chat-message-user.has-compact-menu,
+.chat-message-assistant.has-compact-menu {
+  .msg-footer {
+    opacity: 1;
+  }
+}
+
 .msg-action-button__label {
   font-size: 11px;
   line-height: 1;
@@ -170,6 +189,12 @@
   }
 }
 
+.msg-action-button--menu {
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+}
+
 .chat-message-user {
   flex-direction: row-reverse;
   gap: 8px;
@@ -246,8 +271,9 @@ html.dark {
 }
 
 .message-image {
-  display: inline-block;
-  max-width: 360px;
+  display: block;
+  width: min(100%, 360px);
+  max-width: 100%;
   border-radius: 10px;
   overflow: hidden;
   border: 1px solid var(--border-color);
@@ -255,6 +281,7 @@ html.dark {
 
 .message-image img {
   display: block;
+  width: 100%;
   max-width: 100%;
   height: auto;
 }
@@ -292,7 +319,9 @@ html.dark {
   font-size: 14px;
   line-height: 1.5;
   word-wrap: break-word;
+  overflow-wrap: anywhere;
   width: 100%;
+  min-width: 0;
 
   p {
     margin: 0 0 4px 0;
@@ -355,14 +384,28 @@ html.dark {
     color: #6b7280;
   }
 
+  .markdown-table-wrapper {
+    max-width: 100%;
+    margin: 12px 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-gutter: stable both-edges;
+  }
+
   table {
     border-collapse: collapse;
-    width: 100%;
-    margin: 12px 0;
+    width: max-content;
+    min-width: 100%;
+    margin: 0;
 
     th, td {
       border: 1px solid #e5e7eb;
       padding: 6px 13px;
+      vertical-align: top;
+      overflow-wrap: anywhere;
     }
 
     tr:nth-child(2n) {
@@ -410,3 +453,34 @@ html.dark {
     opacity: 1;
   }
 }
+
+@media (max-width: 960px) {
+  .chat-message-user, .chat-message-assistant {
+    scroll-margin-top: 64px;
+
+    .msg-footer {
+      gap: 6px;
+      font-size: 10px;
+    }
+  }
+
+  .chat-message-user, .chat-message-assistant {
+    &.is-targeted {
+      scroll-margin-top: 76px;
+
+      .bubble {
+        outline-offset: 4px;
+      }
+    }
+  }
+
+  .message-context-file {
+    width: 100%;
+  }
+
+  .markdown-body {
+    .markdown-table-wrapper {
+      margin: 8px 0;
+    }
+  }
+}

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

@@ -30,6 +30,8 @@ interface MessageItemProps {
   sessionInfo?: SessionInfo | null
   isSessionBusy: boolean
   isEditing: boolean
+  isCompactLayout: boolean
+  isTouchInteraction: boolean
   showAssistantActions: boolean
   onEditMessage: (messageId: string, content: string | ChatMessageContent[]) => Promise<boolean>
   onRecallMessage: (messageId: string) => Promise<boolean>
@@ -53,6 +55,8 @@ function MessageItemComponent({
   sessionInfo,
   isSessionBusy,
   isEditing,
+  isCompactLayout,
+  isTouchInteraction,
   showAssistantActions,
   onEditMessage,
   onRecallMessage,
@@ -80,6 +84,7 @@ function MessageItemComponent({
   const canFork = isPersistedMessage && !isSessionBusy && isUser
   const canCopy = copyableText != null
   const shouldShowAssistantActions = !isUser && showAssistantActions
+  const showCompactActionMenu = isCompactLayout || isTouchInteraction
 
   useEffect(() => {
     setIsSubmitting(false)
@@ -384,6 +389,36 @@ function MessageItemComponent({
     </>
   )
 
+  const compactActionMenu = (
+    <MessageContextMenu
+      anchorId={anchorId}
+      canEdit={canEdit}
+      canFork={canFork}
+      canRecall={canRecall}
+      copyableText={copyableText}
+      isDebugMode={isDebugMode}
+      isEditing={isEditing}
+      message={originalMessage}
+      sessionId={sessionId}
+      trigger={['click']}
+      onFork={handleFork}
+      onRecall={handleRecall}
+      onStartEditing={handleStartEdit}
+    >
+      <button
+        type='button'
+        className='msg-action-button msg-action-button--menu'
+        title={t('common.moreActions')}
+        aria-label={t('common.moreActions')}
+        onClick={(event) => {
+          event.stopPropagation()
+        }}
+      >
+        <span className='material-symbols-rounded'>more_horiz</span>
+      </button>
+    </MessageContextMenu>
+  )
+
   return (
     <MessageContextMenu
       anchorId={anchorId}
@@ -404,13 +439,15 @@ function MessageItemComponent({
         id={anchorId}
         className={`${isUser ? 'chat-message-user' : 'chat-message-assistant'} ${isEditing ? 'is-editing' : ''} ${
           !isFirstInGroup ? 'consecutive' : ''
-        } ${isActionsVisible ? 'is-actions-visible' : ''} ${isTargeted ? 'is-targeted' : ''}`}
+        } ${isActionsVisible ? 'is-actions-visible' : ''} ${isTargeted ? 'is-targeted' : ''} ${
+          showCompactActionMenu ? 'has-compact-menu' : ''
+        }`}
         data-message-id={originalMessage.id}
         onPointerEnter={handleActionsPointerEnter}
         onPointerLeave={handleActionsPointerLeave}
       >
         <div className={`message-body-container ${isEditing ? 'is-editing' : ''}`}>
-          {isUser && !isEditing && (
+          {isUser && !isEditing && !showCompactActionMenu && (
             <div className='message-side-actions'>
               {actionButtons}
             </div>
@@ -421,6 +458,7 @@ function MessageItemComponent({
                 <div className='message-inline-editor'>
                   <Sender
                     variant='inline-edit'
+                    sessionId={sessionId}
                     sessionInfo={sessionInfo}
                     initialContent={editableContent}
                     submitLabel={t('chat.send')}
@@ -439,7 +477,11 @@ function MessageItemComponent({
           </div>
           {!isEditing && (
             <MessageFooter msg={originalMessage} isUser={isUser}>
-              {shouldShowAssistantActions ? actionButtons : undefined}
+              {showCompactActionMenu
+                ? compactActionMenu
+                : shouldShowAssistantActions
+                ? actionButtons
+                : undefined}
             </MessageFooter>
           )}
         </div>
@@ -454,6 +496,8 @@ const areMessageItemPropsEqual = (prev: MessageItemProps, next: MessageItemProps
     prev.isTargeted === next.isTargeted &&
     prev.isSessionBusy === next.isSessionBusy &&
     prev.isEditing === next.isEditing &&
+    prev.isCompactLayout === next.isCompactLayout &&
+    prev.isTouchInteraction === next.isTouchInteraction &&
     prev.sessionId === next.sessionId &&
     prev.sessionInfo === next.sessionInfo &&
     prev.showAssistantActions === next.showAssistantActions &&

package/src/components/chat/sender/@components/adapter-select/AdapterSelectControl.scss

@@ -92,3 +92,18 @@
   font-size: 15px;
   line-height: 1;
 }
+
+@media (max-width: 960px) {
+  .adapter-select,
+  .adapter-select--locked {
+    width: var(--sender-control-height);
+    min-width: var(--sender-control-height);
+  }
+
+  .adapter-option__icon,
+  .adapter-option__icon--fallback {
+    width: 14px;
+    height: 14px;
+    margin: 0 auto;
+  }
+}

package/src/components/chat/sender/@components/reference-actions/ReferenceActionsControl.scss

@@ -21,6 +21,23 @@
   }
 }
 
+@media (max-width: 960px) {
+  .toolbar-btn.toolbar-btn--reference {
+    width: var(--sender-control-height);
+    min-width: var(--sender-control-height);
+    height: var(--sender-control-height);
+    padding: 0 !important;
+    justify-content: center;
+
+    .toolbar-btn__icon-shell {
+      width: 100%;
+      min-width: 100%;
+      height: 100%;
+      border-radius: var(--sender-control-radius);
+    }
+  }
+}
+
 .reference-actions-popover,
 .reference-actions-submenu-popover {
   .ant-popover-inner {

package/src/components/chat/sender/@components/reference-actions/ReferencePermissionActionsPopover.tsx

@@ -1,6 +1,8 @@
 import { Popover } from 'antd'
 import { useTranslation } from 'react-i18next'
 
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
+
 import type {
   SenderToolbarData,
   SenderToolbarHandlers,
@@ -27,6 +29,7 @@ export function ReferencePermissionActionsPopover({
   >
 }) {
   const { t } = useTranslation()
+  const { isTouchInteraction } = useResponsiveLayout()
   const { showReferenceActions, showPermissionActions, permissionMode } = state
   const { permissionModeOptions } = data
   const { referenceMenuNavigation, permissionMenuNavigation } = refs
@@ -81,7 +84,7 @@ export function ReferencePermissionActionsPopover({
         onShowPermissionActionsChange(nextOpen)
       }}
       placement='rightTop'
-      trigger={['hover', 'click']}
+      trigger={isTouchInteraction ? ['click'] : ['hover', 'click']}
       classNames={{ root: 'reference-actions-submenu-popover' }}
       destroyOnHidden
       arrow={false}

package/src/components/chat/sender/@components/sender-attachments/SenderAttachments.scss

@@ -4,6 +4,7 @@
   gap: 6px;
   padding: 2px 0 8px;
   align-items: flex-start;
+  min-width: 0;
 }
 
 .pending-attachments__files,
@@ -12,6 +13,7 @@
   display: flex;
   gap: 6px;
   align-items: flex-start;
+  min-width: 0;
 }
 
 .pending-attachments__files {
@@ -77,10 +79,11 @@
 }
 
 .pending-context-file {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   width: 100%;
+  min-width: 0;
   align-items: center;
-  justify-content: space-between;
   gap: 6px;
   padding: 5px 8px;
   border: 1px solid rgba(148, 163, 184, .2);
@@ -142,12 +145,15 @@
   align-items: center;
   gap: 8px;
   flex-shrink: 0;
+  min-width: 0;
+  justify-self: end;
 }
 
 .pending-context-file__size {
   font-size: 9px;
   font-weight: 600;
   color: var(--sub-text-color, #6b7280);
+  white-space: nowrap;
 }
 
 .pending-context-file__remove {
@@ -218,7 +224,14 @@ html.dark {
 
 @media (max-width: 640px) {
   .pending-context-file {
+    grid-template-columns: minmax(0, 1fr);
+    align-items: stretch;
+  }
+
+  .pending-context-file__actions {
     width: 100%;
+    justify-content: space-between;
+    justify-self: stretch;
   }
 
   .pending-attachments__images {

package/src/components/chat/sender/@components/sender-body/SenderBody.tsx

@@ -28,6 +28,7 @@ export function SenderBody({
   onRemovePendingImage,
   onRemovePendingFile,
   editorRef,
+  sessionId,
   sessionInfo,
   placeholder,
   input,
@@ -55,6 +56,7 @@ export function SenderBody({
   onRemovePendingImage: (id: string) => void
   onRemovePendingFile: (path: string) => void
   editorRef: MutableRefObject<SenderEditorHandle | null>
+  sessionId?: string
   sessionInfo?: SessionInfo | null
   placeholder: string
   input: string
@@ -110,6 +112,7 @@ export function SenderBody({
       {!isInlineEdit && (
         <ContextFilePicker
           open={showContextPicker}
+          sessionId={sessionId}
           selectedPaths={pendingFiles.map(file => file.path)}
           onCancel={onCancelContextPicker}
           onConfirm={onConfirmContextPicker}

package/src/components/chat/sender/@components/sender-monaco-editor/use-sender-monaco-theme.ts

@@ -1,19 +1,68 @@
+import * as monacoApi from 'monaco-editor'
+import type { editor as MonacoEditorNamespace } from 'monaco-editor'
 import { useEffect, useState } from 'react'
 
-const getThemeName = () => (document.documentElement.classList.contains('dark') ? 'vs-dark' : 'vs')
+const SENDER_MONACO_LIGHT_THEME = 'vf-sender-light'
+const SENDER_MONACO_DARK_THEME = 'vf-sender-dark'
+const HEX_COLOR_PATTERN = /^#(?:[\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/i
+
+const readCssColor = (styles: CSSStyleDeclaration, name: string, fallback: string) => {
+  const value = styles.getPropertyValue(name).trim()
+
+  if (HEX_COLOR_PATTERN.test(value)) {
+    return value
+  }
+
+  return fallback
+}
+
+const buildSenderMonacoTheme = (isDark: boolean): MonacoEditorNamespace.IStandaloneThemeData => {
+  const styles = window.getComputedStyle(document.documentElement)
+  const background = readCssColor(styles, '--bg-color', isDark ? '#141414' : '#ffffff')
+  const foreground = readCssColor(styles, '--text-color', isDark ? '#ffffff' : '#000000')
+  const placeholder = readCssColor(styles, '--placeholder-color', isDark ? '#575859' : '#9ca3af')
+  const primaryColor = readCssColor(styles, '--primary-color', isDark ? '#3b82f6' : '#2563eb')
+  const selectionBackground = readCssColor(styles, '--primary-soft-bg', isDark ? '#111b26' : '#eff6ff')
+
+  return {
+    base: isDark ? 'vs-dark' : 'vs',
+    colors: {
+      'editor.background': background,
+      'editor.foreground': foreground,
+      'editor.inactiveSelectionBackground': selectionBackground,
+      'editor.placeholder.foreground': placeholder,
+      'editor.selectionBackground': selectionBackground,
+      'editorCursor.foreground': primaryColor
+    },
+    inherit: false,
+    rules: []
+  }
+}
+
+const defineSenderMonacoTheme = (isDark: boolean) => {
+  const themeName = isDark ? SENDER_MONACO_DARK_THEME : SENDER_MONACO_LIGHT_THEME
+
+  monacoApi.editor.defineTheme(themeName, buildSenderMonacoTheme(isDark))
+
+  return themeName
+}
+
+const getThemeName = () => defineSenderMonacoTheme(document.documentElement.classList.contains('dark'))
 
 export const useSenderMonacoTheme = () => {
   const [themeName, setThemeName] = useState(getThemeName)
 
   useEffect(() => {
-    const observer = new MutationObserver(() => {
+    const syncThemeName = () => {
       setThemeName(getThemeName())
-    })
+    }
+    const observer = new MutationObserver(syncThemeName)
 
     observer.observe(document.documentElement, {
       attributes: true,
       attributeFilter: ['class']
     })
+    syncThemeName()
 
     return () => {
       observer.disconnect()

package/src/components/chat/sender/@components/sender-submit-action/SenderSubmitAction.scss

@@ -149,3 +149,15 @@
     flex: 0 0 auto;
   }
 }
+
+@media (max-width: 960px) {
+  .chat-send-btn {
+    width: 24px;
+    min-width: 24px;
+    height: 24px;
+
+    .material-symbols-rounded {
+      font-size: 14px;
+    }
+  }
+}

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

@@ -69,3 +69,24 @@
     opacity: .56;
   }
 }
+
+@media (max-width: 960px) {
+  .model-select,
+  .effort-select {
+    .ant-select-arrow {
+      width: 20px;
+      min-width: 20px;
+      flex: 0 0 20px;
+    }
+
+    &.ant-select-single .ant-select-selector {
+      padding-left: 6px !important;
+      padding-inline-start: 6px !important;
+    }
+
+    .ant-select-selection-item,
+    .ant-select-selection-placeholder {
+      font-size: 11px;
+    }
+  }
+}