@lyhue1991/dsh-soup 0.5.2 → 0.5.3

package/lib/client.js

@@ -9,8 +9,7 @@
  *
  * 与宿主通信：走同源 HTTP 路由 `/api/dsh-soup`（POST JSON），
  * 即永久插件（profile bundle）规范桥梁，而非 dynamic 半区的 host.call。
- * 文件「预览」为只读展示：markdown/html/json/csv 有专属渲染器，图片预览，
- * 其余按纯文本；不提供编辑与保存。
+ * 文件「预览」按类型渲染；常见文本文件可编辑并用 mtime/size 防覆盖保存。
  */
 window.__ModuleLoader__.load({
   id: '@lyhue1991/dsh-soup',
@@ -22,6 +21,40 @@ window.__ModuleLoader__.load({
     var React = require('react')
     var create = React.createElement
 
+    // CodeMirror 6 follows the same single-editor model used by JupyterLab:
+    // text, syntax decorations, cursor, gutter and scrolling share one view.
+    var CMEditorView = null
+    var CMEditorState = null
+    var CMKeymap = null
+    var CMCommands = null
+    var CMLanguage = null
+    var CMHighlightTags = null
+    var CMLangs = {}
+    try {
+      CMEditorView = require('@codemirror/view')
+      CMEditorState = require('@codemirror/state')
+      CMKeymap = require('@codemirror/view')
+      CMCommands = require('@codemirror/commands')
+      CMLanguage = require('@codemirror/language')
+      CMHighlightTags = require('@lezer/highlight').tags
+      CMLangs.css = require('@codemirror/lang-css')
+      CMLangs.html = require('@codemirror/lang-html')
+      CMLangs.javascript = require('@codemirror/lang-javascript')
+      CMLangs.json = require('@codemirror/lang-json')
+      CMLangs.markdown = require('@codemirror/lang-markdown')
+      CMLangs.python = require('@codemirror/lang-python')
+      CMLangs.sql = require('@codemirror/lang-sql')
+      CMLangs.xml = require('@codemirror/lang-xml')
+    } catch (err) {
+      CMEditorView = null
+      CMEditorState = null
+      CMKeymap = null
+      CMCommands = null
+      CMLanguage = null
+      CMHighlightTags = null
+      CMLangs = {}
+    }
+
     // 可选依赖：DSH 自带的不可信 Markdown 渲染器（micromark 管线，与聊天
     // 消息同款；不安全协议与相对链接被禁用）与 Shiki 代码高亮块（CodeBlock，
     // 懒加载语法包 + 复制按钮）。旧版宿主缺该模块时回退纯文本预览。
@@ -128,6 +161,8 @@ window.__ModuleLoader__.load({
     var ICON_REFRESH = '<svg xmlns="http://www.w3.org/2000/svg" width="16" viewBox="0 0 18 18"><path fill="currentColor" d="M9 13.5c-2.49 0-4.5-2.01-4.5-4.5S6.51 4.5 9 4.5c1.24 0 2.36.52 3.17 1.33L10 8h5V3l-1.76 1.76A6 6 0 0 0 9 3C5.69 3 3.01 5.69 3.01 9S5.69 15 9 15a5.98 5.98 0 0 0 5.9-5h-1.52c-.46 2-2.24 3.5-4.38 3.5"/></svg>'
     var ICON_NEW_FOLDER = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-2 7h-3v3h-2v-3h-3v-2h3V8h2v3h3v2z"/></svg>'
     var ICON_MORE = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><circle cx="3" cy="8" r="1.3" fill="currentColor"/><circle cx="8" cy="8" r="1.3" fill="currentColor"/><circle cx="13" cy="8" r="1.3" fill="currentColor"/></svg>'
+    var FILE_ICON_EDIT = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>'
+    var FILE_ICON_PREVIEW = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>'
     var EXPAND_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>'
     var SHRINK_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/></svg>'
 
@@ -156,8 +191,8 @@ window.__ModuleLoader__.load({
       document.head.appendChild(goalTag)
     }
 
-    // 文件标签页视图（conversation.view 'dsh-soup-files'）：子 tab 条 + 预览区。
-    // 纯预览（无编辑）：markdown/html/json/csv 各有专属渲染器。
+    // 文件标签页视图（conversation.view 'dsh-soup-files'）：子 tab 条 + 预览/编辑区。
+    // markdown/html/json/csv 有专属渲染器；常见文本文件支持安全编辑保存。
     var FILEVIEW_CSS =
       '.dfv-root{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--dsw-specific-sidebar-fill);color:var(--dsw-alias-label-primary);font-family:var(--dsw-font-family);user-select:text;-webkit-user-select:text;}' +
       '.dfv-header{position:sticky;top:0;z-index:2;flex:none;background:var(--dsw-specific-sidebar-fill);}' +
@@ -175,20 +210,40 @@ window.__ModuleLoader__.load({
       '.dfv-btn{flex:none;display:inline-flex;align-items:center;gap:5px;height:26px;box-sizing:border-box;background:transparent;border:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-primary);font-size:12px;line-height:1;padding:0 10px;border-radius:7px;cursor:pointer;}' +
       '.dfv-btn:hover{background:var(--dsw-alias-interactive-bg-hover);}' +
       '.dfv-btn svg{width:14px;height:14px;display:block;flex:none;}' +
+      '.dfv-btn:disabled{opacity:.45;cursor:default;}' +
+      '.dfv-btn-primary{border-color:var(--dsw-alias-state-business-primary);color:var(--dsw-alias-state-business-primary);}' +
+      '.dfv-status{flex:none;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-state-warning-primary);}' +
+      '.dfv-save-error{flex:none;max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-state-error-primary);}' +
+      '.dfv-saved{color:var(--dsw-alias-state-success-primary);}' +
+      '.dfv-cm-editor{--dsh-soup-code-cursor:#1f2328;--dsh-soup-code-plain:#1f2328;--dsh-soup-code-comment:#57606a;--dsh-soup-code-keyword:#cf3476;--dsh-soup-code-string:#116329;--dsh-soup-code-number:#953800;--dsh-soup-code-type:#0969da;--dsh-soup-code-variable:#1f2328;--dsh-soup-code-function:#8250df;--dsh-soup-code-property:#0550ae;--dsh-soup-code-punctuation:#57606a;--dsh-soup-code-invalid:#cf222e;--dsh-soup-json-property:#0550ae;--dsh-soup-json-string:#116329;--dsh-soup-json-number:#953800;--dsh-soup-json-literal:#8250df;--dsh-soup-json-punctuation:#57606a;flex:1;min-height:0;min-width:0;overflow:hidden;background:var(--dsw-alias-bg-layer-1);}' +
+      'body[data-ds-dark-theme] .dfv-cm-editor{--dsh-soup-code-cursor:#f9fafb;--dsh-soup-code-plain:#f9fafb;--dsh-soup-code-comment:#7d8590;--dsh-soup-code-keyword:#faa2c1;--dsh-soup-code-string:#8ce99a;--dsh-soup-code-number:#ffa94d;--dsh-soup-code-type:#4dabf7;--dsh-soup-code-variable:#f9fafb;--dsh-soup-code-function:#b197fc;--dsh-soup-code-property:#82aaff;--dsh-soup-code-punctuation:#ced4da;--dsh-soup-code-invalid:#ff6b6b;--dsh-soup-json-property:#82aaff;--dsh-soup-json-string:#9ece8f;--dsh-soup-json-number:#e0a96d;--dsh-soup-json-literal:#c792ea;--dsh-soup-json-punctuation:#ced4da;}' +
+      '.dfv-cm-editor .cm-editor{height:100%;color:var(--dsh-soup-code-plain);background:transparent;font:12.5px/1.55 var(--ds-font-family-code);}' +
+      '.dfv-cm-editor .cm-scroller{overflow:auto;font:inherit;}' +
+      '.dfv-cm-editor .cm-content{padding:10px 14px;min-height:calc(100% - 20px);caret-color:var(--dsh-soup-code-cursor);}' +
+      '.dfv-cm-editor .cm-cursor{border-left-color:var(--dsh-soup-code-cursor)!important;}' +
+      '.dfv-cm-editor .cm-line{padding:0;}' +
+      '.dfv-cm-editor .cm-gutters{border-right:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-caption);font:12.5px/1.55 var(--ds-font-family-code);}' +
+      '.dfv-cm-editor .cm-gutterElement{box-sizing:content-box;padding:0 8px 0 12px!important;min-width:0!important;}' +
+      '.dfv-cm-editor .cm-activeLine,.dfv-cm-editor .cm-activeLineGutter{background:transparent;}' +
+      '.dfv-cm-editor .cm-selectionBackground{background:var(--dsw-alias-state-business-primary-hover);}' +
+      '.dfv-cm-editor .cm-focused{outline:none;}' +
+      '.dfv-editor{flex:1;min-height:0;width:100%;box-sizing:border-box;margin:0;padding:10px 14px;border:none;outline:none;resize:none;overflow:auto;background:transparent;color:var(--dsh-soup-code-plain);caret-color:var(--dsh-soup-code-cursor);font:12.5px/1.55 var(--ds-font-family-code);letter-spacing:normal;text-align:left;text-indent:0;text-transform:none;direction:ltr;white-space:pre;overflow-wrap:normal;word-break:normal;tab-size:2;}' +
+      '.dfv-editor::selection{background:var(--dsw-alias-state-business-primary-hover);}' +
+      '.dfv-dirty{flex:none;width:7px;height:7px;border-radius:999px;background:var(--dsw-alias-state-warning-primary);}' +
       '.dfv-error{padding:8px 14px;font-size:12px;color:var(--dsw-alias-state-error-primary);flex:none;}' +
       '.dfv-muted{padding:24px 14px;font-size:13px;color:var(--dsw-alias-label-tertiary);text-align:center;}' +
       '.dfv-cap{padding:5px 14px;font-size:11px;color:var(--dsw-alias-label-caption);border-bottom:1px solid var(--dsw-alias-border-l1);flex:none;}' +
       '.dfv-code{flex:1;min-height:0;width:100%;box-sizing:border-box;margin:0;padding:10px 14px;overflow:auto;background:transparent;color:var(--dsw-alias-label-primary);font-family:var(--ds-font-family-code);font-size:12.5px;line-height:1.55;white-space:pre;tab-size:2;user-select:text;}' +
       '.dfv-code-wrap{flex:1;min-height:0;overflow:auto;padding:8px 10px;}' +
       '.dfv-code-lines{flex:1;min-height:0;display:flex;overflow:auto;}' +
-      '.dfv-code-gutter{position:sticky;left:0;z-index:1;flex:none;padding:10px 8px 10px 12px;text-align:right;color:var(--dsw-alias-label-caption);font-family:var(--ds-font-family-code);font-size:12.5px;line-height:1.55;user-select:none;background:var(--dsw-alias-bg-layer-1);border-right:1px solid var(--dsw-alias-border-l1);}' +
+      '.dfv-code-gutter{position:sticky;left:0;z-index:1;flex:none;padding:10px 8px 10px 12px;box-sizing:border-box;text-align:right;color:var(--dsw-alias-label-caption);font-family:var(--ds-font-family-code);font-size:12.5px;line-height:1.55;user-select:none;background:var(--dsw-alias-bg-layer-1);border-right:1px solid var(--dsw-alias-border-l1);}' +
       '.dfv-code-main{flex:1;min-width:0;}' +
       '.dfv-code-main .dfv-code{overflow:visible;width:auto;}' +
       // CodeBlock（md-code-block）在行号布局内的适配：
       // 隐藏 banner（js 标签 + 复制按钮），统一 padding/字体与 gutter 对齐。
       '.dfv-code-main .md-code-block{margin:0;border-radius:0;background:transparent;}' +
       '.dfv-code-main .md-code-block>div:first-child{display:none!important;}' +
-      '.dfv-code-main .md-code-block pre{padding:10px 14px!important;margin:0!important;font:12.5px/1.55 var(--ds-font-family-code)!important;background:transparent!important;border-radius:0!important;white-space:pre;word-break:normal;}' +
+      '.dfv-code-main .md-code-block pre{padding:10px 14px!important;margin:0!important;font:12.5px/1.55 var(--ds-font-family-code)!important;background:transparent!important;border-radius:0!important;white-space:pre!important;word-break:normal!important;}' +
       '.dfv-nb{flex:1;min-height:0;overflow:auto;background:var(--dsw-alias-bg-base);}' +
       '.dfv-nb-cell{display:flex;border-bottom:1px solid var(--dsw-alias-border-l1);}' +
       '.dfv-nb-gutter{flex:none;width:44px;padding:8px 6px;text-align:right;font-family:var(--ds-font-family-code);font-size:11px;color:var(--dsw-alias-label-caption);border-right:1px solid var(--dsw-alias-border-l1);user-select:none;background:var(--dsw-specific-sidebar-fill);}' +
@@ -310,6 +365,22 @@ window.__ModuleLoader__.load({
         'files.imageTooLarge': '图片过大（{size}，上限 {limit}）',
         'files.pdfTooLarge': 'PDF 过大（{size}，上限 {limit}），请用系统打开',
         'files.truncated': '文件超过 8 MB，仅预览前 8 MB；完整内容请用系统编辑器打开。',
+        'files.edit': '编辑',
+        'files.editTitle': '编辑当前文本文件',
+        'files.preview': '预览',
+        'files.previewTitle': '返回预览模式',
+        'files.save': '保存',
+        'files.saveTitle': '保存修改（⌘S / Ctrl+S）',
+        'files.saving': '保存中…',
+        'files.saved': '已保存',
+        'files.cancelEdit': '放弃修改',
+        'files.unsaved': '有未保存修改',
+        'files.unsavedConfirm': '当前文件有未保存修改，确认放弃？',
+        'files.conflictShort': '文件在外部被修改',
+        'files.conflict': '其他程序修改了磁盘文件；当前草稿仍保留在编辑器中，下次自动保存会覆盖磁盘版本。',
+        'files.overwriteConfirm': '文件已被其他程序修改。要用当前编辑内容覆盖磁盘上的最新版本吗？',
+        'files.notEditable': '当前文件类型不支持编辑',
+        'files.truncatedEdit': '文件超过 8 MB，已截断，不能编辑保存。',
         'files.jsonFail': 'JSON 解析失败，按纯文本显示',
         'files.nbFail': 'ipynb 解析失败，按纯文本显示',
         'files.nbEmpty': '（空笔记本）',
@@ -381,6 +452,22 @@ window.__ModuleLoader__.load({
         'files.imageTooLarge': 'Image too large ({size}, limit {limit})',
         'files.pdfTooLarge': 'PDF too large ({size}, limit {limit}) — open with the system viewer',
         'files.truncated': 'File exceeds 8 MB — showing the first 8 MB; open in a system editor for the full content.',
+        'files.edit': 'Edit',
+        'files.editTitle': 'Edit this text file',
+        'files.preview': 'Preview',
+        'files.previewTitle': 'Back to preview mode',
+        'files.save': 'Save',
+        'files.saveTitle': 'Save changes (⌘S / Ctrl+S)',
+        'files.saving': 'Saving…',
+        'files.saved': 'Saved',
+        'files.cancelEdit': 'Discard changes',
+        'files.unsaved': 'Unsaved changes',
+        'files.unsavedConfirm': 'This file has unsaved changes. Discard them?',
+        'files.conflictShort': 'Changed outside the editor',
+        'files.conflict': 'Another program changed the file on disk. Your draft is preserved here, and the next auto-save will overwrite the disk version.',
+        'files.overwriteConfirm': 'The file was changed externally. Overwrite the latest disk version with your current editor content?',
+        'files.notEditable': 'Editing is not supported for this file type',
+        'files.truncatedEdit': 'The file exceeds 8 MB and was truncated, so it cannot be safely edited.',
         'files.jsonFail': 'JSON parse failed — shown as plain text',
         'files.nbFail': 'ipynb parse failed — shown as plain text',
         'files.nbEmpty': '(empty notebook)',
@@ -417,6 +504,11 @@ window.__ModuleLoader__.load({
     // while a blank conversation is mounted. Keep late async responses from an
     // older caller from overwriting the current session's shared store.
     var sessionTrackGeneration = 0
+    var autoSaveTimers = new Map()
+    var autoSaveSavedTimers = new Map()
+    var manualSavePaths = new Set()
+    var AUTO_SAVE_DELAY_MS = 5000
+    var SAVED_INDICATOR_MS = 1500
 
     // 目录展开状态按 cwd 隔离。刷新/删除/改名/移动后先重拉根目录，
     // 再按这些路径递归重拉仍存在的已展开目录；切换项目时才清空。
@@ -620,7 +712,21 @@ window.__ModuleLoader__.load({
       if (!res || !res.ok) return
       entry.kind = res.kind
       entry.size = res.size || 0
-      if (res.kind === 'text') { entry.content = res.content; entry.truncated = !!res.truncated }
+      if (res.kind === 'text') {
+        entry.truncated = !!res.truncated
+          if (!entry.dirty && !entry.editing) {
+          entry.content = res.content
+          entry.baseContent = res.content
+          entry.draft = res.content
+          entry.baseMtime = res.mtime
+          entry.baseSize = res.size
+        } else {
+          entry.conflict = true
+          entry.diskMtime = res.mtime
+          entry.diskSize = res.size
+          scheduleAutoSave(entry.path)
+        }
+      }
       else if (res.kind === 'image') { entry.dataUrl = 'data:' + res.mime + ';base64,' + res.data }
       else if (res.kind === 'pdf') { entry.data = res.data }
       setFiles({ list: state.files.list.slice() })
@@ -672,7 +778,12 @@ window.__ModuleLoader__.load({
         }
         for (var f = 0; f < dirtyFiles.length; f++) {
           var entry = findFileEntry(dirtyFiles[f])
-          if (entry && entry.loaded) await silentReloadEntry(entry)
+          if (!entry || !entry.loaded) continue
+          var currentSignature = mtimes[dirtyFiles[f]]
+          if (currentSignature
+            && currentSignature.m === entry.baseMtime
+            && currentSignature.s === entry.baseSize) continue
+          await silentReloadEntry(entry)
         }
         return true
       } finally {
@@ -1844,6 +1955,9 @@ window.__ModuleLoader__.load({
           loading: true, loaded: false, error: '',
           kind: null, content: '', dataUrl: '', data: '',
           truncated: false, size: 0,
+          baseContent: '', baseMtime: undefined, baseSize: undefined,
+          draft: '', dirty: false, editing: false, saving: false, justSaved: false,
+          saveError: '', conflict: false,
         }
         // FIFO：最多同时 5 个预览，新开的挤掉最早打开的
         var list = state.files.list.slice()
@@ -1874,7 +1988,21 @@ window.__ModuleLoader__.load({
         cur.loaded = true
         cur.kind = res.kind
         cur.size = res.size || 0
-        if (res.kind === 'text') { cur.content = res.content; cur.truncated = !!res.truncated }
+        if (res.kind === 'text') {
+          cur.truncated = !!res.truncated
+          if (!cur.dirty && !cur.editing) {
+            cur.content = res.content
+            cur.baseContent = res.content
+            cur.draft = res.content
+            cur.baseMtime = res.mtime
+            cur.baseSize = res.size
+          } else {
+            cur.conflict = true
+            cur.diskMtime = res.mtime
+            cur.diskSize = res.size
+            scheduleAutoSave(path)
+          }
+        }
         else if (res.kind === 'image') { cur.dataUrl = 'data:' + res.mime + ';base64,' + res.data }
         else if (res.kind === 'pdf') { cur.data = res.data }
       }
@@ -1889,11 +2017,145 @@ window.__ModuleLoader__.load({
       await openFileInTab(path)
     }
 
+    function isEditableTextFile(path) {
+      var kind = previewKind(path)
+      var ext = extOfName(path)
+      return kind === 'markdown' || kind === 'html' || kind === 'json'
+        || Object.prototype.hasOwnProperty.call(CODE_LANG_BY_EXT, ext)
+    }
+
+    function startEditing(path) {
+      var entry = findFileEntry(path)
+      if (!entry || !entry.loaded || entry.kind !== 'text') return
+      if (!isEditableTextFile(path)) {
+        entry.saveError = T('files.notEditable')
+        setFiles({ list: state.files.list.slice() })
+        return
+      }
+      if (entry.truncated) {
+        entry.saveError = T('files.truncatedEdit')
+        setFiles({ list: state.files.list.slice() })
+        return
+      }
+      if (!entry.editing) {
+        entry.draft = entry.dirty ? entry.draft : entry.content
+        entry.editing = true
+      }
+      entry.saveError = ''
+      setFiles({ list: state.files.list.slice() })
+    }
+
+    function scheduleAutoSave(path) {
+      clearTimeout(autoSaveTimers.get(path))
+      autoSaveTimers.set(path, setTimeout(function () {
+        autoSaveTimers.delete(path)
+        saveActiveFile(path)
+      }, AUTO_SAVE_DELAY_MS))
+    }
+
+    function showSavedIndicator(path) {
+      clearTimeout(autoSaveSavedTimers.get(path))
+      autoSaveSavedTimers.set(path, setTimeout(function () {
+        autoSaveSavedTimers.delete(path)
+        var entry = findFileEntry(path)
+        if (!entry || entry.saving || entry.dirty) return
+        entry.justSaved = false
+        setFiles({ list: state.files.list.slice() })
+      }, SAVED_INDICATOR_MS))
+    }
+
+    function manuallySaveFile(path) {
+      manualSavePaths.add(path)
+      saveActiveFile(path)
+    }
+
+    function stopEditing(path) {
+      var entry = findFileEntry(path)
+      if (!entry || !entry.editing) return
+      clearTimeout(autoSaveTimers.get(path))
+      autoSaveTimers.delete(path)
+      clearTimeout(autoSaveSavedTimers.get(path))
+      autoSaveSavedTimers.delete(path)
+      if (entry.dirty) {
+        if (entry.saving) entry.saveOnExit = true
+        else saveActiveFile(path)
+      }
+      entry.editing = false
+      setFiles({ list: state.files.list.slice() })
+    }
+
+    function updateDraft(path, value) {
+      var entry = findFileEntry(path)
+      if (!entry || !entry.editing) return
+      entry.draft = value
+      entry.dirty = value !== entry.baseContent
+      setFiles({ list: state.files.list.slice() })
+      scheduleAutoSave(path)
+    }
+
+    async function saveActiveFile(path) {
+      var entry = findFileEntry(path)
+      if (!entry || (!entry.editing && !entry.saveOnExit) || entry.saving || entry.truncated) return
+      if (!entry.dirty) return
+      entry.saving = true
+      entry.saveError = ''
+      setFiles({ list: state.files.list.slice() })
+      if (entry.conflict) {
+        entry.baseMtime = entry.diskMtime
+        entry.baseSize = entry.diskSize
+        entry.conflict = false
+      }
+      var savedDraft = entry.draft
+      var wasManualSave = manualSavePaths.has(path)
+      manualSavePaths.delete(path)
+      var res = await rpc('write', {
+        path: path,
+        content: entry.draft,
+        expectedMtime: entry.baseMtime,
+        expectedSize: entry.baseSize,
+        sessionId: activeSessionId,
+      })
+      var cur = findFileEntry(path)
+      if (!cur) return
+      cur.saving = false
+      if (!res || !res.ok) {
+        cur.saveError = (res && res.error) || T('files.saveTitle')
+        if (res && res.conflict) {
+          cur.conflict = true
+          cur.diskMtime = res.mtime
+          cur.diskSize = res.size
+        }
+        if (cur.editing || cur.saveOnExit) scheduleAutoSave(path)
+        setFiles({ list: state.files.list.slice() })
+        return
+      }
+      cur.content = savedDraft
+      cur.baseContent = savedDraft
+      cur.dirty = cur.draft !== savedDraft
+      if (!cur.dirty) cur.saveOnExit = false
+      else if (cur.editing || cur.saveOnExit) scheduleAutoSave(path)
+      cur.conflict = false
+      cur.saveError = ''
+      cur.justSaved = wasManualSave
+      cur.size = res.size
+      cur.baseMtime = res.mtime
+      cur.baseSize = res.size
+      setFiles({ list: state.files.list.slice() })
+      refresh()
+      if (wasManualSave) showSavedIndicator(path)
+    }
+
     function closeFileTab(path) {
       var list = state.files.list
       var idx = -1
       for (var i = 0; i < list.length; i++) if (list[i].path === path) { idx = i; break }
       if (idx < 0) return
+      clearTimeout(autoSaveTimers.get(path))
+      autoSaveTimers.delete(path)
+      clearTimeout(autoSaveSavedTimers.get(path))
+      autoSaveSavedTimers.delete(path)
+      var closing = list[idx]
+      if (closing.dirty && typeof window !== 'undefined' && !window.confirm(T('files.unsavedConfirm'))) return
       var next = list.slice(0, idx).concat(list.slice(idx + 1))
       var active = state.files.active
       if (active === path) {
@@ -1936,6 +2198,126 @@ window.__ModuleLoader__.load({
       return 'text'
     }
 
+    function codeMirrorLanguage(path) {
+      var ext = extOfName(path)
+      var factory = ext === 'py' ? CMLangs.python && CMLangs.python.python
+        : ext === 'js' || ext === 'mjs' || ext === 'cjs' ? CMLangs.javascript && CMLangs.javascript.javascript
+          : ext === 'jsx' ? CMLangs.javascript && CMLangs.javascript.javascript
+            : ext === 'ts' || ext === 'mts' || ext === 'cts' ? CMLangs.javascript && CMLangs.javascript.javascript
+              : ext === 'tsx' ? CMLangs.javascript && CMLangs.javascript.javascript
+                : ext === 'json' || ext === 'jsonc' ? CMLangs.json && CMLangs.json.json
+                  : ext === 'md' || ext === 'markdown' || ext === 'mdx' ? CMLangs.markdown && CMLangs.markdown.markdown
+                    : ext === 'html' || ext === 'htm' ? CMLangs.html && CMLangs.html.html
+                      : ext === 'css' || ext === 'scss' || ext === 'less' ? CMLangs.css && CMLangs.css.css
+                        : ext === 'sql' ? CMLangs.sql && CMLangs.sql.sql
+                          : ext === 'xml' ? CMLangs.xml && CMLangs.xml.xml
+                            : null
+      if (!factory) return null
+      try {
+        if (ext === 'js' || ext === 'mjs' || ext === 'cjs' || ext === 'jsx') return factory({ jsx: true })
+        if (ext === 'ts' || ext === 'mts' || ext === 'cts' || ext === 'tsx') return factory({ typescript: true, jsx: ext === 'tsx' })
+        return factory()
+      } catch (err) { return null }
+    }
+
+    var PREVIEW_HIGHLIGHT_STYLE = (CMLanguage && CMLanguage.HighlightStyle && CMHighlightTags)
+      ? CMLanguage.HighlightStyle.define([
+          { tag: CMHighlightTags.comment, color: 'var(--dsh-soup-code-comment)' },
+          { tag: CMHighlightTags.keyword, color: 'var(--dsh-soup-code-keyword)' },
+          { tag: CMHighlightTags.controlKeyword, color: 'var(--dsh-soup-code-keyword)' },
+          { tag: CMHighlightTags.definitionKeyword, color: 'var(--dsh-soup-code-keyword)' },
+          { tag: CMHighlightTags.moduleKeyword, color: 'var(--dsh-soup-code-keyword)' },
+          { tag: CMHighlightTags.operator, color: 'var(--dsh-soup-code-keyword)' },
+          { tag: CMHighlightTags.operatorKeyword, color: 'var(--dsh-soup-code-keyword)' },
+          { tag: CMHighlightTags.string, color: 'var(--dsh-soup-code-string)' },
+          { tag: CMHighlightTags.escape, color: 'var(--dsh-soup-code-string)' },
+          { tag: CMHighlightTags.regexp, color: 'var(--dsh-soup-code-string)' },
+          { tag: CMHighlightTags.number, color: 'var(--dsh-soup-code-number)' },
+          { tag: CMHighlightTags.bool, color: 'var(--dsh-soup-code-keyword)' },
+          { tag: CMHighlightTags.null, color: 'var(--dsh-soup-code-keyword)' },
+          { tag: CMHighlightTags.typeName, color: 'var(--dsh-soup-code-type)' },
+          { tag: CMHighlightTags.namespace, color: 'var(--dsh-soup-code-type)' },
+          { tag: CMHighlightTags.variableName, color: 'var(--dsh-soup-code-variable)' },
+          { tag: CMHighlightTags.function(CMHighlightTags.variableName), color: 'var(--dsh-soup-code-function)' },
+          { tag: CMHighlightTags.className, color: 'var(--dsh-soup-code-function)' },
+          { tag: CMHighlightTags.macroName, color: 'var(--dsh-soup-code-function)' },
+          { tag: CMHighlightTags.propertyName, color: 'var(--dsh-soup-code-property)' },
+          { tag: CMHighlightTags.punctuation, color: 'var(--dsh-soup-code-punctuation)' },
+          { tag: CMHighlightTags.bracket, color: 'var(--dsh-soup-code-punctuation)' },
+          { tag: CMHighlightTags.invalid, color: 'var(--dsh-soup-code-invalid)' },
+        ])
+      : null
+
+    var PREVIEW_JSON_HIGHLIGHT_STYLE = (CMLanguage && CMLanguage.HighlightStyle && CMHighlightTags)
+      ? CMLanguage.HighlightStyle.define([
+          { tag: CMHighlightTags.propertyName, color: 'var(--dsh-soup-json-property)' },
+          { tag: CMHighlightTags.string, color: 'var(--dsh-soup-json-string)' },
+          { tag: CMHighlightTags.number, color: 'var(--dsh-soup-json-number)' },
+          { tag: CMHighlightTags.bool, color: 'var(--dsh-soup-json-literal)' },
+          { tag: CMHighlightTags.null, color: 'var(--dsh-soup-json-literal)' },
+          { tag: CMHighlightTags.punctuation, color: 'var(--dsh-soup-json-punctuation)' },
+          { tag: CMHighlightTags.bracket, color: 'var(--dsh-soup-json-punctuation)' },
+          { tag: CMHighlightTags.invalid, color: 'var(--dsh-soup-code-invalid)' },
+        ])
+      : null
+
+    /** CodeMirror 6 编辑器：文本、行号、语法、高亮、光标和滚动由同一 EditorView 管理。 */
+    function TextEditor(props) {
+      var entry = props.entry
+      var hostRef = React.useRef(null)
+      var viewRef = React.useRef(null)
+      React.useEffect(function () {
+        if (!hostRef.current || !CMEditorView || !CMEditorState) return
+        var EditorView = CMEditorView.EditorView
+        var EditorState = CMEditorState.EditorState
+        var extensions = [
+          EditorView.updateListener.of(function (update) {
+            if (update.docChanged) updateDraft(entry.path, update.state.doc.toString())
+          }),
+        ]
+        if (CMKeymap && CMKeymap.keymap) extensions.push(CMKeymap.keymap.of([
+          { key: 'Mod-s', run: function () { manuallySaveFile(entry.path); return true } },
+        ]))
+        if (CMCommands) {
+          if (CMCommands.history) extensions.push(CMCommands.history())
+          if (CMCommands.historyKeymap && CMKeymap && CMKeymap.keymap) extensions.push(CMKeymap.keymap.of(CMCommands.historyKeymap))
+          if (CMCommands.defaultKeymap && CMKeymap && CMKeymap.keymap) extensions.push(CMKeymap.keymap.of(CMCommands.defaultKeymap))
+          if (CMCommands.indentWithTab && CMKeymap && CMKeymap.keymap) extensions.push(CMKeymap.keymap.of([CMCommands.indentWithTab]))
+        }
+        if (CMLanguage) {
+          if (CMLanguage.bracketMatching) extensions.push(CMLanguage.bracketMatching())
+          if (CMLanguage.indentOnInput) extensions.push(CMLanguage.indentOnInput())
+        }
+        if (CMEditorView.lineNumbers) extensions.push(CMEditorView.lineNumbers())
+        if (CMEditorView.drawSelection) extensions.push(CMEditorView.drawSelection())
+        if (CMEditorView.highlightActiveLine) extensions.push(CMEditorView.highlightActiveLine())
+        if (CMEditorView.highlightSpecialChars) extensions.push(CMEditorView.highlightSpecialChars())
+        var language = codeMirrorLanguage(entry.path)
+        if (language) extensions.push(language)
+        var ext = extOfName(entry.path)
+        var highlightStyle = (ext === 'json' || ext === 'jsonc')
+          ? PREVIEW_JSON_HIGHLIGHT_STYLE
+          : PREVIEW_HIGHLIGHT_STYLE
+        if (highlightStyle) extensions.push(CMLanguage.syntaxHighlighting(highlightStyle))
+        viewRef.current = new EditorView({
+          state: EditorState.create({ doc: entry.draft, extensions: extensions }),
+          parent: hostRef.current,
+        })
+        viewRef.current.focus()
+        return function () {
+          if (viewRef.current) { viewRef.current.destroy(); viewRef.current = null }
+        }
+      }, [entry.path])
+      if (!CMEditorView || !CMEditorState) {
+        return create('textarea', {
+          className: 'dfv-editor', value: entry.draft, spellCheck: false,
+          'aria-label': entry.name,
+          onChange: function (e) { updateDraft(entry.path, e.target.value) },
+        })
+      }
+      return create('div', { className: 'dfv-cm-editor', ref: hostRef, 'aria-label': entry.name })
+    }
+
     // 扩展名 → Shiki 语言提示。对齐 DSH 读卡片的 LANG_BY_EXTENSION
     // （packages/fs/tool-fs read-render.ts），json/md/markdown/html/htm 除外——
     // 它们走上方专属渲染器。
@@ -2490,24 +2872,26 @@ window.__ModuleLoader__.load({
       if (entry.kind === 'pdf') {
         return create(PdfPreview, { data: entry.data })
       }
-      // 文本类：按扩展名选预览渲染器（纯只读，无编辑）
+      if (entry.editing) return create(TextEditor, { entry: entry })
+      // 文本类：按扩展名选预览渲染器；编辑态返回预览时展示当前草稿
+      var text = entry.dirty ? entry.draft : entry.content
       var pk = previewKind(entry.path)
       var view = null
-      if (pk === 'markdown') view = create(MarkdownPreview, { text: entry.content, baseDir: parentOf(entry.path) })
-      else if (pk === 'html') view = create(HtmlPreview, { text: entry.content, title: entry.name })
-      else if (pk === 'json') view = create(JsonPreview, { text: entry.content })
-      else if (pk === 'notebook') view = create(NotebookPreview, { text: entry.content })
-      else if (pk === 'csv' || pk === 'tsv') view = create(DelimitedPreview, { text: entry.content, delim: pk === 'tsv' ? '\t' : ',' })
+      if (pk === 'markdown') view = create(MarkdownPreview, { text: text, baseDir: parentOf(entry.path) })
+      else if (pk === 'html') view = create(HtmlPreview, { text: text, title: entry.name })
+      else if (pk === 'json') view = create(CodeWithLines, { text: text }, create(JsonPreview, { text: text }))
+      else if (pk === 'notebook') view = create(NotebookPreview, { text: text })
+      else if (pk === 'csv' || pk === 'tsv') view = create(DelimitedPreview, { text: text, delim: pk === 'tsv' ? '\t' : ',' })
       else {
         // 代码文件：DSH CodeBlock（Shiki 高亮，语法包懒加载）；无高亮条件回退纯文本
         // 都包在 CodeWithLines 里加左侧行号
         var lang = Object.prototype.hasOwnProperty.call(CODE_LANG_BY_EXT, extOfName(entry.path))
           ? CODE_LANG_BY_EXT[extOfName(entry.path)]
           : undefined
-        var codeEl = (CodeBlock && lang && entry.content.length <= CODE_HIGHLIGHT_MAX_CHARS)
-          ? create(CodeBlock, { code: entry.content, lang: lang })
-          : create('pre', { className: 'dfv-code' }, entry.content)
-        view = create(CodeWithLines, { text: entry.content }, codeEl)
+        var codeEl = (CodeBlock && lang && text.length <= CODE_HIGHLIGHT_MAX_CHARS)
+          ? create(CodeBlock, { code: text, lang: lang })
+          : create('pre', { className: 'dfv-code' }, text)
+        view = create(CodeWithLines, { text: text }, codeEl)
       }
       return create(React.Fragment, null,
         entry.truncated ? create('div', { className: 'dfv-cap' },
@@ -2516,6 +2900,53 @@ window.__ModuleLoader__.load({
       )
     }
 
+    function FileToolbar(props) {
+      var active = props.entry
+      var buttons = []
+      if (active.loaded && active.kind === 'text' && isEditableTextFile(active.path)) {
+        if (!active.editing) {
+          buttons.push(create('button', {
+            type: 'button',
+            className: 'dfv-btn',
+            title: T('files.editTitle'),
+            disabled: active.truncated,
+            onClick: function () { startEditing(active.path) },
+          },
+            create('span', { className: 'expl-icon', dangerouslySetInnerHTML: { __html: FILE_ICON_EDIT } }),
+            T('files.edit'),
+          ))
+        } else {
+          buttons.push(create('button', {
+            type: 'button',
+            className: 'dfv-btn',
+            title: T('files.previewTitle'),
+            onClick: function () { stopEditing(active.path) },
+          },
+            create('span', { className: 'expl-icon', dangerouslySetInnerHTML: { __html: FILE_ICON_PREVIEW } }),
+            T('files.preview'),
+          ))
+        }
+      }
+      buttons.push(active.loaded ? create('button', {
+        type: 'button',
+        className: 'dfv-btn',
+        title: T('files.reloadTitle'),
+        onClick: function () { reloadFile(active.path) },
+      },
+        create('span', { className: 'expl-icon', dangerouslySetInnerHTML: { __html: ICON_REFRESH } }),
+        T('files.reload'),
+      ) : null)
+      return create(React.Fragment, null,
+        create('span', { className: 'dfv-toolbar-path', title: active.path }, active.path),
+        typeof active.size === 'number' && active.size > 0 ? create('span', null, formatBytes(active.size)) : null,
+        active.saving ? create('span', { className: 'dfv-status' }, T('files.saving')) : null,
+        active.justSaved && !active.saving && !active.dirty ? create('span', { className: 'dfv-status dfv-saved' }, T('files.saved')) : null,
+        active.conflict ? create('span', { className: 'dfv-status', title: T('files.conflict') }, T('files.conflictShort')) : null,
+        active.saveError ? create('span', { className: 'dfv-save-error', title: active.saveError }, active.saveError) : null,
+        buttons,
+      )
+    }
+
     /**
      * 纯阅读模式标记：在会话根（含 composerSeat 的最近祖先，即 DSH
      * ConversationRoot 的 root 节点）上打 data-dsh-soup-preview，由上面
@@ -2565,6 +2996,7 @@ window.__ModuleLoader__.load({
           title: entry.path,
           onClick: function () { setActiveFile(entry.path) },
         },
+          entry.dirty ? create('span', { className: 'dfv-dirty', title: T('files.unsaved') }) : null,
           create('span', { className: 'dfv-tab-name' }, entry.name),
           create('span', {
             className: 'dfv-close',
@@ -2584,17 +3016,7 @@ window.__ModuleLoader__.load({
         )
       } else {
         toolbar = create('div', { className: 'dfv-toolbar' },
-          create('span', { className: 'dfv-toolbar-path', title: active.path }, active.path),
-          typeof active.size === 'number' && active.size > 0 ? create('span', null, formatBytes(active.size)) : null,
-          active.loaded ? create('button', {
-            type: 'button',
-            className: 'dfv-btn',
-            title: T('files.reloadTitle'),
-            onClick: function () { reloadFile(active.path) },
-          },
-            create('span', { className: 'expl-icon', dangerouslySetInnerHTML: { __html: ICON_REFRESH } }),
-            T('files.reload'),
-          ) : null,
+          create(FileToolbar, { entry: active }),
           create('button', {
             type: 'button',
             className: 'dfv-btn',
@@ -2626,6 +3048,7 @@ window.__ModuleLoader__.load({
       if (!active) return null
       var close = function () { setFiles({ overlay: false, overlayMax: false, overlayReturn: null }) }
       var closeAndCloseTab = function () {
+        if (active.dirty && typeof window !== 'undefined' && !window.confirm(T('files.unsavedConfirm'))) return
         close()
         closeFileTab(active.path)
       }
@@ -2643,17 +3066,7 @@ window.__ModuleLoader__.load({
       },
         create('div', { className: 'dfv-overlay-panel' + (files.overlayMax ? ' dfv-overlay-max' : '') },
           create('div', { className: 'dfv-toolbar' },
-            create('span', { className: 'dfv-toolbar-path', title: active.path }, active.path),
-            typeof active.size === 'number' && active.size > 0 ? create('span', null, formatBytes(active.size)) : null,
-            active.loaded ? create('button', {
-              type: 'button',
-              className: 'dfv-btn',
-              title: T('files.reloadTitle'),
-              onClick: function () { reloadFile(active.path) },
-            },
-              create('span', { className: 'expl-icon', dangerouslySetInnerHTML: { __html: ICON_REFRESH } }),
-              T('files.reload'),
-            ) : null,
+            create(FileToolbar, { entry: active }),
             create('button', {
               type: 'button', className: 'dfv-overlay-close',
               title: files.overlayMax ? '还原' : '最大化', 'aria-label': files.overlayMax ? '还原' : '最大化',