dsh-vscode-mode 0.1.63 → 0.3.0

package/src/client/ui/EditorView.ts

@@ -10,7 +10,7 @@
 import React from 'react'
 import { dbg, rpc } from '../rpc.js'
 import { emitRefresh } from '../events.js'
-import { langOf, loadMonaco } from '../monaco/loader.js'
+import { langOf, loadMonaco, snippetLanguageOf } from '../monaco/loader.js'
 import { dataUrlOf, isImagePath, isSvgPath } from '../imagePreview.js'
 import { base64ToBytes, isPdfPath } from '../pdfPreview.js'
 import { createPdfPanel } from '../pdf/pdfPanel.js'
@@ -19,6 +19,8 @@ import { createDiffRenderer } from '../monaco/diffRender.js'
 import { ST, callIdAttr, noopHunk, summarize } from '../state/records.js'
 import { diffRegions } from '../state/regions.js'
 import { QuickOpen } from './QuickOpen.js'
+import { CommandPalette } from './CommandPalette.js'
+import { closeCommandPalette } from '../commandPaletteStore.js'
 import { DiffLauncher } from './DiffLauncher.js'
 import { SidebarView } from '../sidebar/SidebarView.js'
 import { clearDiffDock, publishDiffDock } from '../diffDockStore.js'
