dsh-explorer 0.0.0-stage → 0.1.1

package/src/client/hooks/useKeyboardNav.ts

@@ -0,0 +1,89 @@
+import React from 'react'
+import type { FsEntry } from '../utils/api.ts'
+
+interface FlatRowItem {
+  entry: FsEntry
+  relativePath: string
+}
+
+interface UseKeyboardNavOptions {
+  visibleFlatRows: FlatRowItem[]
+  focusedPath: string | null
+  expanded: Set<string>
+  setFocusedPath: (path: string) => void
+  setSelected: React.Dispatch<React.SetStateAction<Set<string>>>
+  toggleExpand: (path: string) => void
+  onMention: (relativePath: string) => void
+  onStartRename: (path: string) => void
+  onDelete: (entry: FsEntry, relativePath: string) => void
+}
+
+export function useKeyboardNav({
+  visibleFlatRows,
+  focusedPath,
+  expanded,
+  setFocusedPath,
+  setSelected,
+  toggleExpand,
+  onMention,
+  onStartRename,
+  onDelete,
+}: UseKeyboardNavOptions) {
+  return (e: React.KeyboardEvent) => {
+    if (visibleFlatRows.length === 0) return
+    const currentIndex = visibleFlatRows.findIndex((r) => r.entry.path === focusedPath)
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      const nextIndex = currentIndex < visibleFlatRows.length - 1 ? currentIndex + 1 : 0
+      const nextRow = visibleFlatRows[nextIndex]
+      if (nextRow) {
+        setFocusedPath(nextRow.entry.path)
+        setSelected(new Set([nextRow.entry.path]))
+      }
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      const prevIndex = currentIndex > 0 ? currentIndex - 1 : visibleFlatRows.length - 1
+      const prevRow = visibleFlatRows[prevIndex]
+      if (prevRow) {
+        setFocusedPath(prevRow.entry.path)
+        setSelected(new Set([prevRow.entry.path]))
+      }
+    } else if (e.key === 'ArrowRight') {
+      const currentRow = visibleFlatRows[currentIndex]
+      if (currentRow?.entry.isDir && !expanded.has(currentRow.entry.path)) {
+        e.preventDefault()
+        toggleExpand(currentRow.entry.path)
+      }
+    } else if (e.key === 'ArrowLeft') {
+      const currentRow = visibleFlatRows[currentIndex]
+      if (currentRow?.entry.isDir && expanded.has(currentRow.entry.path)) {
+        e.preventDefault()
+        toggleExpand(currentRow.entry.path)
+      }
+    } else if (e.key === 'Enter') {
+      const currentRow = visibleFlatRows[currentIndex]
+      if (currentRow) {
+        e.preventDefault()
+        if (currentRow.entry.isDir) {
+          toggleExpand(currentRow.entry.path)
+        } else {
+          onMention(currentRow.relativePath)
+        }
+      }
+    } else if (e.key === 'F2') {
+      if (focusedPath) {
+        e.preventDefault()
+        onStartRename(focusedPath)
+      }
+    } else if (e.key === 'Delete') {
+      if (focusedPath) {
+        e.preventDefault()
+        const targetRow = visibleFlatRows.find((r) => r.entry.path === focusedPath)
+        if (targetRow) {
+          onDelete(targetRow.entry, targetRow.relativePath)
+        }
+      }
+    }
+  }
+}

package/src/client/hooks/useLiveSync.ts

