@xcanwin/manyoyo 6.2.6 → 6.2.7

package/lib/web/frontend/app.css

@@ -1224,6 +1224,23 @@ body.workspace-switcher-open .workspace-switcher-panel {
     line-height: 1.6;
 }
 
+.files-markdown-preview {
+    padding: 4px 6px;
+}
+
+.files-image-preview {
+    display: flex;
+    justify-content: center;
+    padding: 12px;
+}
+
+.files-image-preview img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    border: 1px solid rgba(181, 146, 99, 0.2);
+}
+
 .files-editor-host {
     min-height: 100%;
 }

package/lib/web/frontend/file-browser.js

@@ -104,6 +104,7 @@
                                 <div class="files-preview-meta" data-role="preview-meta">请选择左侧文件或目录</div>
                             </div>
                             <div class="files-preview-actions">
+                                <button type="button" class="secondary" data-action="toggle-markdown-view" hidden>查看源码</button>
                                 <button type="button" class="secondary" data-action="save" disabled>保存</button>
                             </div>
                         </header>
@@ -122,6 +123,7 @@
         const visitBtn = root.querySelector('[data-action="visit"]');
         const mkdirBtn = root.querySelector('[data-action="mkdir"]');
         const saveBtn = root.querySelector('[data-action="save"]');
+        const toggleMarkdownViewBtn = root.querySelector('[data-action="toggle-markdown-view"]');
 
         const state = {
             visible: false,
@@ -144,7 +146,8 @@
             editor: null,
             editorHost: null,
             previewReadOnly: true,
-            previewDirty: false
+            previewDirty: false,
+            markdownViewMode: 'rendered'
         };
 
         function setStatus(text) {
@@ -161,6 +164,12 @@
             state.editorHost = null;
         }
 
+        function getPreviewLanguage() {
+            return state.selectedFile
+                ? (state.selectedFile.language || inferLanguageFromPath(state.selectedFile.path))
+                : '';
+        }
+
         function isEditablePreview() {
             return Boolean(
                 state.selectedFile
@@ -168,6 +177,7 @@
                 && state.previewReadOnly === false
                 && state.historyOnly !== true
                 && state.savingFile !== true
+                && (getPreviewLanguage() !== 'markdown' || state.markdownViewMode === 'source')
             );
         }
 
@@ -179,6 +189,28 @@
             saveBtn.textContent = state.savingFile ? '保存中...' : '保存';
         }
 
+        function syncMarkdownToggleButton() {
+            if (!toggleMarkdownViewBtn) {
+                return;
+            }
+            const isMarkdown = Boolean(state.selectedFile)
+                && state.selectedFile.kind === 'text'
+                && getPreviewLanguage() === 'markdown';
+            toggleMarkdownViewBtn.hidden = !isMarkdown;
+            toggleMarkdownViewBtn.textContent = state.markdownViewMode === 'source' ? '查看渲染' : '查看源码';
+        }
+
+        function resolveMarkdownImageUrl(basePath, relativeHref) {
+            try {
+                const lastSlash = String(basePath || '').lastIndexOf('/');
+                const baseDir = lastSlash >= 0 ? basePath.slice(0, lastSlash + 1) : '/';
+                const resolvedPath = new URL(relativeHref, 'http://manyoyo-internal' + baseDir).pathname;
+                return '/api/sessions/' + encodeURIComponent(state.sessionName) + '/fs/raw?path=' + encodeURIComponent(resolvedPath);
+            } catch (e) {
+                return '';
+            }
+        }
+
         function renderPreviewEmpty(title, description) {
             state.selectedFile = null;
             state.previewReadOnly = true;
@@ -193,6 +225,7 @@
                 previewBodyNode.innerHTML = `<div class="files-empty">${escapeHtml(description)}</div>`;
             }
             destroyEditor();
+            syncMarkdownToggleButton();
             syncSaveButton();
         }
 
