dsh-explorer 0.1.0 → 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

@@ -1,7 +1,7 @@
-import React, { createElement, memo } from 'react'
+import React, { Component, type ReactNode, type ErrorInfo, memo } from 'react'
 import { ExplorerView } from './ExplorerView.tsx'
-import { attachGlobalConversationDropListener } from './drag-drop.ts'
-import { setupCaretTracker } from './conversation-draft.ts'
+import { attachGlobalConversationDropListener } from './utils/drag-drop.ts'
+import { setupCaretTracker } from './utils/conversation-draft.ts'
 
 export const inject = [
   'slots',
@@ -9,6 +9,80 @@ export const inject = [
   '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"/>
@@ -25,7 +99,11 @@ const ExplorerTabTitle = memo(function ExplorerTabTitle() {
 })
 
 const ExplorerPaneBody = memo(function ExplorerPaneBody(props: { ctx?: any; sessionId?: string }) {
-  return <ExplorerView ctx={props.ctx} sessionId={props.sessionId} />
+  return (
+    <ExplorerErrorBoundary>
+      <ExplorerView ctx={props.ctx} sessionId={props.sessionId} />
+    </ExplorerErrorBoundary>
+  )
 })
 
 const ExplorerHeaderButton = ({ ctx, sessionId }: { ctx: any; sessionId?: string }) => {

package/src/client/{api.ts → utils/api.ts}

@@ -58,16 +58,146 @@ export async function fetchBatchTree(paths: string[]): Promise<Record<string, Fs
   return json.results
 }
 
-export async function fetchGitStatus(sessionId?: string, dir?: string): Promise<GitStatusResult> {
+export async function fetchGitStatus(
+  dirOrOpts?: string | { dir?: string; sessionId?: string },
+  sessionId?: string
+): Promise<GitStatusResult> {
   const params = new URLSearchParams()
-  if (sessionId) params.set('sessionId', sessionId)
-  if (dir) params.set('dir', dir)
+  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()}`)

package/src/client/{conversation-draft.ts → utils/conversation-draft.ts}

@@ -107,39 +107,48 @@ export function findComposerElement(): HTMLElement | null {
  * Continuously track user selection/caret in composer.
  */
 export function recordLiveCaret(): void {
-  if (typeof document === 'undefined') return
-  const el = findComposerElement()
-  if (!el) return
+  try {
+    if (typeof document === 'undefined') return
+    const el = findComposerElement()
+    if (!el) return
 
-  if (el.tagName === 'TEXTAREA' || el.tagName === 'INPUT') {
-    const ta = el as HTMLTextAreaElement
-    const start = ta.selectionStart
-    const end = ta.selectionEnd
-    if (typeof start === 'number' && typeof end === 'number' && Number.isFinite(start) && Number.isFinite(end)) {
-      trackedCaret = {
-        start: Math.max(0, Math.min(start, ta.value.length)),
-        end: Math.max(start, Math.min(end, ta.value.length)),
-        draft: ta.value,
-        timestamp: Date.now(),
+    if (el.tagName === 'TEXTAREA' || el.tagName === 'INPUT') {
+      const ta = el as HTMLTextAreaElement
+      const start = ta.selectionStart
+      const end = ta.selectionEnd
+      if (typeof start === 'number' && typeof end === 'number' && Number.isFinite(start) && Number.isFinite(end)) {
+        trackedCaret = {
+          start: Math.max(0, Math.min(start, ta.value.length)),
+          end: Math.max(start, Math.min(end, ta.value.length)),
+          draft: ta.value,
+          timestamp: Date.now(),
+        }
       }
-    }
-  } else if (el.isContentEditable) {
-    const sel = window.getSelection()
-    if (sel && sel.rangeCount > 0 && el.contains(sel.anchorNode)) {
-      const range = sel.getRangeAt(0)
-      const preRange = range.cloneRange()
-      preRange.selectNodeContents(el)
-      preRange.setEnd(range.startContainer, range.startOffset)
-      const start = preRange.toString().length
-      const length = range.toString().length
-      trackedCaret = {
-        start,
-        end: start + length,
-        draft: el.innerText ?? el.textContent ?? '',
-        timestamp: Date.now(),
+    } else if (el.isContentEditable) {
+      const sel = window.getSelection()
+      if (sel && sel.rangeCount > 0 && sel.anchorNode && el.contains(sel.anchorNode)) {
+        const range = sel.getRangeAt(0)
+        if (range && range.startContainer && el.contains(range.startContainer)) {
+          const maxOffset =
+            range.startContainer.nodeType === Node.TEXT_NODE
+              ? (range.startContainer.nodeValue?.length ?? 0)
+              : range.startContainer.childNodes.length
+          const safeOffset = Math.max(0, Math.min(range.startOffset, maxOffset))
+          const preRange = range.cloneRange()
+          preRange.selectNodeContents(el)
+          preRange.setEnd(range.startContainer, safeOffset)
+          const start = preRange.toString().length
+          const length = range.toString().length
+          trackedCaret = {
+            start,
+            end: start + length,
+            draft: el.innerText ?? el.textContent ?? '',
+            timestamp: Date.now(),
+          }
+        }
       }
     }
-  }
+  } catch {}
 }
 
 let caretTrackerAttached = false

package/src/client/utils/open-tab.ts

@@ -0,0 +1,69 @@
+import { baseName } from './conversation-draft.ts'
+
+export function safeService<T = any>(ctx: any, name: string): T | undefined {
+  if (!ctx) return undefined
+  try {
+    if (typeof ctx.get === 'function') {
+      const val = ctx.get(name)
+      if (val !== undefined) return val
+    }
+    return ctx[name]
+  } catch {
+    return undefined
+  }
+}
+
+export function openFileInTab(ctx: any, sessionId: string, filePath: string, relPath: string): void {
+  const normPath = filePath.replace(/\\/g, '/')
+  const fileName = baseName(filePath)
+
+  try {
+    const betterSidebar = safeService(ctx, 'betterSidebar')
+    if (betterSidebar && typeof betterSidebar.openTab === 'function') {
+      betterSidebar.openTab({
+        type: 'editor',
+        title: fileName,
+        path: filePath,
+        id: `editor:${filePath}`,
+      })
+      return
+    }
+  } catch {}
+
+  try {
+    const sidebarRight = safeService(ctx, 'sidebarRight')
+    if (sidebarRight && typeof sidebarRight.openResource === 'function') {
+      const normRel = relPath.replace(/\\/g, '/')
+      const encodePath = (p: string) =>
+        p
+          .split('/')
+          .map((seg) => encodeURIComponent(seg).replace(/%3A/gi, ':'))
+          .join('/')
+      const address = sessionId
+        ? `dsh-resource://file/session/${encodeURIComponent(sessionId)}/${encodePath(normRel)}`
+        : `dsh-resource://file/absolute/${encodePath(normPath.replace(/^\/+/, ''))}`
+      sidebarRight.openResource(address)
+      return
+    }
+  } catch {}
+
+  try {
+    const tabs = safeService(ctx, 'tabs')
+    if (tabs && typeof tabs.open === 'function') {
+      tabs.open({ path: filePath, title: fileName })
+      return
+    }
+  } catch {}
+
+  try {
+    const remote = ctx?.remote?.session
+    if (remote && typeof remote.openWorkspacePath === 'function') {
+      remote.openWorkspacePath({ path: filePath })
+      return
+    }
+  } catch {}
+
+  try {
+    window.open(`/dsh-explorer/api/read-file?path=${encodeURIComponent(filePath)}`, '_blank')
+  } catch {}
+}