@@ -0,0 +1,81 @@
+import { useEffect } from 'react'
+
+interface UseLiveSyncOptions {
+  rootPath: string
+  onRefresh: () => void
+}
+
+export function useLiveSync({ rootPath, onRefresh }: UseLiveSyncOptions): void {
+  useEffect(() => {
+    if (!rootPath) return
+
+    let debounceTimer: ReturnType<typeof setTimeout> | null = null
+    const scheduleRefresh = () => {
+      if (debounceTimer) clearTimeout(debounceTimer)
+      debounceTimer = setTimeout(() => {
+        onRefresh()
+      }, 100)
+    }
+
+    let es: EventSource | null = null
+    try {
+      const sseUrl = `/dsh-explorer/api/events?dir=${encodeURIComponent(rootPath)}`
+      es = new EventSource(sseUrl)
+      es.onmessage = (e) => {
+        try {
+          const data = JSON.parse(e.data)
+          if (data.type === 'connected') return
+        } catch {}
+        scheduleRefresh()
+      }
+    } catch (err) {
+      console.warn('[dsh-explorer] SSE init error:', err)
+    }
+
+    let ws: WebSocket | null = null
+    try {
+      const loc = window.location
+      const host = loc.host || (loc.port ? `127.0.0.1:${loc.port}` : '127.0.0.1')
+      const wsProtocol = loc.protocol === 'https:' ? 'wss:' : 'ws:'
+      const wsUrl = `${wsProtocol}//${host}/dsh-explorer/api/watch?dir=${encodeURIComponent(rootPath)}`
+      ws = new WebSocket(wsUrl)
+      ws.onmessage = () => {
+        scheduleRefresh()
+      }
+    } catch {}
+
+    const onFocus = () => {
+      scheduleRefresh()
+    }
+    const onVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        scheduleRefresh()
+      }
+    }
+    window.addEventListener('focus', onFocus)
+    document.addEventListener('visibilitychange', onVisibilityChange)
+
+    const interval = setInterval(() => {
+      if (document.visibilityState === 'visible') {
+        scheduleRefresh()
+      }
+    }, 3000)
+
+    return () => {
+      if (debounceTimer) clearTimeout(debounceTimer)
+      clearInterval(interval)
+      window.removeEventListener('focus', onFocus)
+      document.removeEventListener('visibilitychange', onVisibilityChange)
+      if (es) {
+        try {
+          es.close()
+        } catch {}
+      }
+      if (ws) {
+        try {
+          ws.close()
+        } catch {}
+      }
+    }
+  }, [rootPath, onRefresh])
+}

package/src/client/index.tsx

