@xcanwin/manyoyo 6.2.14 → 6.2.17

package/lib/web/frontend/app.css

@@ -1082,7 +1082,7 @@ body.workspace-switcher-open .workspace-switcher-panel {
     display: flex;
     align-items: center;
     gap: 8px;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     padding: 12px 14px;
     border-bottom: 1px solid var(--line);
     background: rgba(255, 251, 244, 0.96);
@@ -1218,7 +1218,7 @@ body.workspace-switcher-open .workspace-switcher-panel {
     align-items: flex-start;
     justify-content: space-between;
     gap: 12px;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     padding: 10px 12px;
     border-bottom: 1px solid var(--line);
     background: rgba(255, 251, 244, 0.96);
@@ -1240,6 +1240,11 @@ body.workspace-switcher-open .workspace-switcher-panel {
     margin-left: auto;
 }
 
+.files-back-btn {
+    display: none;
+    flex-shrink: 0;
+}
+
 .files-preview-title {
     font-family: var(--font-display);
     font-size: 14px;
@@ -2162,7 +2167,7 @@ body.composer-options-open .composer-options-panel {
 
     .files-layout {
         grid-template-columns: minmax(0, 1fr);
-        grid-template-rows: minmax(180px, 38%) minmax(0, 1fr);
+        grid-template-rows: minmax(0, 1fr);
     }
 
     .files-sidebar {
@@ -2170,6 +2175,55 @@ body.composer-options-open .composer-options-panel {
         border-bottom: 1px solid var(--line);
     }
 
+    .files-toolbar {
+        flex-wrap: wrap;
+    }
+
+    .files-toolbar-path-group {
+        flex-basis: 100%;
+    }
+
+    .files-toolbar-meta {
+        flex-basis: 100%;
+        flex-wrap: wrap;
+        margin-left: 0;
+    }
+
+    .files-browser[data-mobile-pane="list"] .files-preview {
+        display: none;
+    }
+
+    .files-browser[data-mobile-pane="preview"] .files-sidebar {
+        display: none;
+    }
+
+    .files-browser[data-mobile-pane="preview"] .files-toolbar {
+        display: none;
+    }
+
+    .files-browser[data-mobile-pane="preview"] .files-back-btn {
+        display: inline-flex;
+        order: 1;
+    }
+
+    .files-preview-head {
+        flex-wrap: wrap;
+        align-items: center;
+    }
+
+    .files-preview-actions {
+        order: 2;
+    }
+
+    .files-preview-head-main {
+        order: 3;
+        flex-basis: 100%;
+    }
+
+    .files-preview-meta {
+        display: none;
+    }
+
     .composer-inner {
         align-items: stretch;
     }

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

@@ -99,6 +99,7 @@
                     <div class="files-toolbar-meta">
                         <div class="files-toolbar-status" data-role="status">未加载</div>
                         <button type="button" class="secondary" data-action="mkdir">新建目录</button>
+                        <button type="button" class="secondary" data-action="new-file">新建文件</button>
                     </div>
                 </header>
                 <div class="files-layout">
@@ -107,6 +108,7 @@
                     </aside>
                     <section class="files-preview">
                         <header class="files-preview-head">
+                            <button type="button" class="secondary files-back-btn" data-action="back-to-list">← 返回列表</button>
                             <div class="files-preview-head-main">
                                 <div class="files-preview-title" data-role="preview-title">未选择文件</div>
                                 <div class="files-preview-meta" data-role="preview-meta">请选择左侧文件或目录</div>
@@ -128,10 +130,13 @@
         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 filesBrowserNode = root.querySelector('.files-browser');
         const visitBtn = root.querySelector('[data-action="visit"]');
         const mkdirBtn = root.querySelector('[data-action="mkdir"]');
+        const newFileBtn = root.querySelector('[data-action="new-file"]');
         const saveBtn = root.querySelector('[data-action="save"]');
         const toggleMarkdownViewBtn = root.querySelector('[data-action="toggle-markdown-view"]');
+        const backToListBtn = root.querySelector('[data-action="back-to-list"]');
 
         const state = {
             visible: false,
@@ -155,9 +160,17 @@
             editorHost: null,
             previewReadOnly: true,
             previewDirty: false,
-            markdownViewMode: 'rendered'
+            markdownViewMode: 'rendered',
+            mobileActivePane: 'list'
         };
 
+        function setMobilePane(pane) {
+            state.mobileActivePane = pane === 'preview' ? 'preview' : 'list';
+            if (filesBrowserNode) {
+                filesBrowserNode.setAttribute('data-mobile-pane', state.mobileActivePane);
+            }
+        }
+
         function setStatus(text) {
             if (statusNode) {
                 statusNode.textContent = String(text || '').trim() || '就绪';
@@ -249,6 +262,17 @@
             return host;
         }
 
+        function updatePreviewMeta() {
+            const payload = state.selectedFile;
+            if (!previewMetaNode || !payload) {
+                return;
+            }
+            const modeLabel = payload.kind === 'text'
+                ? (payload.editable === true ? '可编辑' : '只读预览')
+                : '只读预览';
+            previewMetaNode.textContent = `${payload.kind === 'text' ? '文本文件' : '文件'} · ${formatBytes(payload.size)} · ${modeLabel}${payload.truncated ? ' · 已截断预览' : ''}`;
+        }
+
         function renderPreviewPayload(payload) {
             state.selectedFile = payload || null;
             state.previewReadOnly = !(payload && payload.editable === true);
@@ -260,12 +284,7 @@
             if (previewTitleNode) {
                 previewTitleNode.textContent = payload.path || '未命名文件';
             }
-            if (previewMetaNode) {
-                const modeLabel = payload.kind === 'text'
-                    ? (payload.editable === true ? '可编辑' : '只读预览')
-                    : '只读预览';
-                previewMetaNode.textContent = `${payload.kind === 'text' ? '文本文件' : '文件'} · ${formatBytes(payload.size)} · ${modeLabel}${payload.truncated ? ' · 已截断预览' : ''}`;
-            }
+            updatePreviewMeta();
             if (!previewBodyNode) {
                 syncMarkdownToggleButton();
                 syncSaveButton();
@@ -304,8 +323,12 @@
                                 doc: String(payload.content || ''),
                                 language,
                                 readOnly: state.previewReadOnly,
-                                onChange: function () {
+                                onChange: function (nextValue) {
                                     state.previewDirty = true;
+                                    if (state.selectedFile) {
+                                        state.selectedFile.size = new TextEncoder().encode(nextValue).length;
+                                    }
+                                    updatePreviewMeta();
                                     syncSaveButton();
                                 }
                             });
@@ -353,18 +376,23 @@
             if (mkdirBtn) {
                 mkdirBtn.disabled = state.loadingList || state.loadingFile || !state.sessionName || state.historyOnly === true;
             }
+            if (newFileBtn) {
+                newFileBtn.disabled = state.loadingList || state.loadingFile || !state.sessionName || state.historyOnly === true;
+            }
             if (!listNode) {
                 return;
             }
             listNode.innerHTML = '';
 
             if (!state.sessionName) {
+                setMobilePane('list');
                 listNode.innerHTML = '<div class="files-empty">请选择左侧会话后再浏览容器文件。</div>';
                 renderPreviewEmpty('未选择会话', '请选择左侧会话后再浏览容器文件。');
                 setStatus('未选择会话');
                 return;
             }
             if (state.historyOnly) {
+                setMobilePane('list');
                 listNode.innerHTML = '<div class="files-empty">当前会话只有历史记录，没有可访问的运行中容器。</div>';
                 renderPreviewEmpty('容器不可用', '当前会话只有历史记录，没有可访问的运行中容器。');
                 setStatus('容器不可用');
@@ -429,6 +457,7 @@
             state.pathDraft = pathText;
             state.selectedPath = '';
             state.selectedEntry = null;
+            setMobilePane('list');
             renderList();
             try {
                 const payload = await api('/api/sessions/' + encodeURIComponent(state.sessionName) + '/fs/list?path=' + encodeURIComponent(pathText));
@@ -474,6 +503,7 @@
             state.selectedPath = pathText;
             state.selectedEntry = selectedEntry;
             state.markdownViewMode = 'rendered';
+            setMobilePane('preview');
             renderList();
             renderPreviewEmpty(pathText, '正在读取文件内容...');
             try {
@@ -581,6 +611,30 @@
             }
         }
 
+        async function createFile() {
+            if (!state.sessionName || state.historyOnly === true || state.loadingList || state.loadingFile) {
+                return;
+            }
+            const input = await promptFn('请输入新文件名称');
+            const name = String(input || '').trim();
+            if (!name) {
+                return;
+            }
+            const targetPath = joinDirectoryPath(state.currentPath || state.containerPath || '/', name);
+            setStatus('创建文件中');
+            try {
+                await api('/api/sessions/' + encodeURIComponent(state.sessionName) + '/fs/create', {
+                    method: 'POST',
+                    body: JSON.stringify({ path: targetPath })
+                });
+                await loadDirectory(state.currentPath || state.containerPath || '/');
+                setStatus('已创建文件');
+            } catch (e) {
+                setStatus('创建文件失败');
+                onError(e && e.message ? e.message : '创建文件失败');
+            }
+        }
+
         function sync(context) {
             const session = context && context.session;
             const detail = context && context.detail;
@@ -609,6 +663,7 @@
                 state.entries = [];
                 state.selectedPath = '';
                 state.selectedEntry = null;
+                setMobilePane('list');
                 renderPreviewEmpty('未选择文件', '请选择左侧文件进行预览。');
             } else if (containerPathChanged) {
                 state.containerPath = nextContainerPath;
@@ -653,6 +708,14 @@
             });
         }
 
+        if (newFileBtn) {
+            newFileBtn.addEventListener('click', function () {
+                createFile().catch(function (e) {
+                    onError(e && e.message ? e.message : '创建文件失败');
+                });
+            });
+        }
+
         if (saveBtn) {
             saveBtn.addEventListener('click', function () {
                 saveCurrentFile().catch(function (e) {
@@ -663,11 +726,21 @@
 
         if (toggleMarkdownViewBtn) {
             toggleMarkdownViewBtn.addEventListener('click', function () {
+                if (state.editor && typeof state.editor.getValue === 'function' && state.selectedFile) {
+                    state.selectedFile.content = state.editor.getValue();
+                }
                 state.markdownViewMode = state.markdownViewMode === 'source' ? 'rendered' : 'source';
                 renderPreviewPayload(state.selectedFile);
             });
         }
 
+        if (backToListBtn) {
+            backToListBtn.addEventListener('click', function () {
+                setMobilePane('list');
+            });
+        }
+
+        setMobilePane('list');
         renderList();
 
         return {

package/lib/web/server.js

@@ -3520,6 +3520,41 @@ try {
 `);
 }
 
+function buildContainerFileCreateCommand(requestedPath) {
+    return buildWebContainerNodeCommand(`
+// __MANYOYO_FS_CREATE__
+const fs = require('fs');
+const path = require('path');
+
+const requestedPath = ${JSON.stringify(String(requestedPath || ''))};
+
+try {
+    const resolvedPath = path.resolve(requestedPath);
+    const parentPath = path.dirname(resolvedPath);
+    const realParentPath = fs.realpathSync(parentPath);
+    const targetPath = path.join(realParentPath, path.basename(resolvedPath));
+    if (fs.existsSync(targetPath)) {
+        throw new Error('文件已存在: ' + targetPath);
+    }
+
+    fs.writeFileSync(targetPath, '', 'utf8');
+    const stat = fs.statSync(targetPath);
+    process.stdout.write(JSON.stringify({
+        path: targetPath,
+        name: path.basename(targetPath),
+        kind: 'file',
+        size: stat.size,
+        mtimeMs: stat.mtimeMs,
+        created: true
+    }));
+} 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'
@@ -4800,6 +4835,34 @@ async function handleWebApi(req, res, pathname, ctx, state) {
                 sendJson(res, 200, result);
             }
         },
+        {
+            method: 'POST',
+            match: currentPath => currentPath.match(/^\/api\/sessions\/([^/]+)\/fs\/create$/),
+            handler: async match => {
+                const sessionRef = getValidSessionRef(ctx, res, match[1]);
+                if (!sessionRef) {
+                    return;
+                }
+                const payload = await readJsonBody(req);
+                const targetPath = String(payload && payload.path ? payload.path : '').trim();
+                if (!targetPath) {
+                    sendJson(res, 400, { error: 'path 不能为空' });
+                    return;
+                }
+
+                await ensureWebContainer(ctx, state, sessionRef.containerName, sessionRef);
+                const result = await execJsonCommandInWebContainer(
+                    ctx,
+                    sessionRef.containerName,
+                    buildContainerFileCreateCommand(targetPath)
+                );
+                if (result && result.error) {
+                    sendJson(res, 400, { error: result.error });
+                    return;
+                }
+                sendJson(res, 200, result);
+            }
+        },
         {
             method: 'GET',
             match: currentPath => currentPath.match(/^\/api\/sessions\/([^/]+)\/detail$/),

package/package.json

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