@vibe-forge/client 2.0.0 → 2.0.1

package/src/components/chat/workspace-drawer/WorkspaceDrawerChangedFolderTree.tsx

@@ -0,0 +1,191 @@
+import type { CSSProperties } from 'react'
+import { useEffect, useMemo, useState } from 'react'
+
+import { WorkspaceDrawerChangedFileRow } from './WorkspaceDrawerChangedFileRow'
+import type {
+  ChangedFileScope,
+  ChangedFolderNode,
+  ChangedTreeCommand,
+  SelectedChangedFolder
+} from './changed-files-model'
+import { collectChangedFolderPaths, findChangedFolderNode } from './changed-files-model'
+
+const getFolderDepthStyle = (depth: number): CSSProperties => ({
+  '--changed-folder-depth': depth
+} as CSSProperties)
+
+const getCompactFolderNode = (node: ChangedFolderNode) => {
+  const names = [node.name]
+  let current = node
+
+  while (current.entries.length === 0 && current.children.length === 1) {
+    current = current.children[0]!
+    names.push(current.name)
+  }
+
+  return {
+    label: names.join('/'),
+    node: current
+  }
+}
+
+function WorkspaceDrawerChangedFolderNode({
+  depth,
+  expandedPaths,
+  node,
+  onOpenFile,
+  onSelectFolder,
+  onToggleFolder,
+  selectedFilePath,
+  selectedFolder,
+  scope
+}: {
+  depth: number
+  expandedPaths: Set<string>
+  node: ChangedFolderNode
+  onOpenFile?: (path: string) => void
+  onSelectFolder: (path: string) => void
+  onToggleFolder: (path: string) => void
+  selectedFilePath?: string | null
+  selectedFolder: SelectedChangedFolder | null
+  scope: ChangedFileScope
+}) {
+  const isRoot = node.path === ''
+  const compactFolder = isRoot ? { label: '', node } : getCompactFolderNode(node)
+  const displayNode = compactFolder.node
+  const isExpanded = isRoot || expandedPaths.has(displayNode.path)
+  const isSelected = selectedFolder?.scope === scope && selectedFolder.path === displayNode.path
+
+  return (
+    <div className='chat-workspace-drawer__changed-folder-node'>
+      {!isRoot && (
+        <button
+          type='button'
+          className={`chat-workspace-drawer__changed-folder ${isExpanded ? 'is-expanded' : ''} ${
+            isSelected ? 'is-selected' : ''
+          }`}
+          style={getFolderDepthStyle(depth)}
+          aria-expanded={isExpanded}
+          aria-pressed={isSelected}
+          title={displayNode.path}
+          onClick={() => {
+            onSelectFolder(displayNode.path)
+            onToggleFolder(displayNode.path)
+          }}
+        >
+          <span className='material-symbols-rounded chat-workspace-drawer__changed-folder-icon'>
+            {isExpanded ? 'folder_open' : 'folder'}
+          </span>
+          <span className='chat-workspace-drawer__changed-folder-name'>{compactFolder.label}</span>
+        </button>
+      )}
+      <div
+        className={`chat-workspace-drawer__changed-folder-children ${isExpanded ? 'is-expanded' : 'is-collapsed'}`}
+      >
+        <div className='chat-workspace-drawer__changed-folder-children-inner'>
+          {displayNode.children.map(child => (
+            <WorkspaceDrawerChangedFolderNode
+              key={child.path}
+              depth={depth + 1}
+              expandedPaths={expandedPaths}
+              node={child}
+              selectedFilePath={selectedFilePath}
+              onOpenFile={onOpenFile}
+              onSelectFolder={onSelectFolder}
+              onToggleFolder={onToggleFolder}
+              selectedFolder={selectedFolder}
+              scope={scope}
+            />
+          ))}
+          {displayNode.entries.map(entry => (
+            <div
+              key={entry.key}
+              className='chat-workspace-drawer__changed-folder-entry'
+              style={getFolderDepthStyle(displayNode.path === '' ? 0 : depth + 1)}
+            >
+              <WorkspaceDrawerChangedFileRow
+                entry={entry}
+                selectedFilePath={selectedFilePath}
+                showDirectory={false}
+                onOpenFile={onOpenFile}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function WorkspaceDrawerChangedFolderTree({
+  command,
+  onOpenFile,
+  onSelectFolder,
+  root,
+  scope,
+  selectedFilePath,
+  selectedFolder
+}: {
+  command: ChangedTreeCommand | null
+  onOpenFile?: (path: string) => void
+  onSelectFolder: (folder: SelectedChangedFolder) => void
+  root: ChangedFolderNode
+  scope: ChangedFileScope
+  selectedFilePath?: string | null
+  selectedFolder: SelectedChangedFolder | null
+}) {
+  const allFolderPaths = useMemo(() => collectChangedFolderPaths(root), [root])
+  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(() => new Set(allFolderPaths))
+
+  useEffect(() => {
+    setExpandedPaths(new Set(allFolderPaths))
+  }, [allFolderPaths])
+
+  useEffect(() => {
+    if (command == null) {
+      return
+    }
+
+    const targetPath = selectedFolder?.scope === scope ? selectedFolder.path : null
+    const targetNode = targetPath == null ? root : findChangedFolderNode(root, targetPath)
+    const targetPaths = targetNode == null ? allFolderPaths : collectChangedFolderPaths(targetNode)
+    const paths = targetPath == null ? targetPaths : [targetPath, ...targetPaths]
+
+    setExpandedPaths((prev) => {
+      if (command.action === 'expand') {
+        return new Set([...prev, ...paths])
+      }
+      const next = new Set(prev)
+      for (const path of paths) {
+        next.delete(path)
+      }
+      return next
+    })
+  }, [allFolderPaths, command, root, scope, selectedFolder])
+
+  const handleToggleFolder = (path: string) => {
+    setExpandedPaths((prev) => {
+      const next = new Set(prev)
+      if (next.has(path)) {
+        next.delete(path)
+      } else {
+        next.add(path)
+      }
+      return next
+    })
+  }
+
+  return (
+    <WorkspaceDrawerChangedFolderNode
+      depth={0}
+      expandedPaths={expandedPaths}
+      node={root}
+      selectedFilePath={selectedFilePath}
+      onOpenFile={onOpenFile}
+      onSelectFolder={path => onSelectFolder({ scope, path })}
+      onToggleFolder={handleToggleFolder}
+      selectedFolder={selectedFolder}
+      scope={scope}
+    />
+  )
+}

package/src/components/chat/workspace-drawer/WorkspaceDrawerTree.tsx

@@ -0,0 +1,35 @@
+import type { ContextPickerFile } from '#~/components/workspace/context-file-types'
+import { toContextPickerFile } from '#~/components/workspace/context-file-types'
+import { ProjectFileTree } from '#~/components/workspace/project-file-tree/ProjectFileTree'
+import type { ProjectFileTreeCommand } from '#~/components/workspace/project-file-tree/project-file-tree-types'
+
+export function WorkspaceDrawerTree({
+  command,
+  onOpenFile,
+  onReferencePaths,
+  refreshKey,
+  selectedFilePath,
+  sessionId
+}: {
+  command: ProjectFileTreeCommand | null
+  onOpenFile?: (path: string) => void
+  onReferencePaths?: (files: ContextPickerFile[]) => void
+  refreshKey: number
+  selectedFilePath?: string | null
+  sessionId?: string
+}) {
+  return (
+    <ProjectFileTree
+      activePath={selectedFilePath}
+      className='chat-workspace-drawer__tree'
+      command={command}
+      refreshKey={refreshKey}
+      selectableTypes='all'
+      selectionMode='multiple'
+      sessionId={sessionId}
+      showContextMenu
+      onOpenFile={onOpenFile}
+      onReferenceNodes={nodes => onReferencePaths?.(nodes.map(toContextPickerFile))}
+    />
+  )
+}

package/src/components/chat/workspace-drawer/WorkspaceDrawerTreeState.tsx

@@ -0,0 +1,17 @@
+import { Empty } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+export function WorkspaceDrawerTreeState({
+  kind
+}: {
+  kind: 'empty' | 'error'
+}) {
+  const { t } = useTranslation()
+
+  return (
+    <Empty
+      image={Empty.PRESENTED_IMAGE_SIMPLE}
+      description={t(kind === 'error' ? 'chat.contextPickerLoadFailed' : 'chat.contextPickerEmpty')}
+    />
+  )
+}

package/src/components/chat/workspace-drawer/changed-files-model.ts

@@ -0,0 +1,152 @@
+import type { GitChangedFile } from '@vibe-forge/types'
+
+export type ChangedFilesLayout = 'folders' | 'flat'
+export type ChangedFileScope = 'staged' | 'tracked' | 'untracked'
+export type ChangedTreeCommandAction = 'expand' | 'collapse'
+
+export interface ChangedTreeCommand {
+  action: ChangedTreeCommandAction
+  id: number
+}
+
+export interface ChangedFileEntry {
+  file: GitChangedFile
+  key: string
+  scope: ChangedFileScope
+}
+
+export interface ChangedFileSection {
+  count: number
+  entries: ChangedFileEntry[]
+  scope: ChangedFileScope
+}
+
+export interface ChangedFolderNode {
+  children: ChangedFolderNode[]
+  entries: ChangedFileEntry[]
+  name: string
+  path: string
+}
+
+export interface SelectedChangedFolder {
+  path: string
+  scope: ChangedFileScope
+}
+
+const sortEntries = (entries: ChangedFileEntry[]) =>
+  [...entries].sort((left, right) => left.file.path.localeCompare(right.file.path))
+
+export const getFileName = (path: string) => path.split('/').pop() ?? path
+
+export const getFileDirectory = (path: string) => {
+  const fileName = getFileName(path)
+  return path === fileName ? '' : path.slice(0, Math.max(0, path.length - fileName.length - 1))
+}
+
+export const getChangedFileEntries = (file: GitChangedFile): ChangedFileEntry[] => {
+  const entries: ChangedFileEntry[] = []
+
+  if (file.staged) {
+    entries.push({ file, key: `${file.path}:staged`, scope: 'staged' })
+  }
+  if (file.unstaged && !file.untracked) {
+    entries.push({ file, key: `${file.path}:tracked`, scope: 'tracked' })
+  }
+  if (file.untracked) {
+    entries.push({ file, key: `${file.path}:untracked`, scope: 'untracked' })
+  }
+
+  return entries
+}
+
+export const getChangedFileSections = (files: GitChangedFile[]): ChangedFileSection[] => {
+  const entries = files.flatMap(getChangedFileEntries)
+  const sections: ChangedFileSection[] = [
+    { scope: 'staged', entries: [], count: 0 },
+    { scope: 'tracked', entries: [], count: 0 },
+    { scope: 'untracked', entries: [], count: 0 }
+  ]
+
+  for (const section of sections) {
+    section.entries = sortEntries(entries.filter(entry => entry.scope === section.scope))
+    section.count = section.entries.length
+  }
+
+  return sections.filter(section => section.count > 0)
+}
+
+const findOrCreateFolderNode = (parent: ChangedFolderNode, name: string, path: string) => {
+  const existing = parent.children.find(child => child.path === path)
+  if (existing != null) {
+    return existing
+  }
+
+  const node: ChangedFolderNode = {
+    name,
+    path,
+    children: [],
+    entries: []
+  }
+  parent.children.push(node)
+  return node
+}
+
+const sortFolderNode = (node: ChangedFolderNode) => {
+  node.children.sort((left, right) => left.name.localeCompare(right.name))
+  node.entries = sortEntries(node.entries)
+  for (const child of node.children) {
+    sortFolderNode(child)
+  }
+}
+
+export const buildChangedFolderTree = (entries: ChangedFileEntry[]): ChangedFolderNode => {
+  const root: ChangedFolderNode = {
+    name: '',
+    path: '',
+    children: [],
+    entries: []
+  }
+
+  for (const entry of entries) {
+    const parts = entry.file.path.split('/').filter(Boolean)
+    const fileName = parts.pop()
+    if (fileName == null) {
+      continue
+    }
+
+    let current = root
+    let currentPath = ''
+    for (const part of parts) {
+      currentPath = currentPath === '' ? part : `${currentPath}/${part}`
+      current = findOrCreateFolderNode(current, part, currentPath)
+    }
+    current.entries.push(entry)
+  }
+
+  sortFolderNode(root)
+  return root
+}
+
+export const collectChangedFolderPaths = (node: ChangedFolderNode): string[] => {
+  const paths = node.path === '' ? [] : [node.path]
+  for (const child of node.children) {
+    paths.push(...collectChangedFolderPaths(child))
+  }
+  return paths
+}
+
+export const findChangedFolderNode = (
+  node: ChangedFolderNode,
+  path: string
+): ChangedFolderNode | null => {
+  if (node.path === path) {
+    return node
+  }
+  for (const child of node.children) {
+    const found = findChangedFolderNode(child, path)
+    if (found != null) {
+      return found
+    }
+  }
+  return null
+}

package/src/components/chat/workspace-drawer/workspace-drawer-icons.ts

@@ -0,0 +1,110 @@
+export interface WorkspaceDrawerIconMeta {
+  badgeIcon?: string
+  icon: string
+  tone: string
+}
+
+const normalizeName = (name: string) => name.trim().toLowerCase()
+
+const getExtension = (name: string) => {
+  const normalized = normalizeName(name)
+  const dotIndex = normalized.lastIndexOf('.')
+  return dotIndex <= 0 ? '' : normalized.slice(dotIndex + 1)
+}
+
+export const getWorkspaceFolderIconMeta = (name: string, expanded: boolean): WorkspaceDrawerIconMeta => {
+  const normalized = normalizeName(name)
+  const icon = expanded ? 'folder_open' : 'folder'
+  if (normalized === '.github') return { icon, tone: 'github', badgeIcon: 'commit' }
+  if (normalized === '.ai' || normalized === '.codex') return { icon, tone: 'ai', badgeIcon: 'auto_awesome' }
+  if (normalized === 'apps') return { icon, tone: 'app', badgeIcon: 'apps' }
+  if (normalized === 'packages') return { icon, tone: 'package', badgeIcon: 'inventory_2' }
+  if (normalized === 'scripts' || normalized === 'bin') return { icon, tone: 'script', badgeIcon: 'terminal' }
+  if (normalized === 'docs' || normalized === '.docs' || normalized === 'changelog') {
+    return { icon, tone: 'docs', badgeIcon: 'article' }
+  }
+  if (normalized === 'src') return { icon, tone: 'source', badgeIcon: 'code' }
+  if (normalized.includes('component')) return { icon, tone: 'component', badgeIcon: 'widgets' }
+  if (normalized.includes('route')) return { icon, tone: 'route', badgeIcon: 'alt_route' }
+  if (normalized.includes('hook')) return { icon, tone: 'hook', badgeIcon: 'link' }
+  if (normalized.includes('api') || normalized.includes('service')) return { icon, tone: 'api', badgeIcon: 'api' }
+  if (normalized.includes('style') || normalized.includes('scss') || normalized.includes('css')) {
+    return { icon, tone: 'style', badgeIcon: 'palette' }
+  }
+  if (normalized.includes('asset') || normalized === 'public') return { icon, tone: 'asset', badgeIcon: 'image' }
+  if (normalized.includes('test') || normalized === '__tests__') return { icon, tone: 'test', badgeIcon: 'checklist' }
+  return { icon, tone: 'folder' }
+}
+
+export const getWorkspaceFileIconMeta = (name: string): WorkspaceDrawerIconMeta => {
+  const normalized = normalizeName(name)
+  const extension = getExtension(name)
+  if (normalized === 'package.json') return { icon: 'inventory_2', tone: 'package' }
+  if (normalized.includes('lock')) return { icon: 'lock', tone: 'lock' }
+  if (normalized.startsWith('.env')) return { icon: 'key', tone: 'env' }
+  if (normalized.includes('config')) return { icon: 'tune', tone: 'config' }
+  if (normalized.includes('readme') || extension === 'md' || extension === 'mdx') {
+    return { icon: 'article', tone: 'docs' }
+  }
+  if (normalized.includes('gitignore') || normalized.includes('dockerignore')) {
+    return { icon: 'hide_source', tone: 'ignore' }
+  }
+  if (extension === 'ts' || extension === 'tsx') return { icon: 'data_object', tone: 'typescript' }
+  if (extension === 'js' || extension === 'jsx' || extension === 'mjs' || extension === 'cjs') {
+    return { icon: 'javascript', tone: 'javascript' }
+  }
+  if (extension === 'json') return { icon: 'data_object', tone: 'json' }
+  if (extension === 'scss' || extension === 'sass' || extension === 'css') return { icon: 'palette', tone: 'style' }
+  if (extension === 'html') return { icon: 'language', tone: 'html' }
+  if (['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'ico'].includes(extension)) {
+    return { icon: 'image', tone: 'image' }
+  }
+  if (['yml', 'yaml', 'toml'].includes(extension)) return { icon: 'settings', tone: 'config' }
+  if (['sh', 'bash', 'zsh'].includes(extension)) return { icon: 'terminal', tone: 'script' }
+  return { icon: 'draft', tone: 'file' }
+}
+
+export const getWorkspaceLinkedIconMeta = (
+  name: string,
+  linkType: 'directory' | 'file' | 'missing' | 'other' | undefined,
+  expanded: boolean,
+  linkKind: 'gitdir' | 'symlink' = 'symlink'
+): WorkspaceDrawerIconMeta => {
+  if (linkKind === 'gitdir') {
+    return {
+      icon: expanded ? 'folder_open' : 'folder',
+      tone: linkType === 'missing' ? 'symlink-broken' : 'git'
+    }
+  }
+
+  if (linkType === 'missing') {
+    return { icon: 'draft', tone: 'symlink-broken', badgeIcon: 'link_off' }
+  }
+
+  if (linkType === 'directory') {
+    return getWorkspaceFolderIconMeta(name, expanded)
+  }
+
+  if (linkType === 'file') {
+    return getWorkspaceFileIconMeta(name)
+  }
+
+  return { icon: 'draft', tone: 'symlink' }
+}
+
+export const getWorkspaceLinkIndicatorIconMeta = (
+  linkKind: 'gitdir' | 'symlink',
+  linkType: 'directory' | 'file' | 'missing' | 'other' | undefined,
+  isExternal?: boolean
+): WorkspaceDrawerIconMeta => {
+  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/chat/workspace-file-editor/WorkspaceFileBreadcrumb.tsx

@@ -0,0 +1,17 @@
+export function WorkspaceFileBreadcrumb({ path }: { path: string }) {
+  const parts = path.split('/').filter(Boolean)
+
+  return (
+    <div className='workspace-file-editor__breadcrumb' title={path} data-dock-panel-no-resize='true'>
+      {parts.map((part, index) => {
+        const isLast = index === parts.length - 1
+        return (
+          <span key={`${part}:${index}`} className='workspace-file-editor__breadcrumb-part'>
+            <span className={isLast ? 'is-current' : undefined}>{part}</span>
+            {!isLast && <span className='workspace-file-editor__breadcrumb-separator'>/</span>}
+          </span>
+        )
+      })}
+    </div>
+  )
+}