@@ -0,0 +1,238 @@
+import React, { Component, type ReactNode, type ErrorInfo, memo } from 'react'
+import { ExplorerView } from './ExplorerView.tsx'
+import { attachGlobalConversationDropListener } from './utils/drag-drop.ts'
+import { setupCaretTracker } from './utils/conversation-draft.ts'
+
+export const inject = [
+  'slots',
+  'sessions',
+  'locale',
+]
+
+interface ErrorBoundaryProps {
+  children: ReactNode
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean
+  error: Error | null
+}
+
+class ExplorerErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state: ErrorBoundaryState = { hasError: false, error: null }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    console.error('[dsh-explorer] Render error:', error, errorInfo)
+  }
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      return (
+        <div
+          style={{
+            padding: '16px',
+            color: 'var(--dsw-alias-label-primary, #ffffff)',
+            fontSize: '12px',
+            fontFamily: 'var(--dsw-font-code, monospace)',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '12px',
+            height: '100%',
+            boxSizing: 'border-box',
+          }}
+        >
+          <div style={{ fontWeight: 600, color: 'var(--dsw-alias-danger, #f85149)' }}>
+            Explorer encountered an error
+          </div>
+          <div
+            style={{
+              fontSize: '11px',
+              opacity: 0.85,
+              wordBreak: 'break-word',
+              background: 'var(--dsw-alias-bg-hover, rgba(255, 255, 255, 0.05))',
+              padding: '8px',
+              borderRadius: '4px',
+            }}
+          >
+            {this.state.error?.message || 'Unknown render exception'}
+          </div>
+          <button
+            type="button"
+            onClick={() => this.setState({ hasError: false, error: null })}
+            style={{
+              padding: '6px 12px',
+              borderRadius: '6px',
+              border: '1px solid var(--dsw-alias-hairline, rgba(255, 255, 255, 0.15))',
+              background: 'var(--dsw-alias-interactive-bg-hover, rgba(255, 255, 255, 0.08))',
+              color: 'var(--dsw-alias-label-primary, #ffffff)',
+              cursor: 'pointer',
+              alignSelf: 'flex-start',
+              fontSize: '12px',
+            }}
+          >
+            Reload Explorer
+          </button>
+        </div>
+      )
+    }
+    return this.props.children
+  }
+}
+
+const ExplorerTabIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+    <path d="M14 4.5V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6.5L14 4.5zm-1 0H9.5a.5.5 0 0 1-.5-.5V2H3v12h10V4.5z"/>
+  </svg>
+)
+
+const ExplorerTabTitle = memo(function ExplorerTabTitle() {
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'center', gap: '6px', fontSize: '12px' }}>
+      <ExplorerTabIcon />
+      <span>Explorer</span>
+    </span>
+  )
+})
+
+const ExplorerPaneBody = memo(function ExplorerPaneBody(props: { ctx?: any; sessionId?: string }) {
+  return (
+    <ExplorerErrorBoundary>
+      <ExplorerView ctx={props.ctx} sessionId={props.sessionId} />
+    </ExplorerErrorBoundary>
+  )
+})
+
+const ExplorerHeaderButton = ({ ctx, sessionId }: { ctx: any; sessionId?: string }) => {
+  return (
+    <button
+      type="button"
+      title="Explorer (File Tree)"
+      aria-label="Explorer"
+      onClick={() => {
+        try {
+          const sr = ctx.get ? ctx.get('sidebarRight') : ctx.sidebarRight
+          if (sessionId && sr?.openTabIn) {
+            sr.openTabIn(sessionId, 'explorer')
+          } else if (sr?.openTab) {
+            sr.openTab('explorer')
+          }
+        } catch (err) {
+          console.warn('[dsh-explorer] failed to open sidebar tab:', err)
+        }
+      }}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: 'transparent',
+        border: 'none',
+        cursor: 'pointer',
+        padding: '3px 6px',
+        borderRadius: '6px',
+        color: 'var(--dsw-alias-label-secondary, #8b949e)',
+        transition: 'color 0.15s, background-color 0.15s',
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.color = 'var(--dsw-alias-label-primary, #ffffff)'
+        e.currentTarget.style.backgroundColor = 'var(--dsw-alias-bg-hover, rgba(255, 255, 255, 0.08))'
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.color = 'var(--dsw-alias-label-secondary, #8b949e)'
+        e.currentTarget.style.backgroundColor = 'transparent'
+      }}
+    >
+      <ExplorerTabIcon />
+    </button>
+  )
+}
+
+export function apply(ctx: any): void {
+  // 1. Live composer caret tracker (for precise insertion point)
+  ctx.effect(() => {
+    try {
+      return setupCaretTracker()
+    } catch (err) {
+      console.warn('[dsh-explorer] failed to setup caret tracker:', err)
+      return () => {}
+    }
+  }, 'dsh-explorer: caret tracker')
+
+  // 2. Global drag & drop listener onto DSH chat conversation
+  ctx.effect(() => {
+    try {
+      return attachGlobalConversationDropListener(ctx)
+    } catch (err) {
+      console.warn('[dsh-explorer] failed to attach conversation drop listener:', err)
+      return () => {}
+    }
+  }, 'dsh-explorer: conversation drop listener')
+
+  // 2. Direct icon button in conversation session header utilities
+  ctx.slots.inject('conversation.session.header.utilities', () =>
+    ctx.slots.register(
+      {
+        name: 'conversation.session.header.utilities',
+        id: 'dsh-explorer:header-button',
+        order: 15,
+        inject: (sessionId: string) => ({ sessionId }),
+      },
+      (props: { sessionId?: string }) => <ExplorerHeaderButton ctx={ctx} sessionId={props.sessionId} />
+    )
+  )
+
+  // 3. Register native tab into DSH right sidebar
+  ctx.inject(['sidebarRightTabs'], (injected: any) => {
+    const tabs = injected.get ? injected.get('sidebarRightTabs') : injected.sidebarRightTabs
+    if (!tabs?.register) return
+
+    // Register 'explorer' kind
+    const unregisterExplorer = tabs.register({
+      id: 'dsh-explorer',
+      kind: 'explorer',
+      keepMounted: true,
+      priority: 'extension',
+      title: () => 'Explorer',
+      guide: [
+        {
+          id: 'dsh-explorer',
+          order: 5,
+          title: () => 'Explorer',
+          description: () => 'VS Code style file explorer with drag & drop to chat',
+          icon: ExplorerTabIcon,
+        },
+      ],
+    })
+
+    // Register pane slots for 'dsh-explorer'
+    const offBody = ctx.slots.inject('sidebar.right.pane.tab', () =>
+      ctx.slots.register(
+        {
+          name: 'sidebar.right.pane.tab',
+          key: 'dsh-explorer',
+          inject: (sessionId: string) => ({ ctx, sessionId }),
+        },
+        ExplorerPaneBody
+      )
+    )
+    const offTitle = ctx.slots.inject('sidebar.right.pane.tab.title', () =>
+      ctx.slots.register(
+        {
+          name: 'sidebar.right.pane.tab.title',
+          key: 'dsh-explorer',
+          inject: (sessionId: string) => ({ sessionId }),
+        },
+        ExplorerTabTitle
+      )
+    )
+
+    return () => {
+      try { offTitle?.() } catch {}
+      try { offBody?.() } catch {}
+      try { unregisterExplorer?.() } catch {}
+    }
+  })
+}