@@ -226,12 +259,34 @@
                 previewMetaNode.textContent = `${payload.kind === 'text' ? '文本文件' : '文件'} · ${formatBytes(payload.size)} · ${modeLabel}${payload.truncated ? ' · 已截断预览' : ''}`;
             }
             if (!previewBodyNode) {
+                syncMarkdownToggleButton();
                 syncSaveButton();
                 return;
             }
 
             if (payload.kind === 'text') {
                 const language = payload.language || inferLanguageFromPath(payload.path);
+                const showMarkdownRendered = language === 'markdown'
+                    && state.markdownViewMode !== 'source'
+                    && window.ManyoyoMarkdown
+                    && typeof window.ManyoyoMarkdown.render === 'function';
+
+                if (showMarkdownRendered) {
+                    destroyEditor();
+                    const markdownNode = document.createElement('div');
+                    markdownNode.className = 'md-content files-markdown-preview';
+                    markdownNode.innerHTML = window.ManyoyoMarkdown.render(String(payload.content || ''), {
+                        imageUrlResolver: function (relativeHref) {
+                            return resolveMarkdownImageUrl(payload.path, relativeHref);
+                        }
+                    });
+                    previewBodyNode.innerHTML = '';
+                    previewBodyNode.appendChild(markdownNode);
+                    syncMarkdownToggleButton();
+                    syncSaveButton();
+                    return;
+                }
+
                 if (window.ManyoyoCodeEditor && typeof window.ManyoyoCodeEditor.create === 'function') {
                     if (!state.editor || !state.editorHost || !previewBodyNode.contains(state.editorHost)) {
                         destroyEditor();
@@ -252,18 +307,31 @@
                         state.editor.setLanguage(language);
                         state.editor.setReadOnly(state.previewReadOnly);
                     }
+                    syncMarkdownToggleButton();
                     syncSaveButton();
                     return;
                 }
 
                 destroyEditor();
                 previewBodyNode.innerHTML = `<pre class="files-pre">${escapeHtml(String(payload.content || ''))}</pre>`;
+                syncMarkdownToggleButton();
+                syncSaveButton();
+                return;
+            }
+
+            if (payload.kind === 'image') {
+                destroyEditor();
+                const rawUrl = '/api/sessions/' + encodeURIComponent(state.sessionName) + '/fs/raw?path='
+                    + encodeURIComponent(payload.path);
+                previewBodyNode.innerHTML = `<div class="files-image-preview"><img src="${escapeHtml(rawUrl)}" alt="${escapeHtml(payload.path || '')}" /></div>`;
+                syncMarkdownToggleButton();
                 syncSaveButton();
                 return;
             }
 
             destroyEditor();
             previewBodyNode.innerHTML = `<div class="files-note">当前文件暂不支持在线预览。文件类型：${escapeHtml(payload.kind || 'unknown')}</div>`;
+            syncMarkdownToggleButton();
             syncSaveButton();
         }
 
@@ -397,6 +465,7 @@
             state.loadingFile = true;
             state.selectedPath = pathText;
             state.selectedEntry = selectedEntry;
+            state.markdownViewMode = 'rendered';
             renderList();
             renderPreviewEmpty(pathText, '正在读取文件内容...');
             try {
@@ -584,6 +653,13 @@
             });
         }
 
+        if (toggleMarkdownViewBtn) {
+            toggleMarkdownViewBtn.addEventListener('click', function () {
+                state.markdownViewMode = state.markdownViewMode === 'source' ? 'rendered' : 'source';
+                renderPreviewPayload(state.selectedFile);
+            });
+        }
+
         renderList();
 
         return {

package/lib/web/frontend/markdown-renderer.js

@@ -5,7 +5,8 @@
         configured: false,
         available: false,
         linkGuardBound: false,
-        linkOpenHandler: null
+        linkOpenHandler: null,
+        currentImageResolver: null
     };
 
     function escapeHtml(value) {
@@ -247,8 +248,14 @@
                         '[\uD83D\uDDBC\uFE0F点击查看图片:' + (safeText || escapeHtml(safeHref)) + ']'
                     );
                 }
-                // 相对路径：正常渲染为图片
-                let output = '<img src="' + escapeHtml(safeHref) + '" alt="' + escapeHtml(text || '') + '"';
+                // 相对路径：交给调用方按当前渲染上下文解析为可访问的 URL（未提供 resolver 时原样使用）
+                const resolvedHref = typeof runtime.currentImageResolver === 'function'
+                    ? runtime.currentImageResolver(safeHref)
+                    : safeHref;
+                if (!resolvedHref) {
+                    return safeText || escapeHtml(token ? token.text : text || '');
+                }
+                let output = '<img src="' + escapeHtml(resolvedHref) + '" alt="' + escapeHtml(text || '') + '"';
                 if (rawTitle) {
                     output += ' title="' + escapeHtml(rawTitle) + '"';
                 }
