dsh-vscode-mode 0.18.0 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-vscode-mode",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "DSH 上的类 VSCode 编码体验：Monaco 编辑器（文件页签/QuickOpen/状态栏，可驻 DSH 0.1.5+ 官方右侧 Sidebar 与对话同屏）+ 命令栏（Ctrl+Shift+P）与可扩展指令系统 + VS Code 兼容代码片段（.code-snippets 全局/项目，IntelliSense 展开）+ Agent 编辑差异审查（整文件差异/采纳/拒绝/归档/回滚）+ SVN 集成（侧栏变更面板/日志弹窗/并排差异）+ 语言服务器（LSP）智能（跳转定义/引用/hover/大纲 + VSIX 扩展市场安装），状态持久化到工作区旁车，界面状态（页签/光标/侧栏/编辑 Tab/导航历史）镜像到 DSH home 跨重启恢复",
   "icon": "assets/icon.svg",
   "keywords": [

package/src/client/index.ts

@@ -76,6 +76,14 @@ import { flushPageState, flushUiState, hydrateUiState, installUiStatePersist, on
 import { workspaceScopeOf } from './state/scopeStore.js'
 import { dapStore } from './dap/store.js'
 import type { CompatAdapter } from '../shared/compat.js'
+import { setPanelImport } from './lazyPanel.js'
+import { dbg } from './rpc.js'
+import { BP_MODE, MODES, fieldOfMode } from './dap/BpWidget.js'
+import { ContextMenu } from './ui/ContextMenu.js'
+
+/** Root-owned live objects shared with independent panel chunks; no copied stores or transport state. */
+export const __lazyShared = { rpc, dbg, dapStore, BP_MODE, MODES, fieldOfMode, ContextMenu }
+export { setPanelImport as __setPanelImport }
 
 // ⚠️ inject 只列必需服务：webUiSettings 是 @linxin666/dsh-client-ui-web-ui-settings 提供的
 // 可选兼容桥（非官方服务），列入 inject 会让未装该桥的部署启动时 entry 永久 pending，
@@ -692,6 +700,7 @@ export async function apply(ctx: any): Promise<void> {
   // 注销挂在存活的 window.monaco 上的全部 Monaco provider 并复位模块状态。
   // 不做会导致重载后重复注册（补全/跳转/hover 各翻倍）与陈旧开关残留。
   ctx.effect(() => () => {
+    setPanelImport()
     try { disposeSnippets() } catch { /* 卸载异常不得阻断其余清理 */ }
     try { disposeLaunchJson() } catch { /* 同上 */ }
     try { disposeAiInline() } catch { /* 同上 */ }

package/src/client/lazyPanel.ts

@@ -0,0 +1,68 @@
+/** Package-local CJS panel loading; transport, revision URLs and HMR belong to DSH. @author ddj 2026年10月22号 */
+import React from 'react'
+import type { SidebarCtx } from './sidebar/types.js'
+
+type Panel = React.ComponentType<{ ctx: SidebarCtx }>
+type PanelKey = 'rules' | 'debug'
+type PanelImport = (file: string) => Promise<Record<string, unknown>>
+interface PanelLoad { pending?: Promise<Panel>; component?: Panel }
+const FILES = { rules: './client.rules.js', debug: './client.debug.js' } as const
+const EXPORTS = { rules: 'RulesPanel', debug: 'DebugPanel' } as const
+const loads = new Map<PanelKey, PanelLoad>()
+let generation = 0
+let importer: PanelImport | undefined
+
+/** @public @author ddj 2026年10月22号 @param transport Injected ModuleLoader require.async, never a global require. @description Start a new plugin generation and discard older results. */
+export function setPanelImport(transport?: PanelImport): void {
+  generation++
+  loads.clear()
+  importer = transport
+}
+
+/** @public @author ddj 2026年10月22号 @param key Fixed built-in panel key. @returns Shared pending load or cached component. @throws Unsupported loader or invalid chunk export. */
+export function loadPanel(key: PanelKey): Promise<Panel> {
+  const cached = loads.get(key)
+  if (cached?.component) return Promise.resolve(cached.component)
+  if (cached?.pending) return cached.pending
+  if (!importer) return Promise.reject(new Error('当前 DSH 不支持包内面板加载，请升级宿主'))
+
+  const epoch = generation
+  const transport = importer
+  const state: PanelLoad = {}
+  const pending = Promise.resolve().then(() => transport(FILES[key])).then((exports) => {
+    const component = exports[EXPORTS[key]]
+    if (typeof component !== 'function') throw new Error('面板脚本缺少组件导出')
+    if (epoch !== generation) throw new Error('面板加载已失效，请重试')
+    state.component = component as Panel
+    return state.component
+  }).catch((error) => {
+    if (loads.get(key) === state) loads.delete(key)
+    throw error
+  })
+  state.pending = pending
+  loads.set(key, state)
+  return pending
+}
+
+/** @public @author ddj 2026年10月22号 @param props Fixed panel and current context. @returns Loading, explicit retry, or the loaded panel subtree. */
+export function LazyPanel(props: { panel: PanelKey; ctx: SidebarCtx }): React.ReactElement {
+  const [attempt, retry] = React.useState(0)
+  const [view, setView] = React.useState<{ component?: Panel; error?: string }>({})
+  /** @private @author ddj 2026年10月22号 @returns Cleanup invalidating callbacks after switch or unmount. */
+  function loadEffect(): () => void {
+    let active = true
+    setView({})
+    /** @author ddj 2026年10月22号 @param component Loaded panel. */
+    function ready(component: Panel): void { if (active) setView({ component }) }
+    /** @author ddj 2026年10月22号 @param error Loader failure. */
+    function failed(error: unknown): void { if (active) setView({ error: String(error) }) }
+    void loadPanel(props.panel).then(ready, failed)
+    return () => { active = false }
+  }
+  React.useEffect(loadEffect, [props.panel, attempt])
+  /** @private @author ddj 2026年10月22号 @description Explicit retry; failures never loop automatically. */
+  function onRetry(): void { retry(attempt + 1) }
+  if (view.component) return React.createElement(view.component, { ctx: props.ctx })
+  return React.createElement('div', { className: 'edrv-empty', role: view.error ? 'alert' : 'status' },
+    view.error ?? '正在加载面板…', view.error && React.createElement('button', { onClick: onRetry }, '重试'))
+}

package/src/client/sidebar/PanelBoundary.ts

@@ -0,0 +1,57 @@
+/** Panel-local callback and React subtree isolation, not a security sandbox. @author ddj 2026年10月22号 */
+import React from 'react'
+import type { SidebarCtx, SidebarPanelDef } from './types.js'
+
+export interface PanelCheck { panel: SidebarPanelDef; badge: number | null; error?: Error }
+interface BoundaryProps { panel: SidebarPanelDef; scope?: string; sessionId?: string; compact?: boolean; children?: React.ReactNode }
+interface BoundaryState { panel: SidebarPanelDef; scope?: string; sessionId?: string; error: Error | null }
+const panelIds = new WeakMap<SidebarPanelDef, number>()
+let nextPanelId = 0
+/** @private @author ddj 2026年10月22号 @param props Subtree ownership. @returns Stable identity that changes on registration, scope or session replacement. */
+function ownerKey(props: BoundaryProps): string {
+  if (!panelIds.has(props.panel)) panelIds.set(props.panel, ++nextPanelId)
+  return JSON.stringify([panelIds.get(props.panel), props.scope, props.sessionId])
+}
+
+/** @public @author ddj 2026年10月22号 @param panel Registered definition. @param ctx Current scope. @returns Hidden marker or isolated visible/badge result; failed guards stay reachable for retry. */
+export function inspectPanel(panel: SidebarPanelDef, ctx: SidebarCtx): PanelCheck | null {
+  try {
+    if (panel.visible && panel.visible(ctx) !== true) return null
+    return { panel, badge: panel.badge?.(ctx) ?? null }
+  } catch (error) {
+    return { panel, badge: null, error: error instanceof Error ? error : new Error(String(error)) }
+  }
+}
+
+/** @public @author ddj 2026年10月22号 @description Reset a failed subtree when registration or scope ownership changes. */
+export class PanelBoundary extends React.Component<BoundaryProps, BoundaryState> {
+  state: BoundaryState = { panel: this.props.panel, scope: this.props.scope, sessionId: this.props.sessionId, error: null }
+
+  /** @public @author ddj 2026年10月22号 @param props Current ownership. @param state Previous ownership/error. @returns Reset only when the owner changes. */
+  static getDerivedStateFromProps(props: BoundaryProps, state: BoundaryState): Partial<BoundaryState> | null {
+    if (state.panel === props.panel && state.scope === props.scope && state.sessionId === props.sessionId) return null
+    return { panel: props.panel, scope: props.scope, sessionId: props.sessionId, error: null }
+  }
+
+  /** @public @author ddj 2026年10月22号 @param error React render/lifecycle error. @returns Local fallback state. */
+  static getDerivedStateFromError(error: Error): Partial<BoundaryState> { return { error } }
+
+  /** @private @author ddj 2026年10月22号 @description Remount only this failed subtree and reevaluate its callbacks. */
+  private retry = (): void => { this.setState({ error: null }) }
+
+  /** @public @author ddj 2026年10月22号 @returns Original subtree or panel-local retry UI. */
+  render(): React.ReactNode {
+    if (!this.state.error) return React.createElement(React.Fragment, { key: ownerKey(this.props) }, this.props.children)
+    if (this.props.compact) return React.createElement('span', { role: 'img', title: '图标加载失败', 'aria-label': '图标加载失败' }, '!')
+    return React.createElement('div', { className: 'edrv-empty', role: 'alert' },
+      this.props.panel.title + '：' + String(this.state.error.message),
+      React.createElement('button', { onClick: this.retry }, '重试'))
+  }
+}
+
+/** @public @author ddj 2026年10月22号 @param props Isolated panel invocation below the boundary. @returns Panel subtree. @throws Extension callback error for the nearest boundary. */
+export function PanelContent(props: { panel: SidebarPanelDef; ctx: SidebarCtx }): React.ReactNode {
+  const checked = inspectPanel(props.panel, props.ctx)
+  if (checked?.error) throw checked.error
+  return checked ? props.panel.render(props.ctx) as React.ReactNode : null
+}

package/src/client/sidebar/SidebarView.ts

@@ -10,6 +10,7 @@
  */
 import React from 'react'
 import type { SidebarCtx } from './types.js'
+import { inspectPanel, PanelBoundary, PanelContent } from './PanelBoundary.js'
 
 const W_MAX = 560
 /** 面板区隐藏时容器的宽度（= 图标列宽，与 editor.css .edrv-rail 对齐）。 */
@@ -50,9 +51,8 @@ function railIconEl(icon) {
 export function SidebarView(props) {
   const ctx = props.ctx
   // 按 visible(ctx) 过滤活动栏图标与面板（能力相关面板：SVN 变更仅在受 SVN 管理时出现）
-  const panels = (props.registry?.list?.() ?? []).filter((panel) => (
-    typeof panel.visible !== 'function' || panel.visible(ctx) === true
-  ))
+  const checked = (props.registry?.list?.() ?? []).map((panel) => inspectPanel(panel, ctx)).filter(Boolean)
+  const panels = checked.map((entry) => entry.panel)
   const activePanel = props.activePanel
   const onActive = props.onActive
   const visible = props.visible !== false
@@ -64,27 +64,66 @@ export function SidebarView(props) {
 
   const active = panels.find((p) => p.id === activePanel) || panels[0]
 
+  const dragCleanup = React.useRef(null)
+  /** @private @author ddj 2026年10月22号 @description End the active drag; safe on repeated teardown. */
+  function stopDrag() { dragCleanup.current?.() }
+  const seamOpening = React.useRef(false)
+  const lastVisible = React.useRef(visible)
+  /** @private @author ddj 2026年10月22号 @description Always release listeners on unmount, including a pending seam expansion. */
+  function dragEffect() { return stopDrag }
+  React.useEffect(dragEffect, [])
+  /** @private @author ddj 2026年10月22号 @description Preserve only the seam's own expansion; external visibility changes cancel ownership. */
+  function visibilityEffect() {
+    if (lastVisible.current !== visible) {
+      if (!(visible && seamOpening.current)) stopDrag()
+      seamOpening.current = false
+      lastVisible.current = visible
+    }
+  }
+  React.useEffect(visibilityEffect, [visible])
+
+  /** @private @author ddj 2026年10月22号 @param pointerId Owning pointer. @param move Pointer movement callback. @description Replace the previous drag and own every exit path. */
+  function bindDrag(pointerId, move) {
+    stopDrag()
+    /** @author ddj 2026年10月22号 @param event Pointer event. @description Ignore another pointer's movement. */
+    function onMove(event) { if (event.pointerId === pointerId) move(event) }
+    /** @author ddj 2026年10月22号 @param event Pointer completion. @description Only the owning pointer ends the drag. */
+    function onEnd(event) { if (event.pointerId === pointerId) cleanup() }
+    /** @author ddj 2026年10月22号 @description Remove all drag listeners and release ownership. */
+    function cleanup() {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onEnd)
+      window.removeEventListener('pointercancel', onEnd)
+      window.removeEventListener('blur', cleanup)
+      if (dragCleanup.current === cleanup) {
+        dragCleanup.current = null
+        seamOpening.current = false
+      }
+    }
+    dragCleanup.current = cleanup
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onEnd)
+    window.addEventListener('pointercancel', onEnd)
+    window.addEventListener('blur', cleanup)
+  }
+
+  /** @private @author ddj 2026年10月22号 @param e Starting pointer. @description Resize the visible panel until completion or collapse. */
   const onPointerDown = (e) => {
     e.preventDefault()
     const startX = e.clientX
     const startW = width
-    const cleanup = () => {
-      window.removeEventListener('pointermove', onMove)
-      window.removeEventListener('pointerup', onUp)
-    }
-    const onUp = () => cleanup()
+    /** @author ddj 2026年10月22号 @param ev Owning pointer movement. @description Apply this drag's width calculation. */
     const onMove = (ev) => {
       const raw = startW + (ev.clientX - startX)
       // 低于最小宽度：清理监听并直接收起面板区（不夹住）
       if (raw < wMin) {
-        cleanup()
+        stopDrag()
         onHide()
         return
       }
       onWidth(Math.min(W_MAX, raw))
     }
-    window.addEventListener('pointermove', onMove)
-    window.addEventListener('pointerup', onUp)
+    bindDrag(e.pointerId, onMove)
 
   }
 
@@ -98,29 +137,25 @@ export function SidebarView(props) {
     const baseW = Math.max(wMin, Math.min(W_MAX, Math.round(Number(width) || wMin)))
     let expanded = false
     let expandStartX = 0
-    const cleanup = () => {
-      window.removeEventListener('pointermove', onMove)
-      window.removeEventListener('pointerup', onUp)
-    }
-    const onUp = () => cleanup()
+    /** @author ddj 2026年10月22号 @param ev Owning pointer movement. @description Apply this drag's width calculation. */
     const onMove = (ev) => {
       if (!expanded) {
         if (ev.clientX - startX < PULL_OUT_THRESHOLD) return
         expanded = true
         expandStartX = ev.clientX
+        seamOpening.current = true
         onShow()
         return
       }
       onWidth(Math.max(wMin, Math.min(W_MAX, baseW + (ev.clientX - expandStartX))))
     }
-    window.addEventListener('pointermove', onMove)
-    window.addEventListener('pointerup', onUp)
+    bindDrag(e.pointerId, onMove)
   }
 
   const rail = React.createElement('div', { className: 'edrv-rail' },
     React.createElement('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', gap: 2 } },
       panels.map((p) => {
-        const count = typeof p.badge === 'function' ? p.badge(ctx) : null
+        const count = checked.find((entry) => entry.panel === p)?.badge
         return React.createElement('button', {
           key: p.id,
           className: 'edrv-rail-btn' + (visible && active && p.id === active.id ? ' edrv-rail-on' : ''),
@@ -131,7 +166,8 @@ export function SidebarView(props) {
             if (!visible && typeof onShow === 'function') onShow()
           },
         },
-          React.createElement('span', { className: 'edrv-rail-icon' }, railIconEl(p.icon)),
+          React.createElement('span', { className: 'edrv-rail-icon' },
+            React.createElement(PanelBoundary, { panel: p, scope: ctx?.scope, sessionId: ctx?.sessionId, compact: true }, railIconEl(p.icon))),
           count > 0
             ? React.createElement('span', { className: 'edrv-rail-badge' }, String(count))
             : null)
@@ -150,7 +186,8 @@ export function SidebarView(props) {
     rail,
     visible
       ? React.createElement('div', { className: 'edrv-side-body' },
-          active ? active.render(ctx) : null)
+          active ? React.createElement(PanelBoundary, { panel: active, scope: ctx?.scope, sessionId: ctx?.sessionId },
+            React.createElement(PanelContent, { panel: active, ctx })) : null)
       : null,
     visible
       ? React.createElement('div', { className: 'edrv-side-resize', onPointerDown: onPointerDown })

package/src/client/sidebar/panels/FileExplorer.ts

@@ -28,7 +28,7 @@ import { useExplorerSvn } from './useExplorerSvn.js'
 import { useExplorerReveal, treeRevealPath } from './useExplorerReveal.js'
 import type { SidebarCtx } from '../types.js'
 
-const DIR_CAP = 4000
+import { flattenTree, treeAnchorTop, treeRevealTop, treeWindow, TREE_ROW_HEIGHT } from './treeWindow.js'
 const SAVE_DEBOUNCE_MS = 300
 const FOLLOW_INTERVAL_MS = 10_000
 const PREFETCH_MAX = 4
@@ -126,7 +126,8 @@ export function FileExplorer(props) {
   const saveTimerRef = React.useRef(null)
   const loadDirRef = React.useRef(null)
   const refreshRef = React.useRef(null)
-  const treeRef = React.useRef(null) // 目录树容器（定位时按 data-edrv-path 查行）
+  const treeRef = React.useRef(null) // 唯一目录树滚动容器
+  const [viewport, setViewport] = React.useState({ scope, top: 0, height: 0 })
   const reloadDirRef = React.useRef(null) // loadDir 最新闭包（文件变化监听读取，防陈旧闭包）
   const changedTimerRef = React.useRef(null) // 文件变化合并去抖计时器
   const changedRelRef = React.useRef(new Set()) // 待重列的相对目录集合（去抖窗口内合并）
@@ -338,8 +339,6 @@ export function FileExplorer(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  // 在恢复工作区展开状态之后跟随活动文件；隐藏期间目标由编辑器保留，重新挂载时兑现。
-  const { revealPath } = useExplorerReveal({ scope, activePath, treeRef, prepare: prepareReveal })
   const activeTreePath = treeRevealPath(activePath)
 
   // 10s 轻量跟随：已展开目录后台刷新（命中 host 索引，近零成本），树跟随 agent 写入
@@ -355,24 +354,71 @@ export function FileExplorer(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [scope])
 
-  /** @private @author ddj 2026年10月10号 @returns Expanded tree descriptors; icon refreshes never re-walk the tree. */
-  function flatten() {
-    const result = []
-    /** @private @author ddj 2026年10月10号 @param rel Directory. @param depth Indent level. Appends only expanded rows and placeholders. */
-    function visit(rel, depth) {
-      const entries = dirs[rel] ?? entriesCacheGet(scope, rel)
-      if (!entries) { result.push({ key: rel + ':loading', depth, text: loading[rel] ? '加载中…' : '无法加载' }); return }
-      for (const e of entries) {
-        const isDir = e.type === 'directory', isOpen = expanded[e.path] === true
-        result.push({ key: e.path, e, depth, isDir, isOpen })
-        if (isDir && isOpen) visit(e.path, depth + 1)
-      }
-      if (entries.length >= DIR_CAP) result.push({ key: rel + ':cap', depth, text: '目录条目过多，仅显示前 ' + DIR_CAP + ' 项' })
+  /** @private @author ddj 2026年10月22号 @returns Complete expanded model; icon-only updates do not flatten again. */
+  function flatten() { return flattenTree(entriesOf, expanded, loading) }
+  const treeRows = React.useMemo(flatten, [dirs, expanded, loading, scope])
+  const previousRows = React.useRef({ scope, rows: treeRows })
+  let anchoredTop = 0
+  if (viewport.scope === scope) {
+    anchoredTop = viewport.top
+    if (previousRows.current.scope === scope && previousRows.current.rows !== treeRows) {
+      anchoredTop = treeAnchorTop(previousRows.current.rows, treeRows, viewport.top)
     }
-    visit('', 0)
-    return result
   }
-  const treeRows = React.useMemo(flatten, [dirs, expanded, loading, scope])
+  const currentViewport = { top: anchoredTop, height: viewport.height }
+  const windowRows = treeWindow(treeRows.length, currentViewport)
+
+  /** @private @author ddj 2026年10月22号 Read current geometry after scroll, resize or scope restoration. */
+  function measureTree() {
+    const host = treeRef.current
+    if (!host || host.clientHeight <= 0) return
+    setViewport({ scope, top: host.scrollTop, height: host.clientHeight })
+  }
+  const scrollFrame = React.useRef(null)
+  /** @private @author ddj 2026年10月22号 Coalesce high-frequency scrolling into one measured render per frame. */
+  function scrollTree() {
+    if (scrollFrame.current !== null) return
+    scrollFrame.current = requestAnimationFrame(readScroll)
+  }
+  /** @private @author ddj 2026年10月22号 Read only after the pending animation frame fires. */
+  function readScroll() { scrollFrame.current = null; measureTree() }
+  /** @private @author ddj 2026年10月22号 @returns Resize observer and pending frame cleanup. Keep hidden trees measurable when shown. */
+  function watchTree() {
+    const observer = typeof ResizeObserver === 'function' ? new ResizeObserver(measureTree) : null
+    if (treeRef.current) observer?.observe(treeRef.current)
+    measureTree()
+    /** @private @author ddj 2026年10月22号 Stop all viewport callbacks owned by this scope. */
+    function cleanup() {
+      observer?.disconnect()
+      if (scrollFrame.current !== null) cancelAnimationFrame(scrollFrame.current)
+      scrollFrame.current = null
+    }
+    return cleanup
+  }
+  React.useLayoutEffect(watchTree, [scope])
+  /** @private @author ddj 2026年10月22号 Clamp actual scroll after collapse, filtering, or workspace switch. */
+  function clampTree() {
+    const host = treeRef.current
+    previousRows.current = { scope, rows: treeRows }
+    if (!host || host.clientHeight <= 0) return
+    if (host.scrollTop !== windowRows.top) host.scrollTop = windowRows.top
+    if (viewport.scope !== scope || viewport.top !== windowRows.top) {
+      setViewport({ scope, top: windowRows.top, height: host.clientHeight })
+    }
+  }
+  React.useLayoutEffect(clampTree, [scope, windowRows.top, treeRows])
+  /** @private @author ddj 2026年10月22号 @param path Requested file. @returns Whether its complete model row is available. */
+  function locateTree(path) {
+    const host = treeRef.current
+    if (!host) return false
+    const top = treeRevealTop(treeRows, path, { top: host.scrollTop, height: host.clientHeight })
+    if (top === null) return false
+    host.scrollTop = top
+    setViewport({ scope, top, height: host.clientHeight })
+    return true
+  }
+  // 定位由完整数据索引兑现，目标无需预先挂载 DOM；异步祖先加载后 hook 会重试。
+  const { revealPath } = useExplorerReveal({ scope, activePath, treeRef, prepare: prepareReveal, locate: locateTree })
   /** @private @author ddj 2026年10月10号 @returns Stable RPC row projection, independent of icon-only renders. */
   function projectRows() { return treeRows.filter((row) => row.e).map((row) => ({ path: row.e.path, isDir: row.isDir })) }
   const svnRows = React.useMemo(projectRows, [treeRows])
@@ -384,10 +430,10 @@ export function FileExplorer(props) {
   /** @private @author ddj 2026年10月10号 @param path Row path. @param type Entry type. @param event Context trigger. */
   function contextRow(path, type, event) {
     event.preventDefault(); event.stopPropagation()
-    setMenu({ x: event.clientX, y: event.clientY, target: { path, type } })
+    setMenu({ scope, x: event.clientX, y: event.clientY, target: { path, type } })
   }
   const onSelect = React.useCallback((path, isDir) => selectRef.current(path, isDir), [])
-  const onContext = React.useCallback(contextRow, [])
+  const onContext = React.useCallback(contextRow, [scope])
   const rootName = root ? String(root).split(/[\\/]/).pop() || root : ''
 
   /** @private @author ddj 2026年10月10号 @param row Flat descriptor. @returns Memo row; unaffected status objects retain identity. */
@@ -405,10 +451,14 @@ export function FileExplorer(props) {
     ev.preventDefault()
     ev.stopPropagation()
     if (!ev.currentTarget.contains(ev.target)) return
-    setMenu({ x: ev.clientX, y: ev.clientY, target: { path: '', type: 'directory' } })
+    setMenu({ scope, x: ev.clientX, y: ev.clientY, target: { path: '', type: 'directory' } })
   }
+  const menuValid = menu?.scope === scope && (menu.target.path === '' || treeRows.some((row) => row.e?.path === menu.target.path))
+  /** @private @author ddj 2026年10月22号 Close stale path menus instead of rebinding recycled rows. */
+  function closeLostMenu() { if (menu && !menuValid) setMenu(null) }
+  React.useEffect(closeLostMenu, [menu, menuValid])
   // 当前右键目标的可视菜单项（构建时过滤/排序，registry 变化下次打开生效）。
-  const menuEntries = menu
+  const menuEntries = menuValid
     ? buildTreeMenu(ctx?.fileMenuItems, menu.target, ctx).map((item) => ({
         id: item.id,
         label: item.label,
@@ -443,13 +493,16 @@ export function FileExplorer(props) {
       }, '↓') : null,
       React.createElement('button', { className: 'edrv-side-btn', title: '刷新目录树', onClick: () => emitRefresh({ scope, kind: 'unknown' }) }, refreshIconEl())),
     svn.message ? React.createElement('div', { className: 'edrv-tree-status', role: 'status' }, svn.message) : null,
-    React.createElement('div', { className: 'edrv-tree', ref: treeRef },
-      (errorText
+    (errorText
         ? React.createElement('div', { className: 'edrv-tree-error' },
             React.createElement('span', null, String(errorText)),
             React.createElement('button', { className: 'edrv-side-btn', onClick: () => emitRefresh({ scope, kind: 'unknown' }) }, '重试'))
         : null),
-      treeRows.map(renderRow)),
+    React.createElement('div', { className: 'edrv-tree edrv-tree-virtual', ref: treeRef, onScroll: scrollTree },
+      React.createElement('div', { 'aria-hidden': true, style: { height: windowRows.start * TREE_ROW_HEIGHT } }),
+      treeRows.slice(windowRows.start, windowRows.end).map(renderRow),
+      React.createElement('div', { 'aria-hidden': true, style: { height: (treeRows.length - windowRows.end) * TREE_ROW_HEIGHT } })),
+
     (menu && menuEntries.length
       ? React.createElement(ContextMenu, { x: menu.x, y: menu.y, entries: menuEntries, onClose: () => setMenu(null) })
       : null))

package/src/client/sidebar/panels/SvnPanel.ts

@@ -484,7 +484,7 @@ export function SvnPanel(props) {
   const [remote, setRemote] = React.useState(null)
   const [remoteBusy, setRemoteBusy] = React.useState(false)
   // W2-5：配对候选的文件大小（path → size|null）与成对结果
-  const [sizes, setSizes] = React.useState({})
+  const [sizeSnapshot, setSizes] = React.useState(null)
   // 渐进渲染预算：过滤/作用域变化时重置，避免过滤后仍停留在旧的大预算
   const [renderLimit, setRenderLimit] = React.useState(RENDER_STEP)
   // ctx 由编辑区每轮渲染重建；行动作回调改读 ref 取最新值，回调身份才能稳定（行 React.memo 生效前提）
@@ -606,14 +606,30 @@ export function SvnPanel(props) {
     () => [...missingEntries, ...unversionedEntries].slice(0, FILE_SIZES_CAP).map((entry) => entry.path),
     [missingEntries, unversionedEntries],
   )
-  const candidateKey = React.useMemo(() => requested.join('\n'), [requested])
-  const pairsNeeded = missingEntries.length > 0 && unversionedEntries.length > 0
+  const candidateKey = JSON.stringify(requested)
+  const sizeOwner = JSON.stringify([scope, sessionId, candidateKey, managed])
+  const sizeOwnerRef = React.useRef(sizeOwner)
+  sizeOwnerRef.current = sizeOwner
+  const sizes = sizeSnapshot?.owner === sizeOwner ? sizeSnapshot.table : {}
+  const pairsNeeded = managed && missingEntries.length > 0 && unversionedEntries.length > 0
   const pairsKnown = pairsNeeded && requested.every((path) => path in sizes)
-  React.useEffect(() => {
-    if (pairsKnown || !requested.length) return
-    void svnFileSizes(sessionId, requested).then((table) => setSizes(table))
-    // requested 内容由 candidateKey 代理：同 key 必同内容，闭包取旧数组无碍（去重语义与旧 join 依赖一致）
-  }, [pairsKnown, candidateKey, sessionId]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  /** @private @author ddj 2026年10月22号 @returns Cleanup invalidating this request. @description Keep sizes scoped to this candidate generation; failures do not retry in a render loop. */
+  function loadPairSizes() {
+    if (!pairsNeeded || !requested.length) return
+    let disposed = false
+    /** @author ddj 2026年10月22号 @param table Candidate sizes. @description Publish only to the current request owner. */
+    function acceptSizes(table) {
+      if (!disposed && sizeOwnerRef.current === sizeOwner) setSizes({ owner: sizeOwner, table })
+    }
+    /** @author ddj 2026年10月22号 @description Failed reads leave pairing unknown without breaking the changes list. */
+    function ignoreFailure() { /* A future candidate/session change may retry. */ }
+    /** @author ddj 2026年10月22号 @description Revoke this request on dependency change or unmount. */
+    function cancelSizes() { disposed = true }
+    void svnFileSizes(sessionId, requested).then(acceptSizes, ignoreFailure)
+    return cancelSizes
+  }
+  React.useEffect(loadPairSizes, [sizeOwner, pairsNeeded])
 
   const pairNoteOf = React.useMemo(() => {
     if (!pairsKnown) return {}

package/src/client/sidebar/panels/index.ts

@@ -10,9 +10,8 @@ import { IconBranchOutline16, IconFolderOpenOutline16, IconListPenOutline16, Ico
 import { dapStore } from '../../dap/store.js'
 import { FileExplorer } from './FileExplorer.js'
 import { SearchPanel } from './SearchPanel.js'
-import { RulesPanel } from './RulesPanel.js'
+import { LazyPanel } from '../../lazyPanel.js'
 import { SvnPanel } from './SvnPanel.js'
-import { DebugPanel } from './DebugPanel.js'
 import type { SidebarPanelDef, SidebarCtx } from '../types.js'
 
 /**
@@ -57,7 +56,7 @@ export function createRulesPanel(): SidebarPanelDef {
     title: '规则',
     icon: IconListPenOutline16,
     order: 20,
-    render: (ctx: SidebarCtx) => React.createElement(RulesPanel, { ctx }),
+    render: (ctx: SidebarCtx) => React.createElement(LazyPanel, { key: 'rules', panel: 'rules', ctx }),
   }
 }
 
@@ -113,6 +112,6 @@ export function createDebugPanel(): SidebarPanelDef {
     icon: '🐞',
     order: 22,
     badge: () => (dapStore.getSnapshot().phase === 'paused' ? 1 : null),
-    render: (ctx: SidebarCtx) => React.createElement(DebugPanel, { ctx }),
+    render: (ctx: SidebarCtx) => React.createElement(LazyPanel, { key: 'debug', panel: 'debug', ctx }),
   }
 }