@vibe-forge/client 2.0.0 → 2.0.1

package/src/components/workspace/project-file-tree/use-project-file-tree-data.ts

@@ -0,0 +1,197 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { listSessionWorkspaceTree, listWorkspaceTree } from '#~/api'
+
+import {
+  collectProjectFileTreeDirectoryPaths,
+  getProjectFileTreeAncestorDirectoryPaths,
+  loadProjectFileTreeDirectoryRecursive,
+  replaceProjectFileTreeNodeChildren,
+  toProjectFileTreeNodes
+} from './project-file-tree-helpers'
+import type { ProjectFileTreeCommand, ProjectFileTreeNode } from './project-file-tree-types'
+
+export const useProjectFileTreeData = ({
+  command,
+  refreshKey,
+  sessionId
+}: {
+  command?: ProjectFileTreeCommand | null
+  refreshKey: number
+  sessionId?: string
+}) => {
+  const [treeData, setTreeData] = useState<ProjectFileTreeNode[]>([])
+  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(new Set())
+  const [loadingPaths, setLoadingPaths] = useState<Set<string>>(new Set())
+  const [hasLoadedTree, setHasLoadedTree] = useState(false)
+  const [hasTreeError, setHasTreeError] = useState(false)
+  const [isRootLoading, setIsRootLoading] = useState(false)
+  const treeContainerRef = useRef<HTMLDivElement | null>(null)
+  const treeDataRef = useRef(treeData)
+  const treeOperationIdRef = useRef(0)
+
+  const loadWorkspaceTree = useCallback(async (path?: string) => {
+    if (sessionId != null && sessionId !== '') {
+      return await listSessionWorkspaceTree(sessionId, path)
+    }
+    return await listWorkspaceTree(path)
+  }, [sessionId])
+
+  const scrollTreePathIntoView = useCallback((path?: string) => {
+    if (path == null || path === '') {
+      return
+    }
+
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => {
+        const rows = treeContainerRef.current?.querySelectorAll<HTMLElement>('[data-workspace-tree-path]') ?? []
+        const target = Array.from(rows).find(row => row.dataset.workspaceTreePath === path)
+        target?.scrollIntoView({ block: 'center', inline: 'nearest' })
+      })
+    })
+  }, [])
+
+  const loadRootTree = useCallback(async () => {
+    const operationId = treeOperationIdRef.current + 1
+    treeOperationIdRef.current = operationId
+    setHasTreeError(false)
+    setExpandedPaths(new Set())
+    setIsRootLoading(true)
+    try {
+      const result = await loadWorkspaceTree()
+      if (treeOperationIdRef.current !== operationId) {
+        return
+      }
+      setTreeData(toProjectFileTreeNodes(result.entries))
+      setHasLoadedTree(true)
+    } catch {
+      if (treeOperationIdRef.current === operationId) {
+        setTreeData([])
+        setHasLoadedTree(true)
+        setHasTreeError(true)
+      }
+    } finally {
+      if (treeOperationIdRef.current === operationId) {
+        setIsRootLoading(false)
+      }
+    }
+  }, [loadWorkspaceTree])
+
+  useEffect(() => {
+    treeDataRef.current = treeData
+  }, [treeData])
+
+  useEffect(() => {
+    void loadRootTree()
+  }, [loadRootTree, refreshKey])
+
+  useEffect(() => {
+    if (command == null) {
+      return
+    }
+
+    if (command.action === 'collapse') {
+      treeOperationIdRef.current += 1
+      setExpandedPaths(new Set())
+      return
+    }
+
+    let isCancelled = false
+    const isCurrentOperation = (operationId: number) => !isCancelled && treeOperationIdRef.current === operationId
+    const runLocateFile = async () => {
+      if (command.path == null || command.path === '') {
+        return
+      }
+      const ancestorPaths = getProjectFileTreeAncestorDirectoryPaths(command.path)
+      const operationId = treeOperationIdRef.current + 1
+      treeOperationIdRef.current = operationId
+      setHasTreeError(false)
+      try {
+        let nextTreeData = treeDataRef.current
+        if (nextTreeData.length === 0) {
+          nextTreeData = toProjectFileTreeNodes((await loadWorkspaceTree()).entries)
+        }
+        for (const path of ancestorPaths) {
+          const result = await loadWorkspaceTree(path)
+          nextTreeData = replaceProjectFileTreeNodeChildren(
+            nextTreeData,
+            path,
+            toProjectFileTreeNodes(result.entries)
+          )
+        }
+        if (!isCurrentOperation(operationId)) {
+          return
+        }
+        setTreeData(nextTreeData)
+        setHasLoadedTree(true)
+        setExpandedPaths(prev => new Set([...prev, ...ancestorPaths]))
+        scrollTreePathIntoView(command.path)
+      } catch {
+        if (isCurrentOperation(operationId)) {
+          setHasLoadedTree(true)
+          setHasTreeError(true)
+        }
+      }
+    }
+    const runExpandAll = async () => {
+      const operationId = treeOperationIdRef.current + 1
+      treeOperationIdRef.current = operationId
+      setHasTreeError(false)
+      try {
+        const nextTreeData = await Promise.all(
+          treeDataRef.current.map(node => loadProjectFileTreeDirectoryRecursive(node, loadWorkspaceTree))
+        )
+        if (!isCurrentOperation(operationId)) {
+          return
+        }
+        setTreeData(nextTreeData)
+        setHasLoadedTree(true)
+        setExpandedPaths(new Set(collectProjectFileTreeDirectoryPaths(nextTreeData)))
+      } catch {
+        if (isCurrentOperation(operationId)) {
+          setHasLoadedTree(true)
+          setHasTreeError(true)
+        }
+      }
+    }
+
+    void (command.action === 'locate' ? runLocateFile() : runExpandAll())
+
+    return () => {
+      isCancelled = true
+    }
+  }, [command, loadWorkspaceTree, scrollTreePathIntoView])
+
+  const handleToggleDirectory = useCallback(async (node: ProjectFileTreeNode) => {
+    if (expandedPaths.has(node.path)) {
+      setExpandedPaths(prev => new Set(Array.from(prev).filter(path => path !== node.path)))
+      return
+    }
+
+    setExpandedPaths(prev => new Set(prev).add(node.path))
+    if (node.children != null) {
+      return
+    }
+
+    setLoadingPaths(prev => new Set(prev).add(node.path))
+    try {
+      const result = await loadWorkspaceTree(node.path)
+      setTreeData(prev => replaceProjectFileTreeNodeChildren(prev, node.path, toProjectFileTreeNodes(result.entries)))
+    } catch {
+      setHasTreeError(true)
+    } finally {
+      setLoadingPaths(prev => new Set(Array.from(prev).filter(path => path !== node.path)))
+    }
+  }, [expandedPaths, loadWorkspaceTree])
+
+  return {
+    expandedPaths,
+    handleToggleDirectory,
+    hasLoadedTree,
+    hasTreeError,
+    isRootLoading,
+    loadingPaths,
+    treeContainerRef,
+    treeData
+  }
+}

