dsh-code-ui 1.4.0 → 1.4.1

package/README.md

@@ -114,6 +114,7 @@ dsh-code-ui/
 
 | 时间 | 版本 | 修复 / 新增 |
 | --- | --- | --- |
+| 2026-09-09 | v1.4.1 | 修复：编辑器**每敲一个字符文本抖动一下**。根因：hljs 就绪后，每次击键高亮层经历「tokenizer 顶上 → 60ms 防抖后换 hljs」**两次全量 innerHTML 重写**，浏览器重写 innerHTML 时 `scrollTop`/`scrollLeft` 被重置为 0——凡滚动过（垂直或水平）的文件，每次击键可见文本都会位移。修复：≤32KB 的文件改为**同步走 hljs**（单帧渲染直接出最终结果，无交换帧、工作量减半），>32KB 保留 60ms 防抖路径；并在每次渲染提交后从 textarea 回同步高亮层与行号滚动位（兜底所有 innerHTML 重写场景）。新增：**编辑器状态按会话记忆**——切换对话时快照当前会话的标签页/激活项并恢复目标会话的（此前 `applyRoot` 换根即清空标签与缓冲，切会话打开的文件全消失）；滚动位按文件路径记忆、标签恢复挂载即自动回滚；焦点不恢复，由用户自己点击决定；缓冲/脏标记以绝对路径为键全局保留，切走再切回未保存内容与 ● 状态原样还在，原「有脏文件暂不跟随根」守卫随之退役，根始终跟随新会话；**文件树展开状态同样按会话记忆**——目录展开与已加载子目录随会话快照/恢复（`applyRoot` 仅在 nodes 里没有该根节点时才重建树，同根换会话不再折叠），侧栏不再切一次对话就全部收起 |
 | 2026-09-08 | v1.4.0 | 里程碑：**语法高亮升级 highlight.js 11**（193 种语言，替换自研 tokenizer）。宿主 `webServer` exact 路由下发 `lib/vendor/` 全量包与主题 CSS，客户端首次高亮时懒加载、不拖累 SPA 启动；Electron（file://）/断网/路由缺失自动回退原 tokenizer 保底可用。插件卡片新增「语法配色」：自动（默认，随编辑器明暗 GitHub ↔ GitHub Dark）+ 10 款固定主题（GitHub / Dracula / Monokai / Nord / VS…），仅染 token 色、编辑器底色仍归「编辑器主题」管理，切换即时生效并持久化。性能：重高亮 ~60ms 防抖 + >512KB 大文件自动降级轻量高亮。`tools/vendor-hljs.mjs` 重建管线入库（支持 `--themes-only`、fetch 超时重试、Dracula 取官方源）。兼容性：适配 dsh 0.1.2+ 新版 settings 服务——不再 import 已删除的 `installSettingsSection`/`settingsNamespace` 具名导出（具名导出缺失会让宿主启动即退出），照 dshmarket 内联 `register`/`watch` 接线（服务 API 新旧一致），旧宿主 0.1.0-rc.7+ 同样可跑。交互优化：文件树选中态改为实心选中色 + 选中文字反白 + 左缘 2px 白色强调条——底色跟随宿主 `--dsw-alias-button-info-fill` 令牌（与 dshUI「对话/轨迹」页签同源，回退 #4176e6），宿主换肤自动同步；原层级灰在浅色主题下与侧栏底色仅差 5/255，选中几乎隐形。文件树根目录**按会话隔离**：宿主以 sessionId→root 映射记忆各会话的手动根（「以此文件夹为根」只影响当前会话，不再全局污染），切换会话即解析新会话的 cwd 或其记忆根——修复「新会话打开仍是旧会话地址」（原手动根为宿主级全局变量，且客户端跟随标志不持久化导致刷新后跟随失效且无提示）。未发消息的新会话也能解析根目录：会话创建时所选工作区路径已写入不可变 `SessionHeader.cwd`，经 `sessions` 服务可查（原仅查 `agents`，agent 要到首条消息后才存在）；重启后重开旧对话（agent 尚未恢复）时经 `sessionController.inspect` 读持久化 header 兜底。空新对话（blank 会话）根因：宿主对 blank 会话隐藏会话头 chrome（hideChrome），插件 InputBridge 所在 slot 不渲染、捕获不到新会话 id——新增常驻 SessionWatch（root 作用域 `shell.overlay` + 标准 props `useSessions`）监听当前选中会话，blank 会话（宿主侧 agent 在 session/create 时即建、cwd=所选工作区）也能即时换根。标签页**右键菜单**：关闭 / 关闭其他 / 关闭右侧标签页 / 关闭已保存 / 关闭全部 + 复制路径（无对象项自动置灰）；关闭波及未保存文件时弹确认框（保存并关闭 / 不保存 / 取消，多文件列清单、>5 折叠计数，保存失败者保留打开）——原标签 ✕ 按钮静默丢弃未保存改动，一并接入同一确认流程 |
 | 2026-09-02 | v1.3.2 | 调整：**切换按钮默认改为悬浮模式条**（原会话头 ⌨ 按钮，已保存选择的用户不受影响）；**文件树默认根跟随当前会话的工作区目录**——打开编辑器即定位到当前对话的项目根，会话切换自动换根（有未保存文件时暂不跟随并提示，保存后点 ⟳ 即切换）；手动「以此文件夹为根」后不再自动跟随 |
 | 2026-09-02 | v1.3.1 | 调整：安装后编辑器**默认隐藏**（dsh UI，新装不自动占屏，⌨ / 模式条随时唤回），布局默认仍为右侧停靠；配置卡片「编辑器界面」三态说明与 README 措辞同步。新增：一键更新 / 本地包更新成功后按钮文案临时变为「需重启 DSH 生效」（置灰防误点）；README 增加「界面一览」（双布局与两种切换按钮截图）并明确配置入口路径（设置 → 插件 → 插件列表 → dsh-code-ui） |

