@vibe-forge/client 0.8.4 → 0.10.0

package/src/components/sidebar/SidebarHeaderBatchActions.tsx

@@ -0,0 +1,81 @@
+import { Button, Checkbox, Popconfirm, Tooltip } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+interface SidebarHeaderBatchActionsProps {
+  isAllSelected: boolean
+  selectedCount: number
+  totalCount: number
+  onBatchArchive: () => void
+  onBatchDelete: () => void
+  onBatchStar: () => void
+  onSelectAll: (selected: boolean) => void
+}
+
+export function SidebarHeaderBatchActions({
+  isAllSelected,
+  selectedCount,
+  totalCount,
+  onBatchArchive,
+  onBatchDelete,
+  onBatchStar,
+  onSelectAll
+}: SidebarHeaderBatchActionsProps) {
+  const { t } = useTranslation()
+
+  return (
+    <div className='header-batch-actions'>
+      <Tooltip title={isAllSelected ? t('common.deselectAll') : t('common.selectAll')}>
+        <label className='batch-select-toggle'>
+          <Checkbox
+            checked={isAllSelected}
+            indeterminate={selectedCount > 0 && selectedCount < totalCount}
+            onChange={(e) => onSelectAll(e.target.checked)}
+          />
+        </label>
+      </Tooltip>
+      <Tooltip title={t('common.star')}>
+        <Button
+          className='sidebar-tool-btn is-icon-only'
+          type='text'
+          disabled={selectedCount === 0}
+          onClick={onBatchStar}
+          icon={<span className='material-symbols-rounded'>star</span>}
+        />
+      </Tooltip>
+      <Popconfirm
+        title={t('common.archiveConfirm', { count: selectedCount })}
+        onConfirm={onBatchArchive}
+        okText={t('common.confirm')}
+        cancelText={t('common.cancel')}
+        okButtonProps={{ danger: false }}
+        disabled={selectedCount === 0}
+      >
+        <Tooltip title={t('common.archive')}>
+          <Button
+            className='sidebar-tool-btn is-icon-only'
+            type='text'
+            disabled={selectedCount === 0}
+            icon={<span className='material-symbols-rounded'>archive</span>}
+          />
+        </Tooltip>
+      </Popconfirm>
+      <Popconfirm
+        title={t('common.deleteConfirm', { count: selectedCount })}
+        onConfirm={onBatchDelete}
+        okText={t('common.confirm')}
+        cancelText={t('common.cancel')}
+        okButtonProps={{ danger: true }}
+        disabled={selectedCount === 0}
+      >
+        <Tooltip title={t('common.delete')}>
+          <Button
+            className='sidebar-tool-btn is-icon-only is-danger'
+            type='text'
+            disabled={selectedCount === 0}
+            icon={<span className='material-symbols-rounded'>delete</span>}
+          />
+        </Tooltip>
+      </Popconfirm>
+    </div>
+  )
+}

package/src/components/sidebar/SidebarHeaderSearchActions.tsx