package/src/components/workspace/project-file-tree/use-project-file-tree-selection.ts

@@ -0,0 +1,144 @@
+import type { MouseEvent } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
+
+import { canSelectProjectFileTreeNode } from './project-file-tree-helpers'
+import type {
+  ProjectFileTreeNode,
+  ProjectFileTreeSelectableTypes,
+  ProjectFileTreeSelection,
+  ProjectFileTreeSelectionMode
+} from './project-file-tree-types'
+
+const uniqueNodes = (nodes: ProjectFileTreeNode[]) => {
+  const seen = new Set<string>()
+  const result: ProjectFileTreeNode[] = []
+  for (const node of nodes) {
+    if (seen.has(node.path)) {
+      continue
+    }
+    seen.add(node.path)
+    result.push(node)
+  }
+  return result
+}
+
+const getNodesByPaths = (paths: string[], visibleNodes: ProjectFileTreeNode[]) => {
+  const nodeByPath = new Map(visibleNodes.map(node => [node.path, node]))
+  return paths
+    .map(path => nodeByPath.get(path))
+    .filter((node): node is ProjectFileTreeNode => node != null)
+}
+
+export const useProjectFileTreeSelection = ({
+  activePath,
+  onSelectionChange,
+  selectableTypes,
+  selectedPaths,
+  selectionMode,
+  visibleNodes
+}: {
+  activePath?: string | null
+  onSelectionChange?: (selection: ProjectFileTreeSelection) => void
+  selectableTypes: ProjectFileTreeSelectableTypes
+  selectedPaths?: string[]
+  selectionMode: ProjectFileTreeSelectionMode
+  visibleNodes: ProjectFileTreeNode[]
+}) => {
+  const [internalSelectedPaths, setInternalSelectedPaths] = useState<string[]>([])
+  const selectionAnchorPathRef = useRef<string | null>(null)
+  const resolvedSelectedPaths = selectedPaths ?? internalSelectedPaths
+  const selectedNodes = useMemo(
+    () => getNodesByPaths(resolvedSelectedPaths, visibleNodes),
+    [resolvedSelectedPaths, visibleNodes]
+  )
+  const selectedPathSet = useMemo(() => {
+    const paths = new Set(resolvedSelectedPaths)
+    if (activePath != null && activePath !== '') {
+      paths.add(activePath)
+    }
+    return paths
+  }, [activePath, resolvedSelectedPaths])
+
+  const emitSelectionChange = useCallback((
+    nextNodes: ProjectFileTreeNode[]
+  ) => {
+    const normalizedNodes = uniqueNodes(nextNodes.filter(node => canSelectProjectFileTreeNode(node, selectableTypes)))
+    const nextPaths = normalizedNodes.map(node => node.path)
+    if (selectedPaths == null) {
+      setInternalSelectedPaths(nextPaths)
+    }
+    onSelectionChange?.({ nodes: normalizedNodes, paths: nextPaths })
+  }, [onSelectionChange, selectableTypes, selectedPaths])
+
+  const handleContextSelect = useCallback((node: ProjectFileTreeNode) => {
+    if (selectionMode === 'none' || selectedPathSet.has(node.path)) {
+      return
+    }
+    selectionAnchorPathRef.current = node.path
+    emitSelectionChange([node])
+  }, [emitSelectionChange, selectedPathSet, selectionMode])
+
+  const handleSelectNode = useCallback((node: ProjectFileTreeNode, event: MouseEvent<HTMLButtonElement>) => {
+    if (selectionMode === 'none' || !canSelectProjectFileTreeNode(node, selectableTypes)) {
+      return false
+    }
+
+    const isRangeSelection = event.shiftKey
+    const isToggleSelection = event.metaKey || event.ctrlKey
+    if (!isRangeSelection && !isToggleSelection) {
+      selectionAnchorPathRef.current = node.path
+      emitSelectionChange([node])
+      return false
+    }
+
+    event.preventDefault()
+    event.stopPropagation()
+
+    const selectableVisibleNodes = visibleNodes.filter(item => canSelectProjectFileTreeNode(item, selectableTypes))
+    if (selectableVisibleNodes.length === 0) {
+      return true
+    }
+
+    if (isRangeSelection) {
+      const anchorPath = selectionAnchorPathRef.current ?? resolvedSelectedPaths.at(-1) ?? node.path
+      const anchorIndex = selectableVisibleNodes.findIndex(item => item.path === anchorPath)
+      const targetIndex = selectableVisibleNodes.findIndex(item => item.path === node.path)
+      if (targetIndex < 0) {
+        return true
+      }
+      if (anchorIndex < 0) {
+        emitSelectionChange([node])
+        selectionAnchorPathRef.current = node.path
+        return true
+      }
+
+      const start = Math.min(anchorIndex, targetIndex)
+      const end = Math.max(anchorIndex, targetIndex)
+      emitSelectionChange(selectableVisibleNodes.slice(start, end + 1))
+      return true
+    }
+
+    selectionAnchorPathRef.current = node.path
+    if (selectedPathSet.has(node.path)) {
+      emitSelectionChange(selectedNodes.filter(item => item.path !== node.path))
+    } else {
+      emitSelectionChange([...selectedNodes, node])
+    }
+    return true
+  }, [
+    emitSelectionChange,
+    resolvedSelectedPaths,
+    selectableTypes,
+    selectedNodes,
+    selectedPathSet,
+    selectionMode,
+    visibleNodes
+  ])
+
+  return {
+    handleContextSelect,
+    handleSelectNode,
+    selectedNodes,
+    selectedPathSet
+  }
+}

