nastechai-desktop 18.1.0

package/src/app/right-sidebar/files/tree.tsx

@@ -0,0 +1,224 @@
+import { useCallback, useRef, useState } from 'react'
+import { type NodeApi, type NodeRendererProps, Tree, type TreeApi } from 'react-arborist'
+
+import { PageLoader } from '@/components/page-loader'
+import { Codicon } from '@/components/ui/codicon'
+import { useResizeObserver } from '@/hooks/use-resize-observer'
+import { useI18n } from '@/i18n'
+import { cn } from '@/lib/utils'
+
+import type { TreeNode } from './use-project-tree'
+
+const ROW_HEIGHT = 22
+const INDENT = 10
+
+interface ProjectTreeProps {
+  collapseNonce: number
+  cwd: string
+  data: TreeNode[]
+  onActivateFile: (path: string) => void
+  onActivateFolder: (path: string) => void
+  onLoadChildren: (id: string) => void | Promise<void>
+  onNodeOpenChange: (id: string, open: boolean) => void
+  onPreviewFile?: (path: string) => void
+  openState: Record<string, boolean>
+}
+
+export function ProjectTree({
+  collapseNonce,
+  cwd,
+  data,
+  onActivateFile,
+  onActivateFolder,
+  onLoadChildren,
+  onNodeOpenChange,
+  onPreviewFile,
+  openState
+}: ProjectTreeProps) {
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const treeRef = useRef<TreeApi<TreeNode> | null>(null)
+  const [size, setSize] = useState({ height: 0, width: 0 })
+
+  const syncTreeSize = useCallback(() => {
+    const el = containerRef.current
+
+    if (!el) {
+      return
+    }
+
+    const { height, width } = el.getBoundingClientRect()
+
+    setSize(prev => {
+      if (prev.height === height && prev.width === width) {
+        return prev
+      }
+
+      return { height, width }
+    })
+  }, [])
+
+  useResizeObserver(syncTreeSize, containerRef)
+
+  const handleToggle = useCallback(
+    (id: string) => {
+      const node = treeRef.current?.get(id)
+
+      if (!node) {
+        return
+      }
+
+      onNodeOpenChange(id, node.isOpen)
+
+      if (node.isOpen && node.data?.isDirectory && node.data.children === undefined) {
+        void onLoadChildren(id)
+      }
+    },
+    [onLoadChildren, onNodeOpenChange]
+  )
+
+  const handleActivate = useCallback(
+    (node: NodeApi<TreeNode>) => {
+      if (node.data && !node.data.isDirectory) {
+        onPreviewFile?.(node.data.id)
+      }
+    },
+    [onPreviewFile]
+  )
+
+  return (
+    <div className="min-h-0 flex-1 overflow-hidden" ref={containerRef}>
+      {size.height > 0 && size.width > 0 ? (
+        <Tree<TreeNode>
+          childrenAccessor={node => (node?.isDirectory ? (node.children ?? []) : null)}
+          data={data}
+          disableDrag
+          disableDrop
+          disableEdit
+          height={size.height}
+          indent={INDENT}
+          initialOpenState={openState}
+          key={`${cwd}:${collapseNonce}`}
+          onActivate={handleActivate}
+          onToggle={handleToggle}
+          openByDefault={false}
+          padding={0}
+          ref={treeRef}
+          rowHeight={ROW_HEIGHT}
+          width={size.width}
+        >
+          {props => (
+            <ProjectTreeRow
+              {...props}
+              onAttachFile={onActivateFile}
+              onAttachFolder={onActivateFolder}
+              onPreviewFile={onPreviewFile}
+            />
+          )}
+        </Tree>
+      ) : (
+        <TreeSizingState />
+      )}
+    </div>
+  )
+}
+
+function TreeSizingState() {
+  const { t } = useI18n()
+
+  return <PageLoader aria-label={t.rightSidebar.loadingFiles} className="min-h-24 px-3" />
+}
+
+function ProjectTreeRow({
+  dragHandle,
+  node,
+  onAttachFile,
+  onAttachFolder,
+  onPreviewFile,
+  style
+}: NodeRendererProps<TreeNode> & {
+  onAttachFile: (path: string) => void
+  onAttachFolder: (path: string) => void
+  onPreviewFile?: (path: string) => void
+}) {
+  if (!node.data) {
+    return <div style={style} />
+  }
+
+  const isFolder = node.data.isDirectory
+  const isPlaceholder = node.data.id.endsWith('::__loading__')
+
+  return (
+    <div
+      aria-expanded={isFolder ? node.isOpen : undefined}
+      aria-selected={node.isSelected}
+      className={cn(
+        'group/row flex h-full cursor-pointer select-none items-center gap-1 border border-transparent px-3 text-xs font-normal leading-(--file-tree-row-height) text-(--ui-text-secondary) transition-colors hover:bg-(--ui-row-hover-background) hover:text-foreground',
+        node.isSelected && 'bg-(--ui-row-active-background) text-foreground',
+        isPlaceholder && 'pointer-events-none italic text-muted-foreground/70'
+      )}
+      draggable={!isPlaceholder}
+      onClick={event => {
+        event.stopPropagation()
+
+        if (isPlaceholder) {
+          return
+        }
+
+        if (event.shiftKey) {
+          ;(isFolder ? onAttachFolder : onAttachFile)(node.data.id)
+
+          return
+        }
+
+        if (isFolder) {
+          node.toggle()
+        } else {
+          node.select()
+        }
+      }}
+      onDoubleClick={event => {
+        event.stopPropagation()
+
+        if (!isFolder && !isPlaceholder) {
+          onPreviewFile?.(node.data.id)
+        }
+      }}
+      onDragStart={event => {
+        if (isPlaceholder) {
+          event.preventDefault()
+
+          return
+        }
+
+        const payload = JSON.stringify([{ isDirectory: isFolder, path: node.data.id }])
+
+        event.dataTransfer.effectAllowed = 'copy'
+        event.dataTransfer.setData('application/x-NASTECH-paths', payload)
+        event.dataTransfer.setData('text/plain', node.data.id)
+      }}
+      ref={dragHandle}
+      style={style}
+    >
+      {isFolder && !isPlaceholder && (
+        <span aria-hidden className="flex w-3 items-center justify-center">
+          <Codicon
+            className="text-(--ui-text-tertiary)"
+            name={node.isOpen ? 'chevron-down' : 'chevron-right'}
+            size="0.75rem"
+          />
+        </span>
+      )}
+      {!isFolder && <span aria-hidden className="w-3 shrink-0" />}
+      <span aria-hidden className="flex w-3.5 items-center justify-center text-(--ui-text-tertiary)">
+        {isPlaceholder ? (
+          <Codicon name="loading" size="0.75rem" spinning />
+        ) : isFolder ? (
+          <Codicon name={node.isOpen ? 'folder-opened' : 'folder'} size="0.875rem" />
+        ) : (
+          <Codicon name="file" size="0.875rem" />
+        )}
+      </span>
+      <span className="min-w-0 flex-1 truncate">{node.data.name}</span>
+    </div>
+  )
+}