package/src/client/utils/api.ts

@@ -0,0 +1,251 @@
+export interface CompactSegment {
+  name: string
+  path: string
+}
+
+export interface FsEntry {
+  name: string
+  path: string
+  isDir: boolean
+  hidden: boolean
+  isSymlink: boolean
+  broken: boolean
+  compact?: boolean
+  compactName?: string
+  compactPath?: string
+  compactChain?: CompactSegment[]
+}
+
+export interface FsListing {
+  path: string
+  entries: FsEntry[]
+  truncated: boolean
+}
+
+export interface GitStatusEntry {
+  path: string
+  xy: string
+}
+
+export interface GitStatusResult {
+  isRepo: boolean
+  branch?: string
+  entries: GitStatusEntry[]
+}
+
+export async function fetchTree(sessionId?: string, dir?: string): Promise<FsListing> {
+  const params = new URLSearchParams()
+  if (sessionId) params.set('sessionId', sessionId)
+  if (dir) params.set('dir', dir)
+  const res = await fetch(`/dsh-explorer/api/tree?${params.toString()}`)
+  if (!res.ok) {
+    const text = await res.text().catch(() => '')
+    throw new Error(`HTTP ${res.status}: ${text || res.statusText}`)
+  }
+  const json = await res.json()
+  if (!json.ok) throw new Error(json.message || 'Failed to fetch directory')
+  return json.listing
+}
+
+export async function fetchBatchTree(paths: string[]): Promise<Record<string, FsListing>> {
+  const res = await fetch('/dsh-explorer/api/batch-tree', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ paths }),
+  })
+  const json = await res.json()
+  if (!json.ok) throw new Error(json.message || 'Failed to fetch batch trees')
+  return json.results
+}
+
+export async function fetchGitStatus(
+  dirOrOpts?: string | { dir?: string; sessionId?: string },
+  sessionId?: string
+): Promise<GitStatusResult> {
+  const params = new URLSearchParams()
+  if (typeof dirOrOpts === 'object' && dirOrOpts !== null) {
+    if (dirOrOpts.dir) params.set('dir', dirOrOpts.dir)
+    if (dirOrOpts.sessionId) params.set('sessionId', dirOrOpts.sessionId)
+  } else {
+    if (dirOrOpts) params.set('dir', dirOrOpts)
+    if (sessionId) params.set('sessionId', sessionId)
+  }
+  const res = await fetch(`/dsh-explorer/api/git-status?${params.toString()}`)
+  if (!res.ok) return { isRepo: false, entries: [] }
+  const json = await res.json()
+  if (!json.ok) return { isRepo: false, entries: [] }
+  return json.git
+}
+
+export interface SearchMatch {
+  name: string
+  path: string
+  relativePath: string
+  isDir: boolean
+}
+
+export interface SearchResult {
+  query: string
+  matches: SearchMatch[]
+  totalMatches: number
+  truncated: boolean
+}
+
+export async function crawlClientSearch(
+  rootDir: string,
+  query: string,
+  sessionId?: string,
+  signal?: AbortSignal,
+  maxResults = 250
+): Promise<SearchResult> {
+  const cleanQ = query.trim().toLowerCase()
+  if (!cleanQ) return { query, matches: [], totalMatches: 0, truncated: false }
+
+  const matches: SearchMatch[] = []
+  const queue: string[] = [rootDir]
+  const visited = new Set<string>()
+  const ignored = new Set([
+    'node_modules',
+    '.agent',
+    '.git',
+    'dist',
+    'target',
+    'build',
+    '.system_generated',
+    '.cache',
+    '.dsh',
+    '.gemini',
+    '.vscode',
+    '.idea',
+  ])
+
+  let scanned = 0
+  const maxScanned = 1500
+
+  while (queue.length > 0 && matches.length < maxResults && scanned < maxScanned) {
+    if (signal?.aborted) break
+    const current = queue.shift()!
+    if (visited.has(current)) continue
+    visited.add(current)
+
+    try {
+      const listing = await fetchTree(sessionId, current)
+      if (!listing?.entries) continue
+
+      for (const ent of listing.entries) {
+        if (!ent || ent.name.startsWith('.')) continue
+        scanned++
+        const normRoot = rootDir.replace(/\\/g, '/').replace(/\/+$/, '')
+        const normTarget = ent.path.replace(/\\/g, '/')
+        const relPath = normTarget.toLowerCase().startsWith(`${normRoot.toLowerCase()}/`)
+          ? normTarget.slice(normRoot.length + 1)
+          : ent.path
+
+        const nameLower = ent.name.toLowerCase()
+        const relLower = relPath.toLowerCase()
+
+        if (nameLower.includes(cleanQ) || relLower.includes(cleanQ)) {
+          matches.push({
+            name: ent.name,
+            path: ent.path,
+            relativePath: relPath,
+            isDir: ent.isDir,
+          })
+          if (matches.length >= maxResults) break
+        }
+
+        if (ent.isDir && !ignored.has(ent.name)) {
+          queue.push(ent.path)
+        }
+      }
+    } catch {
+      continue
+    }
+  }
+
+  return {
+    query,
+    matches,
+    totalMatches: matches.length,
+    truncated: scanned >= maxScanned,
+  }
+}
+
+export async function fetchSearchWorkspace(
+  dir: string,
+  query: string,
+  sessionId?: string,
+  signal?: AbortSignal
+): Promise<SearchResult> {
+  const params = new URLSearchParams({ dir, q: query })
+  if (sessionId) params.set('sessionId', sessionId)
+  try {
+    const res = await fetch(`/dsh-explorer/api/search?${params.toString()}`, { signal })
+    if (res.status === 404) {
+      return crawlClientSearch(dir, query, sessionId, signal)
+    }
+    if (!res.ok) {
+      return crawlClientSearch(dir, query, sessionId, signal)
+    }
+    const json = await res.json()
+    if (!json.ok || !json.result) {
+      return crawlClientSearch(dir, query, sessionId, signal)
+    }
+    return json.result
+  } catch (err: any) {
+    if (err?.name === 'AbortError') throw err
+    return crawlClientSearch(dir, query, sessionId, signal)
+  }
+}
+
+export async function fetchFileContent(path: string): Promise<string> {
+  const params = new URLSearchParams({ path })
+  const res = await fetch(`/dsh-explorer/api/read-file?${params.toString()}`)
+  const json = await res.json()
+  if (!json.ok) throw new Error(json.message || 'Failed to read file')
+  return json.text
+}
+
+export async function apiCreateNewFile(dir: string, name: string): Promise<{ path: string }> {
+  const res = await fetch('/dsh-explorer/api/new-file', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ dir, name }),
+  })
+  const json = await res.json()
+  if (!json.ok) throw new Error(json.message || 'Failed to create file')
+  return json
+}
+
+export async function apiCreateDirectory(dir: string, name: string): Promise<{ path: string }> {
+  const res = await fetch('/dsh-explorer/api/mkdir', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ dir, name }),
+  })
+  const json = await res.json()
+  if (!json.ok) throw new Error(json.message || 'Failed to create folder')
+  return json
+}
+
+export async function apiRename(path: string, newName: string): Promise<{ oldPath: string; newPath: string }> {
+  const res = await fetch('/dsh-explorer/api/rename', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ path, newName }),
+  })
+  const json = await res.json()
+  if (!json.ok) throw new Error(json.message || 'Failed to rename')
+  return json
+}
+
+export async function apiDelete(path: string): Promise<void> {
+  const res = await fetch('/dsh-explorer/api/delete', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ path }),
+  })
+  const json = await res.json()
+  if (!json.ok) throw new Error(json.message || 'Failed to delete')
+}
+