package/lib/client.js

@@ -281,6 +281,7 @@ window.__ModuleLoader__.load({
       toastPos: null,
       sessionId: null,     // 当前会话 id（InputBridge 从 slot kit 捕获；blank 会话头隐藏时由 SessionWatch 兜底）：文件树根按会话解析/记忆
       rootSessionId: null, // 当前根归属哪个会话（落后于 sessionId 时触发重新解析；手动根由宿主按会话记忆）
+      sessionEditor: {},   // 会话 id -> { tabs, activePath, nodes, rootPath }：切换会话时快照/恢复编辑器标签与文件树展开状态（滚动位按文件路径记忆于 scrollPos）
       scrollPos: {},       // 文件路径 -> {top,left}：每个标签记住自己的滚动位置（切换后恢复）
       error: null,
     }
@@ -620,6 +621,7 @@ window.__ModuleLoader__.load({
     ]
     const HLJS_VENDOR_BASE = '/dsh-code-ui/vendor/'
     const HLJS_BIG_CHARS = 512 * 1024 // 超大文件不做 hljs（防卡顿），继续用轻量 tokenizer
+    const HLJS_SYNC_MAX = 32 * 1024 // 该阈值内同步走 hljs：单帧渲染，杜绝 tokenizer↔hljs 交换帧（交换帧会重写 innerHTML 丢滚动位 → 每敲一个字符文本抖动）
     // langOf 的输出大多是 hljs 语言 id/别名；少数需归一，其余交给 hljs.getLanguage 解析，失败回退 plaintext
     const HLJS_LANG_FIX = { text: 'plaintext', jsx: 'javascript', tsx: 'typescript', htm: 'xml' }
     function hljsLangOf(lang) {
@@ -714,8 +716,24 @@ window.__ModuleLoader__.load({
       if (hljsState !== 'ready' || content.length > HLJS_BIG_CHARS) return highlight(content, lang)
       const cached = hljsCache.get(p)
       if (cached && cached.content === content) return cached.html
+      // 小文件同步走 hljs：一次渲染直接出最终结果。原「tokenizer 顶上 + 60ms 后换 hljs」
+      // 的交换帧会让高亮层每击键重写两次 innerHTML（浏览器重写时 scrollTop/scrollLeft 被
+      // 重置为 0），表现为滚动过的文件每敲一个字符文本抖动一下。
+      if (content.length <= HLJS_SYNC_MAX) {
+        let html
+        try {
+          html = window.hljs.highlight(content, { language: hljsLangOf(lang) || 'plaintext', ignoreIllegals: true }).value
+        } catch (e) {
+          html = highlight(content, lang) // 单文件异常（不应发生）：退回 tokenizer 输出
+        }
+        // 与 tokenizer 输出保持行数一致：末尾换行补齐（textarea 会渲染最后的空行）
+        if (content.endsWith('\n') && !html.endsWith('\n')) html += '\n'
+        if (hljsCache.size > 24) { const first = hljsCache.keys().next().value; if (first !== undefined) hljsCache.delete(first) }
+        hljsCache.set(p, { content, html })
+        return html
+      }
       scheduleHljs(p, content, lang)
-      return highlight(content, lang) // 间歇帧：tokenizer 顶上，保证字符即时可见有色
+      return highlight(content, lang) // 大文件：tokenizer 顶上（同步、即时），60ms 防抖后换 hljs
     }
 
     /* ============ §4 RPC 操作层（文件树 / 标签页 / 引用备注） ============ */
@@ -755,22 +773,51 @@ window.__ModuleLoader__.load({
       await applyRoot((res && res.root) ? res.root : path)
       showToast('工作区根目录：' + store.rootPath)
     }
-    // 换根并整体重置文件树/标签页/缓冲（自动跟随与手动设置共用）
+    // 换根：标签页/缓冲/脏标记按会话记忆（handleSessionSwitch 快照恢复，均以绝对路径为键、
+    // 跨根安全）。树状态（目录展开/已加载子目录）同样按会话恢复——nodes 里已有该根节点时
+    // 跳过重置（同根换会话、或恢复了目标会话的树快照），只在新根没有树状态时重建。
+    // 注意不能用 toggleExpand 展开：它是切换语义，会把已展开的根折叠回去。
     async function applyRoot(newRoot) {
       store.rootPath = newRoot
-      store.nodes = {}
-      store.tabs = []
-      store.activePath = null
-      store.buffers = {}
-      store.savedContent = {}
-      store.dirty = {}
+      if (!store.nodes[newRoot]) {
+        store.nodes = {}
+        store.browsePath = null
+        store.browseEntries = []
+        store.nodes[newRoot] = { name: baseName(newRoot), path: newRoot, isDir: true, children: [], expanded: true, loaded: false }
+        store.filePickerOpen = false
+        emit()
+        await toggleExpand(newRoot)
+        return
+      }
+      emit()
+    }
+    // —— 会话切换：编辑器状态按会话记忆 ——
+    // 切换时快照当前会话的标签页/激活项/文件树（展开+已加载子目录）/根路径，恢复目标会话的；
+    // 滚动位按文件路径记忆于 store.scrollPos（标签恢复挂载时自动回滚），焦点不恢复、由用户
+    // 自己点击决定。缓冲/脏标记以绝对路径为键全局保留：切走再切回，未保存内容与 ● 状态
+    // 原样还在，因此不再需要「有脏文件暂不跟随」守卫——根始终跟随新会话。
+    function handleSessionSwitch(nextSid) {
+      if (!nextSid || nextSid === store.sessionId) return
+      const prevSid = store.sessionId
+      const keyOf = (s) => s || '__no-session__'
+      if (prevSid && store.rootPath) {
+        store.sessionEditor[keyOf(prevSid)] = {
+          tabs: store.tabs,
+          activePath: store.activePath,
+          nodes: store.nodes,
+          rootPath: store.rootPath,
+        }
+      }
+      const saved = store.sessionEditor[keyOf(nextSid)]
+      store.tabs = saved ? saved.tabs : []
+      store.activePath = saved ? saved.activePath : null
+      store.nodes = saved && saved.nodes ? saved.nodes : {}
+      store.rootPath = saved && saved.rootPath ? saved.rootPath : null
       store.activeNotes = []
-      store.browsePath = null
-      store.browseEntries = []
-      store.nodes[newRoot] = { name: baseName(newRoot), path: newRoot, isDir: true, children: [], expanded: true, loaded: false }
-      store.filePickerOpen = false
+      store.sessionId = nextSid
       emit()
-      await toggleExpand(newRoot)
+      if (store.activePath) loadNotes(store.activePath)
+      refresh()
     }
     // —— 文件树 ——
     async function refresh() {
@@ -1217,14 +1264,8 @@ window.__ModuleLoader__.load({
           store.inputDraft = inputState.draft
           store.inputPhase = inputState.phase
         }
-        // 捕获当前会话 id：文件树根按会话隔离——切换即解析新会话的根
-        //（自动=该会话 cwd；手动=宿主 sessionRoots 里该会话记忆的根）
-        if (props.sessionId && props.sessionId !== store.sessionId) {
-          store.sessionId = props.sessionId
-          const hasDirty = Object.keys(store.dirty || {}).some((k) => store.dirty[k])
-          if (hasDirty) showToast('会话已切换：有未保存文件，工作区暂不跟随（保存后点 ⟳ 刷新即可）')
-          else refresh()
-        }
+        // 捕获当前会话 id：编辑器状态按会话记忆（标签快照/恢复 + 根解析），见 handleSessionSwitch
+        if (props.sessionId) handleSessionSwitch(props.sessionId)
         emit()
       })
       // 挂钩 DSH 原生输入条的发送：存在引用时把指针附进草稿再发（整文件=绝对路径）。
@@ -1259,11 +1300,7 @@ window.__ModuleLoader__.load({
       const useSessions = props.useSessions
       const sid = typeof useSessions === 'function' ? useSessions((s) => s.current) : undefined
       React.useEffect(() => {
-        if (!sid || sid === store.sessionId) return
-        store.sessionId = sid
-        const hasDirty = Object.keys(store.dirty || {}).some((k) => store.dirty[k])
-        if (hasDirty) showToast('会话已切换：有未保存文件，工作区暂不跟随（保存后点 ⟳ 刷新即可）')
-        else refresh()
+        if (sid) handleSessionSwitch(sid)
       }, [sid])
       return null
     }
@@ -1496,6 +1533,19 @@ window.__ModuleLoader__.load({
     }
     function Editor() {
       const st = useStore()
+      // 高亮层 innerHTML 被替换时浏览器会把 scrollTop/scrollLeft 重置为 0；每次渲染提交后
+      // 从 textarea 回同步（也覆盖大文件 60ms 防抖换帧路径），杜绝输入时文本抖动。
+      // 必须放在 early return 之前（Hooks 顺序约束）。
+      React.useEffect(() => {
+        const ta = editorTaEl
+        if (!ta) return
+        const layer = ta.parentNode
+        if (!layer) return
+        const preEl = layer.querySelector('.cdex-code-pre')
+        if (preEl) { preEl.scrollTop = ta.scrollTop; preEl.scrollLeft = ta.scrollLeft }
+        const gutEl = layer.parentNode ? layer.parentNode.querySelector('.cdex-gutter') : null
+        if (gutEl) gutEl.scrollTop = ta.scrollTop
+      })
       if (!st.activePath) {
         // 空态时显式展示当前工作区根，避免「以此文件夹为根」后误认为未切换
         return h('div', { className: 'cdex-editor' },