@@ -0,0 +1,176 @@
+import { Button, Input, Tooltip } from 'antd'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import type { SidebarSessionSortOrder } from '#~/hooks/use-sidebar-query-state'
+import { SidebarHeaderBatchActions } from './SidebarHeaderBatchActions'
+import { SidebarHeaderSelectField } from './SidebarHeaderSelectField'
+
+interface SidebarHeaderSearchActionsProps {
+  adapterFilters: string[]
+  availableAdapters: string[]
+  availableTags: string[]
+  hasActiveSearchControls: boolean
+  isBatchMode: boolean
+  searchQuery: string
+  selectedCount: number
+  shouldShowSearchActions: boolean
+  sortOrder: SidebarSessionSortOrder
+  sortSelection?: SidebarSessionSortOrder
+  tagFilters: string[]
+  totalCount: number
+  onAdapterFilterChange: (filters: string[]) => void
+  onBatchArchive: () => void
+  onBatchDelete: () => void
+  onBatchStar: () => void
+  onSearchChange: (query: string) => void
+  onSortOrderChange: (sort?: SidebarSessionSortOrder) => void
+  onSelectAll: (selected: boolean) => void
+  onTagFilterChange: (tags: string[]) => void
+  onToggleBatchMode: () => void
+  onToggleSearchActions: () => void
+}
+
+export function SidebarHeaderSearchActions({
+  adapterFilters,
+  availableAdapters,
+  availableTags,
+  hasActiveSearchControls,
+  isBatchMode,
+  searchQuery,
+  selectedCount,
+  shouldShowSearchActions,
+  sortOrder,
+  sortSelection,
+  tagFilters,
+  totalCount,
+  onAdapterFilterChange,
+  onBatchArchive,
+  onBatchDelete,
+  onBatchStar,
+  onSearchChange,
+  onSortOrderChange,
+  onSelectAll,
+  onTagFilterChange,
+  onToggleBatchMode,
+  onToggleSearchActions
+}: SidebarHeaderSearchActionsProps) {
+  const { t } = useTranslation()
+  const isAllSelected = totalCount > 0 && selectedCount === totalCount
+  const toOptions = useMemo(() => (values: string[]) => values.map((value) => ({ label: value, value })), [])
+  const filterSuffixIcon = <span className='material-symbols-rounded toolbar-filter-chevron'>expand_more</span>
+  const sortOptions = useMemo(
+    () => [
+      { label: t('automation.sortDesc'), value: 'desc' },
+      { label: t('automation.sortAsc'), value: 'asc' }
+    ],
+    [t]
+  )
+
+  return (
+    <>
+      <div className='header-search-row'>
+        <div className='search-input-wrap'>
+          <Input
+            className='search-input'
+            placeholder={t('common.search')}
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            prefix={<span className='material-symbols-rounded search-icon'>search</span>}
+            suffix={
+              <Tooltip title={t('common.searchActions')}>
+                <button
+                  type='button'
+                  className={`search-toggle-button ${shouldShowSearchActions ? 'is-open' : ''} ${
+                    hasActiveSearchControls ? 'has-active-filters' : ''
+                  }`}
+                  aria-label={t('common.searchActions')}
+                  onMouseDown={(event) => event.preventDefault()}
+                  onClick={onToggleSearchActions}
+                >
+                  <span className='material-symbols-rounded search-chevron'>expand_more</span>
+                </button>
+              </Tooltip>
+            }
+            allowClear
+          />
+        </div>
+      </div>
+      <div className={`header-search-actions ${shouldShowSearchActions ? 'is-open' : ''}`}>
+        <div className='header-search-actions-inner'>
+          <div className='header-toolbar-row'>
+            <div className='header-toolbar-leading'>
+              {isBatchMode
+                ? (
+                  <Tooltip title={t('common.cancelBatch')}>
+                    <Button
+                      className='sidebar-tool-btn is-icon-only'
+                      type='text'
+                      onClick={onToggleBatchMode}
+                      icon={<span className='material-symbols-rounded'>close</span>}
+                    />
+                  </Tooltip>
+                )
+                : (
+                  <Tooltip title={t('common.batchMode')}>
+                    <Button
+                      className='sidebar-tool-btn is-icon-only'
+                      type='text'
+                      onClick={onToggleBatchMode}
+                      icon={<span className='material-symbols-rounded'>checklist</span>}
+                    />
+                  </Tooltip>
+                )}
+            </div>
+            <div className='header-filter-stack'>
+              <SidebarHeaderSelectField
+                icon='sell'
+                mode='tags'
+                placeholder={t('common.allTags')}
+                options={toOptions(availableTags)}
+                value={tagFilters}
+                onChange={(value) => onTagFilterChange(value as string[])}
+                maxTagCount={1}
+                allowClear
+                suffixIcon={filterSuffixIcon}
+                tokenSeparators={[',']}
+              />
+              <SidebarHeaderSelectField
+                icon='extension'
+                mode='tags'
+                placeholder={t('common.allAdapters')}
+                options={toOptions(availableAdapters)}
+                value={adapterFilters}
+                onChange={(value) => onAdapterFilterChange(value as string[])}
+                maxTagCount={1}
+                allowClear
+                suffixIcon={filterSuffixIcon}
+                tokenSeparators={[',']}
+              />
+              <SidebarHeaderSelectField
+                icon='swap_vert'
+                placeholder={t('common.sort')}
+                options={sortOptions}
+                value={sortSelection}
+                onChange={(value) => onSortOrderChange(value as SidebarSessionSortOrder | undefined)}
+                allowClear
+                suffixIcon={filterSuffixIcon}
+              />
+            </div>
+          </div>
+          {isBatchMode && (
+            <SidebarHeaderBatchActions
+              isAllSelected={isAllSelected}
+              selectedCount={selectedCount}
+              totalCount={totalCount}
+              onBatchArchive={onBatchArchive}
+              onBatchDelete={onBatchDelete}
+              onBatchStar={onBatchStar}
+              onSelectAll={onSelectAll}
+            />
+          )}
+        </div>
+      </div>
+    </>
+  )
+}

