@yiln-dsh/dsh-plugin-file-explorer 0.6.0 → 0.8.0

package/README.md

@@ -9,8 +9,14 @@ A DSH `dsh.bundle` that contributes a workspace file explorer page to the
 - **Files** page: lists the active session's workspace directory, with folder
   navigation, editable path input, parent/refresh buttons, file and folder
   icons, and file sizes. File rows reveal view / download / delete buttons on
-  hover; delete uses a second-click confirm. Image View supports fullscreen,
-  25%-400% zoom, wheel zoom, and drag-to-pan after zooming.
+  hover; delete uses a second-click confirm. Text files open in a
+  **monaco-editor** dialog with syntax highlighting, editing, and save (dirty
+  indicator + discard confirmation); markdown files (`.md`, `.markdown`,
+  `.mdx`) add a **渲染预览 / Rendered preview** toggle in the dialog header
+  that switches between the editable source and a rendered HTML view (the
+  live text, so the render follows unsaved edits); image files open in a
+  viewer with fullscreen, 25%-400% zoom, wheel zoom, and drag-to-pan after
+  zooming.
 - **Git Graph** page: a vscode/le-git-graph style commit graph rendered from
   the repository containing the current directory —
   - colored lane graph with commit dots and merge curves (all branches or the
@@ -30,13 +36,13 @@ A DSH `dsh.bundle` that contributes a workspace file explorer page to the
 
 | File | Content |
 | --- | --- |
-| `index.js` | Host half: registers exact `/ _dsh/file-explorer/*` routes backed by the Host `fs`/`subprocess` services, plus read-only git routes (`/ _dsh/file-explorer/git-log`, `git-commit`, `git-diff`, `git-status`) that run `git` with machine-readable separators and return JSON only. |
-| `client.js` | Client half: registers independent keyed `right-panel.page` entries for Files and Git Graph. |
+| `index.js` | Host half: registers exact `/ _dsh/file-explorer/*` routes backed by the Host `fs`/`subprocess` services (`list`, `read`, `write`, `download`, `delete`), plus read-only git routes (`/ _dsh/file-explorer/git-log`, `git-commit`, `git-diff`, `git-status`) that run `git` with machine-readable separators and return JSON only. Also serves the monaco-editor AMD tree under `/ _dsh/file-explorer/monaco/vs` and the markdown-it ESM build under `/ _dsh/file-explorer/vendor/markdown-it.mjs`. |
+| `client.js` | Client half: registers independent keyed `right-panel.page` entries for Files and Git Graph, and loads monaco-editor from the host-served AMD tree. |
 | `cordis.patch.yml` | Composition patch that mounts the host row — declared with `inject: [webServer]`, so it activates only after the stock webserver service (`127.0.0.1`) is up. |
 
 ## Install
 
-The package version is `@yiln-dsh/dsh-plugin-file-explorer@0.6.0`.
+The package version is `@yiln-dsh/dsh-plugin-file-explorer@0.8.0`.
 
 The right-panel package must be installed in the same `web` profile:
 
@@ -53,7 +59,7 @@ pnpm pack
 ```
 
 ```bash
-dsh plugin --profile web add ./yiln-dsh-dsh-plugin-file-explorer-0.6.0.tgz
+dsh plugin --profile web add ./yiln-dsh-dsh-plugin-file-explorer-0.8.0.tgz
 ```
 
 ### npm package
@@ -76,10 +82,26 @@ apply the new profile composition.
 - The Host falls back to `sandboxPolicy.workspaceRoot` when no path is passed,
   and returns `{ ok, path, parent, entries }` JSON — never live objects.
 - `read` previews up to 1 MiB of UTF-8 text or 16 MiB of recognized images;
-  image previews return a data URL for inline rendering. `download` is a GET
+  image previews return a data URL for inline rendering. `write` saves edited
+  text back (also capped at 1 MiB) through `fs.writeText`; `download` is a GET
   route (`/_dsh/file-explorer/download?path=...`) that streams the file
   natively (`Content-Disposition: attachment`) — no base64, no JSON body, no
   size ceiling. The browser triggers it with a transient `<a download>` link.
+- Text previews open in monaco-editor (AMD build served verbatim from the npm
+  package under `/ _dsh/file-explorer/monaco/vs`). The editor lazily loads the
+  language features for css/html/json/typescript, tracks dirty state, saves via
+  the `write` route, and confirms before discarding unsaved changes.
+- Markdown files render with markdown-it's standalone ESM build (the
+  `./browser` export) served verbatim by the Host under
+  `/ _dsh/file-explorer/vendor/markdown-it.mjs` — no CDN, no bundler step.
+  The browser loads it with dynamic `import()`. The ESM build is deliberate:
+  the UMD build's AMD branch would be taken whenever a global `define`
+  exists (the monaco loader in the same page), registering the module
+  anonymously instead of exposing the constructor. Rendering happens in the
+  browser with `html: false` (raw HTML inside the file is escaped) and
+  markdown-it's built-in `validateLink` rejects
+  `javascript:`/`vbscript:`/`file:`/`data:` hrefs, so workspace files never
+  inject markup or scripts into the page.
 - `delete` removes regular files (`rm -f`) and directories recursively
   (`rm -rf`); both are called only after a second-click confirm in the UI.
 - Git routes are read-only. They resolve the repository root with

package/client.js

@@ -65,6 +65,18 @@ window.__ModuleLoader__.load({
 			"files.imageTooLarge": "图片过大，无法在此预览",
 			"files.noPreview": "（无预览）",
 			"files.binaryNoPreview": "二进制文件无法预览",
+			"files.edit": "编辑",
+			"files.editFile": "编辑 {name}",
+			"files.save": "保存",
+			"files.saving": "保存中…",
+			"files.saved": "已保存",
+			"files.saveFailed": "保存失败",
+			"files.dirty": "有未保存的更改",
+			"files.markdownRender": "渲染预览",
+			"files.markdownSource": "源代码",
+			"files.markdownRenderFailed": "Markdown 渲染失败",
+			"files.discardConfirm": "有未保存的更改，确定放弃并关闭吗？",
+			"files.editorLoadFailed": "编辑器加载失败",
 			"git.logFailed": "Git 提交记录加载失败",
 			"git.commitFailed": "提交详情加载失败",
 			"git.diffFailed": "差异加载失败",
@@ -142,6 +154,18 @@ window.__ModuleLoader__.load({
 			"files.imageTooLarge": "Image is too large to preview here",
 			"files.noPreview": "(No preview)",
 			"files.binaryNoPreview": "Binary file cannot be previewed",
+			"files.edit": "Edit",
+			"files.editFile": "Edit {name}",
+			"files.save": "Save",
+			"files.saving": "Saving…",
+			"files.saved": "Saved",
+			"files.saveFailed": "Save failed",
+			"files.dirty": "Unsaved changes",
+			"files.markdownRender": "Rendered preview",
+			"files.markdownSource": "Source",
+			"files.markdownRenderFailed": "Failed to render markdown",
+			"files.discardConfirm": "You have unsaved changes. Discard them and close?",
+			"files.editorLoadFailed": "Editor failed to load",
 			"git.logFailed": "Failed to load git log",
 			"git.commitFailed": "Failed to load commit",
 			"git.diffFailed": "Failed to load diff",
@@ -437,6 +461,11 @@ window.__ModuleLoader__.load({
   box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
   overflow: hidden;
 }
+.dsh-fe-modal-editor {
+  width: min(920px, calc(100vw - 32px));
+  height: min(80vh, 720px);
+  max-height: min(80vh, 720px);
+}
 .dsh-fe-modal-fullscreen {
   width: 100vw;
   height: 100vh;
@@ -461,6 +490,13 @@ window.__ModuleLoader__.load({
   font-size: 13px;
   font-weight: 600;
 }
+.dsh-fe-editor-title-dot {
+  display: inline-block;
+  margin-left: 6px;
+  color: var(--dsw-alias-state-warning-primary, #d97706);
+  font-size: 10px;
+  vertical-align: 1px;
+}
 .dsh-fe-modal-meta {
   flex: 0 0 auto;
   color: var(--dsw-alias-label-secondary, #6b7280);
@@ -511,6 +547,185 @@ window.__ModuleLoader__.load({
   background: var(--dsw-alias-bg-base, #f5f5f4);
   white-space: normal;
 }
+.dsh-fe-modal-body-editor {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding: 0;
+  overflow: hidden;
+  background: var(--dsw-alias-bg-layer-1, #ffffff);
+}
+.dsh-fe-editor-host {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+}
+.dsh-fe-editor-host .monaco-editor,
+.dsh-fe-editor-host .monaco-editor-background,
+.dsh-fe-editor-host .monaco-editor .margin {
+  background-color: transparent;
+}
+.dsh-fe-editor-status {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 28px;
+  padding: 2px 14px;
+  border-top: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, 0.1));
+  color: var(--dsw-alias-label-secondary, #78716c);
+  font-size: 11px;
+}
+.dsh-fe-editor-status-dirty {
+  color: var(--dsw-alias-state-warning-primary, #d97706);
+}
+.dsh-fe-editor-status-error {
+  color: var(--dsw-alias-state-error-primary, #b91c1c);
+}
+.dsh-fe-editor-save {
+  margin-left: auto;
+  height: 24px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 6px;
+  background: var(--dsw-alias-brand-primary, #4f46e5);
+  color: #ffffff;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.dsh-fe-editor-save:hover:not(:disabled) {
+  filter: brightness(1.08);
+}
+.dsh-fe-editor-save:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+.dsh-fe-md-toggle {
+  flex: 0 0 auto;
+  height: 24px;
+  padding: 0 10px;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.2));
+  border-radius: 999px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary, #57534e);
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.dsh-fe-md-toggle:hover {
+  background: var(--dsw-alias-bg-layer-2, #e7e5e4);
+  color: var(--dsw-alias-label-primary, #111827);
+}
+.dsh-fe-md-toggle[aria-pressed='true'] {
+  background: var(--dsw-alias-brand-primary, #4f46e5);
+  border-color: transparent;
+  color: #fff;
+}
+.dsh-fe-markdown {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: 14px 18px;
+  box-sizing: border-box;
+  color: var(--dsw-alias-label-primary, #111827);
+  font-size: 13px;
+  line-height: 20px;
+  overflow-wrap: anywhere;
+}
+.dsh-fe-markdown > :first-child {
+  margin-top: 0;
+}
+.dsh-fe-markdown > :last-child {
+  margin-bottom: 0;
+}
+.dsh-fe-markdown h1,
+.dsh-fe-markdown h2,
+.dsh-fe-markdown h3,
+.dsh-fe-markdown h4 {
+  margin: 14px 0 8px;
+  font-weight: 700;
+  line-height: 1.35;
+}
+.dsh-fe-markdown h1 {
+  font-size: 17px;
+}
+.dsh-fe-markdown h2 {
+  font-size: 15px;
+}
+.dsh-fe-markdown h3,
+.dsh-fe-markdown h4 {
+  font-size: 13px;
+}
+.dsh-fe-markdown p {
+  margin: 0 0 10px;
+}
+.dsh-fe-markdown a {
+  color: var(--dsw-alias-brand-primary, #2563eb);
+  text-decoration: underline;
+}
+.dsh-fe-markdown ul,
+.dsh-fe-markdown ol {
+  margin: 0 0 10px;
+  padding-left: 22px;
+}
+.dsh-fe-markdown li {
+  margin: 2px 0;
+}
+.dsh-fe-markdown blockquote {
+  margin: 0 0 10px;
+  padding: 2px 12px;
+  border-left: 3px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.2));
+  color: var(--dsw-alias-label-secondary, #57534e);
+}
+.dsh-fe-markdown code {
+  box-sizing: border-box;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: var(--dsw-alias-bg-layer-1, #ffffff);
+  font-family: var(--ds-font-family-code, ui-monospace, monospace);
+  font-size: 12px;
+}
+.dsh-fe-markdown pre {
+  margin: 0 0 10px;
+  padding: 10px 12px;
+  border-radius: 6px;
+  background: var(--dsw-alias-bg-layer-1, #ffffff);
+  overflow: auto;
+}
+.dsh-fe-markdown pre code {
+  padding: 0;
+  background: none;
+  white-space: pre;
+}
+.dsh-fe-markdown table {
+  border-collapse: collapse;
+  margin: 0 0 10px;
+  max-width: 100%;
+  display: block;
+  overflow: auto;
+}
+.dsh-fe-markdown th,
+.dsh-fe-markdown td {
+  padding: 5px 10px;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.16));
+  font-size: 12px;
+}
+.dsh-fe-markdown th {
+  background: var(--dsw-alias-bg-layer-1, #ffffff);
+  font-weight: 700;
+}
+.dsh-fe-markdown hr {
+  margin: 12px 0;
+  border: 0;
+  border-top: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.16));
+}
+.dsh-fe-markdown img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+}
 .dsh-fe-image-stage {
   flex: 1 1 auto;
   min-width: 0;
@@ -756,6 +971,188 @@ window.__ModuleLoader__.load({
 				return data;
 			}
 
+			// --- monaco editor loading --------------------------------------------
+			// monaco-editor ships as AMD chunks served verbatim from the host at
+			// /_dsh/file-explorer/monaco/vs. We load the AMD loader as a classic
+			// script (it installs global require/define — the DSH client module
+			// system does not install either), configure its baseUrl to the served
+			// tree, and resolve 'vs/editor/editor.main' once. Language features for
+			// css/html/json/typescript register on demand when a model with that
+			// language id is created.
+			const MONACO_BASE = '/_dsh/file-explorer/monaco/vs'
+			let monacoPromise = null
+			function loadMonaco() {
+				if (monacoPromise) return monacoPromise
+				monacoPromise = new Promise((resolve, reject) => {
+					if (window.monaco && window.monaco.editor) {
+						resolve(window.monaco)
+						return
+					}
+					const script = document.createElement('script')
+					script.src = `${MONACO_BASE}/loader.js`
+					script.async = true
+					script.onload = () => {
+						const loader = window.require
+						if (typeof loader !== 'function') {
+							reject(new Error('monaco AMD loader did not install require'))
+							return
+						}
+						loader.config({ baseUrl: MONACO_BASE, paths: { vs: MONACO_BASE } })
+						loader(['vs/editor/editor.main'], () => {
+							resolve(window.monaco)
+						}, (error) => {
+							reject(error instanceof Error ? error : new Error(String(error)))
+						})
+					}
+					script.onerror = () => reject(new Error('could not load monaco loader'))
+					document.head.append(script)
+				})
+				return monacoPromise
+			}
+
+			// --- markdown rendering ------------------------------------------------
+			// markdown-it's standalone ESM build is served verbatim by the Host
+			// (no CDN) and loaded with dynamic `import()`. The ESM build is used
+			// deliberately: the UMD build picks the AMD branch whenever a global
+			// `define` exists (the monaco AMD loader above installs one), which
+			// registers the module anonymously instead of exposing a constructor.
+			// `html: false` escapes any embedded HTML in the workspace file, and
+			// markdown-it's built-in validateLink rejects javascript:/vbscript:/
+			// file:/data: hrefs, so the rendered HTML can be injected as-is.
+			const MARKDOWN_IT_URL = '/_dsh/file-explorer/vendor/markdown-it.mjs'
+			let markdownItPromise = null
+			function loadMarkdownIt() {
+				if (markdownItPromise) return markdownItPromise
+				markdownItPromise = import(MARKDOWN_IT_URL).then((mod) => {
+					if (mod === null || typeof mod.default !== 'function') {
+						throw new Error('markdown-it module did not export a constructor')
+					}
+					return mod.default
+				})
+				return markdownItPromise
+			}
+
+			let markdownRenderer = null
+			function renderMarkdown(text) {
+				return loadMarkdownIt().then((markdownit) => {
+					if (markdownRenderer === null) markdownRenderer = markdownit({ html: false, linkify: true })
+					return markdownRenderer.render(text)
+				})
+			}
+
+			const MARKDOWN_NAME_RE = /\.(md|markdown|mdx)$/i
+
+			// Map a file name to a monaco language id. Mirrors the host's mime map
+			// so text files open with the right syntax highlighting.
+			const EXT_TO_LANG = {
+				js: 'javascript', mjs: 'javascript', cjs: 'javascript', jsx: 'javascript',
+				ts: 'typescript', tsx: 'typescript', mts: 'typescript', cts: 'typescript',
+				json: 'json', jsonc: 'json',
+				html: 'html', htm: 'html', svg: 'html',
+				css: 'css', scss: 'scss', less: 'less',
+				md: 'markdown', markdown: 'markdown', mdx: 'markdown',
+				py: 'python', rb: 'ruby', go: 'go', rs: 'rust', java: 'java',
+				c: 'c', h: 'c', cpp: 'cpp', cc: 'cpp', hpp: 'cpp',
+				cs: 'csharp', php: 'php', sh: 'shell', bash: 'shell', zsh: 'shell',
+				yml: 'yaml', yaml: 'yaml', xml: 'xml', sql: 'sql',
+				txt: 'plaintext', text: 'plaintext', log: 'plaintext',
+			}
+			function languageForName(name) {
+				if (typeof name !== 'string') return 'plaintext'
+				const dot = name.lastIndexOf('.')
+				if (dot === -1) return 'plaintext'
+				const ext = name.slice(dot + 1).toLowerCase()
+				return EXT_TO_LANG[ext] || 'plaintext'
+			}
+
+			// Monaco container component: owns the editor lifecycle (create on
+			// mount, dispose on unmount, update model/content when props change).
+			// The text lives in props.value, so the parent's React state is the
+			// single source of truth and the save flow just reads it.
+			function MonacoEditor(props) {
+				const hostRef = React.useRef(null)
+				const editorRef = React.useRef(null)
+				const modelRef = React.useRef(null)
+				const valueRef = React.useRef(props.value || '')
+				const onChangeRef = React.useRef(props.onChange)
+				onChangeRef.current = props.onChange
+
+				React.useEffect(() => {
+					let disposed = false
+					loadMonaco()
+						.then((monaco) => {
+							if (disposed || !hostRef.current) return
+							const editor = monaco.editor.create(hostRef.current, {
+								value: valueRef.current,
+								language: languageForName(props.name || ''),
+								automaticLayout: true,
+								minimap: { enabled: false },
+								scrollBeyondLastLine: false,
+								renderWhitespace: 'selection',
+								fontSize: 12,
+								lineHeight: 18,
+								tabSize: 2,
+								wordWrap: 'off',
+								padding: { top: 10, bottom: 10 },
+								theme: document.body.hasAttribute('data-ds-dark-theme') ? 'vs-dark' : 'vs',
+							})
+							editorRef.current = editor
+							modelRef.current = editor.getModel()
+							const sub = editor.onDidChangeModelContent(() => {
+								const value = editor.getValue()
+								valueRef.current = value
+								if (onChangeRef.current) onChangeRef.current(value)
+							})
+							editor.__dshDispose = () => {
+								sub.dispose()
+								editor.dispose()
+							}
+							// The editor measures its container on mount; the modal
+							// may still be sizing, so re-layout once after a frame.
+							window.requestAnimationFrame(() => {
+								if (!disposed && editorRef.current) editorRef.current.layout()
+							})
+						})
+						.catch((error) => {
+							if (!disposed) {
+								const el = hostRef.current
+								if (el) {
+									el.textContent = t('files.editorLoadFailed') + ': ' + (error && typeof error.message === 'string' ? error.message : String(error))
+									el.style.display = 'flex'
+									el.style.alignItems = 'center'
+									el.style.justifyContent = 'center'
+									el.style.color = 'var(--dsw-alias-label-secondary, #78716c)'
+									el.style.font = '13px/1.5 sans-serif'
+								}
+							}
+						})
+					return () => {
+						disposed = true
+						if (editorRef.current) {
+							if (editorRef.current.__dshDispose) editorRef.current.__dshDispose()
+							editorRef.current = null
+							modelRef.current = null
+						}
+					}
+				}, [])
+
+				// Sync external value changes (reload/undo after save) without
+				// clobbering the user's typing: only replace when the model still
+				// holds the previous external value.
+				React.useEffect(() => {
+					const editor = editorRef.current
+					const next = props.value || ''
+					if (!editor || valueRef.current === next) return
+					valueRef.current = next
+					editor.setValue(next)
+				}, [props.value])
+
+				return React.createElement('div', {
+					ref: hostRef,
+					className: 'dsh-fe-editor-host',
+				})
+			}
+
 			function svgIcon(icon, size) {
 				return React.createElement('svg', {
 					viewBox: '0 0 24 24',
@@ -782,9 +1179,9 @@ window.__ModuleLoader__.load({
 				React.createElement('path', { d: 'M3 12a9 9 0 1 0 2.64-6.36' }),
 				React.createElement('polyline', { points: '21 3 21 9 15 9' }),
 			)
-			const eyeIcon = React.createElement(React.Fragment, null,
-				React.createElement('path', { d: 'M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z' }),
-				React.createElement('circle', { cx: '12', cy: '12', r: '3' }),
+			const editIcon = React.createElement(React.Fragment, null,
+				React.createElement('path', { d: 'M12 20h9' }),
+				React.createElement('path', { d: 'M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z' }),
 			)
 			const downloadIcon = React.createElement(React.Fragment, null,
 				React.createElement('path', { d: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4' }),
@@ -1365,12 +1762,17 @@ window.__ModuleLoader__.load({
 				const [draftPath, setDraftPath] = React.useState('')
 				const [preview, setPreview] = React.useState(null)
 				const [previewLoading, setPreviewLoading] = React.useState(false)
+				const [dirty, setDirty] = React.useState(false)
+				const [saveState, setSaveState] = React.useState(null) // 'saving' | 'saved' | { error }
+				const dirtyRef = React.useRef(false)
 				const [imageScale, setImageScale] = React.useState(1)
 				const [imageOffset, setImageOffset] = React.useState({ x: 0, y: 0 })
 				const [imageFullscreen, setImageFullscreen] = React.useState(false)
 				const [imageDragging, setImageDragging] = React.useState(false)
 				const imageDrag = React.useRef(null)
 				const [pendingDelete, setPendingDelete] = React.useState(null)
+				const [mdView, setMdView] = React.useState('editor') // 'editor' | 'render' for markdown files
+				const [mdHtml, setMdHtml] = React.useState(null) // {html} | {error} while render view is active
 
 				React.useEffect(() => {
 					if (sessionId === undefined) {
@@ -1451,7 +1853,12 @@ window.__ModuleLoader__.load({
 					setImageFullscreen(false)
 				}
 				const closePreview = () => {
+					if (preview && preview.text !== undefined && preview.text !== null && dirtyRef.current) {
+						if (!window.confirm(t('files.discardConfirm'))) return
+					}
 					resetImageView()
+					dirtyRef.current = false
+					setDirty(false)
 					setPreview(null)
 				}
 				const setImageZoom = (value) => {
@@ -1498,11 +1905,35 @@ window.__ModuleLoader__.load({
 					else closePreview()
 				}
 
+				const saveFile = () => {
+					if (!preview || preview.kind === 'image' || preview.text === undefined || preview.text === null) return
+					if (saveState === 'saving') return
+					setSaveState('saving')
+					api('write', { path: preview.path, content: preview.text })
+						.then((raw) => {
+							if (raw && raw.ok === true) {
+								dirtyRef.current = false
+								setDirty(false)
+								setSaveState('saved')
+							} else {
+								setSaveState({ error: raw && typeof raw.error === 'string' ? raw.error : t('files.saveFailed') })
+							}
+						})
+						.catch((err) => {
+							setSaveState({ error: err && typeof err.message === 'string' ? err.message : String(err) })
+						})
+				}
+
 				const openPreview = (entry) => {
 					setPendingDelete(null)
 					resetImageView()
 					setPreviewLoading(true)
+					dirtyRef.current = false
+					setDirty(false)
+					setSaveState(null)
 					setPreview(null)
+					setMdView('editor')
+					setMdHtml(null)
 					api('read', { path: entry.path })
 						.then((raw) => {
 							setPreview(raw && raw.ok === true ? raw : { ok: false, error: raw && typeof raw.error === 'string' ? raw.error : t('files.readFailed') })
@@ -1513,6 +1944,21 @@ window.__ModuleLoader__.load({
 						.finally(() => setPreviewLoading(false))
 				}
 
+				// Render the markdown source to HTML only while the render view is
+				// active; re-renders when the (edited) text changes so the two
+				// views never drift apart.
+				React.useEffect(() => {
+					if (mdView !== 'render' || !preview || preview.text === undefined || preview.text === null) return undefined
+					let cancelled = false
+					setMdHtml(null)
+					renderMarkdown(preview.text)
+						.then((html) => { if (!cancelled) setMdHtml({ html }) })
+						.catch((error) => {
+							if (!cancelled) setMdHtml({ error: error && typeof error.message === 'string' ? error.message : String(error) })
+						})
+					return () => { cancelled = true }
+				}, [mdView, preview])
+
 				const downloadFile = (entry) => {
 					setPendingDelete(null)
 					// Native streaming download: navigate to the Host route, which
@@ -1549,6 +1995,7 @@ window.__ModuleLoader__.load({
 						.catch((err) => setError(err && typeof err.message === 'string' ? err.message : String(err)))
 				}
 
+				const isMarkdownFile = preview !== null && MARKDOWN_NAME_RE.test(String(preview.name || ''))
 				const pathControl = editingPath
 					? React.createElement('input', {
 						key: 'path-input',
@@ -1617,9 +2064,9 @@ window.__ModuleLoader__.load({
 														type: 'button',
 														className: 'dsh-fe-action',
 														onClick: (event) => { event.stopPropagation(); openPreview(entry) },
-														'aria-label': t('files.viewFile', { name: entry.name }),
-														title: t('files.view'),
-													}, svgIcon(eyeIcon, 14)),
+														'aria-label': t('files.editFile', { name: entry.name }),
+														title: t('files.edit'),
+													}, svgIcon(editIcon, 14)),
 													!isDir && React.createElement('button', {
 														type: 'button',
 														className: 'dsh-fe-action',
@@ -1655,7 +2102,11 @@ window.__ModuleLoader__.load({
 							onClick: closePreview,
 						},
 							React.createElement('div', {
-								className: preview.kind === 'image' && imageFullscreen ? 'dsh-fe-modal dsh-fe-modal-fullscreen' : 'dsh-fe-modal',
+								className: preview.kind === 'image' && imageFullscreen
+									? 'dsh-fe-modal dsh-fe-modal-fullscreen'
+									: preview.text !== undefined && preview.text !== null && !preview.tooLarge
+										? 'dsh-fe-modal dsh-fe-modal-editor'
+										: 'dsh-fe-modal',
 								role: 'dialog',
 								'aria-label': t('files.previewDialog'),
 								'aria-modal': true,
@@ -1664,7 +2115,11 @@ window.__ModuleLoader__.load({
 								onClick: (event) => event.stopPropagation(),
 							},
 								React.createElement('div', { className: 'dsh-fe-modal-head' },
-									React.createElement('div', { className: 'dsh-fe-modal-title' }, preview.name || t('files.preview')),
+									React.createElement('div', { className: 'dsh-fe-modal-title' },
+										preview.name || t('files.preview'),
+										dirty
+											? React.createElement('span', { className: 'dsh-fe-editor-title-dot', title: t('files.dirty') }, '●')
+											: null),
 									React.createElement('div', { className: 'dsh-fe-modal-meta' }, preview.kind === 'image' ? t('files.imageMeta', { size: formatSize(preview.size) }) : preview.binary ? t('files.binary') : formatSize(preview.size)),
 									preview.kind === 'image' && preview.dataUrl
 										? React.createElement('div', {
@@ -1704,6 +2159,15 @@ window.__ModuleLoader__.load({
 											}, svgIcon(imageFullscreen ? fullscreenExitIcon : fullscreenIcon, 14)),
 										)
 										: null,
+									isMarkdownFile && preview.text !== undefined && preview.text !== null && !preview.tooLarge && !preview.binary
+										? React.createElement('button', {
+											type: 'button',
+											className: 'dsh-fe-md-toggle',
+											onClick: () => setMdView((value) => (value === 'render' ? 'editor' : 'render')),
+											'aria-pressed': mdView === 'render',
+											title: mdView === 'render' ? t('files.markdownSource') : t('files.markdownRender'),
+										}, mdView === 'render' ? t('files.markdownSource') : t('files.markdownRender'))
+										: null,
 									React.createElement('button', {
 										type: 'button',
 										className: 'dsh-fe-icon',
@@ -1711,20 +2175,20 @@ window.__ModuleLoader__.load({
 										'aria-label': t('files.closePreview'),
 									}, svgIcon(closeIcon, 14)),
 								),
-								React.createElement('div', {
-									className: preview.kind === 'image' ? 'dsh-fe-modal-body dsh-fe-modal-body-image' : 'dsh-fe-modal-body',
-									onWheel: preview.kind === 'image' && preview.dataUrl ? handleImageWheel : undefined,
-									onPointerDown: preview.kind === 'image' && preview.dataUrl ? startImageDrag : undefined,
-									onPointerMove: preview.kind === 'image' && preview.dataUrl ? moveImageDrag : undefined,
-									onPointerUp: preview.kind === 'image' && preview.dataUrl ? endImageDrag : undefined,
-									onPointerCancel: preview.kind === 'image' && preview.dataUrl ? endImageDrag : undefined,
-								},
-									previewLoading
-										? t('files.loading')
-										: preview.error
-											? preview.error
-											: preview.kind === 'image'
-												? preview.dataUrl
+								preview.kind === 'image'
+									? React.createElement('div', {
+										className: 'dsh-fe-modal-body dsh-fe-modal-body-image',
+										onWheel: preview.dataUrl ? handleImageWheel : undefined,
+										onPointerDown: preview.dataUrl ? startImageDrag : undefined,
+										onPointerMove: preview.dataUrl ? moveImageDrag : undefined,
+										onPointerUp: preview.dataUrl ? endImageDrag : undefined,
+										onPointerCancel: preview.dataUrl ? endImageDrag : undefined,
+									},
+										previewLoading
+											? t('files.loading')
+											: preview.error
+												? preview.error
+												: preview.dataUrl
 													? React.createElement('div', { className: 'dsh-fe-image-stage' },
 														React.createElement('img', {
 															className: 'dsh-fe-preview-image' + (imageScale > 1 ? ' dsh-fe-preview-image-pannable' : '') + (imageDragging ? ' dsh-fe-preview-image-dragging' : ''),
@@ -1734,13 +2198,62 @@ window.__ModuleLoader__.load({
 															draggable: false,
 														})
 													)
-													: preview.tooLarge ? t('files.imageTooLarge') : t('files.noPreview')
-											: preview.text !== undefined && preview.text !== null
-												? preview.text
-												: preview.tooLarge
-													? t('files.fileTooLarge')
-													: preview.binary ? t('files.binaryNoPreview') : t('files.noPreview'),
-								),
+													: preview.tooLarge ? t('files.imageTooLarge') : t('files.noPreview'),
+									)
+									: mdView === 'render' && preview.text !== undefined && preview.text !== null && !preview.tooLarge
+										? React.createElement('div', { className: 'dsh-fe-markdown' },
+											mdHtml === null
+												? t('files.loading')
+												: mdHtml.error
+													? React.createElement('div', { className: 'dsh-fe-status dsh-fe-status-error' }, mdHtml.error)
+													: React.createElement('div', {
+														role: 'region',
+														'aria-label': t('files.markdownRender'),
+														dangerouslySetInnerHTML: { __html: mdHtml.html },
+													}),
+										)
+										: preview.text !== undefined && preview.text !== null && !preview.tooLarge && mdView !== 'render'
+											? React.createElement('div', { className: 'dsh-fe-modal-body dsh-fe-modal-body-editor' },
+											React.createElement(MonacoEditor, {
+												name: preview.name || '',
+												value: preview.text,
+												onChange: (value) => {
+													dirtyRef.current = true
+													setDirty(true)
+													setSaveState(null)
+													setPreview((prev) => (prev ? { ...prev, text: value } : prev))
+												},
+											}),
+											React.createElement('div', { className: 'dsh-fe-editor-status' },
+												dirty
+													? React.createElement('span', { className: 'dsh-fe-editor-status-dirty' }, t('files.dirty'))
+													: saveState === 'saving'
+														? React.createElement('span', null, t('files.saving'))
+														: saveState === 'saved'
+															? React.createElement('span', null, t('files.saved'))
+															: saveState && saveState.error
+																? React.createElement('span', { className: 'dsh-fe-editor-status-error' }, saveState.error)
+																: React.createElement('span', null, preview.size != null ? formatSize(preview.size) : ''),
+												React.createElement('button', {
+													type: 'button',
+													className: 'dsh-fe-editor-save',
+													disabled: !dirty || saveState === 'saving',
+													onClick: saveFile,
+													'aria-label': t('files.save'),
+												}, t('files.save')),
+											),
+										)
+										: React.createElement('div', {
+											className: 'dsh-fe-modal-body',
+										},
+											previewLoading
+												? t('files.loading')
+												: preview.error
+													? preview.error
+													: preview.tooLarge
+														? t('files.fileTooLarge')
+														: preview.binary ? t('files.binaryNoPreview') : t('files.noPreview'),
+										),
 							),
 						),
 				)

package/index.js

@@ -1,13 +1,47 @@
-import { createReadStream } from 'node:fs'
+import { createReadStream, readFileSync } from 'node:fs'
+import { createRequire } from 'node:module'
+import { dirname, join, relative, sep } from 'node:path'
 
 /**
  * dsh-plugin-file-explorer — Host half (static DSH bundle).
  *
  * Registers exact HTTP routes under /_dsh/file-explorer for the browser
- * bundle: list (with parent path), read (text/image preview), download
- * (native streaming), and delete.
+ * bundle: list (with parent path), read (text/image preview), write
+ * (edit save), download (native streaming), and delete. Also serves the
+ * monaco-editor AMD assets under /_dsh/file-explorer/monaco so the browser
+ * bundle can load a full editing experience without a bundler step.
  */
 
+// --- monaco-editor static assets ------------------------------------------
+// The npm package ships pre-built AMD chunks under min/vs: the loader plus
+// hashed editor/language/worker files that reference each other with module
+// ids rooted at "vs/". Serving the whole tree verbatim under a stable URL
+// prefix lets the browser-side AMD loader (baseUrl = that prefix) resolve
+// every chunk and worker with zero rewriting.
+
+const require = createRequire(import.meta.url)
+// monaco-editor >= 0.56 maps every subpath export to esm/vs/*, which makes
+// require.resolve('monaco-editor/package.json') resolve to a non-existent
+// esm/vs/package.json.js. Resolve the package root via the main entry instead.
+const MONACO_DIR = join(dirname(dirname(dirname(require.resolve('monaco-editor')))), 'min', 'vs')
+const MONACO_URL = '/_dsh/file-explorer/monaco/vs'
+const MONACO_MIME = {
+  '.js': 'text/javascript; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.map': 'application/json; charset=utf-8',
+}
+const MONACO_CACHE = new Map()
+
+// markdown-it standalone ESM build (the package's "./browser" import export)
+// served verbatim under a plugin-local route — same self-contained pattern as
+// the monaco tree: no CDN, no bundler step. The ESM build is used
+// deliberately: unlike the UMD build it has no AMD wrapper, so the monaco
+// loader's global `define` can never hijack it. The file is read once at
+// first request.
+const MARKDOWN_IT_URL = '/_dsh/file-explorer/vendor/markdown-it.mjs'
+const MARKDOWN_IT_PATH = join(dirname(require.resolve('markdown-it/package.json')), 'dist', 'browser', 'markdown-it.esm.min.mjs')
+let markdownItBody = null
+
 function parentOf(path) {
   if (!path) return null
   const cleaned = path.replace(/[/\\]+$/, '')
@@ -154,6 +188,7 @@ export function apply(ctx) {
       if (size !== null && size > limit) {
         sendJson(res, 200, {
           ok: true,
+          path: target.displayPath,
           name,
           size,
           tooLarge: true,
@@ -165,6 +200,7 @@ export function apply(ctx) {
       if (isImage) {
         sendJson(res, 200, {
           ok: true,
+          path: target.displayPath,
           name,
           size,
           kind: 'image',
@@ -181,6 +217,7 @@ export function apply(ctx) {
       if (!binary && text.replace(/\uFFFD/g, '').length * 10 < text.length * 9) binary = true
       sendJson(res, 200, {
         ok: true,
+        path: target.displayPath,
         name,
         size,
         text: binary ? null : text,
@@ -288,6 +325,132 @@ export function apply(ctx) {
     }
   })
 
+  addRoute('/_dsh/file-explorer/write', async (req, res) => {
+    if (req.method === 'POST') req = await readJson(req)
+    const fs = ctx.get('fs')
+    if (fs === undefined) {
+      sendJson(res, 200, { ok: false, error: 'filesystem service unavailable' })
+      return
+    }
+    if (typeof req.path !== 'string' || typeof req.content !== 'string') {
+      sendJson(res, 200, { ok: false, error: 'missing file path or content' })
+      return
+    }
+    // Mirror the read route's 1 MiB ceiling so the editor never writes a file
+    // it could not have previewed.
+    if (req.content.length > 1024 * 1024) {
+      sendJson(res, 200, { ok: false, error: 'file too large to save' })
+      return
+    }
+    try {
+      const target = await fs.resolve(req.path)
+      const outcome = await fs.writeText(target, req.content)
+      sendJson(res, 200, {
+        ok: true,
+        version: outcome && typeof outcome.version === 'string' ? outcome.version : null,
+      })
+    } catch (error) {
+      sendJson(res, 200, { ok: false, error: error && typeof error.message === 'string' ? error.message : String(error) })
+    }
+  })
+
+  // --- monaco-editor static tree -------------------------------------------
+  // Longest-prefix route: the browser's AMD loader fetches any file under
+  // /_dsh/file-explorer/monaco/vs/<module path>. Only ever serves files from
+  // inside the installed monaco-editor package.
+  // Must register as a prefix route (kind: "prefix"), not "exact": the exact
+  // table only matches the bare path, so every asset request would 404.
+  const loadMonacoAsset = (file) => {
+    let record = MONACO_CACHE.get(file)
+    if (record === undefined) {
+      const path = join(MONACO_DIR, file)
+      const rel = relative(MONACO_DIR, path)
+      if (rel.startsWith('..') || rel.startsWith(sep) || path.split(sep).includes('..')) {
+        record = { error: 'invalid monaco asset path' }
+      } else {
+        try {
+          const body = readFileSync(path)
+          const ext = file.slice(file.lastIndexOf('.'))
+          record = {
+            body,
+            type: MONACO_MIME[ext] || 'application/octet-stream',
+          }
+        } catch (error) {
+          record = { error: error && typeof error.message === 'string' ? error.message : String(error) }
+        }
+      }
+      MONACO_CACHE.set(file, record)
+    }
+    return record
+  }
+
+  disposers.push(webServer.register({
+    kind: 'prefix',
+    path: '/_dsh/file-explorer/monaco',
+    handler: async (req, res) => {
+      const url = new URL(req.url || '/', 'http://dsh.local')
+      const pathname = url.pathname
+      const file = pathname.startsWith(`${MONACO_URL}/`)
+        ? pathname.slice(MONACO_URL.length + 1)
+        : null
+      if (file === null || file === '') {
+        res.writeHead(404, { 'content-type': 'text/plain; charset=utf-8' })
+        res.end('not found')
+        return
+      }
+      if (req.method !== 'GET' && req.method !== 'HEAD') {
+        res.writeHead(405)
+        res.end()
+        return
+      }
+      const asset = loadMonacoAsset(file)
+      if (asset.error) {
+        res.writeHead(404, { 'content-type': 'text/plain; charset=utf-8' })
+        res.end(asset.error)
+        return
+      }
+      res.writeHead(200, {
+        'content-type': asset.type,
+        'content-length': asset.body.length,
+        // Hashed chunk names are immutable per release; the loader.js and
+        // nls/lang files are release-stable too, so a long cache is safe.
+        'cache-control': 'public, max-age=31536000, immutable',
+      })
+      if (req.method === 'HEAD') res.end()
+      else res.end(asset.body)
+    },
+  }))
+
+  disposers.push(webServer.register({
+    kind: 'exact',
+    path: MARKDOWN_IT_URL,
+    handler: (req, res) => {
+      if (req.method !== 'GET' && req.method !== 'HEAD') {
+        res.writeHead(405)
+        res.end()
+        return
+      }
+      if (markdownItBody === null) {
+        try {
+          markdownItBody = readFileSync(MARKDOWN_IT_PATH)
+        } catch (error) {
+          res.writeHead(500, { 'content-type': 'text/plain; charset=utf-8' })
+          res.end(error && typeof error.message === 'string' ? error.message : String(error))
+          return
+        }
+      }
+      res.writeHead(200, {
+        'content-type': 'text/javascript; charset=utf-8',
+        'content-length': markdownItBody.length,
+        // Bundled file name is stable per plugin version; same long-cache
+        // policy as the monaco tree.
+        'cache-control': 'public, max-age=31536000, immutable',
+      })
+      if (req.method === 'HEAD') res.end()
+      else res.end(markdownItBody)
+    },
+  }))
+
   // --- git graph API -------------------------------------------------------
   // Read-only git plumbing behind the browser's graph view. Every route
   // resolves the repository root from the requested directory first, then

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yiln-dsh/dsh-plugin-file-explorer",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,9 @@
   "engines": {
     "node": ">=22"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {
+    "markdown-it": "^15.0.1",
+    "monaco-editor": "^0.56.0"
+  }
 }