@@ -38,6 +40,27 @@ import { bindLspEditor, runGoToDefinition, runFindReferences, hideReferencesOver
 import { bindLspUnderline } from '../monaco/lsp/underline.js'
 import { onLspProgress, refreshStatus } from '../monaco/lsp/index.js'
 import { setupAiInline, trackAiEditor, aiInlineEnabled } from '../ai/inlineProvider.js'
+import { SnippetsPicker } from './SnippetsPicker.js'
+import { invalidateSnippets, setSnippetsSession, setupSnippets } from '../snippets/provider.js'
+
+/**
+ * 从 Monaco 语言目录取可选语言 id 列表（代码片段新建时的语言下拉来源）。
+ * 旧版 Monaco / 目录不可读时返回 undefined，由调用方回落 shared 的内置常量。
+ * @author ddj 2026年09月10号
+ * @param monaco window.monaco（可能未加载）
+ * @returns 语言 id 数组或 undefined
+ */
+function snippetLanguageIds(monaco) {
+  try {
+    const languages = monaco?.languages?.getLanguages?.()
+    if (!Array.isArray(languages) || !languages.length) return undefined
+    return languages
+      .map((item) => (item && typeof item.id === 'string' ? item.id : ''))
+      .filter(Boolean)
+  } catch (error) {
+    return undefined
+  }
+}
 
 /**
  * 中央编辑区：文件页签（脏点/关闭/打开路径）+ Ctrl+P 搜索 + Monaco 编辑器 +
@@ -131,6 +154,10 @@ export function EditorView(props) {
   const navBackRef = React.useRef(null) // 后退动作最新闭包（窗口级键盘监听读取）
   const navForwardRef = React.useRef(null) // 前进动作最新闭包（窗口级键盘监听读取）
   const cycleTabRef = React.useRef(null) // 页签循环动作最新闭包（Ctrl+Alt+←/→、Ctrl+PgUp/PgDn）
+  const rowNavColRef = React.useRef(null) // 整行上下移动的期望列（连续移动保持列位）
+  const rowNavMoveRef = React.useRef(false) // 本次光标变化是否由整行移动触发（否则清空期望列）
+  const activeRef = React.useRef(null) // 当前活动文件的最新值（空依赖闭包/指令回调读取）
+  activeRef.current = active
   const tabsHostRef = React.useRef(null) // 页签栏容器（切换后把当前页签滚入可见区）
   const [navTick, setNavTick] = React.useState(0) // 历史可用性版本（按钮 disabled 重渲染）
   const hoverRegionsRef = React.useRef([]) // 当前 pending 区域镜像（稳定回调读取）
@@ -143,6 +170,7 @@ export function EditorView(props) {
   const hoverPanelRef = React.useRef(false) // 鼠标是否已进入 Keep/Undo 浮层
   const batchBusyRef = React.useRef(false) // 批量 Keep All/Undo All 防重入
   const menuHandlersRef = React.useRef(null) // 右键菜单动作的最新闭包（Monaco addAction 空依赖回调读取）
+  const [snippetPicker, setSnippetPicker] = React.useState(null) // 'configure' | 'insert' | null（代码片段浮层）
   const doSaveRef = React.useRef(null) // 保存动作的最新闭包（窗口级保存监听读取）
   const onEditRef = React.useRef(null) // 编辑置脏的最新闭包（Monaco 内容变化监听经 ref 调用，防首帧 active=null 陈旧闭包）
   const saveViewStateRef = React.useRef(null) // 视图状态保存的最新闭包（卸载清理读取，避免过期 active）
@@ -564,6 +592,16 @@ export function EditorView(props) {
     }
   }, [])
 
+  // 代码片段：会话切换让补全按当前工作区叠加项目片段；配置文件保存后失效缓存即时生效
+  React.useEffect(() => {
+    setSnippetsSession(sessionId)
+  }, [sessionId])
+  React.useEffect(() => {
+    const onChanged = () => invalidateSnippets()
+    window.addEventListener('edrv:snippets-changed', onChanged)
+    return () => window.removeEventListener('edrv:snippets-changed', onChanged)
+  }, [])
+
   React.useEffect(() => {
     const onOpen = (e) => {
       const p = e?.detail?.path
@@ -799,6 +837,84 @@ export function EditorView(props) {
     return () => window.removeEventListener('keydown', onKey, true)
   }, [])
 
+  // 整行上下移动的实现见下方「指令系统接线」effect（moveRow 单点定义，命令栏与键位共用）。
+
+  /**
+   * 指令系统接线：命令栏/键位/第三方派发的 `edrv.command.*` 事件落到编辑器动作。
+   * 全部动作经最新闭包执行（与窗口级键位监听同源）；事件名逐条字面书写，
+   * 便于与指令目录（ui/commandCatalog）静态对照（tests/commands.test.ts 有断言）。
+   * @author ddj 2026年09月10号
+   */
+  React.useEffect(() => {
+    /** 整行上下移动：Monaco 内置 cursorUp/Down 会丢列位，故按期望列自行定位（连续移动保持同列）。 */
+    const moveRow = (step) => {
+      const ed = editorRef.current
+      const model = ed?.getModel?.()
+      const pos = ed?.getPosition?.()
+      if (!ed || !model || !pos) return
+      const col = rowNavColRef.current ?? pos.column
+      const line = Math.max(1, Math.min(model.getLineCount(), pos.lineNumber + step))
+      if (line === pos.lineNumber) return
+      const maxCol = model.getLineMaxColumn(line)
+      rowNavColRef.current = col
+      rowNavMoveRef.current = true
+      ed.setPosition({ lineNumber: line, column: Math.max(1, Math.min(col, maxCol)) })
+      ed.revealLineInCenterIfOutsideViewport?.(line)
+    }
+    const handlers = [
+      ['edrv.command.save', () => { if (editorRef.current?.getModel?.()) { flushSave(); doSaveRef.current?.(false) } }],
+      // 快速打开由 QuickOpen 自己接该事件（它持有搜索框 ref），此处不重复实现
+      ['edrv.command.toggleSidebar', () => setSidebarOn((v) => !v)],
+      ['edrv.command.searchInFiles', () => {
+        setSidebarOn(true)
+        setActivePanel('search')
+        setTimeout(() => window.dispatchEvent(new CustomEvent('edrv:search-focus')), 0)
+      }],
+      ['edrv.command.navigateBack', () => navBackRef.current?.()],
+      ['edrv.command.navigateForward', () => navForwardRef.current?.()],
+      ['edrv.command.nextTab', () => cycleTabRef.current?.(1)],
+      ['edrv.command.prevTab', () => cycleTabRef.current?.(-1)],
+      ['edrv.command.nextEditorRow', () => moveRow(1)],
+      ['edrv.command.prevEditorRow', () => moveRow(-1)],
+      ['edrv.command.goToDefinition', () => { const ed = editorRef.current; if (ed) void runGoToDefinition(ed) }],
+      ['edrv.command.findReferences', () => { const ed = editorRef.current; if (ed) void runFindReferences(ed) }],
+      ['edrv.command.triggerAi', () => editorRef.current?.trigger?.('edrv-ai', 'editor.action.inlineSuggest.trigger', null)],
+      ['edrv.command.openInExplorer', () => {
+        const path = activeRef.current
+        if (!path) { setStatus('无活动文件'); return }
+        menuHandlersRef.current?.openInExplorer?.(path)
+      }],
+      // 代码片段：配置（选择器）与插入（当前语言条目）；选区引用（Ctrl+U）。
+      // 打开前先关命令栏：命令栏是「执行一条命令」的一次性入口，执行完即关，
+      // 否则会残留一个已打开（可能被浮窗遮住）的命令栏，使后续 Ctrl+Shift+P 看似失效。
+      ['edrv.command.configureSnippets', () => { closeCommandPalette(); setSnippetPicker('configure') }],
+      ['edrv.command.insertSnippet', () => { closeCommandPalette(); setSnippetPicker('insert') }],
+      ['edrv.command.addSelectionRef', () => {
+        const ed = editorRef.current
+        const sel = ed?.getSelection?.()
+        const path = activeRef.current
+        if (!path) { setStatus('无活动文件'); return }
+        if (!sel || (sel.startLineNumber === sel.endLineNumber && sel.startColumn === sel.endColumn)) {
+          setStatus('请先选中内容再添加引用')
+          return
+        }
+        const range = { startLine: sel.startLineNumber, endLine: sel.endLineNumber }
+        if (!addToConversation) { setStatus('添加到对话不可用'); return }
+        addToConversation.appendReference(sessionId, path, range).then((o) => setStatus(statusOfAdd(o, '已添加选中内容为引用')))
+      }],
+    ]
+    const byName = new Map(handlers)
+    const onCommand = (event) => {
+      const action = byName.get(event.type)
+      if (!action) return
+      try { action() } catch (error) { dbg(sessionId, '指令 ' + event.type + ' 失败：' + String(error)) }
+    }
+    for (const [eventName] of handlers) window.addEventListener(eventName, onCommand)
+    return () => {
+      for (const [eventName] of handlers) window.removeEventListener(eventName, onCommand)
+    }
+  }, [sessionId])
+
   // 活动页签滚动可见（页签栏溢出时键盘切换/打开文件后把当前页签带回视野）：
   // 只调整页签栏自身 scrollLeft，不触发页面滚动。
   React.useEffect(() => {
@@ -877,6 +993,8 @@ export function EditorView(props) {
       setMonaco(m)
       // AI 内联补全 provider 注册 + 开关初始化（幂等）
       setupAiInline(m)
+      // 代码片段补全 provider 注册（幂等；条目按会话工作区懒加载）
+      setupSnippets(m)
     }).catch((e) => {
       if (alive) {
         setMonacoErr(String(e?.message ?? e))
@@ -952,6 +1070,8 @@ export function EditorView(props) {
         setDirtyMap((d) => Object.assign({}, d, { [active]: false }))
         refreshRecords()
         emitRefresh()
+        // 片段配置文件保存后失效补全缓存（下次补全即读到新片段）
+        if (/\.code-snippets$/i.test(active)) window.dispatchEvent(new CustomEvent('edrv:snippets-changed'))
       } else { setStatus('保存失败'); setError(res?.error ? String(res.error) : '保存失败') }
     }).catch((e) => { setStatus('保存失败'); setError('保存异常:' + String(e)) })
   }
@@ -1065,6 +1185,9 @@ export function EditorView(props) {
     })
     ed.onDidChangeCursorPosition((e) => {
       setCursor('Ln ' + e.position.lineNumber + ', Col ' + e.position.column)
+      // 整行移动（↓↑）刚定位时保留期望列；其余光标移动（点击/打字/方向键）清空期望列
+      if (rowNavMoveRef.current) rowNavMoveRef.current = false
+      else rowNavColRef.current = null
       // 导航历史：同文件内光标移动防抖记录（程序化恢复触发的位置与栈顶去重，无副作用）
       if (navCursorTimerRef.current) clearTimeout(navCursorTimerRef.current)
       navCursorTimerRef.current = setTimeout(() => {
@@ -1126,6 +1249,20 @@ export function EditorView(props) {
       run: (edx) => { void runFindReferences(edx) },
     })
     ed.addCommand(m.KeyCode.F12, () => { void runGoToDefinition(ed) })
+    // 整行上下移动 + 命令栏：只登记 Monaco 右键菜单入口（不绑键位）。
+    // 键位由指令桥统一 capture 派发 `edrv.command.*`，此处再绑一次会双执行。
+    ed.addAction({
+      id: 'edrv.prevEditorRow', label: '上一编辑行', contextMenuGroupId: '1_edrv',
+      run: () => window.dispatchEvent(new CustomEvent('edrv.command.prevEditorRow')),
+    })
+    ed.addAction({
+      id: 'edrv.nextEditorRow', label: '下一编辑行', contextMenuGroupId: '1_edrv',
+      run: () => window.dispatchEvent(new CustomEvent('edrv.command.nextEditorRow')),
+    })
+    ed.addAction({
+      id: 'edrv.showCommands', label: '显示所有命令', contextMenuGroupId: '1_edrv',
+      run: () => window.dispatchEvent(new CustomEvent('edrv.command.showCommands')),
+    })
     bindLspEditor(ed)
     bindLspUnderline(ed, m)
     // AI 补全：编辑器实例登记（差异静默判定用）+ Alt+\ 手动触发 ghost text
@@ -1481,6 +1618,26 @@ export function EditorView(props) {
   // 供 Monaco 原生右键菜单 addAction 读取的最新动作闭包（空依赖回调不随渲染重建）
   menuHandlersRef.current = { addRefToChat, openInExplorer }
 
+  /**
+   * 在光标处按片段语法展开插入（Monaco 原生 snippet 控制器解析 ${1:占位} 与 $TM_* 变量）。
+   * @author ddj 2026年09月10号
+   * @param entry 片段条目
+   */
+  const insertSnippetAtCursor = (entry) => {
+    const ed = editorRef.current
+    if (!ed || !entry) { setStatus('无活动编辑器'); return }
+    try {
+      ed.focus()
+      const controller = ed.getContribution?.('snippetController2')
+      if (controller?.insert) controller.insert(String(entry.body ?? ''))
+      else ed.executeEdits('edrv-snippet', [{ range: ed.getSelection(), text: String(entry.body ?? '') }])
+      setStatus('已插入代码片段：' + (entry.prefix || entry.key))
+    } catch (error) {
+      setStatus('插入代码片段失败')
+      setError('插入代码片段失败：' + String(error))
+    }
+  }
+
   const openFile = (path, focusDiff) => {
     if (!path) return
     recordNav()
@@ -1652,7 +1809,7 @@ export function EditorView(props) {
   } else if (!active) {
     body = React.createElement('div', { className: 'edrv-empty' },
       React.createElement('div', null, '暂无打开的文件'),
-      React.createElement('div', { style: { fontSize: 12 } }, '使用右上搜索框 (' + (chordOf('edrv.quickOpen') ?? 'Ctrl+P') + ') 打开工作区文件；agent 修改文件后顶部会出现差异角标'))
+      React.createElement('div', { style: { fontSize: 12 } }, '使用右上搜索框 (' + (chordOf('edrv.quickOpen') ?? 'Ctrl+P') + ') 打开工作区文件；' + (chordOf('edrv.showCommands') ?? 'Ctrl+Shift+P') + ' 打开命令栏；agent 修改文件后顶部会出现差异角标'))
   } else if (content === null && loadError) {
     body = loadingBody('文件加载失败：' + loadError, 0, () => {
       setLoadError(null)
@@ -1765,6 +1922,23 @@ export function EditorView(props) {
         React.createElement('button', { className: 'edrv-ctxmenu-item edrv-ctxmenu-danger', onClick: () => { closeTab(tabMenu.path); dismissMenus() } }, '关闭标签页'))
     : null
 
+  // 代码片段浮层（命令栏「代码片段：配置代码片段」/「插入代码片段」）：portal 到 body，随会话注入 cwd/语言
+  const snippetPickerEl = snippetPicker
+    ? React.createElement(SnippetsPicker, {
+        mode: snippetPicker,
+        sessionId,
+        cwd: cwd ?? null,
+        // 片段文件本身的语言要按 `<语言>.code-snippets` 命名约定推导（不能用 langOf：
+        // 那会把 .code-snippets 当成 json 源文件，默认名会错成 json.code-snippets）
+        language: active ? snippetLanguageOf(active) : '',
+        languages: snippetLanguageIds(monacoRef.current),
+        // 显式给 line=1：走 openFileAt 的直接定位分支（并清掉 pendingFocus，不残留跳转意图）
+        onOpenFile: (absPath) => { openFileAt(absPath, 1); setStatus('已打开代码片段文件') },
+        onInsert: insertSnippetAtCursor,
+        onClose: () => setSnippetPicker(null),
+      })
+    : null
+
   const sidebarPanels = props.sidebarPanels
   const sidebarCtx = {
     sessionId,
@@ -1831,14 +2005,21 @@ export function EditorView(props) {
     mainCol)
 
   const baseStyle = { minHeight: 0, display: 'flex', flexDirection: 'column', background: 'var(--dsw-alias-bg-base,transparent)', overflow: 'hidden' }
+  // 命令栏浮层（Ctrl+Shift+P / F1）：portal 到 body，但需挂在插件自己的 React 树里；
+  // 三种布局形态都渲染 EditorView，故这里挂载即可，多宿主由 store 单实例认领兜底。
+  const paletteEl = React.createElement(CommandPalette, { key: 'edrv-palette', sessionId })
   const rootEl = layout === 'side'
     ? React.createElement('div', { ref: viewRootRef, 'data-edrv-view': '1', 'data-edrv-layout': 'side', className: 'edrv-view-side', style: Object.assign({}, baseStyle, { height: '100%' }) },
         editorRow,
         menuBackdrop,
-        tabMenuEl)
+        tabMenuEl,
+        paletteEl,
+        snippetPickerEl)
     : React.createElement('div', { ref: viewRootRef, 'data-edrv-view': '1', style: Object.assign({}, baseStyle, { height: 'var(--edrv-editor-height, 100%)', maxHeight: 'var(--edrv-editor-height, 100%)' }) },
         editorRow,
         menuBackdrop,
-        tabMenuEl)
+        tabMenuEl,
+        paletteEl,
+        snippetPickerEl)
   return rootEl
 }

package/src/client/ui/KeybindingsPanel.ts

@@ -174,7 +174,7 @@ export function KeybindingsPanel() {
 
   return React.createElement('section', { className: 'vsm-general-page' },
     React.createElement('h2', null, '快捷键'),
-    React.createElement('p', null, '配置编辑器视图的快捷键（保存 / 快速打开 / 侧边栏 / 搜索 / 后退 / 前进）。修改即时写入配置，重新聚焦编辑器后生效。'),
+    React.createElement('p', null, '配置编辑器视图的快捷键（命令栏 / 保存 / 快速打开 / 侧边栏 / 搜索 / 后退前进 / 页签与编辑行导航）。修改即时写入配置，重新聚焦编辑器后生效；命令栏（默认 Ctrl+Shift+P 或 F1）可搜索并执行下列全部命令。'),
     unavailable && React.createElement('div', { className: 'vsm-mcp-error vsm-mcp-banner' }, '设置服务暂不可用，当前使用默认键位。'),
     error && React.createElement('div', { className: 'vsm-mcp-error vsm-mcp-banner' }, error),
     message && React.createElement('div', { className: 'vsm-kb-message' }, message),

package/src/client/ui/QuickOpen.ts

@@ -49,17 +49,25 @@ export function QuickOpen(props) {
   }
 
   React.useEffect(() => {
+    const openBox = () => {
+      inputRef.current?.focus?.()
+      setOpen(true)
+    }
     const onKey = (e) => {
       if (matchEvent(e, bindingsOf('edrv.quickOpen'))) {
         e.preventDefault(); e.stopPropagation()
-        inputRef.current?.focus?.()
-        setOpen(true)
+        openBox()
       } else if (e.key === 'Escape') {
         setOpen(false); inputRef.current?.blur?.()
       }
     }
     window.addEventListener('keydown', onKey, true)
-    return () => window.removeEventListener('keydown', onKey, true)
+    // 指令系统入口（命令栏「快速打开文件」）：与键位复用同一动作
+    window.addEventListener('edrv.command.quickOpen', openBox)
+    return () => {
+      window.removeEventListener('keydown', onKey, true)
+      window.removeEventListener('edrv.command.quickOpen', openBox)
+    }
   }, [])
 
   const dirText = (p) => {

package/src/client/ui/SnippetsPicker.ts

@@ -0,0 +1,296 @@
+// @ts-nocheck
+/**
+ * dsh-vscode-mode client — 代码片段选择器（VS Code「Configure Snippets」形态）。
+ *
+ * 形态：**居中浮窗 + 二级弹窗**，复用插件原生模态样式（mcp.css 的 .vsm-mcp-dialog，
+ * 与「添加 MCP」「工作区选择」同源），不自造视觉。
+ * - 一级弹窗 mode='configure'：按语言分组的现有片段文件列表（全局 + 当前工作区项目），
+ *   点击在文件编辑界面打开；底部按「当前文件语言」新建，或新建全语言片段。
+ * - 二级弹窗：新建片段文件表单（语言下拉 + 文件名），语言决定默认文件名与写入的绑定语义。
+ * - 一级弹窗 mode='insert'：当前语言生效条目列表，点击在光标处按片段语法展开。
+ *
+ * ⚠️ 浮层经 createPortal 挂 body，根节点必须带 `data-edrv-view`（与 CommandPalette /
+ * ContextMenu 一致）：editor.css 的浮层样式全部以 `[data-edrv-view]` 作用域限定，
+ * 漏挂会导致样式整块失效、内容以裸流形式铺在页面底部。
+ * 作者 ddj 2026年09月10号
+ */
+import React from 'react'
+import { createPortal } from 'react-dom'
+import { rpc } from '../rpc.js'
+import { invalidateSnippets, listSnippetsFor } from '../snippets/provider.js'
+import {
+  SNIPPET_LANGUAGES, languageLabelOf, normalizeSnippetFileName, snippetFileTemplate, snippetFileNameFor,
+} from '../../shared/snippets.js'
+// 显式声明对原生模态样式的依赖（.vsm-mcp-dialog / .vsm-primary）：
+// 「添加 MCP」页当前也会引入它，但本组件不应依赖那一处的引入顺序。
+import '../styles/mcp.css'
+
+/** 片段文件行的第二行摘要：语言 + 条目数 + 相对路径。 */
+export function fileMeta(info) {
+  return languageLabelOf(info.language) + ' · ' + info.count + ' 条 · [' + info.relHint + info.file + ']'
+}
+
+/**
+ * 语言下拉选项：全语言 + 语言目录（去重、保持目录序）。
+ * @author ddj 2026年09月10号
+ * @param languages 语言 id 目录（缺省用 shared 常量）
+ * @returns 选项数组（{ id, label }）
+ */
+export function languageOptions(languages) {
+  const ids = Array.isArray(languages) && languages.length ? languages : SNIPPET_LANGUAGES
+  const seen = new Set()
+  const out = [{ id: '', label: '全语言（所有文件生效）' }]
+  for (const raw of ids) {
+    const id = String(raw ?? '').trim().toLowerCase()
+    if (!id || seen.has(id)) continue
+    seen.add(id)
+    out.push({ id, label: languageLabelOf(id) })
+  }
+  return out
+}
+
+/**
+ * 片段选择器（浮窗 / 二级弹窗）。
+ * @param props.mode 'configure'（管理文件）| 'insert'（插入条目）
+ * @param props.sessionId 会话 id
+ * @param props.cwd 当前会话工作区（项目片段分组与新建用）
+ * @param props.language 当前编辑器文件绑定的语言 id（新建默认语言 / 插入过滤）
+ * @param props.languages 可选语言目录（来自 monaco.languages.getLanguages；缺省用内置常量）
+ * @param props.onOpenFile 在编辑界面打开片段文件回调(absPath)
+ * @param props.onInsert 插入片段回调(entry)
+ * @param props.onClose 关闭回调
+ * @returns 浮层 React 元素
+ */
+export function SnippetsPicker(props) {
+  const mode = props?.mode === 'insert' ? 'insert' : 'configure'
+  const sessionId = props?.sessionId
+  const cwd = props?.cwd
+  const currentLanguage = String(props?.language ?? '').trim().toLowerCase()
+  const options = React.useMemo(() => languageOptions(props?.languages), [props?.languages])
+  const onOpenFile = props?.onOpenFile
+  const onInsert = props?.onInsert
+  const onClose = props?.onClose
+
+  const [data, setData] = React.useState(null)
+  const [entries, setEntries] = React.useState(null)
+  const [error, setError] = React.useState('')
+  const [busy, setBusy] = React.useState(false)
+  // 二级弹窗草稿：null=未打开；否则 { scope, language, fileName, edited }
+  const [draft, setDraft] = React.useState(null)
+  const aliveRef = React.useRef(true)
+
+  const isInsert = mode === 'insert'
+
+  /** 拉取数据：管理模式取文件列表，插入模式取当前语言条目。 */
+  const load = React.useCallback(() => {
+    if (isInsert) {
+      listSnippetsFor(currentLanguage).then((list) => {
+        if (!aliveRef.current) return
+        setEntries(list)
+        setError('')
+      }).catch((e) => { if (aliveRef.current) setError('读取代码片段失败：' + String(e)) })
+      return
+    }
+    rpc('snippets.list', {}).then((res) => {
+      if (!aliveRef.current) return
+      if (res && res.ok) { setData(res); setError('') }
+      else setError(res?.error ?? '读取代码片段失败')
+    }).catch((e) => { if (aliveRef.current) setError('读取代码片段失败：' + String(e)) })
+  }, [isInsert, currentLanguage])
+
+  React.useEffect(() => {
+    aliveRef.current = true
+    load()
+    return () => { aliveRef.current = false }
+  }, [load])
+
+  // Esc：二级弹窗优先关闭（二级 → 一级），避免一次按键直接退出整个流程
+  React.useEffect(() => {
+    const onKey = (event) => {
+      if (event.key !== 'Escape') return
+      if (draft) closeDraft()
+      else onClose?.()
+    }
+    window.addEventListener('keydown', onKey, true)
+    return () => window.removeEventListener('keydown', onKey, true)
+  }, [draft, onClose])
+
+  /** 打开二级弹窗（按 scope + 语言新建）。 */
+  const openDraft = (scope, language) => {
+    setDraft({ scope, language, fileName: snippetFileNameFor(language), edited: false })
+    setError('')
+  }
+
+  /** 关闭二级弹窗（回到一级浮窗）。 */
+  const closeDraft = () => {
+    setDraft(null)
+    setError('')
+  }
+
+  /** 改语言：文件名未手改过则跟随语言联动（手改过则尊重用户输入）。 */
+  const pickLanguage = (language) => {
+    setDraft((prev) => (prev ? { ...prev, language, fileName: prev.edited ? prev.fileName : snippetFileNameFor(language) } : prev))
+  }
+
+  /** 改文件名：标记为手改，之后不再被语言联动覆盖。 */
+  const editFileName = (value) => {
+    setDraft((prev) => (prev ? { ...prev, fileName: value, edited: true } : prev))
+  }
+
+  /**
+   * 创建并打开片段文件（二级弹窗提交）。
+   * @author ddj 2026年09月10号
+   */
+  const createFile = () => {
+    if (!draft) return
+    const name = normalizeSnippetFileName(draft.fileName)
+    if (!name) { setError('文件名不能为空'); return }
+    if (draft.scope === 'project' && !cwd) { setError('当前会话没有工作区，无法新建项目片段'); return }
+    setBusy(true)
+    setError('')
+    rpc('snippets.save', {
+      scope: draft.scope,
+      workspacePath: draft.scope === 'project' ? cwd : undefined,
+      file: name,
+      content: snippetFileTemplate(draft.language),
+    }).then((res) => {
+      if (!aliveRef.current) return
+      if (!res || !res.ok) { setError(res?.error ?? '新建失败'); return }
+      invalidateSnippets()
+      closeDraft()
+      onOpenFile?.(res.file.absPath)
+      onClose?.()
+    }).catch((e) => { if (aliveRef.current) setError('新建失败：' + String(e)) })
+      .finally(() => { if (aliveRef.current) setBusy(false) })
+  }
+
+  /** 打开片段文件（在编辑界面打开，浮窗关闭）。 */
+  const openFile = (info) => {
+    onOpenFile?.(info.absPath)
+    onClose?.()
+  }
+
+  /** 删除片段文件（confirm 后走 snippets.remove）。 */
+  const removeFile = (info) => {
+    if (!window.confirm('删除代码片段文件 ' + info.file + '？（不可恢复）')) return
+    rpc('snippets.remove', { scope: info.scope, workspacePath: info.scope === 'project' ? cwd : undefined, file: info.file })
+      .then((res) => {
+        if (!aliveRef.current) return
+        if (!res || !res.ok) { setError(res?.error ?? '删除失败'); return }
+        invalidateSnippets()
+        load()
+      }).catch((e) => { if (aliveRef.current) setError('删除失败：' + String(e)) })
+  }
+
+  /** 一级浮窗主体：列表 / 空态 / 错误。 */
+  const renderBody = () => {
+    if (error && !draft) return React.createElement('div', { className: 'vsm-mcp-error vsm-mcp-banner' }, error)
+    if (isInsert) {
+      const list = entries ?? []
+      if (!list.length) {
+        return React.createElement('div', { className: 'vsm-mcp-empty' },
+          entries === null ? '正在读取代码片段…' : '当前文件没有可用代码片段，可用「代码片段：配置代码片段」新建')
+      }
+      return React.createElement('div', { className: 'edrv-snip-list' }, list.map((entry) => React.createElement('button', {
+        key: entry.scope + ':' + entry.file + ':' + entry.key,
+        className: 'edrv-snip-row',
+        onClick: () => { onInsert?.(entry); onClose?.() },
+      },
+        React.createElement('span', { className: 'edrv-snip-row-main' },
+          React.createElement('span', { className: 'edrv-snip-label' }, entry.prefix || entry.key),
+          React.createElement('span', { className: 'edrv-snip-desc' }, entry.description || entry.key)),
+        React.createElement('span', { className: 'edrv-snip-src' }, entry.file))))
+    }
+    if (!data) return React.createElement('div', { className: 'vsm-mcp-empty' }, '正在读取代码片段…')
+    const project = (data.projects ?? []).find((item) => item.workspacePath === cwd) ?? null
+    /** 行按语言再按文件名排序，同语言片段聚在一起（便于按文件类型找片段）。 */
+    const sortByLanguage = (list) => [...list].sort((a, b) =>
+      String(a.language).localeCompare(String(b.language)) || String(a.file).localeCompare(String(b.file)))
+    const rows = (list) => sortByLanguage(list).map((info) => React.createElement('div', { key: info.scope + ':' + info.file, className: 'edrv-snip-row' },
+      React.createElement('button', { className: 'edrv-snip-row-main', title: info.absPath, onClick: () => openFile(info) },
+        React.createElement('span', { className: 'edrv-snip-label' }, info.file),
+        React.createElement('span', { className: 'edrv-snip-desc' }, fileMeta(info))),
+      info.error ? React.createElement('span', { className: 'vsm-mcp-chip edrv-snip-warn' }, 'JSON 解析失败') : null,
+      React.createElement('button', { className: 'edrv-snip-act edrv-snip-danger', title: '删除', onClick: () => removeFile(info) }, '⌫')))
+    const globalRows = rows(data.user ?? [])
+    const projectRows = project ? rows(project.files ?? []) : []
+    return React.createElement('div', { className: 'edrv-snip-list' },
+      React.createElement('div', { className: 'edrv-snip-group' }, '全局代码片段（~/.dsh/snippets/）'),
+      globalRows.length ? globalRows : React.createElement('div', { className: 'edrv-snip-empty' }, '还没有全局代码片段'),
+      React.createElement('div', { className: 'edrv-snip-group' }, '项目代码片段' + (cwd ? '（' + cwd + '）' : '')),
+      projectRows.length
+        ? projectRows
+        : React.createElement('div', { className: 'edrv-snip-empty' }, cwd ? '当前项目没有代码片段' : '当前会话没有工作区'))
+  }
+
+  /** 当前文件语言提示行（让「片段绑定到哪种文件」一目了然）。 */
+  const languageBar = React.createElement('div', { className: 'edrv-snip-langbar' },
+    currentLanguage
+      ? React.createElement(React.Fragment, null,
+          '当前文件语言：',
+          React.createElement('b', null, languageLabelOf(currentLanguage)),
+          '（' + currentLanguage + '）')
+      : '当前没有打开文件：可新建全语言片段，或先打开文件再新建对应语言的片段')
+
+  const dialog = React.createElement('div', { className: 'edrv-snip-mask', onClick: () => onClose?.() },
+    React.createElement('div', { className: 'vsm-mcp-dialog edrv-snip-dialog', onClick: (event) => event.stopPropagation() },
+      React.createElement('h3', null, isInsert ? '插入代码片段' : '代码片段：配置代码片段'),
+      React.createElement('p', { className: 'edrv-snip-hint' }, isInsert
+        ? '仅列出对当前文件语言生效的片段（选定后在光标处展开，支持 ${1:占位} 与 $TM_FILENAME 等变量）。'
+        : '代码片段按语言绑定：`<语言>.code-snippets` 只对该类文件生效，`global.code-snippets` 对所有文件生效。选中文件即在编辑界面打开。'),
+      isInsert ? null : languageBar,
+      renderBody(),
+      isInsert
+        ? null
+        : React.createElement('div', { className: 'vsm-mcp-dialog-actions' },
+            React.createElement('button', {
+              disabled: busy,
+              onClick: () => openDraft('user', ''),
+            }, '新建全语言片段…'),
+            React.createElement('button', {
+              className: 'vsm-primary',
+              disabled: busy || !currentLanguage,
+              title: currentLanguage ? '' : '请先打开一个文件，或改用「新建全语言片段…」',
+              onClick: () => openDraft('user', currentLanguage),
+            }, currentLanguage ? '新建 ' + languageLabelOf(currentLanguage) + ' 片段文件…' : '新建当前语言片段…'),
+            React.createElement('button', {
+              disabled: busy || !cwd,
+              title: cwd ? '' : '当前会话没有工作区',
+              onClick: () => openDraft('project', currentLanguage),
+            }, '新建项目片段文件…'))))
+
+  // 二级弹窗：新建片段文件（语言 + 文件名；叠在一级浮窗之上的独立遮罩）
+  const createDialog = draft
+    ? React.createElement('div', { className: 'edrv-snip-mask edrv-snip-mask-top', onClick: closeDraft },
+        React.createElement('div', { className: 'vsm-mcp-dialog edrv-snip-dialog', onClick: (event) => event.stopPropagation() },
+          React.createElement('h3', null, draft.scope === 'project' ? '新建项目代码片段文件' : '新建全局代码片段文件'),
+          React.createElement('label', null, '生效语言',
+            React.createElement('select', {
+              value: draft.language,
+              disabled: busy,
+              onChange: (event) => { pickLanguage(event.target.value); setError('') },
+            }, options.map((item) => React.createElement('option', { key: 'lang-' + item.id, value: item.id }, item.label)))),
+          React.createElement('label', null, '文件名',
+            React.createElement('input', {
+              autoFocus: true,
+              spellCheck: false,
+              value: draft.fileName,
+              placeholder: snippetFileNameFor(draft.language),
+              onChange: (event) => { editFileName(event.target.value); setError('') },
+              onKeyDown: (event) => { if (event.key === 'Enter') createFile() },
+            })),
+          React.createElement('div', { className: 'edrv-snip-hint' },
+            (draft.scope === 'project' ? '将写入 ' + (cwd ?? '') + '/.dsh/snippets/' : '将写入 ~/.dsh/snippets/')
+            + normalizeSnippetFileName(draft.fileName)
+            + (draft.language
+                ? '（仅对 ' + languageLabelOf(draft.language) + ' 文件生效）'
+                : '（对所有文件生效）')),
+          error ? React.createElement('div', { className: 'vsm-mcp-error vsm-mcp-banner' }, error) : null,
+          React.createElement('div', { className: 'vsm-mcp-dialog-actions' },
+            React.createElement('button', { disabled: busy, onClick: closeDraft }, '取消'),
+            React.createElement('button', { className: 'vsm-primary', disabled: busy, onClick: createFile }, busy ? '创建中…' : '创建并打开'))))
+    : null
+
+  // 根节点必须带 data-edrv-view：editor.css 浮层样式均以此为作用域前缀
+  return createPortal(React.createElement('div', { 'data-edrv-view': '1' }, dialog, createDialog), document.body)
+}