package/src/app/right-sidebar/files/use-project-tree.test.ts

@@ -0,0 +1,190 @@
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { NasTechReadDirResult } from '@/global'
+
+import { resetProjectTreeState, useProjectTree } from './use-project-tree'
+
+const readDir = vi.fn<(path: string) => Promise<NasTechReadDirResult>>()
+
+beforeEach(() => {
+  resetProjectTreeState()
+  readDir.mockReset()
+  ;(window as unknown as { NASTECHDesktop: { readDir: typeof readDir } }).NASTECHDesktop = { readDir }
+})
+
+afterEach(() => {
+  resetProjectTreeState()
+  delete (window as unknown as { NASTECHDesktop?: unknown }).NASTECHDesktop
+})
+
+function ok(entries: { name: string; path: string; isDirectory: boolean }[]): NasTechReadDirResult {
+  return { entries }
+}
+
+describe('useProjectTree', () => {
+  it('starts empty when cwd is blank and skips IPC', async () => {
+    const { result } = renderHook(() => useProjectTree(''))
+
+    await waitFor(() => expect(result.current.rootLoading).toBe(false))
+
+    expect(result.current.data).toEqual([])
+    expect(result.current.rootError).toBeNull()
+    expect(readDir).not.toHaveBeenCalled()
+  })
+
+  it('loads root entries on mount and sorts folders before files', async () => {
+    readDir.mockResolvedValueOnce(
+      ok([
+        { name: 'README.md', path: '/p/README.md', isDirectory: false },
+        { name: 'src', path: '/p/src', isDirectory: true }
+      ])
+    )
+
+    const { result } = renderHook(() => useProjectTree('/p'))
+
+    await waitFor(() => expect(result.current.data.length).toBe(2))
+
+    expect(readDir).toHaveBeenCalledWith('/p')
+    // Hook trusts main-process sort order; folders/files preserved as supplied.
+    expect(result.current.data.map(n => n.name)).toEqual(['README.md', 'src'])
+    // Folder children start undefined (lazy load on first expand).
+    expect(result.current.data.find(n => n.name === 'src')?.children).toBeUndefined()
+    expect(result.current.data.find(n => n.name === 'src')?.isDirectory).toBe(true)
+    expect(result.current.data.find(n => n.name === 'README.md')?.isDirectory).toBe(false)
+  })
+
+  it('records rootError when readDir returns an error', async () => {
+    readDir.mockResolvedValueOnce({ entries: [], error: 'EACCES' })
+
+    const { result } = renderHook(() => useProjectTree('/locked'))
+
+    await waitFor(() => expect(result.current.rootError).toBe('EACCES'))
+    expect(result.current.data).toEqual([])
+  })
+
+  it('lazy-loads children on loadChildren and replaces the placeholder', async () => {
+    readDir.mockResolvedValueOnce(ok([{ name: 'src', path: '/p/src', isDirectory: true }]))
+    readDir.mockResolvedValueOnce(
+      ok([
+        { name: 'index.ts', path: '/p/src/index.ts', isDirectory: false },
+        { name: 'lib', path: '/p/src/lib', isDirectory: true }
+      ])
+    )
+
+    const { result } = renderHook(() => useProjectTree('/p'))
+
+    await waitFor(() => expect(result.current.data.length).toBe(1))
+
+    await act(async () => {
+      await result.current.loadChildren('/p/src')
+    })
+
+    const src = result.current.data[0]
+    expect(src.children?.map(n => n.name)).toEqual(['index.ts', 'lib'])
+    expect(src.loading).toBe(false)
+    expect(src.error).toBeUndefined()
+  })
+
+  it('keeps loaded tree state across remounts for the same cwd', async () => {
+    readDir.mockResolvedValueOnce(ok([{ name: 'src', path: '/p/src', isDirectory: true }]))
+
+    const { result, unmount } = renderHook(() => useProjectTree('/p'))
+
+    await waitFor(() => expect(result.current.data.length).toBe(1))
+
+    act(() => {
+      result.current.setNodeOpen('/p/src', true)
+    })
+
+    unmount()
+
+    const remounted = renderHook(() => useProjectTree('/p'))
+
+    expect(remounted.result.current.data.map(n => n.name)).toEqual(['src'])
+    expect(remounted.result.current.openState).toEqual({ '/p/src': true })
+    expect(readDir).toHaveBeenCalledTimes(1)
+  })
+
+  it('captures per-folder error code and leaves the folder expandable but empty', async () => {
+    readDir.mockResolvedValueOnce(ok([{ name: 'priv', path: '/p/priv', isDirectory: true }]))
+    readDir.mockResolvedValueOnce({ entries: [], error: 'EACCES' })
+
+    const { result } = renderHook(() => useProjectTree('/p'))
+
+    await waitFor(() => expect(result.current.data.length).toBe(1))
+
+    await act(async () => {
+      await result.current.loadChildren('/p/priv')
+    })
+
+    expect(result.current.data[0].error).toBe('EACCES')
+    expect(result.current.data[0].children).toEqual([])
+  })
+
+  it('dedupes concurrent loadChildren calls for the same id', async () => {
+    readDir.mockResolvedValueOnce(ok([{ name: 'src', path: '/p/src', isDirectory: true }]))
+
+    let resolveChildren: ((value: NasTechReadDirResult) => void) | undefined
+    readDir.mockImplementationOnce(
+      () =>
+        new Promise<NasTechReadDirResult>(resolve => {
+          resolveChildren = resolve
+        })
+    )
+
+    const { result } = renderHook(() => useProjectTree('/p'))
+
+    await waitFor(() => expect(result.current.data.length).toBe(1))
+
+    await act(async () => {
+      // First call enters inflight, second short-circuits, third also short-circuits.
+      void result.current.loadChildren('/p/src')
+      void result.current.loadChildren('/p/src')
+      void result.current.loadChildren('/p/src')
+      resolveChildren?.(ok([{ name: 'a.ts', path: '/p/src/a.ts', isDirectory: false }]))
+    })
+
+    // Mount load + a single folder fetch — duplicates were dropped.
+    expect(readDir).toHaveBeenCalledTimes(2)
+  })
+
+  it('refreshRoot reloads the root and clears prior error', async () => {
+    readDir.mockResolvedValueOnce({ entries: [], error: 'EACCES' })
+    readDir.mockResolvedValueOnce(ok([{ name: 'README.md', path: '/p/README.md', isDirectory: false }]))
+
+    const { result } = renderHook(() => useProjectTree('/p'))
+
+    await waitFor(() => expect(result.current.rootError).toBe('EACCES'))
+
+    await act(async () => {
+      await result.current.refreshRoot()
+    })
+
+    expect(result.current.rootError).toBeNull()
+    expect(result.current.data.map(n => n.name)).toEqual(['README.md'])
+  })
+
+  it('reloads when cwd changes', async () => {
+    readDir.mockResolvedValueOnce(ok([{ name: 'one', path: '/a/one', isDirectory: false }]))
+    readDir.mockResolvedValueOnce(ok([{ name: 'two', path: '/b/two', isDirectory: false }]))
+
+    const { rerender, result } = renderHook(({ cwd }) => useProjectTree(cwd), { initialProps: { cwd: '/a' } })
+
+    await waitFor(() => expect(result.current.data[0]?.name).toBe('one'))
+
+    rerender({ cwd: '/b' })
+
+    await waitFor(() => expect(result.current.data[0]?.name).toBe('two'))
+    expect(readDir).toHaveBeenLastCalledWith('/b')
+  })
+
+  it('returns no-bridge gracefully when window.NASTECHDesktop is missing', async () => {
+    delete (window as unknown as { NASTECHDesktop?: unknown }).NASTECHDesktop
+
+    const { result } = renderHook(() => useProjectTree('/p'))
+
+    await waitFor(() => expect(result.current.rootError).toBe('no-bridge'))
+    expect(result.current.data).toEqual([])
+  })
+})

