dsh-plugin-workbench 0.0.3 → 0.0.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-plugin-workbench",
   "description": "VS Code-style workspace file explorer + editable preview for the dsh web GUI",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "packageManager": "pnpm@11.21.0",
   "engines": {

package/src/client/FileExplorer.tsx

@@ -3,7 +3,7 @@
  * (patched) ui-layout AppFrame. File selection is pushed into the shared
  * selection store so the `explorer.preview` slot can render the split view.
  */
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import styles from './files.module.css'
 import { FileIcon } from './fileIcons'
 import type { FilesKey } from './locales'
@@ -64,6 +64,12 @@ function formatSize(bytes: number): string {
 /** How often the visible tree is re-listed to pick up disk changes. */
 const REFRESH_MS = 2000
 
+/** How many previously-expanded folders to re-list at once on workspace switch. */
+const DIR_LOAD_BATCH = 4
+
+/** Pause between batches when restoring expanded folders. */
+const DIR_LOAD_GAP_MS = 50
+
 const EMPTY_EXPANDED = new Set<string>()
 
 /** True when two directory listings are identical (name/kind/size). */
@@ -75,6 +81,95 @@ function sameEntries(a: FsListEntry[], b: FsListEntry[]): boolean {
   return true
 }
 
+interface TreeRowProps {
+  entry: FsListEntry
+  depth: number
+  isActive: boolean
+  isExpanded: boolean
+  onToggleDir: (path: string) => void
+  onRefreshDir: (path: string) => void
+  onSelect: (entry: FsListEntry) => void
+  onDoubleClick: (entry: FsListEntry) => void
+  onOpenExternal: (path: string) => Promise<void>
+  t: (key: FilesKey, params?: Record<string, unknown>) => string
+}
+
+/**
+ * One tree row, memoized so opening/activating a file (which changes the
+ * active-path highlight) re-renders only the affected row — with a workspace
+ * full of files, re-rendering the whole tree on every click is what made
+ * opening files feel laggy.
+ */
+const TreeRow = memo(function TreeRow({
+  entry,
+  depth,
+  isActive,
+  isExpanded,
+  onToggleDir,
+  onRefreshDir,
+  onSelect,
+  onDoubleClick,
+  onOpenExternal,
+  t,
+}: TreeRowProps) {
+  const isDir = entry.kind === 'dir'
+  return (
+    <div
+      className={`${styles.row} ${isActive ? styles.rowSelected : ''}`}
+      style={{ paddingLeft: 8 + depth * 14 }}
+      onClick={() => onSelect(entry)}
+      onDoubleClick={() => onDoubleClick(entry)}
+      role="treeitem"
+      aria-selected={isActive}
+      aria-expanded={isDir ? isExpanded : undefined}
+      title={entry.name}
+    >
+      <span
+        className={styles.chevron}
+        onClick={(e) => {
+          e.stopPropagation()
+          if (isDir) onToggleDir(entry.path)
+        }}
+      >
+        {isDir ? (isExpanded ? '▾' : '▸') : ''}
+      </span>
+      <span className={styles.icon}>
+        {isDir ? (isExpanded ? '📂' : '📁') : entry.kind === 'file' ? <FileIcon name={entry.name} /> : '·'}
+      </span>
+      <span className={styles.name}>{entry.name}</span>
+      {entry.kind === 'file' && entry.size !== undefined && (
+        <span className={styles.size}>{formatSize(entry.size)}</span>
+      )}
+      <span className={styles.actions}>
+        <button
+          type="button"
+          className={styles.action}
+          title={t('action.open')}
+          onClick={(e) => {
+            e.stopPropagation()
+            void onOpenExternal(entry.path)
+          }}
+        >
+          ↗
+        </button>
+        {isDir && (
+          <button
+            type="button"
+            className={styles.action}
+            title={t('action.refresh')}
+            onClick={(e) => {
+              e.stopPropagation()
+              onRefreshDir(entry.path)
+            }}
+          >
+            ⟳
+          </button>
+        )}
+      </span>
+    </div>
+  )
+})
+
 export function FileExplorer({ width, useSessions, t, listDir, openPath }: FileExplorerProps) {
   const sessionList = useSessions((s) => s)
   const currentId = sessionList.current
@@ -98,6 +193,10 @@ export function FileExplorer({ width, useSessions, t, listDir, openPath }: FileE
   // Latest tree snapshot for the polling tick (avoids stale closures).
   const treeRef = useRef({ root, children, expanded, rootLoading })
   treeRef.current = { root, children, expanded, rootLoading }
+  // Stable view of the loaded listings so toggleDir doesn't depend on the
+  // children state (keeps memoized rows from re-rendering on listing updates).
+  const childrenRef = useRef(children)
+  childrenRef.current = children
 
   // Expose the explorer width so the maid-atelier fixed chrome (top/bottom
   // trim) can shift past this column instead of covering it.
@@ -129,15 +228,22 @@ export function FileExplorer({ width, useSessions, t, listDir, openPath }: FileE
     const controller = new AbortController()
     rootAbortRef.current = controller
     listDir(cwd, controller.signal)
-      .then((result) => {
+      .then(async (result) => {
         if (controller.signal.aborted) return
         setRoot(result.root)
         setChildren({ [result.root]: result.entries })
         setRootError(undefined)
-        // Reload the contents of this workspace's previously-expanded folders
-        // right away instead of waiting for the auto-refresh tick.
-        for (const dirPath of expanded) {
-          if (dirPath !== result.root) void loadDir(dirPath)
+        // Restore previously-expanded folders in small batches so a workspace
+        // with many expanded folders doesn't flood the tree (and the page)
+        // all at once; the auto-refresh tick fills any remainder shortly after.
+        const dirs = [...expanded].filter((dirPath) => dirPath !== result.root)
+        for (let i = 0; i < dirs.length; i += DIR_LOAD_BATCH) {
+          if (controller.signal.aborted) return
+          const batch = dirs.slice(i, i + DIR_LOAD_BATCH)
+          await Promise.all(batch.map((dirPath) => loadDir(dirPath)))
+          if (i + DIR_LOAD_BATCH < dirs.length) {
+            await new Promise((resolve) => setTimeout(resolve, DIR_LOAD_GAP_MS))
+          }
         }
       })
       .catch((error) => {
@@ -240,8 +346,8 @@ export function FileExplorer({ width, useSessions, t, listDir, openPath }: FileE
       else next.add(dirPath)
       return { ...prev, [cwdKey]: next }
     })
-    if (!children[dirPath]) void loadDir(dirPath)
-  }, [cwdKey, children, loadDir])
+    if (!childrenRef.current[dirPath]) void loadDir(dirPath)
+  }, [cwdKey, loadDir])
 
   const refreshDir = useCallback((dirPath: string) => {
     setChildren((prev) => {
@@ -285,59 +391,18 @@ export function FileExplorer({ width, useSessions, t, listDir, openPath }: FileE
 
     return (
       <div key={entry.path}>
-        <div
-          className={`${styles.row} ${entry.kind === 'file' && activePath === entry.path ? styles.rowSelected : ''}`}
-          style={{ paddingLeft: 8 + depth * 14 }}
-          onClick={() => onRowClick(entry)}
-          onDoubleClick={() => onRowDoubleClick(entry)}
-          role="treeitem"
-          aria-selected={entry.kind === 'file' && activePath === entry.path}
-          aria-expanded={isDir ? isExpanded : undefined}
-          title={entry.name}
-        >
-          <span
-            className={styles.chevron}
-            onClick={(e) => {
-              e.stopPropagation()
-              if (isDir) toggleDir(entry.path)
-            }}
-          >
-            {isDir ? (isExpanded ? '▾' : '▸') : ''}
-          </span>
-          <span className={styles.icon}>
-            {isDir ? (isExpanded ? '📂' : '📁') : entry.kind === 'file' ? <FileIcon name={entry.name} /> : '·'}
-          </span>
-          <span className={styles.name}>{entry.name}</span>
-          {entry.kind === 'file' && entry.size !== undefined && (
-            <span className={styles.size}>{formatSize(entry.size)}</span>
-          )}
-          <span className={styles.actions}>
-            <button
-              type="button"
-              className={styles.action}
-              title={t('action.open')}
-              onClick={(e) => {
-                e.stopPropagation()
-                void openPath(entry.path)
-              }}
-            >
-              ↗
-            </button>
-            {isDir && (
-              <button
-                type="button"
-                className={styles.action}
-                title={t('action.refresh')}
-                onClick={(e) => {
-                  e.stopPropagation()
-                  refreshDir(entry.path)
-                }}
-              >
-                ⟳
-              </button>
-            )}
-          </span>
-        </div>
+        <TreeRow
+          entry={entry}
+          depth={depth}
+          isActive={entry.kind === 'file' && activePath === entry.path}
+          isExpanded={isExpanded}
+          onToggleDir={toggleDir}
+          onRefreshDir={refreshDir}
+          onSelect={onRowClick}
+          onDoubleClick={onRowDoubleClick}
+          onOpenExternal={openPath}
+          t={t}
+        />
         {isDir && isExpanded && (
           <div>
             {isLoading && <div className={styles.rowHint} style={{ paddingLeft: 8 + (depth + 1) * 14 }}>{t('preview.loading')}</div>}

package/src/client/FilePreview.tsx

@@ -7,7 +7,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import type { DragEvent as ReactDragEvent, KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent } from 'react'
 import styles from './files.module.css'
-import { highlightCode } from './highlight'
+import { detectLanguage, highlightCode } from './highlight'
 import { FileIcon } from './fileIcons'
 import type { FilesKey } from './locales'
 import { activateFile, closeFile, collapsePreview, moveTab, toggleWrap, useTabsState } from './store'
@@ -37,6 +37,22 @@ const PREVIEW_MIN = 240
 const CHAT_MIN = 240
 const PREVIEW_TOO_LARGE_LABEL = '512KB'
 
+/**
+ * Above this size the overlay editor (syntax-highlight layer + transparent
+ * textarea) falls back to a plain textarea: re-injecting and re-laying out
+ * hundreds of KB of wrapped text on every keystroke is what makes the page
+ * lag. The plain textarea keeps editing, wrapping and scrolling — it only
+ * loses the colors, which files this big rarely need anyway.
+ */
+const HIGHLIGHT_MAX_BYTES = 64 * 1024
+
+/**
+ * Languages always rendered as a plain textarea, never the overlay: the
+ * highlight layer costs a full extra layout pass (and with CJK text a
+ * fragile alignment surface) for prose formats where colors add little.
+ */
+const PLAIN_LANGUAGES = new Set(['markdown'])
+
 function basenameOf(path: string): string {
   const trimmed = path.replace(/[\\/]+$/, '')
   const idx = Math.max(trimmed.lastIndexOf('/'), trimmed.lastIndexOf('\\'))
@@ -77,38 +93,46 @@ export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
   const previewRef = useRef<HTMLDivElement>(null)
   const handleRef = useRef<HTMLDivElement>(null)
   const highlightRef = useRef<HTMLPreElement>(null)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
 
   const refresh = useCallback(() => bump((v) => v + 1), [])
 
-  // Read newly opened tabs and drop cache entries for closed tabs.
+  // Read the ACTIVE tab's content. Other tabs load lazily on first
+  // activation, so switching to a workspace with many large files doesn't
+  // re-read every tab at once (which used to freeze the switch).
   useEffect(() => {
     const cache = cacheRef.current
     for (const [path] of cache) {
       if (!tabs.includes(path)) cache.delete(path)
     }
-    const controllers: AbortController[] = []
-    for (const path of tabs) {
-      if (cache.has(path)) continue
-      cache.set(path, { status: 'loading' })
-      const controller = new AbortController()
-      controllers.push(controller)
-      readFile(path, controller.signal)
-        .then((result) => {
-          if (!controller.signal.aborted) {
-            cache.set(path, previewDataOf(result))
-            refresh()
-          }
-        })
-        .catch((error) => {
-          if (!controller.signal.aborted) {
-            cache.set(path, { status: 'error', message: error instanceof Error ? error.message : String(error) })
-            refresh()
-          }
-        })
+    const target = active ?? tabs[0]
+    if (target === undefined || cache.has(target)) {
+      refresh()
+      return undefined
     }
+    const controller = new AbortController()
+    cache.set(target, { status: 'loading' })
+    readFile(target, controller.signal)
+      .then((result) => {
+        if (!controller.signal.aborted) {
+          cache.set(target, previewDataOf(result))
+          // Large content: yield one frame so the browser paints the
+          // loading→loaded transition before the heavy text layout runs —
+          // the UI stays responsive instead of freezing in the same frame
+          // as the tab-open interaction.
+          if (result.size > HIGHLIGHT_MAX_BYTES) requestAnimationFrame(refresh)
+          else refresh()
+        }
+      })
+      .catch((error) => {
+        if (!controller.signal.aborted) {
+          cache.set(target, { status: 'error', message: error instanceof Error ? error.message : String(error) })
+          refresh()
+        }
+      })
     refresh()
-    return () => controllers.forEach((c) => c.abort())
-  }, [tabs, readFile, refresh])
+    return () => controller.abort()
+  }, [tabs, active, readFile, refresh])
 
   // Animate the last tab closing without a mount/unmount bounce: keep the pane
   // mounted while `hasOpenedRef` is set, then drop it after the transition.
@@ -131,6 +155,31 @@ export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
 
   const isOpen = !collapsed && (tabs.length > 0 || closing || hasOpenedRef.current)
 
+  const activeData = active !== undefined ? cacheRef.current.get(active) : undefined
+  const language = active !== undefined ? detectLanguage(active) : undefined
+  const tooBig = (activeData?.size ?? 0) > HIGHLIGHT_MAX_BYTES
+  const plain = language === undefined || tooBig || (language !== undefined && PLAIN_LANGUAGES.has(language))
+
+  // Keep the highlight layer's scroll in lockstep with the textarea on every
+  // frame while the overlay editor is open: some engines don't fire scroll
+  // events during selection auto-scroll, which would otherwise leave the
+  // visible layer behind the selection (drag-select misalignment). Both
+  // layers are `overflow: auto` with identical content, so the assignment is
+  // a no-op whenever they are already aligned.
+  useEffect(() => {
+    const pre = highlightRef.current
+    const ta = textareaRef.current
+    if (pre === null || ta === null || plain) return undefined
+    let raf = 0
+    const tick = () => {
+      pre.scrollTop = ta.scrollTop
+      pre.scrollLeft = ta.scrollLeft
+      raf = requestAnimationFrame(tick)
+    }
+    raf = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(raf)
+  }, [isOpen, active, activeData?.status, plain])
+
   // Publish the rendered preview width so the skin's fixed top/bottom trim can
   // shift past this pane (covering only the chat).
   useEffect(() => {
@@ -236,8 +285,6 @@ export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
     setDragPath(undefined)
   }, [])
 
-  const activeData = active !== undefined ? cacheRef.current.get(active) : undefined
-
   if (!isOpen) return null
 
   const renderBody = () => {
@@ -245,14 +292,19 @@ export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
     switch (activeData.status) {
       case 'loading':
         return <div className={styles.previewHint}>{t('preview.loading')}</div>
-      case 'loaded': {
-        const highlighted = active !== undefined ? highlightCode(activeData.draft ?? '', active) : ''
+      case 'loaded':
         return (
-          <div className={styles.editor} data-wrap={wrap ? 'on' : 'off'}>
-            <pre ref={highlightRef} className={styles.editorHighlight} aria-hidden="true">
-              <code dangerouslySetInnerHTML={{ __html: highlighted }} />
-            </pre>
+          <div
+            className={`${styles.editor}${plain ? ` ${styles.editorPlain}` : ''}`}
+            data-wrap={wrap ? 'on' : 'off'}
+          >
+            {!plain && active !== undefined && (
+              <pre ref={highlightRef} className={styles.editorHighlight} aria-hidden="true">
+                <code dangerouslySetInnerHTML={{ __html: highlightCode(activeData.draft ?? '', active) }} />
+              </pre>
+            )}
             <textarea
+              ref={textareaRef}
               className={styles.editorTextarea}
               value={activeData.draft ?? ''}
               onChange={(e) => onTextareaChange(e.target.value)}
@@ -260,12 +312,11 @@ export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
               onKeyDown={onKeyDown}
               spellCheck={false}
               wrap={wrap ? 'soft' : 'off'}
-              title={t('action.saveHint')}
             />
+            {language !== undefined && tooBig && <div className={styles.editorHint}>{t('preview.highlightOff')}</div>}
             {saveError !== undefined && <div className={styles.saveError}>{saveError}</div>}
           </div>
         )
-      }
       case 'binary':
         return (
           <div className={styles.previewHint}>

package/src/client/files.module.css

@@ -420,6 +420,29 @@
   position: relative;
   height: 100%;
   min-height: 0;
+  /* Keep layout/paint churn local to the editor: huge wrapped content must
+     not invalidate the whole page on every edit or scroll. */
+  contain: layout paint;
+}
+
+/* Plain (no-overlay) editor: the textarea itself renders the visible text —
+   used for files without syntax highlighting (e.g. .txt novels) and for
+   files too large to re-highlight per keystroke without lag. */
+.editorPlain .editorTextarea {
+  color: var(--fe-fg);
+}
+
+/* Large-file notice chip: syntax highlight was dropped to stay responsive. */
+.editorHint {
+  position: absolute;
+  left: 8px;
+  bottom: 8px;
+  padding: 4px 10px;
+  border-radius: 4px;
+  background: var(--fe-hover);
+  color: var(--fe-muted);
+  font-size: 11px;
+  pointer-events: none;
 }
 
 .editorHighlight {
@@ -427,6 +450,12 @@
   inset: 0;
   margin: 0;
   padding: 12px;
+  /* The textarea reserves one extra line at the bottom (its caret reserve),
+     so it can scroll ~1 line further than this layer. Match that range so
+     the two layers never desync at the bottom of a long file — otherwise
+     drag-selection near the end would highlight text one line ABOVE the
+     visible text. */
+  padding-bottom: calc(12px + 1.5em);
   /* auto (not hidden): the highlight layer gets the same scrollbar gutter as
      the textarea, so both content boxes have identical widths and wrap at the
      same points. Its scrollbars stack invisibly beneath the textarea's. */
@@ -573,8 +602,13 @@
   font-style: italic;
 }
 
+/* Strong emphasis is color-only on purpose: `font-weight: bold` widens
+   glyphs, so the highlight layer would wrap at different points than the
+   textarea beneath it — drag-selection would then highlight text that no
+   longer matches the visible lines. Italic above is metric-neutral. */
 .editorHighlight :global(.hljs-strong) {
-  font-weight: bold;
+  color: var(--fe-accent);
+  font-weight: inherit;
 }
 
 /* ---- Skin chrome fix ----

package/src/client/locales.ts

@@ -19,6 +19,7 @@ export const zh = {
   'preview.tooLarge': '文件过大，仅支持预览不超过 {limit}',
   'preview.emptyDir': '空目录',
   'preview.error': '加载失败',
+  'preview.highlightOff': '大文件：已关闭语法高亮（仍可编辑）',
 } as const
 
 export type FilesKey = keyof typeof zh
@@ -40,4 +41,5 @@ export const en: Record<FilesKey, string> = {
   'preview.tooLarge': 'File too large to preview (limit {limit})',
   'preview.emptyDir': 'Empty directory',
   'preview.error': 'Load failed',
+  'preview.highlightOff': 'Large file: syntax highlighting off (still editable)',
 }