@@ -272,7 +279,7 @@
         return Boolean(msg && msg.mode === 'agent' && msg.role === 'assistant');
     }
 
-    function render(content) {
+    function render(content, options) {
         const source = String(content == null ? '' : content);
         if (!source) {
             return '';
@@ -284,10 +291,15 @@
         if (!markedApi) {
             return '';
         }
+        runtime.currentImageResolver = options && typeof options.imageUrlResolver === 'function'
+            ? options.imageUrlResolver
+            : null;
         try {
             return String(markedApi.parse(source) || '');
         } catch (e) {
             return '';
+        } finally {
+            runtime.currentImageResolver = null;
         }
     }
 

package/lib/web/frontend/markdown.css

@@ -1,33 +1,33 @@
-.bubble .md-content {
+.md-content {
     color: var(--text);
     font-size: 13px;
     line-height: 1.6;
     word-break: break-word;
 }
 
-.bubble .md-content > :first-child {
+.md-content > :first-child {
     margin-top: 0;
 }
 
-.bubble .md-content > :last-child {
+.md-content > :last-child {
     margin-bottom: 0;
 }
 
-.bubble .md-content p,
-.bubble .md-content ul,
-.bubble .md-content ol,
-.bubble .md-content blockquote,
-.bubble .md-content pre,
-.bubble .md-content table {
+.md-content p,
+.md-content ul,
+.md-content ol,
+.md-content blockquote,
+.md-content pre,
+.md-content table {
     margin: 0.6em 0;
 }
 
-.bubble .md-content ul,
-.bubble .md-content ol {
+.md-content ul,
+.md-content ol {
     padding-left: 1.4em;
 }
 
-.bubble .md-content code {
+.md-content code {
     font-family: var(--font-mono);
     font-size: 12px;
     padding: 1px 5px;
@@ -35,7 +35,7 @@
     background: rgba(194, 149, 79, 0.16);
 }
 
-.bubble .md-content pre {
+.md-content pre {
     border-radius: 8px;
     padding: 9px 10px;
     border: 1px solid #e6d2b7;
@@ -43,7 +43,7 @@
     overflow-x: auto;
 }
 
-.bubble .md-content pre code {
+.md-content pre code {
     background: transparent;
     border-radius: 0;
     padding: 0;
@@ -51,26 +51,26 @@
     line-height: 1.5;
 }
 
-.bubble .md-content blockquote {
+.md-content blockquote {
     margin-left: 0;
     padding-left: 10px;
     border-left: 3px solid #dcb788;
     color: #66492d;
 }
 
-.bubble .md-content table {
+.md-content table {
     border-collapse: collapse;
     width: 100%;
 }
 
-.bubble .md-content th,
-.bubble .md-content td {
+.md-content th,
+.md-content td {
     border: 1px solid #e6d2b7;
     padding: 4px 6px;
     text-align: left;
 }
 
-.bubble .md-content a {
+.md-content a {
     color: #8a4f17;
     text-decoration-line: underline;
     text-decoration-thickness: 2px;
@@ -78,7 +78,7 @@
     text-decoration-color: rgba(138, 79, 23, 0.8);
 }
 
-.bubble .md-content a:hover,
-.bubble .md-content a:focus-visible {
+.md-content a:hover,
+.md-content a:focus-visible {
     text-decoration-color: #8a4f17;
 }

package/lib/web/server.js

@@ -45,6 +45,16 @@ const WEB_AGENT_CONTEXT_PER_MESSAGE_MAX_CHARS = 600;
 const NATIVE_SESSION_RESUME_PROGRAMS = new Set(['claude', 'codex', 'opencode']);
 const WEB_FILE_PREVIEW_MAX_BYTES = 512 * 1024;
 const WEB_FILE_EDIT_MAX_BYTES = 2 * 1024 * 1024;
+const WEB_FILE_RAW_MAX_CONCURRENT_PER_CONTAINER = 4;
+const IMAGE_EXTENSION_CONTENT_TYPES = {
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.gif': 'image/gif',
+    '.webp': 'image/webp',
+    '.bmp': 'image/bmp',
+    '.ico': 'image/x-icon'
+};
 const WEB_AUTH_COOKIE_NAME = 'manyoyo_web_auth';
 const WEB_AUTH_TTL_SECONDS = 12 * 60 * 60;
 const WEB_SESSION_KEY_SEPARATOR = '~';
@@ -2930,6 +2940,34 @@ ${scriptSource}
 __MANYOYO_NODE__`;
 }
 
+function spawnContainerRawFileStream(ctx, containerName, filePath) {
+    return spawn(
+        ctx.dockerCmd,
+        ['exec', containerName, 'cat', '--', filePath],
+        { stdio: ['ignore', 'pipe', 'pipe'] }
+    );
+}
+
+const webRawFileStreamCounts = new Map();
+
+function acquireWebRawFileStreamSlot(containerName) {
+    const current = webRawFileStreamCounts.get(containerName) || 0;
+    if (current >= WEB_FILE_RAW_MAX_CONCURRENT_PER_CONTAINER) {
+        return false;
+    }
+    webRawFileStreamCounts.set(containerName, current + 1);
+    return true;
+}
+
+function releaseWebRawFileStreamSlot(containerName) {
+    const current = webRawFileStreamCounts.get(containerName) || 0;
+    if (current <= 1) {
+        webRawFileStreamCounts.delete(containerName);
+        return;
+    }
+    webRawFileStreamCounts.set(containerName, current - 1);
+}
+
 function inferFileLanguage(filePath) {
     const ext = path.extname(String(filePath || '')).toLowerCase();
     return FILE_LANGUAGE_MAP[ext] || 'text';
@@ -3018,9 +3056,11 @@ function buildContainerFileReadCommand(requestedPath, options = {}) {
     return buildWebContainerNodeCommand(`
 // __MANYOYO_FS_READ__
 const fs = require('fs');
+const path = require('path');
 
 const requestedPath = ${JSON.stringify(String(requestedPath || ''))};
 const maxBytes = ${String(maxBytes)};
+const imageExtensions = new Set(${JSON.stringify(Object.keys(IMAGE_EXTENSION_CONTENT_TYPES))});
 
 function looksBinary(buffer) {
     const length = Math.min(buffer.length, 4096);
@@ -3044,32 +3084,66 @@ try {
         throw new Error('目标不是文件: ' + realPath);
     }
 
-    const size = stat.size;
-    const readBytes = maxBytes > 0 ? Math.min(size, maxBytes) : size;
-    const buffer = Buffer.alloc(readBytes);
-    const fd = fs.openSync(realPath, 'r');
-    try {
-        fs.readSync(fd, buffer, 0, readBytes, 0);
-    } finally {
-        fs.closeSync(fd);
-    }
-
-    if (looksBinary(buffer)) {
+    // 图片走 fs/raw 流式传输,这里只确认元信息,不把整份二进制读进内存/JSON
+    if (imageExtensions.has(path.extname(realPath).toLowerCase())) {
         process.stdout.write(JSON.stringify({
             path: realPath,
-            kind: 'binary',
-            size,
-            truncated: maxBytes > 0 && size > maxBytes
+            kind: 'image',
+            size: stat.size
         }));
     } else {
-        process.stdout.write(JSON.stringify({
-            path: realPath,
-            kind: 'text',
-            size,
-            truncated: maxBytes > 0 && size > maxBytes,
-            content: buffer.toString('utf8')
-        }));
+        const size = stat.size;
+        const readBytes = maxBytes > 0 ? Math.min(size, maxBytes) : size;
+        const buffer = Buffer.alloc(readBytes);
+        const fd = fs.openSync(realPath, 'r');
+        try {
+            fs.readSync(fd, buffer, 0, readBytes, 0);
+        } finally {
+            fs.closeSync(fd);
+        }
+
+        if (looksBinary(buffer)) {
+            process.stdout.write(JSON.stringify({
+                path: realPath,
+                kind: 'binary',
+                size,
+                truncated: maxBytes > 0 && size > maxBytes
+            }));
+        } else {
+            process.stdout.write(JSON.stringify({
+                path: realPath,
+                kind: 'text',
+                size,
+                truncated: maxBytes > 0 && size > maxBytes,
+                content: buffer.toString('utf8')
+            }));
+        }
+    }
+} catch (e) {
+    process.stdout.write(JSON.stringify({
+        error: e && e.message ? e.message : '读取文件失败'
+    }));
+}
+`);
+}
+
+function buildContainerFileStatCommand(requestedPath) {
+    return buildWebContainerNodeCommand(`
+// __MANYOYO_FS_STAT__
+const fs = require('fs');
+
+const requestedPath = ${JSON.stringify(String(requestedPath || ''))};
+
+try {
+    const realPath = fs.realpathSync(requestedPath);
+    const stat = fs.statSync(realPath);
+    if (!stat.isFile()) {
+        throw new Error('目标不是文件: ' + realPath);
     }
+    process.stdout.write(JSON.stringify({
+        path: realPath,
+        size: stat.size
+    }));
 } catch (e) {
     process.stdout.write(JSON.stringify({
         error: e && e.message ? e.message : '读取文件失败'
@@ -4316,6 +4390,73 @@ async function handleWebApi(req, res, pathname, ctx, state) {
                 sendJson(res, 200, payload);
             }
         },
+        {
+            method: 'GET',
+            match: currentPath => currentPath.match(/^\/api\/sessions\/([^/]+)\/fs\/raw$/),
+            handler: async match => {
+                const sessionRef = getValidSessionRef(ctx, res, match[1]);
+                if (!sessionRef) {
+                    return;
+                }
+                const requestUrl = new URL(req.url || '/api/sessions/x/fs/raw', 'http://localhost');
+                const targetPath = String(requestUrl.searchParams.get('path') || '').trim();
+                if (!targetPath) {
+                    sendJson(res, 400, { error: 'path 不能为空' });
+                    return;
+                }
+                const ext = path.extname(targetPath).toLowerCase();
+                const contentType = IMAGE_EXTENSION_CONTENT_TYPES[ext];
+                if (!contentType) {
+                    sendJson(res, 400, { error: '不支持预览该文件类型' });
+                    return;
+                }
+
+                await ensureWebContainer(ctx, state, sessionRef.containerName, sessionRef);
+                const statPayload = await execJsonCommandInWebContainer(
+                    ctx,
+                    sessionRef.containerName,
+                    buildContainerFileStatCommand(targetPath)
+                );
+                if (statPayload && statPayload.error) {
+                    sendJson(res, 404, { error: statPayload.error });
+                    return;
+                }
+
+                if (!acquireWebRawFileStreamSlot(sessionRef.containerName)) {
+                    sendJson(res, 429, { error: '预览并发已达上限，请稍后重试' });
+                    return;
+                }
+
+                let released = false;
+                const releaseOnce = () => {
+                    if (released) {
+                        return;
+                    }
+                    released = true;
+                    releaseWebRawFileStreamSlot(sessionRef.containerName);
+                };
+
+                const child = spawnContainerRawFileStream(ctx, sessionRef.containerName, statPayload.path);
+                // stderr 单独消费,绝不混入响应体,避免管道缓冲区打满导致 cat 进程卡死
+                child.stderr.on('data', () => {});
+                child.on('error', () => releaseOnce());
+                child.on('close', () => releaseOnce());
+                res.on('close', () => {
+                    releaseOnce();
+                    if (!child.killed) {
+                        child.kill();
+                    }
+                });
+
+                res.writeHead(200, {
+                    'Content-Type': contentType,
+                    'Content-Length': String(statPayload.size),
+                    'X-Content-Type-Options': 'nosniff',
+                    'Cache-Control': 'no-store'
+                });
+                child.stdout.pipe(res);
+            }
+        },
         {
             method: 'PUT',
             match: currentPath => currentPath.match(/^\/api\/sessions\/([^/]+)\/fs\/write$/),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xcanwin/manyoyo",
-    "version": "6.2.6",
+    "version": "6.2.7",
     "imageVersion": "1.9.1-common",
     "playwrightCliVersion": "0.1.18",
     "description": "AI Agent CLI Security Sandbox for Docker and Podman",