@xcanwin/manyoyo 5.8.11 → 5.9.0

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

@@ -0,0 +1,406 @@
+(function () {
+    function escapeHtml(value) {
+        return String(value == null ? '' : value)
+            .replace(/&/g, '&')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#39;');
+    }
+
+    function formatBytes(size) {
+        const value = Number(size || 0);
+        if (!Number.isFinite(value) || value <= 0) {
+            return '0 B';
+        }
+        if (value < 1024) {
+            return `${value} B`;
+        }
+        if (value < 1024 * 1024) {
+            return `${(value / 1024).toFixed(1)} KB`;
+        }
+        if (value < 1024 * 1024 * 1024) {
+            return `${(value / (1024 * 1024)).toFixed(1)} MB`;
+        }
+        return `${(value / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+    }
+
+    function formatDateTime(value) {
+        if (!value) {
+            return '未知时间';
+        }
+        const date = new Date(value);
+        if (Number.isNaN(date.getTime())) {
+            return '未知时间';
+        }
+        return date.toLocaleString('zh-CN', {
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    }
+
+    function buildEntryMeta(entry) {
+        const parts = [];
+        if (entry && entry.kind === 'directory') {
+            parts.push('目录');
+        } else {
+            parts.push(formatBytes(entry && entry.size));
+        }
+        if (entry && entry.mtimeMs) {
+            parts.push(formatDateTime(entry.mtimeMs));
+        }
+        return parts.join(' · ');
+    }
+
+    function inferLanguageFromPath(filePath) {
+        const text = String(filePath || '').toLowerCase();
+        if (text.endsWith('.md') || text.endsWith('.markdown')) return 'markdown';
+        if (text.endsWith('.json')) return 'json';
+        if (text.endsWith('.py')) return 'python';
+        if (text.endsWith('.yaml') || text.endsWith('.yml')) return 'yaml';
+        if (text.endsWith('.html') || text.endsWith('.htm')) return 'html';
+        if (text.endsWith('.css')) return 'css';
+        if (text.endsWith('.js') || text.endsWith('.jsx') || text.endsWith('.mjs') || text.endsWith('.cjs') || text.endsWith('.ts') || text.endsWith('.tsx')) {
+            return 'javascript';
+        }
+        return 'text';
+    }
+
+    function create(options) {
+        const root = options && options.root;
+        const api = options && options.api;
+        const onError = options && typeof options.onError === 'function'
+            ? options.onError
+            : function (message) { window.alert(message); };
+        if (!root || typeof api !== 'function') {
+            return {
+                sync: function () {}
+            };
+        }
+
+        root.innerHTML = `
+            <section class="files-browser">
+                <header class="files-toolbar">
+                    <button type="button" class="secondary" data-action="up">上一级</button>
+                    <button type="button" class="secondary" data-action="refresh">刷新</button>
+                    <div class="files-toolbar-path" data-role="path">/</div>
+                    <div class="files-toolbar-status" data-role="status">未加载</div>
+                </header>
+                <div class="files-layout">
+                    <aside class="files-sidebar">
+                        <div class="files-list" data-role="list"></div>
+                    </aside>
+                    <section class="files-preview">
+                        <header class="files-preview-head">
+                            <div class="files-preview-title" data-role="preview-title">未选择文件</div>
+                            <div class="files-preview-meta" data-role="preview-meta">请选择左侧文件或目录</div>
+                        </header>
+                        <div class="files-preview-body" data-role="preview-body"></div>
+                    </section>
+                </div>
+            </section>
+        `;
+
+        const pathNode = root.querySelector('[data-role="path"]');
+        const statusNode = root.querySelector('[data-role="status"]');
+        const listNode = root.querySelector('[data-role="list"]');
+        const previewTitleNode = root.querySelector('[data-role="preview-title"]');
+        const previewMetaNode = root.querySelector('[data-role="preview-meta"]');
+        const previewBodyNode = root.querySelector('[data-role="preview-body"]');
+        const upBtn = root.querySelector('[data-action="up"]');
+        const refreshBtn = root.querySelector('[data-action="refresh"]');
+
+        const state = {
+            visible: false,
+            sessionName: '',
+            containerName: '',
+            containerPath: '',
+            historyOnly: false,
+            currentPath: '',
+            parentPath: '',
+            entries: [],
+            selectedPath: '',
+            selectedFile: null,
+            loadingList: false,
+            loadingFile: false,
+            listRequestId: 0,
+            readRequestId: 0,
+            editor: null,
+            editorHost: null
+        };
+
+        function setStatus(text) {
+            if (statusNode) {
+                statusNode.textContent = String(text || '').trim() || '就绪';
+            }
+        }
+
+        function destroyEditor() {
+            if (state.editor && typeof state.editor.destroy === 'function') {
+                state.editor.destroy();
+            }
+            state.editor = null;
+            state.editorHost = null;
+        }
+
+        function renderPreviewEmpty(title, description) {
+            if (previewTitleNode) {
+                previewTitleNode.textContent = title;
+            }
+            if (previewMetaNode) {
+                previewMetaNode.textContent = description;
+            }
+            if (previewBodyNode) {
+                previewBodyNode.innerHTML = `<div class="files-empty">${escapeHtml(description)}</div>`;
+            }
+            destroyEditor();
+        }
+
+        function ensureEditorHost() {
+            if (!previewBodyNode) {
+                return null;
+            }
+            previewBodyNode.innerHTML = '';
+            const host = document.createElement('div');
+            host.className = 'files-editor-host';
+            previewBodyNode.appendChild(host);
+            state.editorHost = host;
+            return host;
+        }
+
+        function renderPreviewPayload(payload) {
+            state.selectedFile = payload || null;
+            if (!payload) {
+                renderPreviewEmpty('未选择文件', '请选择左侧文件进行预览。');
+                return;
+            }
+            if (previewTitleNode) {
+                previewTitleNode.textContent = payload.path || '未命名文件';
+            }
+            if (previewMetaNode) {
+                previewMetaNode.textContent = `${payload.kind === 'text' ? '文本文件' : '文件'} · ${formatBytes(payload.size)}${payload.truncated ? ' · 已截断预览' : ''}`;
+            }
+            if (!previewBodyNode) {
+                return;
+            }
+
+            if (payload.kind === 'text') {
+                const language = payload.language || inferLanguageFromPath(payload.path);
+                if (window.ManyoyoCodeEditor && typeof window.ManyoyoCodeEditor.create === 'function') {
+                    if (!state.editor || !state.editorHost || !previewBodyNode.contains(state.editorHost)) {
+                        destroyEditor();
+                        const host = ensureEditorHost();
+                        if (host) {
+                            state.editor = window.ManyoyoCodeEditor.create(host, {
+                                doc: String(payload.content || ''),
+                                language,
+                                readOnly: true
+                            });
+                        }
+                    } else {
+                        state.editor.setValue(String(payload.content || ''));
+                        state.editor.setLanguage(language);
+                        state.editor.setReadOnly(true);
+                    }
+                    return;
+                }
+
+                destroyEditor();
+                previewBodyNode.innerHTML = `<pre class="files-pre">${escapeHtml(String(payload.content || ''))}</pre>`;
+                return;
+            }
+
+            destroyEditor();
+            previewBodyNode.innerHTML = `<div class="files-note">当前文件暂不支持在线预览。文件类型：${escapeHtml(payload.kind || 'unknown')}</div>`;
+        }
+
+        function renderList() {
+            if (pathNode) {
+                pathNode.textContent = state.currentPath || state.containerPath || '/';
+            }
+            if (upBtn) {
+                upBtn.disabled = state.loadingList || !state.parentPath;
+            }
+            if (refreshBtn) {
+                refreshBtn.disabled = state.loadingList || state.loadingFile;
+            }
+            if (!listNode) {
+                return;
+            }
+            listNode.innerHTML = '';
+
+            if (!state.sessionName) {
+                listNode.innerHTML = '<div class="files-empty">请选择左侧会话后再浏览容器文件。</div>';
+                renderPreviewEmpty('未选择会话', '请选择左侧会话后再浏览容器文件。');
+                setStatus('未选择会话');
+                return;
+            }
+            if (state.historyOnly) {
+                listNode.innerHTML = '<div class="files-empty">当前会话只有历史记录，没有可访问的运行中容器。</div>';
+                renderPreviewEmpty('容器不可用', '当前会话只有历史记录，没有可访问的运行中容器。');
+                setStatus('容器不可用');
+                return;
+            }
+            if (state.loadingList) {
+                listNode.innerHTML = '<div class="files-empty">正在读取目录...</div>';
+                setStatus('读取目录中');
+                return;
+            }
+            if (!state.entries.length) {
+                listNode.innerHTML = '<div class="files-empty">当前目录为空。</div>';
+                setStatus('目录为空');
+                return;
+            }
+
+            state.entries.forEach(function (entry) {
+                const button = document.createElement('button');
+                button.type = 'button';
+                button.className = 'files-entry' + (state.selectedPath === entry.path ? ' is-active' : '');
+                button.title = String(entry.path || entry.name || '');
+                button.addEventListener('click', function () {
+                    if (entry.kind === 'directory') {
+                        loadDirectory(entry.path);
+                        return;
+                    }
+                    loadFile(entry.path);
+                });
+                button.innerHTML = `
+                    <span class="files-entry-name">
+                        <span class="files-entry-title">${escapeHtml(entry.name || entry.path || '未命名')}</span>
+                    </span>
+                    <span class="files-entry-meta">${escapeHtml(buildEntryMeta(entry))}</span>
+                `;
+                listNode.appendChild(button);
+            });
+            setStatus(state.loadingFile ? '读取文件中' : `共 ${state.entries.length} 项`);
+        }
+
+        async function loadDirectory(targetPath) {
+            const pathText = String(targetPath || state.currentPath || state.containerPath || '/').trim() || '/';
+            const requestId = state.listRequestId + 1;
+            state.listRequestId = requestId;
+            state.loadingList = true;
+            state.selectedPath = '';
+            renderList();
+            try {
+                const payload = await api('/api/sessions/' + encodeURIComponent(state.sessionName) + '/fs/list?path=' + encodeURIComponent(pathText));
+                if (requestId !== state.listRequestId) {
+                    return;
+                }
+                state.currentPath = payload && payload.path ? payload.path : pathText;
+                state.parentPath = payload && payload.parentPath ? payload.parentPath : '';
+                state.entries = Array.isArray(payload && payload.entries) ? payload.entries : [];
+                renderPreviewEmpty(state.currentPath, '请选择左侧文件进行预览。');
+            } catch (e) {
+                if (requestId !== state.listRequestId) {
+                    return;
+                }
+                onError(e && e.message ? e.message : '读取目录失败');
+            } finally {
+                if (requestId !== state.listRequestId) {
+                    return;
+                }
+                state.loadingList = false;
+                renderList();
+            }
+        }
+
+        async function loadFile(targetPath) {
+            const pathText = String(targetPath || '').trim();
+            if (!pathText) {
+                return;
+            }
+            const requestId = state.readRequestId + 1;
+            state.readRequestId = requestId;
+            state.loadingFile = true;
+            state.selectedPath = pathText;
+            renderList();
+            renderPreviewEmpty(pathText, '正在读取文件内容...');
+            try {
+                const payload = await api('/api/sessions/' + encodeURIComponent(state.sessionName) + '/fs/read?path=' + encodeURIComponent(pathText));
+                if (requestId !== state.readRequestId) {
+                    return;
+                }
+                renderPreviewPayload(payload);
+            } catch (e) {
+                if (requestId !== state.readRequestId) {
+                    return;
+                }
+                renderPreviewEmpty(pathText, e && e.message ? e.message : '读取文件失败');
+                onError(e && e.message ? e.message : '读取文件失败');
+            } finally {
+                if (requestId !== state.readRequestId) {
+                    return;
+                }
+                state.loadingFile = false;
+                renderList();
+            }
+        }
+
+        function sync(context) {
+            const session = context && context.session;
+            const detail = context && context.detail;
+            const nextSessionName = String(session && session.name ? session.name : '').trim();
+            const nextContainerName = String(session && session.containerName ? session.containerName : '').trim();
+            const nextContainerPath = String(
+                (detail && detail.containerPath)
+                || (session && session.containerPath)
+                || '/'
+            ).trim() || '/';
+            const nextVisible = Boolean(context && context.visible);
+            const nextHistoryOnly = context && context.historyOnly === true;
+            const sessionChanged = nextSessionName !== state.sessionName;
+            const containerPathChanged = nextContainerPath !== state.containerPath;
+
+            state.visible = nextVisible;
+            state.historyOnly = nextHistoryOnly;
+
+            if (sessionChanged) {
+                state.sessionName = nextSessionName;
+                state.containerName = nextContainerName;
+                state.containerPath = nextContainerPath;
+                state.currentPath = '';
+                state.parentPath = '';
+                state.entries = [];
+                state.selectedPath = '';
+                renderPreviewEmpty('未选择文件', '请选择左侧文件进行预览。');
+            } else if (containerPathChanged) {
+                state.containerPath = nextContainerPath;
+            }
+
+            renderList();
+            if (!nextVisible || !state.sessionName || state.historyOnly) {
+                return;
+            }
+            if (sessionChanged || containerPathChanged || !state.currentPath) {
+                loadDirectory(state.containerPath || '/');
+            }
+        }
+
+        if (upBtn) {
+            upBtn.addEventListener('click', function () {
+                if (state.parentPath) {
+                    loadDirectory(state.parentPath);
+                }
+            });
+        }
+
+        if (refreshBtn) {
+            refreshBtn.addEventListener('click', function () {
+                loadDirectory(state.currentPath || state.containerPath || '/');
+            });
+        }
+
+        renderList();
+
+        return {
+            sync
+        };
+    }
+
+    window.ManyoyoFileBrowser = {
+        create
+    };
+}());

package/lib/web/server.js

@@ -34,6 +34,7 @@ const WEB_TERMINAL_MIN_ROWS = 12;
 const WEB_AGENT_CONTEXT_MAX_MESSAGES = 24;
 const WEB_AGENT_CONTEXT_MAX_CHARS = 6000;
 const WEB_AGENT_CONTEXT_PER_MESSAGE_MAX_CHARS = 600;
+const WEB_FILE_PREVIEW_MAX_BYTES = 256 * 1024;
 const WEB_AUTH_COOKIE_NAME = 'manyoyo_web_auth';
 const WEB_AUTH_TTL_SECONDS = 12 * 60 * 60;
 const WEB_SESSION_KEY_SEPARATOR = '~';
@@ -109,6 +110,24 @@ const MIME_TYPES = {
     '.js': 'application/javascript; charset=utf-8',
     '.html': 'text/html; charset=utf-8'
 };
+const FILE_LANGUAGE_MAP = {
+    '.cjs': 'javascript',
+    '.css': 'css',
+    '.htm': 'html',
+    '.html': 'html',
+    '.java': 'javascript',
+    '.js': 'javascript',
+    '.json': 'json',
+    '.jsx': 'javascript',
+    '.md': 'markdown',
+    '.markdown': 'markdown',
+    '.mjs': 'javascript',
+    '.py': 'python',
+    '.ts': 'javascript',
+    '.tsx': 'javascript',
+    '.yaml': 'yaml',
+    '.yml': 'yaml'
+};
 
 function formatUrlHost(host) {
     if (typeof host !== 'string' || !host) return '127.0.0.1';
@@ -2537,6 +2556,156 @@ async function execCommandInWebContainer(ctx, containerName, command, options =
     });
 }
 
+function buildWebContainerNodeCommand(scriptSource) {
+    return `node <<'__MANYOYO_NODE__'
+${scriptSource}
+__MANYOYO_NODE__`;
+}
+
+function inferFileLanguage(filePath) {
+    const ext = path.extname(String(filePath || '')).toLowerCase();
+    return FILE_LANGUAGE_MAP[ext] || 'text';
+}
+
+async function execJsonCommandInWebContainer(ctx, containerName, command) {
+    const result = await execCommandInWebContainer(ctx, containerName, command);
+    if (result.exitCode !== 0) {
+        throw new Error(result.output || '容器命令执行失败');
+    }
+    try {
+        return JSON.parse(String(result.output || '{}'));
+    } catch (e) {
+        throw new Error('容器返回了无法解析的 JSON');
+    }
+}
+
+function buildContainerFileListCommand(requestedPath) {
+    return buildWebContainerNodeCommand(`
+// __MANYOYO_FS_LIST__
+const fs = require('fs');
+const path = require('path');
+
+const requestedPath = ${JSON.stringify(String(requestedPath || '/'))};
+
+try {
+    const realPath = fs.realpathSync(requestedPath);
+    const stat = fs.statSync(realPath);
+    if (!stat.isDirectory()) {
+        throw new Error('目标不是目录: ' + realPath);
+    }
+
+    const root = path.parse(realPath).root;
+    const parentPath = realPath === root ? '' : path.dirname(realPath);
+    const entries = fs.readdirSync(realPath, { withFileTypes: true })
+        .map(entry => {
+            const fullPath = path.join(realPath, entry.name);
+            let itemStat = null;
+            try {
+                itemStat = fs.lstatSync(fullPath);
+            } catch (e) {
+                itemStat = null;
+            }
+            let kind = 'other';
+            if (entry.isDirectory()) {
+                kind = 'directory';
+            } else if (entry.isFile()) {
+                kind = 'file';
+            } else if (entry.isSymbolicLink()) {
+                kind = 'symlink';
+            }
+            return {
+                name: entry.name,
+                path: fullPath,
+                kind,
+                size: itemStat && typeof itemStat.size === 'number' ? itemStat.size : 0,
+                mtimeMs: itemStat && typeof itemStat.mtimeMs === 'number' ? Math.floor(itemStat.mtimeMs) : 0
+            };
+        })
+        .sort((a, b) => {
+            if (a.kind !== b.kind) {
+                if (a.kind === 'directory') return -1;
+                if (b.kind === 'directory') return 1;
+            }
+            return a.name.localeCompare(b.name, 'zh-CN');
+        });
+
+    process.stdout.write(JSON.stringify({
+        path: realPath,
+        parentPath,
+        entries
+    }));
+} catch (e) {
+    process.stdout.write(JSON.stringify({
+        error: e && e.message ? e.message : '读取目录失败'
+    }));
+}
+`);
+}
+
+function buildContainerFileReadCommand(requestedPath) {
+    return buildWebContainerNodeCommand(`
+// __MANYOYO_FS_READ__
+const fs = require('fs');
+
+const requestedPath = ${JSON.stringify(String(requestedPath || ''))};
+const maxBytes = ${String(WEB_FILE_PREVIEW_MAX_BYTES)};
+
+function looksBinary(buffer) {
+    const length = Math.min(buffer.length, 4096);
+    let suspicious = 0;
+    for (let i = 0; i < length; i += 1) {
+        const byte = buffer[i];
+        if (byte === 0) {
+            return true;
+        }
+        if (byte < 7 || (byte > 13 && byte < 32)) {
+            suspicious += 1;
+        }
+    }
+    return length > 0 && (suspicious / length) > 0.12;
+}
+
+try {
+    const realPath = fs.realpathSync(requestedPath);
+    const stat = fs.statSync(realPath);
+    if (!stat.isFile()) {
+        throw new Error('目标不是文件: ' + realPath);
+    }
+
+    const size = stat.size;
+    const readBytes = Math.min(size, maxBytes);
+    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: size > maxBytes
+        }));
+    } else {
+        process.stdout.write(JSON.stringify({
+            path: realPath,
+            kind: 'text',
+            size,
+            truncated: size > maxBytes,
+            content: buffer.toString('utf8')
+        }));
+    }
+} catch (e) {
+    process.stdout.write(JSON.stringify({
+        error: e && e.message ? e.message : '读取文件失败'
+    }));
+}
+`);
+}
+
 async function execAgentInWebContainerStream(ctx, state, sessionRefOrContainerName, command, options = {}) {
     const opts = options && typeof options === 'object' ? options : {};
     const sessionRef = typeof sessionRefOrContainerName === 'string'
@@ -3435,6 +3604,61 @@ async function handleWebApi(req, res, pathname, ctx, state) {
                 });
             }
         },
+        {
+            method: 'GET',
+            match: currentPath => currentPath.match(/^\/api\/sessions\/([^/]+)\/fs\/list$/),
+            handler: async match => {
+                const sessionRef = getValidSessionRef(ctx, res, match[1]);
+                if (!sessionRef) {
+                    return;
+                }
+                const requestUrl = new URL(req.url || '/api/sessions/x/fs/list', 'http://localhost');
+                const targetPath = String(requestUrl.searchParams.get('path') || '/').trim() || '/';
+
+                await ensureWebContainer(ctx, state, sessionRef.containerName, sessionRef);
+                const payload = await execJsonCommandInWebContainer(
+                    ctx,
+                    sessionRef.containerName,
+                    buildContainerFileListCommand(targetPath)
+                );
+                if (payload && payload.error) {
+                    sendJson(res, 400, { error: payload.error });
+                    return;
+                }
+                sendJson(res, 200, payload);
+            }
+        },
+        {
+            method: 'GET',
+            match: currentPath => currentPath.match(/^\/api\/sessions\/([^/]+)\/fs\/read$/),
+            handler: async match => {
+                const sessionRef = getValidSessionRef(ctx, res, match[1]);
+                if (!sessionRef) {
+                    return;
+                }
+                const requestUrl = new URL(req.url || '/api/sessions/x/fs/read', 'http://localhost');
+                const targetPath = String(requestUrl.searchParams.get('path') || '').trim();
+                if (!targetPath) {
+                    sendJson(res, 400, { error: 'path 不能为空' });
+                    return;
+                }
+
+                await ensureWebContainer(ctx, state, sessionRef.containerName, sessionRef);
+                const payload = await execJsonCommandInWebContainer(
+                    ctx,
+                    sessionRef.containerName,
+                    buildContainerFileReadCommand(targetPath)
+                );
+                if (payload && payload.error) {
+                    sendJson(res, 400, { error: payload.error });
+                    return;
+                }
+                if (payload && payload.kind === 'text') {
+                    payload.language = inferFileLanguage(payload.path);
+                }
+                sendJson(res, 200, payload);
+            }
+        },
         {
             method: 'GET',
             match: currentPath => currentPath.match(/^\/api\/sessions\/([^/]+)\/detail$/),
@@ -3872,7 +4096,12 @@ async function startWebServer(options) {
             const appFrontendMatch = pathname.match(/^\/app\/frontend\/([A-Za-z0-9._-]+)$/);
             if (req.method === 'GET' && appFrontendMatch) {
                 const assetName = appFrontendMatch[1];
-                if (!(assetName === 'app.css' || assetName === 'app.js' || assetName === 'markdown.css' || assetName === 'markdown-renderer.js')) {
+                if (!(assetName === 'app.css'
+                    || assetName === 'app.js'
+                    || assetName === 'markdown.css'
+                    || assetName === 'markdown-renderer.js'
+                    || assetName === 'file-browser.js'
+                    || assetName === 'codemirror.bundle.js')) {
                     sendHtml(res, 404, '<h1>404 Not Found</h1>');
                     return;
                 }