package/src/fs-search.ts

@@ -0,0 +1,116 @@
+import { readdir } from 'node:fs/promises'
+import { join, relative } from 'node:path'
+
+export interface SearchMatch {
+  name: string
+  path: string
+  relativePath: string
+  isDir: boolean
+}
+
+export interface SearchResult {
+  query: string
+  matches: SearchMatch[]
+  totalMatches: number
+  truncated: boolean
+}
+
+const IGNORED_SEARCH_DIRS = new Set([
+  'node_modules',
+  '.agent',
+  '.git',
+  'dist',
+  'target',
+  'build',
+  '.system_generated',
+  '.cache',
+  '.dsh',
+  '.gemini',
+  '.vscode',
+  '.idea',
+])
+
+export async function searchDirectory(
+  rootDir: string,
+  query: string,
+  maxResults = 250,
+  includeHidden = false
+): Promise<SearchResult> {
+  const cleanQuery = query.trim().toLowerCase()
+  if (!cleanQuery) {
+    return { query, matches: [], totalMatches: 0, truncated: false }
+  }
+
+  const isExtensionFilter = cleanQuery.startsWith('*.') && cleanQuery.length > 2
+  const extensionTarget = isExtensionFilter ? cleanQuery.slice(1) : ''
+
+  const matches: SearchMatch[] = []
+  let truncated = false
+  let scannedCount = 0
+  const maxScanned = 30000
+
+  const queue: string[] = [rootDir]
+
+  while (queue.length > 0 && matches.length < maxResults && scannedCount < maxScanned) {
+    const currentDir = queue.shift()!
+    let entries
+    try {
+      entries = await readdir(currentDir, { withFileTypes: true })
+    } catch {
+      continue
+    }
+
+    for (const ent of entries) {
+      scannedCount++
+      if (scannedCount >= maxScanned) {
+        truncated = true
+        break
+      }
+
+      if (!includeHidden && ent.name.startsWith('.')) {
+        continue
+      }
+
+      const isDirectory = ent.isDirectory()
+      if (isDirectory && IGNORED_SEARCH_DIRS.has(ent.name)) {
+        continue
+      }
+
+      const fullPath = join(currentDir, ent.name)
+      const relPath = relative(rootDir, fullPath).replace(/\\/g, '/')
+      const nameLower = ent.name.toLowerCase()
+      const relLower = relPath.toLowerCase()
+
+      let isMatch = false
+      if (isExtensionFilter) {
+        isMatch = !isDirectory && nameLower.endsWith(extensionTarget)
+      } else {
+        isMatch = nameLower.includes(cleanQuery) || relLower.includes(cleanQuery)
+      }
+
+      if (isMatch) {
+        matches.push({
+          name: ent.name,
+          path: fullPath,
+          relativePath: relPath,
+          isDir: isDirectory,
+        })
+        if (matches.length >= maxResults) {
+          truncated = true
+          break
+        }
+      }
+
+      if (isDirectory) {
+        queue.push(fullPath)
+      }
+    }
+  }
+
+  return {
+    query,
+    matches,
+    totalMatches: matches.length,
+    truncated,
+  }
+}