package/src/app/right-sidebar/files/use-project-tree.ts

@@ -0,0 +1,268 @@
+import { useStore } from '@nanostores/react'
+import { atom } from 'nanostores'
+import { useCallback, useEffect, useMemo } from 'react'
+
+import { clearProjectDirCache, readProjectDir } from './ipc'
+
+export interface TreeNode {
+  /** Absolute filesystem path. Doubles as react-arborist node id. */
+  id: string
+  name: string
+  /** Drives arborist's leaf-vs-expandable decision via childrenAccessor. */
+  isDirectory: boolean
+  /** `undefined` = directory, children not yet loaded. `[]` = loaded empty. */
+  children?: TreeNode[]
+  /** True while a readDir for this folder is in flight. */
+  loading?: boolean
+  /** Last error code from readDir (e.g. EACCES). Cleared on next successful load. */
+  error?: string
+}
+
+const PLACEHOLDER_ID = '__loading__'
+
+function makeNode(path: string, name: string, isDirectory: boolean): TreeNode {
+  return { id: path, isDirectory, name }
+}
+
+function patchNode(nodes: TreeNode[] | undefined | null, id: string, patch: (n: TreeNode) => TreeNode): TreeNode[] {
+  if (!nodes) {
+    return []
+  }
+
+  return nodes.map(n => {
+    if (n.id === id) {
+      return patch(n)
+    }
+
+    if (n.children && n.children.length > 0) {
+      return { ...n, children: patchNode(n.children, id, patch) }
+    }
+
+    return n
+  })
+}
+
+function placeholderChild(parentId: string): TreeNode {
+  return { id: `${parentId}::${PLACEHOLDER_ID}`, isDirectory: false, name: 'Loading…' }
+}
+
+export interface UseProjectTreeResult {
+  /** Bumped by collapseAll so callers can remount the tree fully collapsed. */
+  collapseNonce: number
+  data: TreeNode[]
+  openState: Record<string, boolean>
+  rootError: string | null
+  rootLoading: boolean
+  collapseAll: () => void
+  loadChildren: (id: string) => Promise<void>
+  refreshRoot: () => Promise<void>
+  setNodeOpen: (id: string, open: boolean) => void
+}
+
+interface ProjectTreeState {
+  collapseNonce: number
+  cwd: string
+  data: TreeNode[]
+  loaded: boolean
+  openState: Record<string, boolean>
+  requestId: number
+  rootError: string | null
+  rootLoading: boolean
+}
+
+const initialState: ProjectTreeState = {
+  collapseNonce: 0,
+  cwd: '',
+  data: [],
+  loaded: false,
+  openState: {},
+  requestId: 0,
+  rootError: null,
+  rootLoading: false
+}
+
+const inflight = new Set<string>()
+const $projectTree = atom<ProjectTreeState>(initialState)
+let nextRootRequestId = 0
+
+function setProjectTree(updater: (current: ProjectTreeState) => ProjectTreeState) {
+  $projectTree.set(updater($projectTree.get()))
+}
+
+function clearProjectTree() {
+  nextRootRequestId += 1
+  inflight.clear()
+  $projectTree.set({ ...initialState, requestId: nextRootRequestId })
+}
+
+async function loadRoot(cwd: string, { force = false }: { force?: boolean } = {}) {
+  if (!cwd) {
+    clearProjectTree()
+
+    return
+  }
+
+  const current = $projectTree.get()
+
+  if (!force && current.cwd === cwd && (current.loaded || current.rootLoading)) {
+    return
+  }
+
+  const requestId = nextRootRequestId + 1
+  nextRootRequestId = requestId
+  inflight.clear()
+
+  if (force || current.cwd !== cwd) {
+    clearProjectDirCache(cwd)
+  }
+
+  $projectTree.set({
+    collapseNonce: current.collapseNonce,
+    cwd,
+    data: [],
+    loaded: false,
+    openState: current.cwd === cwd ? current.openState : {},
+    requestId,
+    rootError: null,
+    rootLoading: true
+  })
+
+  const { entries, error } = await readProjectDir(cwd, cwd)
+
+  setProjectTree(latest => {
+    if (latest.cwd !== cwd || latest.requestId !== requestId) {
+      return latest
+    }
+
+    return {
+      ...latest,
+      data: error ? [] : entries.map(e => makeNode(e.path, e.name, e.isDirectory)),
+      loaded: true,
+      rootError: error || null,
+      rootLoading: false
+    }
+  })
+}
+
+export function resetProjectTreeState() {
+  clearProjectTree()
+  clearProjectDirCache()
+}
+
+/**
+ * Lazy-loads a directory tree rooted at `cwd`. Children are fetched on first
+ * expand and cached in this feature-owned atom so unrelated chat rerenders or
+ * remounts cannot reset the browser. A placeholder leaf renders so the
+ * disclosure caret shows for unloaded folders. `refreshRoot` invalidates the
+ * whole tree (used after cwd change or manual refresh).
+ */
+export function useProjectTree(cwd: string): UseProjectTreeResult {
+  const state = useStore($projectTree)
+
+  const refreshRoot = useCallback(() => loadRoot(cwd, { force: true }), [cwd])
+
+  const setNodeOpen = useCallback(
+    (id: string, open: boolean) => {
+      setProjectTree(current => {
+        if (current.cwd !== cwd || current.openState[id] === open) {
+          return current
+        }
+
+        return {
+          ...current,
+          openState: {
+            ...current.openState,
+            [id]: open
+          }
+        }
+      })
+    },
+    [cwd]
+  )
+
+  // Clears the recorded open state and bumps the nonce; the tree is keyed on
+  // the nonce so it remounts with everything collapsed (loaded children stay
+  // cached in `data`, just hidden).
+  const collapseAll = useCallback(() => {
+    setProjectTree(current => {
+      if (current.cwd !== cwd) {
+        return current
+      }
+
+      return { ...current, collapseNonce: current.collapseNonce + 1, openState: {} }
+    })
+  }, [cwd])
+
+  const loadChildren = useCallback(
+    async (id: string) => {
+      if (!cwd || inflight.has(id)) {
+        return
+      }
+
+      inflight.add(id)
+
+      setProjectTree(current => {
+        if (current.cwd !== cwd) {
+          return current
+        }
+
+        return {
+          ...current,
+          data: patchNode(current.data, id, n => ({ ...n, loading: true, children: [placeholderChild(n.id)] }))
+        }
+      })
+
+      const { entries, error } = await readProjectDir(id, cwd)
+
+      inflight.delete(id)
+
+      setProjectTree(current => {
+        if (current.cwd !== cwd) {
+          return current
+        }
+
+        return {
+          ...current,
+          data: patchNode(current.data, id, n => ({
+            ...n,
+            loading: false,
+            error: error || undefined,
+            children: error ? [] : entries.map(e => makeNode(e.path, e.name, e.isDirectory))
+          }))
+        }
+      })
+    },
+    [cwd]
+  )
+
+  useEffect(() => {
+    void loadRoot(cwd)
+  }, [cwd])
+
+  return useMemo(
+    () => ({
+      collapseAll,
+      collapseNonce: state.cwd === cwd ? state.collapseNonce : 0,
+      data: state.cwd === cwd ? state.data : [],
+      loadChildren,
+      openState: state.cwd === cwd ? state.openState : {},
+      refreshRoot,
+      rootError: state.cwd === cwd ? state.rootError : null,
+      rootLoading: state.cwd === cwd ? state.rootLoading : Boolean(cwd),
+      setNodeOpen
+    }),
+    [
+      collapseAll,
+      cwd,
+      loadChildren,
+      refreshRoot,
+      setNodeOpen,
+      state.collapseNonce,
+      state.cwd,
+      state.data,
+      state.openState,
+      state.rootError,
+      state.rootLoading
+    ]
+  )
+}