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

package/src/components/workspace/project-file-tree/project-file-tree-icons.ts

@@ -0,0 +1,93 @@
+export interface ProjectFileTreeIconMeta {
+  badgeIcon?: string
+  icon: string
+  tone: string
+}
+
+export const getProjectFolderIconMeta = (name: string, expanded: boolean): ProjectFileTreeIconMeta => {
+  const normalized = name.toLowerCase()
+  const icon = expanded ? 'folder_open' : 'folder'
+  if (normalized === '.ai') return { icon, tone: 'ai', badgeIcon: 'auto_awesome' }
+  if (normalized === '.docs' || normalized === 'docs' || normalized === 'doc') {
+    return { icon, tone: 'docs', badgeIcon: 'article' }
+  }
+  if (normalized === '.github' || normalized === '.gitlab' || normalized === '.git') {
+    return { icon, tone: 'git', badgeIcon: 'commit' }
+  }
+  if (normalized.includes('test') || normalized === '__tests__' || normalized === '__test__') {
+    return { icon, tone: 'test', badgeIcon: 'science' }
+  }
+  if (normalized === 'src' || normalized === 'source') return { icon, tone: 'source', badgeIcon: 'code' }
+  if (normalized === 'apps' || normalized === 'packages') return { icon, tone: 'package', badgeIcon: 'inventory_2' }
+  if (normalized === 'scripts' || normalized === 'bin') return { icon, tone: 'script', badgeIcon: 'terminal' }
+  if (normalized === 'public' || normalized === 'assets' || normalized === 'static') {
+    return { icon, tone: 'asset', badgeIcon: 'image' }
+  }
+  if (normalized === 'components') return { icon, tone: 'component', badgeIcon: 'widgets' }
+  if (normalized === 'routes' || normalized === 'pages') return { icon, tone: 'route', badgeIcon: 'alt_route' }
+  if (normalized === 'api' || normalized === 'server') return { icon, tone: 'api', badgeIcon: 'hub' }
+  if (normalized.includes('hook')) return { icon, tone: 'hook', badgeIcon: 'link' }
+  return { icon, tone: 'folder' }
+}
+
+export const getProjectFileIconMeta = (name: string): ProjectFileTreeIconMeta => {
+  const normalized = name.toLowerCase()
+  if (/\.(?:ts|tsx|mts|cts)$/.test(normalized)) return { icon: 'data_object', tone: 'typescript' }
+  if (/\.(?:js|jsx|mjs|cjs)$/.test(normalized)) return { icon: 'javascript', tone: 'javascript' }
+  if (/\.(?:json|jsonc)$/.test(normalized)) return { icon: 'tune', tone: 'json' }
+  if (/\.(?:md|mdx)$/.test(normalized)) return { icon: 'article', tone: 'markdown' }
+  if (/\.(?:css|scss|sass|less|pcss)$/.test(normalized)) return { icon: 'palette', tone: 'style' }
+  if (/\.(?:png|jpe?g|gif|svg|webp|avif|ico)$/.test(normalized)) return { icon: 'image', tone: 'image' }
+  if (/\.(?:lock|lockb)$/.test(normalized)) return { icon: 'lock', tone: 'lock' }
+  if (normalized.includes('package.json') || normalized.endsWith('.yaml') || normalized.endsWith('.yml')) {
+    return { icon: 'inventory_2', tone: 'package' }
+  }
+  if (normalized.startsWith('.env')) return { icon: 'key', tone: 'env' }
+  if (normalized.includes('ignore')) return { icon: 'hide_source', tone: 'ignore' }
+  return { icon: 'draft', tone: 'file' }
+}
+
+export const getProjectLinkedIconMeta = (
+  name: string,
+  linkType: 'directory' | 'file' | 'missing' | 'other' | undefined,
+  expanded: boolean,
+  linkKind: 'gitdir' | 'symlink' = 'symlink'
+): ProjectFileTreeIconMeta => {
+  if (linkKind === 'gitdir') {
+    return {
+      ...getProjectFolderIconMeta(name, expanded),
+      tone: linkType === 'missing' ? 'symlink-broken' : 'git'
+    }
+  }
+
+  if (linkType === 'missing') {
+    return { icon: 'draft', tone: 'symlink-broken', badgeIcon: 'link_off' }
+  }
+
+  if (linkType === 'directory') {
+    return { ...getProjectFolderIconMeta(name, expanded), badgeIcon: 'link' }
+  }
+
+  if (linkType === 'file') {
+    return { ...getProjectFileIconMeta(name), badgeIcon: 'link' }
+  }
+
+  return { icon: 'draft', tone: 'symlink' }
+}
+
+export const getProjectLinkIndicatorIconMeta = (
+  linkKind: 'gitdir' | 'symlink',
+  linkType: 'directory' | 'file' | 'missing' | 'other' | undefined,
+  isExternal?: boolean
+): ProjectFileTreeIconMeta => {
+  if (linkType === 'missing') {
+    return { icon: 'link_off', tone: 'symlink-broken' }
+  }
+  if (linkKind === 'gitdir') {
+    return { icon: 'account_tree', tone: 'git' }
+  }
+  if (isExternal === true) {
+    return { icon: 'open_in_new', tone: 'symlink-external' }
+  }
+  return { icon: 'link', tone: 'symlink' }
+}

package/src/components/workspace/project-file-tree/project-file-tree-types.ts

@@ -0,0 +1,27 @@
+import type { WorkspaceTreeEntry } from '#~/api'
+
+export type ProjectFileTreeCommandAction = 'expand' | 'collapse' | 'locate'
+
+export interface ProjectFileTreeCommand {
+  action: ProjectFileTreeCommandAction
+  id: number
+  path?: string
+}
+
+export interface ProjectFileTreeNode extends WorkspaceTreeEntry {
+  children?: ProjectFileTreeNode[]
+}
+
+export interface ProjectFileTreeSelection {
+  nodes: ProjectFileTreeNode[]
+  paths: string[]
+}
+
+export interface ProjectFileTreeSelectionAdjacency {
+  hasSelectedAfter: boolean
+  hasSelectedBefore: boolean
+}
+
+export type ProjectFileTreeSelectionMode = 'multiple' | 'none'
+
+export type ProjectFileTreeSelectableTypes = 'all' | 'files'

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