package/src/components/sidebar/SidebarHeaderSelectField.tsx

@@ -0,0 +1,24 @@
+import { Select } from 'antd'
+import type { SelectProps } from 'antd'
+
+interface SidebarHeaderSelectFieldProps extends SelectProps {
+  icon: string
+}
+
+export function SidebarHeaderSelectField({
+  className,
+  icon,
+  ...selectProps
+}: SidebarHeaderSelectFieldProps) {
+  return (
+    <div className='toolbar-filter-control'>
+      <span className='material-symbols-rounded toolbar-filter-icon'>{icon}</span>
+      <Select
+        className={className == null || className === ''
+          ? 'toolbar-filter-select'
+          : `toolbar-filter-select ${className}`}
+        {...selectProps}
+      />
+    </div>
+  )
+}

package/src/components/sidebar/filter-utils.ts

@@ -0,0 +1,23 @@
+const escapeRegex = (value: string) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+
+const buildWildcardRegex = (pattern: string) => {
+  return new RegExp(`^${escapeRegex(pattern).replace(/\\\*/g, '.*')}$`, 'i')
+}
+
+const matchesPattern = (candidate: string, pattern: string) => {
+  const normalizedCandidate = candidate.trim()
+  const normalizedPattern = pattern.trim()
+
+  if (normalizedCandidate === '' || normalizedPattern === '') return false
+  if (normalizedPattern.includes('*')) {
+    return buildWildcardRegex(normalizedPattern).test(normalizedCandidate)
+  }
+
+  return normalizedCandidate.toLowerCase().includes(normalizedPattern.toLowerCase())
+}
+
+export const matchesAnyFilterPattern = (candidates: string[], patterns: string[]) => {
+  if (patterns.length === 0) return true
+
+  return patterns.some((pattern) => candidates.some((candidate) => matchesPattern(candidate, pattern)))
+}

package/src/components/workspace/ContextFilePicker.scss