package/src/hooks/chat/chat-session-target.ts

@@ -0,0 +1,69 @@
+import type { Session } from '@vibe-forge/core'
+import type { SessionPromptType } from '@vibe-forge/types'
+
+export type ChatSessionTargetType = 'default' | SessionPromptType
+
+export interface ChatSessionTargetDraft {
+  type: ChatSessionTargetType
+  name?: string
+  label?: string
+  description?: string
+  path?: string
+}
+
+export interface ChatSessionTargetResource {
+  id: string
+  name: string
+  description?: string
+  path?: string
+}
+
+export const DEFAULT_CHAT_SESSION_TARGET_DRAFT: ChatSessionTargetDraft = {
+  type: 'default'
+}
+
+export const isChatSessionTargetReady = (target?: ChatSessionTargetDraft) => (
+  target == null || target.type === 'default' || (target.name?.trim() ?? '') !== ''
+)
+
+export const getChatSessionTargetPrompt = (target?: ChatSessionTargetDraft): {
+  promptType?: SessionPromptType
+  promptName?: string
+} => {
+  if (target == null || target.type === 'default') {
+    return {}
+  }
+
+  const promptName = target.name?.trim()
+  if (promptName == null || promptName === '') {
+    return {}
+  }
+
+  return {
+    promptType: target.type,
+    promptName
+  }
+}
+
+export const createChatSessionTargetDraft = (
+  type: Exclude<ChatSessionTargetType, 'default'>,
+  resource: ChatSessionTargetResource
+): ChatSessionTargetDraft => ({
+  type,
+  name: type === 'workspace' ? resource.id : resource.name,
+  label: resource.name,
+  description: resource.description,
+  path: resource.path
+})
+
+export const getChatSessionTargetDraftFromSession = (session?: Session): ChatSessionTargetDraft => {
+  if (session?.promptType == null) {
+    return DEFAULT_CHAT_SESSION_TARGET_DRAFT
+  }
+
+  return {
+    type: session.promptType,
+    name: session.promptName,
+    label: session.promptName
+  }
+}

