@xcanwin/manyoyo 5.8.11 → 5.9.0

package/lib/web/frontend/app.css

@@ -1140,6 +1140,177 @@ body.mobile-actions-open .header-actions {
     background: #131923;
 }
 
+.files-pane {
+    min-height: 0;
+    border: 1px solid var(--line);
+    border-radius: 14px;
+    overflow: hidden;
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(252, 246, 236, 0.88) 100%);
+}
+
+.files-browser {
+    height: 100%;
+    min-height: 0;
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr);
+}
+
+.files-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 14px;
+    border-bottom: 1px solid var(--line);
+    background: rgba(255, 251, 244, 0.96);
+}
+
+.files-toolbar-path {
+    flex: 1;
+    min-width: 0;
+    padding: 8px 10px;
+    border: 1px solid rgba(181, 146, 99, 0.35);
+    border-radius: 10px;
+    background: #fffdf9;
+    color: var(--text);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    line-height: 1.5;
+    word-break: break-all;
+}
+
+.files-toolbar-status {
+    color: var(--muted);
+    font-size: 12px;
+}
+
+.files-layout {
+    min-height: 0;
+    display: grid;
+    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
+}
+
+.files-sidebar {
+    min-height: 0;
+    border-right: 1px solid var(--line);
+    background: rgba(255, 251, 244, 0.84);
+    overflow: auto;
+}
+
+.files-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 12px;
+}
+
+.files-entry {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    padding: 10px 12px;
+    border: 1px solid rgba(181, 146, 99, 0.28);
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.92);
+    color: var(--text);
+    text-align: left;
+    cursor: pointer;
+}
+
+.files-entry.is-active {
+    border-color: rgba(120, 78, 27, 0.45);
+    background: rgba(255, 244, 224, 0.9);
+}
+
+.files-entry-name {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
+.files-entry-title {
+    font-size: 13px;
+    font-weight: 600;
+    word-break: break-word;
+}
+
+.files-entry-meta {
+    color: var(--muted);
+    font-size: 11px;
+    white-space: nowrap;
+}
+
+.files-preview {
+    min-height: 0;
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr);
+}
+
+.files-preview-head {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 12px 14px;
+    border-bottom: 1px solid var(--line);
+    background: rgba(255, 251, 244, 0.96);
+}
+
+.files-preview-title {
+    font-family: var(--font-display);
+    font-size: 15px;
+    font-weight: 700;
+}
+
+.files-preview-meta {
+    color: var(--muted);
+    font-size: 12px;
+    word-break: break-all;
+}
+
+.files-preview-body {
+    min-height: 0;
+    overflow: auto;
+    padding: 14px;
+}
+
+.files-empty,
+.files-note {
+    padding: 18px;
+    border: 1px dashed rgba(181, 146, 99, 0.45);
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.7);
+    color: var(--muted);
+    line-height: 1.6;
+}
+
+.files-pre {
+    margin: 0;
+    white-space: pre-wrap;
+    word-break: break-word;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    line-height: 1.6;
+}
+
+.files-editor-host {
+    min-height: 100%;
+}
+
+.files-editor-host .cm-editor {
+    height: 100%;
+    border: 1px solid rgba(181, 146, 99, 0.32);
+    border-radius: 12px;
+    overflow: hidden;
+    background: rgba(255, 255, 255, 0.94);
+}
+
+.files-editor-host .cm-scroller {
+    font-family: var(--font-mono);
+}
+
 .inspector-pane {
     overflow-y: auto;
     padding: 0;
@@ -1939,7 +2110,7 @@ details.trace-card > .trace-card-summary {
 
     .workbench-tabs {
         display: grid;
-        grid-template-columns: repeat(5, minmax(0, 1fr));
+        grid-template-columns: repeat(6, minmax(0, 1fr));
         gap: 6px;
     }
 
@@ -1953,6 +2124,16 @@ details.trace-card > .trace-card-summary {
         align-items: flex-start;
     }
 
+    .files-layout {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-rows: minmax(180px, 38%) minmax(0, 1fr);
+    }
+
+    .files-sidebar {
+        border-right: 0;
+        border-bottom: 1px solid var(--line);
+    }
+
     .composer-toolbar-meta {
         width: 100%;
         justify-content: space-between;

package/lib/web/frontend/app.html

@@ -68,6 +68,7 @@
                     <div class="workbench-tabs" id="workbenchTabs" aria-label="工作台视图">
                         <button type="button" id="viewActivityBtn" class="secondary is-active">活动</button>
                         <button type="button" id="viewTerminalBtn" class="secondary">终端</button>
+                        <button type="button" id="viewFilesBtn" class="secondary">文件</button>
                         <button type="button" id="viewDetailBtn" class="secondary">详情</button>
                         <button type="button" id="viewConfigBtn" class="secondary">配置</button>
                         <button type="button" id="viewCheckBtn" class="secondary">检查</button>
@@ -90,6 +91,7 @@
                         </div>
                         <div id="terminalScreen" aria-label="终端输出区域"></div>
                     </section>
+                    <section id="filesPanel" class="workspace-pane files-pane" hidden></section>
                     <section id="detailPanel" class="workspace-pane inspector-pane" hidden>
                         <div id="detailSummary" class="inspector-stack"></div>
                     </section>
@@ -297,6 +299,8 @@
     <script src="/app/vendor/xterm-addon-fit.js"></script>
     <script src="/app/vendor/marked.min.js"></script>
     <script src="/app/frontend/markdown-renderer.js"></script>
+    <script src="/app/frontend/codemirror.bundle.js"></script>
+    <script src="/app/frontend/file-browser.js"></script>
     <script src="/app/frontend/app.js"></script>
 </body>
 </html>

package/lib/web/frontend/app.js

@@ -118,6 +118,7 @@
     const headerActions = document.getElementById('headerActions');
     const viewActivityBtn = document.getElementById('viewActivityBtn');
     const viewTerminalBtn = document.getElementById('viewTerminalBtn');
+    const viewFilesBtn = document.getElementById('viewFilesBtn');
     const viewDetailBtn = document.getElementById('viewDetailBtn');
     const viewConfigBtn = document.getElementById('viewConfigBtn');
     const viewCheckBtn = document.getElementById('viewCheckBtn');
@@ -174,6 +175,7 @@
     const activityModelChip = document.getElementById('activityModelChip');
     const messagesNode = document.getElementById('messages');
     const terminalPanel = document.getElementById('terminalPanel');
+    const filesPanel = document.getElementById('filesPanel');
     const detailPanel = document.getElementById('detailPanel');
     const configPanel = document.getElementById('configPanel');
     const checkPanel = document.getElementById('checkPanel');
@@ -248,6 +250,7 @@
         && typeof window.ManyoyoMarkdown.render === 'function'
         ? window.ManyoyoMarkdown
         : null;
+    let fileBrowser = null;
     function normalizeBooleanMap(source) {
         const result = {};
         if (!source || typeof source !== 'object' || Array.isArray(source)) {
@@ -1723,6 +1726,7 @@
     const VIEW_LABELS = {
         activity: '活动',
         terminal: '终端',
+        files: '文件',
         detail: '详情',
         config: '配置',
         check: '检查'
@@ -2001,6 +2005,7 @@
 
         const activityTab = state.activeTab === 'activity';
         const terminalTab = state.activeTab === 'terminal';
+        const filesTab = state.activeTab === 'files';
         const detailTab = state.activeTab === 'detail';
         const configTab = state.activeTab === 'config';
         const checkTab = state.activeTab === 'check';
@@ -2011,6 +2016,7 @@
         document.body.classList.toggle('command-mode', commandMode);
         document.body.classList.toggle('agent-mode', agentMode);
         document.body.classList.toggle('terminal-mode', terminalTab);
+        document.body.classList.toggle('files-tab', filesTab);
         document.body.classList.toggle('detail-tab', detailTab);
         document.body.classList.toggle('config-tab', configTab);
         document.body.classList.toggle('check-tab', checkTab);
@@ -2036,6 +2042,7 @@
         }
         if (viewActivityBtn) viewActivityBtn.classList.toggle('is-active', activityTab);
         if (viewTerminalBtn) viewTerminalBtn.classList.toggle('is-active', terminalTab);
+        if (viewFilesBtn) viewFilesBtn.classList.toggle('is-active', filesTab);
         if (viewDetailBtn) viewDetailBtn.classList.toggle('is-active', detailTab);
         if (viewConfigBtn) viewConfigBtn.classList.toggle('is-active', configTab);
         if (viewCheckBtn) viewCheckBtn.classList.toggle('is-active', checkTab);
@@ -2045,6 +2052,9 @@
         if (terminalPanel) {
             terminalPanel.hidden = !terminalTab;
         }
+        if (filesPanel) {
+            filesPanel.hidden = !filesTab;
+        }
         if (detailPanel) {
             detailPanel.hidden = !detailTab;
         }
@@ -2057,6 +2067,14 @@
         if (terminalTab && state.terminal.terminalReady) {
             scheduleTerminalFit(false);
         }
+        if (fileBrowser) {
+            fileBrowser.sync({
+                visible: filesTab,
+                session: getActiveSession(),
+                detail: state.sessionDetail,
+                historyOnly: isActiveSessionHistoryOnly()
+            });
+        }
 
         const activeAgentRunning = isAgentRunActiveForSession(state.active);
         const busy = state.loadingSessions || state.loadingMessages || state.sending;
@@ -3949,6 +3967,12 @@
         });
     }
 
+    if (viewFilesBtn) {
+        viewFilesBtn.addEventListener('click', function () {
+            setActiveTab('files');
+        });
+    }
+
     if (viewDetailBtn) {
         viewDetailBtn.addEventListener('click', function () {
             setActiveTab('detail');
@@ -4210,6 +4234,16 @@
         });
     }
 
+    if (window.ManyoyoFileBrowser && typeof window.ManyoyoFileBrowser.create === 'function') {
+        fileBrowser = window.ManyoyoFileBrowser.create({
+            root: filesPanel,
+            api,
+            onError: function (message) {
+                alert(message);
+            }
+        });
+    }
+
     window.addEventListener('beforeunload', function () {
         disconnectTerminal('', true);
     });

package/lib/web/frontend/codemirror-entry.js

@@ -0,0 +1,98 @@
+import { basicSetup } from 'codemirror';
+import { Compartment, EditorState } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { css } from '@codemirror/lang-css';
+import { html } from '@codemirror/lang-html';
+import { javascript } from '@codemirror/lang-javascript';
+import { json } from '@codemirror/lang-json';
+import { markdown } from '@codemirror/lang-markdown';
+import { python } from '@codemirror/lang-python';
+import { yaml } from '@codemirror/lang-yaml';
+
+function resolveLanguageExtension(language) {
+    switch (String(language || '').trim()) {
+    case 'css':
+        return css();
+    case 'html':
+        return html();
+    case 'javascript':
+        return javascript({ jsx: true, typescript: true });
+    case 'json':
+        return json();
+    case 'markdown':
+        return markdown();
+    case 'python':
+        return python();
+    case 'yaml':
+        return yaml();
+    default:
+        return [];
+    }
+}
+
+function createEditor(parent, options = {}) {
+    const target = parent;
+    const initialDoc = String(options.doc || '');
+    const initialLanguage = String(options.language || 'text').trim();
+    const initialReadOnly = options.readOnly !== false;
+    const languageCompartment = new Compartment();
+    const readOnlyCompartment = new Compartment();
+    const view = new EditorView({
+        parent: target,
+        state: EditorState.create({
+            doc: initialDoc,
+            extensions: [
+                basicSetup,
+                EditorView.lineWrapping,
+                readOnlyCompartment.of([
+                    EditorState.readOnly.of(initialReadOnly),
+                    EditorView.editable.of(!initialReadOnly)
+                ]),
+                languageCompartment.of(resolveLanguageExtension(initialLanguage)),
+                EditorView.theme({
+                    '&': {
+                        height: '100%',
+                        fontSize: '12px'
+                    },
+                    '.cm-scroller': {
+                        overflow: 'auto'
+                    }
+                })
+            ]
+        })
+    });
+
+    return {
+        setValue(nextValue) {
+            const text = String(nextValue == null ? '' : nextValue);
+            view.dispatch({
+                changes: {
+                    from: 0,
+                    to: view.state.doc.length,
+                    insert: text
+                }
+            });
+        },
+        setLanguage(nextLanguage) {
+            view.dispatch({
+                effects: languageCompartment.reconfigure(resolveLanguageExtension(nextLanguage))
+            });
+        },
+        setReadOnly(readOnly) {
+            const value = readOnly !== false;
+            view.dispatch({
+                effects: readOnlyCompartment.reconfigure([
+                    EditorState.readOnly.of(value),
+                    EditorView.editable.of(!value)
+                ])
+            });
+        },
+        destroy() {
+            view.destroy();
+        }
+    };
+}
+
+window.ManyoyoCodeEditor = {
+    create: createEditor
+};