dsh-vscode-mode 0.1.7 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-vscode-mode",
-  "version": "0.1.7",
+  "version": "0.1.10",
   "description": "DSH 上的类 VSCode 编码体验：Monaco 中央编辑器（文件页签/QuickOpen/状态栏）+ Agent 编辑差异审查（整文件差异/采纳/拒绝/归档/回滚），状态持久化到工作区旁车",
   "keywords": [
     "dsh",

package/src/client/monaco/diffRender.ts

@@ -86,8 +86,15 @@ export function createDiffRenderer(log) {
         const lineH = editor.getOption(monaco.editor.EditorOption.lineHeight) || 20
         let li = null
         try { li = editor.getLayoutInfo() } catch (e) { /* ignore */ }
-        const left = li ? li.decorationsLeft : 0
+        const rawLeft = li ? li.decorationsLeft : 0
         const width = li && li.decorationsWidth > 0 ? li.decorationsWidth : 16
+        // decorationsLeft 是 Monaco 内部坐标，需限制在宿主根节点内，避免窄窗口/边框
+        // 或布局尚未完成时把减号绘制到编辑器左、右边界之外。
+        const maxLeft = Math.max(0, root.clientWidth - width)
+        // 字符本身有少量字体侧向留白；给标记列留出 4px 内缩，避免减号半个
+        // 字符落到 Monaco 根节点左边框外，同时仍限制右侧不越界。
+        const markerInset = 12
+        const left = Math.max(0, Math.min(maxLeft, rawLeft + markerInset))
         const lineCount = editor.getModel().getLineCount()
         let itemIdx = 0
         let zi = 0
@@ -100,7 +107,8 @@ export function createDiffRenderer(log) {
           for (let i = 0; i < z.n; i++) {
             const item = document.createElement('div')
             item.className = 'edrv-minus-item'
-            item.textContent = '-'
+            // 使用 CSS 线段代替文本字符，避免不同字体的侧向留白把 “-” 绘制到边界外。
+            item.textContent = ''
             item.style.width = width + 'px'
             item.style.height = lineH + 'px'
             item.dataset.zone = String(zi)
@@ -130,7 +138,14 @@ export function createDiffRenderer(log) {
             const edRect = root.getBoundingClientRect()
             const st = editor.getScrollTop() || 0
             const items = overlay.querySelectorAll('.edrv-minus-item')
+            let correctedLeft = left
+            try {
+              const layout = editor.getLayoutInfo()
+              const markerWidth = layout.decorationsWidth > 0 ? layout.decorationsWidth : width
+              correctedLeft = Math.max(0, Math.min(Math.max(0, root.clientWidth - markerWidth), (layout.decorationsLeft || 0) + 12))
+            } catch (e) { /* 保留首次布局计算结果 */ }
             for (const item of items) {
+              item.style.left = correctedLeft + 'px'
               const zIndex = Number(item.dataset.zone)
               const rIndex = Number(item.dataset.row)
               const z = createdZones[zIndex]

package/src/client/monaco/loader.ts

@@ -7,6 +7,46 @@
 
 export const MONACO_BASE = '/edrv/vendor/monaco/vs'
 let monacoPromise = null
+let monacoStage = { phase: 'idle', progress: 0, message: '准备加载 Monaco…' }
+const stageListeners = new Set()
+
+/**
+ * Monaco 加载阶段：这是阶段进度而非网络字节进度，避免误导用户。
+ * @author ddj 2026年08月22号
+ */
+export const MONACO_STAGES = {
+  loader: { progress: 18, message: '加载 Monaco 引导模块…' },
+  core: { progress: 72, message: '加载编辑器核心模块…' },
+  ready: { progress: 100, message: 'Monaco 编辑器已就绪' },
+  error: { progress: 0, message: 'Monaco 编辑器加载失败' },
+}
+
+/**
+ * 发布 Monaco 加载阶段，监听器异常不得影响编辑器加载。
+ * @author ddj 2026年08月22号
+ * @param phase 阶段名
+ * @param progress 阶段百分比
+ * @param message 用户可读状态
+ */
+function publishStage(phase, progress, message) {
+  monacoStage = { phase, progress, message }
+  for (const listener of stageListeners) {
+    try { listener(monacoStage) } catch (error) { /* UI 回调异常忽略 */ }
+  }
+}
+
+/**
+ * 订阅 Monaco 加载阶段。
+ * @author ddj 2026年08月22号
+ * @param listener 阶段回调
+ * @returns 取消订阅函数
+ */
+function subscribeStage(listener) {
+  if (typeof listener !== 'function') return () => {}
+  stageListeners.add(listener)
+  listener(monacoStage)
+  return () => stageListeners.delete(listener)
+}
 
 /** 扩展名 → Monaco language id（常见语言；未知回退 plaintext）。 */
 export const LANG_BY_EXT = {
@@ -40,19 +80,26 @@ export function langOf(path) {
  * @author ddj 2026年08月20号
  * @returns Promise<object> window.monaco
  */
-export function loadMonaco() {
+export function loadMonaco(onProgress) {
+  const unsubscribe = subscribeStage(onProgress)
   if (!monacoPromise) {
+    publishStage('loader', MONACO_STAGES.loader.progress, MONACO_STAGES.loader.message)
     monacoPromise = new Promise((resolve, reject) => {
+      const fail = (error) => {
+        monacoPromise = null
+        publishStage('error', MONACO_STAGES.error.progress, MONACO_STAGES.error.message)
+        reject(error)
+      }
       const boot = () => {
         try {
           window.require.config({ paths: { vs: MONACO_BASE } })
-          window.require(['vs/editor/editor.main'], () => resolve(window.monaco), (err) => {
-            monacoPromise = null
-            reject(new Error('Monaco 模块加载失败：' + String(err)))
-          })
+          publishStage('core', MONACO_STAGES.core.progress, MONACO_STAGES.core.message)
+          window.require(['vs/editor/editor.main'], () => {
+            publishStage('ready', MONACO_STAGES.ready.progress, MONACO_STAGES.ready.message)
+            resolve(window.monaco)
+          }, (err) => fail(new Error('Monaco 模块加载失败：' + String(err))))
         } catch (error) {
-          monacoPromise = null
-          reject(error)
+          fail(error)
         }
       }
       const existing = document.querySelector('script[data-edrv-monaco-loader]')
@@ -62,10 +109,10 @@ export function loadMonaco() {
         s.src = MONACO_BASE + '/loader.js'
         s.dataset.edrvMonacoLoader = '1'
         s.onload = boot
-        s.onerror = () => { monacoPromise = null; reject(new Error('Monaco loader 加载失败')) }
+        s.onerror = () => fail(new Error('Monaco loader 加载失败'))
         document.head.appendChild(s)
       }
     })
   }
-  return monacoPromise
+  return monacoPromise.finally(unsubscribe)
 }

package/src/client/styles/editor.css

@@ -40,8 +40,9 @@
 [data-edrv-view] .edrv-del-zone { background: #fdeaea; border-top: 1px solid rgba(217,83,79,.35); border-bottom: 1px solid rgba(217,83,79,.35); box-shadow: inset 0 0 0 1px rgba(217,83,79,.12); }
 [data-edrv-view] .edrv-del-row { white-space: pre; font-family: var(--ds-font-family-code, ui-monospace, monospace); font-size: 12.5px; line-height: 20px; color: #c0392b; }
 [data-edrv-view] .edrv-del-text { display: inline-block; white-space: pre; }
-[data-edrv-view] .edrv-minus-overlay { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 6; }
-[data-edrv-view] .edrv-minus-item { position: absolute; width: 16px; text-align: center; color: #d9534f; font-weight: 700; font-size: 12.5px; line-height: 20px; }
+[data-edrv-view] .edrv-minus-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: 100%; overflow: visible; pointer-events: none; z-index: 6; }
+[data-edrv-view] .edrv-minus-item { position: absolute; box-sizing: border-box; max-width: 100%; overflow: hidden; }
+[data-edrv-view] .edrv-minus-item::before { content: ''; position: absolute; left: 4px; top: 50%; width: 8px; height: 2px; transform: translateY(-50%); border-radius: 2px; background: #d9534f; }
 [data-edrv-view] .edrv-monaco-host { flex: 1; min-height: 0; position: relative; }
 [data-edrv-view] .edrv-monaco-host > div { position: absolute; inset: 0; }
 [data-edrv-view] .edrv-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; color: var(--dsw-alias-label-tertiary, #777); font-size: 13px; }
@@ -83,5 +84,18 @@
 [data-edrv-view] .edrv-launch-path { flex: 1; min-width: 0; font-size: 12px; color: var(--dsw-alias-label-primary, #eee); word-break: break-all; }
 [data-edrv-view] .edrv-launch-cnt { font-size: 11px; color: var(--dsw-alias-label-tertiary, #888); white-space: nowrap; }
 [data-edrv-view] .edrv-launch-arch { display: flex; flex-direction: column; gap: 6px; }
+[data-edrv-view] .monaco-editor { overflow: hidden !important; }
+[data-edrv-view] .monaco-editor .sticky-widget { z-index: 30 !important; background: var(--dsw-alias-bg-base, #f8f8f8) !important; }
+[data-edrv-view] .monaco-editor .sticky-widget .sticky-line-content,
+[data-edrv-view] .monaco-editor .sticky-widget .sticky-line-number { background: var(--dsw-alias-bg-base, #f8f8f8) !important; }
 [data-edrv-view] .monaco-editor, [data-edrv-view] .monaco-editor .margin, [data-edrv-view] .monaco-editor-background { background: transparent !important; }
 [data-edrv-view] .monaco-editor .scrollbar .slider { background: rgba(128,128,128,.3) !important; }
+[data-edrv-view] .edrv-loading { gap: 8px; padding: 20px; }
+[data-edrv-view] .edrv-loading-title { color: var(--dsw-alias-label-primary, #1f2933); font-size: 13px; }
+[data-edrv-view] .edrv-progress { width: min(360px, 72%); height: 6px; overflow: hidden; border-radius: 999px; background: var(--dsw-alias-border-l1, #e0e6e8); }
+[data-edrv-view] .edrv-progress-value { height: 100%; border-radius: inherit; background: var(--dsw-alias-brand-primary, #0f9d58); transition: width .24s ease; }
+[data-edrv-view] .edrv-loading-percent { color: var(--dsw-alias-label-tertiary, #9aa5b1); font-size: 11px; font-variant-numeric: tabular-nums; }
+@media (prefers-reduced-motion: reduce) {
+  [data-edrv-view] .edrv-progress-value { transition: none; }
+}
+

package/src/client/ui/EditorView.ts

@@ -35,6 +35,8 @@ export function EditorView(props) {
   const [content, setContent] = React.useState(null)
   const [status, setStatus] = React.useState('')
   const [error, setError] = React.useState(null)
+  const [loadError, setLoadError] = React.useState(null)
+  const [loadStage, setLoadStage] = React.useState({ progress: 0, message: '准备加载编辑器…' })
   const [openInput, setOpenInput] = React.useState(false)
   const [pathDraft, setPathDraft] = React.useState('')
   const [cursor, setCursor] = React.useState('')
@@ -118,11 +120,27 @@ export function EditorView(props) {
 
   const loadContent = (path, sid) => {
     const seq = ++loadSeqRef.current
+    setLoadError(null)
+    setLoadStage({ progress: monaco ? 72 : 12, message: '读取文件内容…' })
     rpc('edrv.read', { sessionId: sid, path }).then((res) => {
       if (seq !== loadSeqRef.current || path !== active) return
-      if (res && res.ok) { setContent(res.content); setStatus('已加载') }
-      else { setError(res?.error ? String(res.error) : '读取失败'); setStatus('读取失败') }
-    }).catch((e) => { if (seq === loadSeqRef.current) { setError('read异常:' + String(e)); setStatus('读取失败') } })
+      if (res && res.ok) {
+        setContent(res.content)
+        setLoadStage((prev) => ({ progress: Math.max(84, prev.progress), message: '文件已读取，准备创建编辑器…' }))
+        setStatus('已加载')
+      } else {
+        const message = res?.error ? String(res.error) : '读取失败'
+        setLoadError(message)
+        setError(message)
+        setStatus('读取失败')
+      }
+    }).catch((e) => {
+      if (seq !== loadSeqRef.current) return
+      const message = 'read异常:' + String(e)
+      setLoadError(message)
+      setError(message)
+      setStatus('读取失败')
+    })
   }
 
   // 挂载轮询 + 事件订阅
@@ -173,14 +191,27 @@ export function EditorView(props) {
 
   React.useEffect(() => {
     if (!active) return
-    setContent(null); setStatus('加载中…')
+    setContent(null)
+    setLoadError(null)
+    setLoadStage({ progress: 10, message: '准备读取文件…' })
+    setStatus('加载中…')
     loadContent(active, sessionId)
   }, [active, sessionId])
 
   React.useEffect(() => {
     if (monaco || monacoErr) return
     let alive = true
-    loadMonaco().then((m) => { if (alive) setMonaco(m) }).catch((e) => { if (alive) { setMonacoErr(String(e?.message ?? e)); setStatus('Monaco 不可用') } })
+    const onProgress = (stage) => {
+      if (!alive) return
+      const progress = stage.phase === 'ready' ? 70 : Math.round(10 + stage.progress * 0.6)
+      setLoadStage((prev) => ({ progress: Math.max(prev.progress, progress), message: stage.message }))
+    }
+    loadMonaco(onProgress).then((m) => { if (alive) setMonaco(m) }).catch((e) => {
+      if (alive) {
+        setMonacoErr(String(e?.message ?? e))
+        setStatus('Monaco 不可用')
+      }
+    })
     return () => { alive = false }
   }, [monaco, monacoErr])
 
@@ -235,12 +266,14 @@ export function EditorView(props) {
     const ed = editorRef.current
     const model = getModel(active, content)
     if (ed.getModel() !== model) ed.setModel(model)
+    setLoadStage((prev) => ({ progress: Math.max(96, prev.progress), message: '创建编辑器视图…' }))
   }, [monaco, active, content])
 
   // 行内差异自绘（decorations / view zones / minus overlay）→ diffRenderer
   React.useEffect(() => {
     if (!monaco || !editorRef.current || !active || content === null) return
     diffRendererRef.current.render(monaco, editorRef.current, pendingRegions, sessionId)
+    setLoadStage({ progress: 100, message: '编辑器已就绪' })
   }, [monaco, active, content, pendingRegions])
 
   React.useEffect(() => () => {
@@ -525,19 +558,48 @@ export function EditorView(props) {
 
   const otherFiles = sum.pendingFiles.filter((f) => f.path !== active)
 
+  /**
+   * 渲染编辑器/文件加载进度面板。
+   * @author ddj 2026年08月22号
+   * @param message 当前加载阶段
+   * @param progress 阶段进度
+   * @param retry 可选重试回调
+   * @returns 加载面板 React 元素
+   */
+  const loadingBody = (message, progress, retry) => React.createElement('div', { className: 'edrv-empty edrv-loading', 'aria-live': 'polite' },
+    React.createElement('div', { className: 'edrv-loading-title' }, message),
+    React.createElement('div', {
+      className: 'edrv-progress',
+      role: 'progressbar',
+      'aria-label': '编辑器加载进度',
+      'aria-valuemin': 0,
+      'aria-valuemax': 100,
+      'aria-valuenow': progress,
+    }, React.createElement('div', { className: 'edrv-progress-value', style: { width: Math.max(0, Math.min(100, progress)) + '%' } })),
+    React.createElement('div', { className: 'edrv-loading-percent' }, Math.round(progress) + '%'),
+    retry ? React.createElement('button', { className: 'edrv-pill edrv-pill-ghost', onClick: retry }, '重试') : null)
+
   let body
   if (!monaco && !monacoErr) {
-    body = React.createElement('div', { className: 'edrv-empty' }, '正在加载 Monaco 编辑器…')
+    body = loadingBody(loadStage.message, loadStage.progress)
   } else if (monacoErr) {
     body = React.createElement('div', { className: 'edrv-empty' },
       React.createElement('div', null, 'Monaco 编辑器加载失败：' + String(monacoErr)),
-      React.createElement('div', { style: { fontSize: 11 } }, '请确认插件包 assets/vendor/monaco 完整（/edrv/vendor 路由可达）'))
+      React.createElement('div', { style: { fontSize: 11 } }, '请确认插件包 assets/vendor/monaco 完整（/edrv/vendor 路由可达）'),
+      React.createElement('button', { className: 'edrv-pill edrv-pill-ghost', onClick: () => { setMonacoErr(null); setLoadStage({ progress: 0, message: '准备重试 Monaco…' }) } }, '重试'))
   } else if (!active) {
     body = React.createElement('div', { className: 'edrv-empty' },
       React.createElement('div', null, '暂无打开的文件'),
       React.createElement('div', { style: { fontSize: 12 } }, '使用右上搜索框 (Ctrl+P) 打开工作区文件；agent 修改文件后顶部会出现差异角标'))
+  } else if (content === null && loadError) {
+    body = loadingBody('文件加载失败：' + loadError, 0, () => {
+      setLoadError(null)
+      setContent(null)
+      setLoadStage({ progress: 10, message: '重新读取文件…' })
+      loadContent(active, sessionId)
+    })
   } else if (content === null) {
-    body = React.createElement('div', { className: 'edrv-empty' }, '加载中…')
+    body = loadingBody(loadStage.message || '读取文件内容…', loadStage.progress)
   } else {
     body = React.createElement('div', { className: 'edrv-monaco-host' },
       React.createElement('div', { ref: ensureEditor }))