package/src/hooks/chat/chat-session-workspace-draft.ts

@@ -8,18 +8,25 @@ export interface ChatSessionWorkspaceDraftBranch {
 
 export interface ChatSessionWorkspaceDraft {
   createWorktree: boolean
+  worktreeEnvironment?: string
   branch?: ChatSessionWorkspaceDraftBranch
 }
 
-export const buildChatSessionWorkspaceDraft = (createWorktree = true): ChatSessionWorkspaceDraft => ({
-  createWorktree
+export const buildChatSessionWorkspaceDraft = (
+  createWorktree = true,
+  worktreeEnvironment?: string
+): ChatSessionWorkspaceDraft => ({
+  createWorktree,
+  ...(worktreeEnvironment != null && worktreeEnvironment.trim() !== ''
+    ? { worktreeEnvironment: worktreeEnvironment.trim() }
+    : {})
 })
 
 export const getChatSessionWorkspaceDraftFromConfig = (
   configRes?: ConfigResponse
 ): ChatSessionWorkspaceDraft => {
-  const createWorktree = configRes?.sources?.merged?.conversation?.createSessionWorktree
-  return buildChatSessionWorkspaceDraft(createWorktree ?? true)
+  const conversation = configRes?.sources?.merged?.conversation
+  return buildChatSessionWorkspaceDraft(conversation?.createSessionWorktree ?? true, conversation?.worktreeEnvironment)
 }
 
 export const DEFAULT_CHAT_SESSION_WORKSPACE_DRAFT: ChatSessionWorkspaceDraft = buildChatSessionWorkspaceDraft()

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

@@ -8,6 +8,7 @@ export interface InteractionRequestState {
 }
 
 export interface ChatErrorState {
+  action?: 'retry-session-creation'
   kind: 'connection' | 'session'
   message: string
   code?: string

package/src/hooks/chat/optimistic-session-creation.ts

@@ -0,0 +1,189 @@
+import { atom } from 'jotai'
+
+import type {
+  ChatMessage,
+  ChatMessageContent,
+  EffortLevel,
+  Session,
+  SessionPermissionMode,
+  SessionPromptType
+} from '@vibe-forge/core'
+import type { GitBranchKind } from '@vibe-forge/types'
+
+export interface OptimisticSessionCreationOptions {
+  start?: boolean
+  parentSessionId?: string
+  id: string
+  promptType?: SessionPromptType
+  promptName?: string
+  effort?: EffortLevel
+  permissionMode?: SessionPermissionMode
+  adapter?: string
+  account?: string
+  workspace?: {
+    createWorktree?: boolean
+    worktreeEnvironment?: string
+    branch?: {
+      name: string
+      kind?: GitBranchKind
+      mode?: 'checkout' | 'create'
+    }
+  }
+}
+
+export interface OptimisticSessionCreationRequest {
+  id: string
+  title?: string
+  initialMessage?: string
+  initialContent?: ChatMessageContent[]
+  model?: string
+  options: OptimisticSessionCreationOptions
+}
+
+export interface OptimisticSessionCreation {
+  errorMessage?: string
+  message: ChatMessage
+  request: OptimisticSessionCreationRequest
+  session: Session
+  status: 'creating' | 'failed'
+}
+
+export type OptimisticSessionCreationMap = Record<string, OptimisticSessionCreation>
+
+export const optimisticSessionCreationsAtom = atom<OptimisticSessionCreationMap>({})
+
+const discardedOptimisticSessionIds = new Set<string>()
+
+export const markOptimisticSessionDiscarded = (id: string) => {
+  discardedOptimisticSessionIds.add(id)
+}
+
+export const clearOptimisticSessionDiscarded = (id: string) => {
+  discardedOptimisticSessionIds.delete(id)
+}
+
+export const isOptimisticSessionDiscarded = (id: string) => {
+  return discardedOptimisticSessionIds.has(id)
+}
+
+export const createOptimisticSessionId = () => {
+  return globalThis.crypto?.randomUUID != null
+    ? globalThis.crypto.randomUUID()
+    : `local-session-${Date.now()}-${Math.random().toString(16).slice(2)}`
+}
+
+const getContentPreview = (content?: string | ChatMessageContent[]) => {
+  if (typeof content === 'string') {
+    return content.trim()
+  }
+
+  const textItem = content?.find(
+    (item): item is Extract<ChatMessageContent, { type: 'text' }> => item.type === 'text' && item.text.trim() !== ''
+  )
+  if (textItem != null) {
+    return textItem.text.trim()
+  }
+
+  const fileItem = content?.find(
+    (item): item is Extract<ChatMessageContent, { type: 'file' }> => item.type === 'file' && item.path.trim() !== ''
+  )
+  if (fileItem != null) {
+    return fileItem.path.trim()
+  }
+
+  const imageItem = content?.find((item): item is Extract<ChatMessageContent, { type: 'image' }> =>
+    item.type === 'image'
+  )
+  if (imageItem != null) {
+    return imageItem.name?.trim() ?? ''
+  }
+
+  return ''
+}
+
+const getTitlePreview = (contentPreview: string) => {
+  const firstLine = contentPreview.split('\n')[0]?.trim() ?? ''
+  if (firstLine === '') return undefined
+  return firstLine.length > 50 ? `${firstLine.slice(0, 50)}...` : firstLine
+}
+
+export const createOptimisticSessionCreation = (
+  request: OptimisticSessionCreationRequest,
+  now = Date.now()
+): OptimisticSessionCreation => {
+  const content = request.initialContent ?? request.initialMessage ?? ''
+  const contentPreview = getContentPreview(content)
+  const title = request.title ?? getTitlePreview(contentPreview)
+
+  return {
+    message: {
+      id: `${request.id}:optimistic-user-message`,
+      role: 'user',
+      content,
+      createdAt: now
+    },
+    request,
+    session: {
+      id: request.id,
+      title,
+      createdAt: now,
+      messageCount: 1,
+      lastMessage: contentPreview === '' ? undefined : contentPreview,
+      lastUserMessage: contentPreview === '' ? undefined : contentPreview,
+      isArchived: false,
+      isStarred: false,
+      tags: [],
+      status: 'running',
+      model: request.model,
+      adapter: request.options.adapter,
+      account: request.options.account,
+      permissionMode: request.options.permissionMode,
+      effort: request.options.effort,
+      promptType: request.options.promptType,
+      promptName: request.options.promptName
+    },
+    status: 'creating'
+  }
+}
+
+export const markOptimisticSessionCreationCreating = (
+  creation: OptimisticSessionCreation
+): OptimisticSessionCreation => ({
+  ...creation,
+  errorMessage: undefined,
+  session: {
+    ...creation.session,
+    status: 'running'
+  },
+  status: 'creating'
+})
+
+export const markOptimisticSessionCreationFailed = (
+  creation: OptimisticSessionCreation,
+  errorMessage: string
+): OptimisticSessionCreation => ({
+  ...creation,
+  errorMessage,
+  session: {
+    ...creation.session,
+    status: 'failed'
+  },
+  status: 'failed'
+})
+
+export const mergeOptimisticSessions = (
+  sessions: Session[],
+  creations: OptimisticSessionCreationMap
+) => {
+  const existingIds = new Set(sessions.map(session => session.id))
+  const mergedSessions = sessions.map(session => creations[session.id]?.session ?? session)
+  const optimisticSessions = Object.values(creations)
+    .map(creation => creation.session)
+    .filter(session => session.isArchived !== true && !existingIds.has(session.id))
+
+  return [...mergedSessions, ...optimisticSessions]
+}
+
+export const removeSessionFromList = (sessions: Session[], id: string) => {
+  return sessions.filter(session => session.id !== id)
+}