@@ -0,0 +1,64 @@
+.context-file-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  &__body {
+    min-height: 320px;
+    max-height: 460px;
+    overflow: auto;
+  }
+
+  &__loading {
+    min-height: 320px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    color: var(--sub-text-color, #6b7280);
+    font-size: 13px;
+  }
+
+  &__switcher {
+    font-size: 18px;
+    color: var(--sub-text-color, #6b7280);
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+
+  .ant-tree {
+    background: transparent;
+    color: var(--text-color);
+  }
+
+  .ant-tree-list-holder-inner {
+    gap: 2px;
+  }
+
+  .ant-tree-node-content-wrapper {
+    min-height: 34px;
+    border-radius: 8px;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .ant-tree-checkbox + .ant-tree-node-content-wrapper:hover,
+  .ant-tree-node-content-wrapper:hover {
+    background: var(--tag-hover-bg, #f3f4f6);
+  }
+}
+
+.context-file-picker--inline {
+  .context-file-picker__body {
+    min-height: 240px;
+    max-height: 280px;
+  }
+
+  .context-file-picker__loading {
+    min-height: 240px;
+  }
+}

package/src/components/workspace/ContextFilePicker.tsx

@@ -0,0 +1,171 @@
+import './ContextFilePicker.scss'
+
+import { App, Button, Empty, Modal, Spin, Tree } from 'antd'
+import type { DataNode } from 'antd/es/tree'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { listWorkspaceTree } from '#~/api/workspace'
+
+export interface ContextPickerFile {
+  path: string
+  name?: string
+}
+
+interface ContextFileTreeNode extends DataNode {
+  key: string
+  path: string
+  title: string
+  children?: ContextFileTreeNode[]
+  isLeaf?: boolean
+  disableCheckbox?: boolean
+}
+
+const replaceNodeChildren = (
+  nodes: ContextFileTreeNode[],
+  targetPath: string,
+  children: ContextFileTreeNode[]
+): ContextFileTreeNode[] => {
+  return nodes.map((node) => {
+    if (node.path === targetPath) {
+      return {
+        ...node,
+        children
+      }
+    }
+    if (node.children == null) {
+      return node
+    }
+    return {
+      ...node,
+      children: replaceNodeChildren(node.children, targetPath, children)
+    }
+  })
+}
+
+const toTreeNodes = (entries: Awaited<ReturnType<typeof listWorkspaceTree>>['entries']): ContextFileTreeNode[] =>
+  entries.map(entry => ({
+    key: entry.path,
+    path: entry.path,
+    title: entry.name,
+    isLeaf: entry.type === 'file',
+    disableCheckbox: entry.type !== 'file'
+  }))
+
+const toPendingFiles = (paths: string[]): ContextPickerFile[] =>
+  paths.map(path => ({
+    path,
+    name: path.split('/').pop() ?? path
+  }))
+
+export function ContextFilePicker({
+  open,
+  selectedPaths,
+  variant = 'modal',
+  onCancel,
+  onConfirm
+}: {
+  open: boolean
+  selectedPaths: string[]
+  variant?: 'inline' | 'modal'
+  onCancel: () => void
+  onConfirm: (files: ContextPickerFile[]) => void
+}) {
+  const { t } = useTranslation()
+  const { message } = App.useApp()
+  const [checkedKeys, setCheckedKeys] = useState<string[]>(selectedPaths)
+  const [treeData, setTreeData] = useState<ContextFileTreeNode[]>([])
+  const [loadingRoot, setLoadingRoot] = useState(false)
+
+  useEffect(() => {
+    if (!open) {
+      return
+    }
+
+    setCheckedKeys(selectedPaths)
+    setLoadingRoot(true)
+    void listWorkspaceTree()
+      .then((result) => {
+        setTreeData(toTreeNodes(result.entries))
+      })
+      .catch(() => {
+        void message.error(t('chat.contextPickerLoadFailed'))
+      })
+      .finally(() => {
+        setLoadingRoot(false)
+      })
+  }, [message, open, selectedPaths, t])
+
+  const loadData = async (node: DataNode) => {
+    const path = String(node.key)
+    const result = await listWorkspaceTree(path)
+    setTreeData(prev => replaceNodeChildren(prev, path, toTreeNodes(result.entries)))
+  }
+
+  const body = (
+    <div className={`context-file-picker ${variant === 'inline' ? 'context-file-picker--inline' : ''}`.trim()}>
+      <div className='context-file-picker__body'>
+        {loadingRoot
+          ? (
+            <div className='context-file-picker__loading'>
+              <Spin size='small' />
+              <span>{t('chat.contextPickerLoading')}</span>
+            </div>
+          )
+          : treeData.length === 0
+          ? (
+            <Empty
+              image={Empty.PRESENTED_IMAGE_SIMPLE}
+              description={t('chat.contextPickerEmpty')}
+            />
+          )
+          : (
+            <Tree
+              blockNode
+              checkable
+              checkStrictly
+              treeData={treeData}
+              checkedKeys={checkedKeys}
+              loadData={loadData}
+              switcherIcon={
+                <span className='material-symbols-rounded context-file-picker__switcher'>chevron_right</span>
+              }
+              onCheck={(keys) => {
+                const nextKeys = Array.isArray(keys) ? keys : keys.checked
+                setCheckedKeys(nextKeys.map(String))
+              }}
+            />
+          )}
+      </div>
+      {variant === 'inline' && (
+        <div className='context-file-picker__footer'>
+          <Button size='small' onClick={onCancel}>
+            {t('common.cancel')}
+          </Button>
+          <Button type='primary' size='small' onClick={() => onConfirm(toPendingFiles(checkedKeys))}>
+            {t('chat.contextPickerConfirm')}
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+
+  if (variant === 'inline') {
+    return body
+  }
+
+  return (
+    <Modal
+      open={open}
+      title={t('chat.contextPickerTitle')}
+      okText={t('chat.contextPickerConfirm')}
+      cancelText={t('common.cancel')}
+      width={640}
+      onCancel={onCancel}
+      onOk={() => onConfirm(toPendingFiles(checkedKeys))}
+      className='context-file-picker-modal'
+    >
+      {body}
+    </Modal>
+  )
+}

package/src/connectionManager.ts

@@ -146,9 +146,11 @@ class ConnectionManager {
     const ws = this.sockets.get(sessionId)
     if (ws && ws.readyState === WebSocket.OPEN) {
       ws.send(typeof data === 'string' ? data : JSON.stringify(data))
-    } else {
-      console.warn(`Cannot send message: Session ${sessionId} not connected or ready`)
+      return true
     }
+
+    console.warn(`Cannot send message: Session ${sessionId} not connected or ready`)
+    return false
   }
 
   private normalizeParams(params: Record<string, string>) {

package/src/hooks/chat/interaction-state.ts

@@ -0,0 +1,104 @@
+import type { AskUserQuestionParams, Session, WSEvent } from '@vibe-forge/core'
+
+export interface InteractionRequestState {
+  id: string
+  payload: AskUserQuestionParams
+}
+
+export interface ChatErrorBannerState {
+  kind: 'connection' | 'session'
+  message: string
+}
+
+export interface FatalSessionErrorState {
+  message: string
+  code?: string
+}
+
+export const getFatalSessionError = (event: WSEvent): FatalSessionErrorState | null => {
+  if (event?.type !== 'error') {
+    return null
+  }
+
+  if (event.data != null && typeof event.data === 'object' && 'fatal' in event.data && event.data.fatal === false) {
+    return null
+  }
+
+  if (event.data != null && typeof event.data === 'object' && 'message' in event.data) {
+    const message = event.data.message
+    if (typeof message === 'string' && message.trim() !== '') {
+      return {
+        message,
+        code: typeof event.data.code === 'string' && event.data.code.trim() !== ''
+          ? event.data.code
+          : undefined
+      }
+    }
+  }
+
+  if (typeof event.message === 'string' && event.message.trim() !== '') {
+    return { message: event.message }
+  }
+
+  return null
+}
+
+export const applyInteractionStateEvent = (
+  currentInteraction: InteractionRequestState | null,
+  data: WSEvent
+) => {
+  if (data.type === 'interaction_request') {
+    return { id: data.id, payload: data.payload }
+  }
+
+  if (data.type === 'interaction_response') {
+    return currentInteraction?.id === data.id || currentInteraction == null
+      ? null
+      : currentInteraction
+  }
+
+  if (data.type === 'session_updated') {
+    const session = data.session as Session | { id: string; isDeleted: boolean }
+    if ('isDeleted' in session) {
+      return null
+    }
+    if (session.status !== 'waiting_input') {
+      return null
+    }
+  }
+
+  if (data.type === 'error' && data.data != null && typeof data.data === 'object' && 'fatal' in data.data) {
+    return (data.data as { fatal?: boolean }).fatal !== false ? null : currentInteraction
+  }
+
+  return currentInteraction
+}
+
+export const restoreInteractionStateFromHistory = (
+  events: WSEvent[],
+  fallbackInteraction: InteractionRequestState | null,
+  sessionStatus?: Session['status']
+) => {
+  let currentInteraction: InteractionRequestState | null = null
+
+  for (const event of events) {
+    currentInteraction = applyInteractionStateEvent(currentInteraction, event)
+  }
+
+  if (currentInteraction != null) {
+    return currentInteraction
+  }
+
+  return sessionStatus === 'waiting_input' ? fallbackInteraction : null
+}
+
+export const findLatestFatalError = (events: WSEvent[]): FatalSessionErrorState | null => {
+  for (let index = events.length - 1; index >= 0; index -= 1) {
+    const resolved = getFatalSessionError(events[index]!)
+    if (resolved != null) {
+      return resolved
+    }
+  }
+
+  return null
+}