@xcanwin/manyoyo 5.8.10 → 5.9.0

package/lib/web/frontend/app.css

@@ -352,6 +352,20 @@ textarea:focus-visible {
     white-space: pre-wrap;
 }
 
+.link-confirm-url {
+    margin-top: 2px;
+    padding: 12px 14px;
+    border: 1px solid rgba(146, 100, 42, 0.18);
+    border-radius: 10px;
+    background: #fff8ef;
+    color: var(--text);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    line-height: 1.6;
+    word-break: break-all;
+    user-select: text;
+}
+
 .config-editor {
     width: 100%;
     min-height: 340px;
@@ -1126,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;
@@ -1925,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;
     }
 
@@ -1939,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>
@@ -275,12 +277,30 @@
                 </footer>
             </section>
         </div>
+
+        <div id="externalLinkModal" class="modal-backdrop" hidden>
+            <section class="modal" role="dialog" aria-modal="true" aria-labelledby="externalLinkTitle">
+                <header class="modal-header">
+                    <h2 id="externalLinkTitle">打开外部链接</h2>
+                    <button type="button" id="externalLinkCancelBtn" class="secondary">取消</button>
+                </header>
+                <div class="modal-body">
+                    <div class="modal-tip">即将新标签页打开外部页面。请确认完整链接可信后再继续。</div>
+                    <div id="externalLinkUrl" class="link-confirm-url"></div>
+                </div>
+                <footer class="modal-footer">
+                    <button type="button" id="externalLinkOpenBtn">确认并新标签打开</button>
+                </footer>
+            </section>
+        </div>
     </div>
 
     <script src="/app/vendor/xterm.js"></script>
     <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

@@ -51,6 +51,7 @@
         configModalOpen: false,
         createModalOpen: false,
         agentTemplateModalOpen: false,
+        externalLinkModalOpen: false,
         configLoading: false,
         configSaving: false,
         configSaveMessage: '',
@@ -105,7 +106,8 @@
             lastSentRows: 0,
             ctrlMode: false,
             altMode: false
-        }
+        },
+        externalLinkUrl: ''
     };
 
     const sidebarNode = document.querySelector('.sidebar');
@@ -116,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');
@@ -172,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');
@@ -196,6 +200,10 @@
     const agentTemplateCancelBtn = document.getElementById('agentTemplateCancelBtn');
     const agentTemplateResetBtn = document.getElementById('agentTemplateResetBtn');
     const agentTemplateSaveBtn = document.getElementById('agentTemplateSaveBtn');
+    const externalLinkModal = document.getElementById('externalLinkModal');
+    const externalLinkUrl = document.getElementById('externalLinkUrl');
+    const externalLinkCancelBtn = document.getElementById('externalLinkCancelBtn');
+    const externalLinkOpenBtn = document.getElementById('externalLinkOpenBtn');
     const refreshBtn = document.getElementById('refreshBtn');
     const removeBtn = document.getElementById('removeBtn');
     const removeAllBtn = document.getElementById('removeAllBtn');
@@ -242,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)) {
@@ -740,6 +749,45 @@
         configStatus.textContent = text;
     }
 
+    function openExternalLinkModalView(url) {
+        const text = String(url || '').trim();
+        if (!text) {
+            return;
+        }
+        state.externalLinkUrl = text;
+        state.externalLinkModalOpen = true;
+        if (externalLinkUrl) {
+            externalLinkUrl.textContent = text;
+        }
+        setModalVisible(externalLinkModal, true);
+    }
+
+    function closeExternalLinkModalView() {
+        state.externalLinkModalOpen = false;
+        state.externalLinkUrl = '';
+        if (externalLinkUrl) {
+            externalLinkUrl.textContent = '';
+        }
+        setModalVisible(externalLinkModal, false);
+    }
+
+    function confirmExternalLinkOpen() {
+        const targetUrl = String(state.externalLinkUrl || '').trim();
+        if (!targetUrl) {
+            closeExternalLinkModalView();
+            return;
+        }
+        if (markdownRenderer && typeof markdownRenderer.openExternalLink === 'function') {
+            markdownRenderer.openExternalLink(targetUrl);
+        } else {
+            const popup = window.open(targetUrl, '_blank', 'noopener,noreferrer');
+            if (popup) {
+                popup.opener = null;
+            }
+        }
+        closeExternalLinkModalView();
+    }
+
     function showDirectoryPickerError(message) {
         if (!directoryPickerError) return;
         const text = String(message || '').trim();
@@ -1678,6 +1726,7 @@
     const VIEW_LABELS = {
         activity: '活动',
         terminal: '终端',
+        files: '文件',
         detail: '详情',
         config: '配置',
         check: '检查'
@@ -1956,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';
@@ -1966,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);
@@ -1991,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);
@@ -2000,6 +2052,9 @@
         if (terminalPanel) {
             terminalPanel.hidden = !terminalTab;
         }
+        if (filesPanel) {
+            filesPanel.hidden = !filesTab;
+        }
         if (detailPanel) {
             detailPanel.hidden = !detailTab;
         }
@@ -2012,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;
@@ -2095,6 +2158,9 @@
         if (agentTemplateModal) {
             agentTemplateModal.hidden = !state.agentTemplateModalOpen;
         }
+        if (externalLinkModal) {
+            externalLinkModal.hidden = !state.externalLinkModalOpen;
+        }
         if (agentTemplateSaveBtn) {
             agentTemplateSaveBtn.disabled = state.agentTemplateSaving || !state.active;
         }
@@ -2118,7 +2184,7 @@
         }
         document.body.classList.toggle(
             'modal-open',
-            state.configModalOpen || state.createModalOpen || state.directoryPicker.open || state.agentTemplateModalOpen
+            state.configModalOpen || state.createModalOpen || state.directoryPicker.open || state.agentTemplateModalOpen || state.externalLinkModalOpen
         );
         if (!state.active) {
             sendState.textContent = '未选择会话';
@@ -3901,6 +3967,12 @@
         });
     }
 
+    if (viewFilesBtn) {
+        viewFilesBtn.addEventListener('click', function () {
+            setActiveTab('files');
+        });
+    }
+
     if (viewDetailBtn) {
         viewDetailBtn.addEventListener('click', function () {
             setActiveTab('detail');
@@ -4030,6 +4102,15 @@
         });
     }
 
+    if (externalLinkModal) {
+        externalLinkModal.addEventListener('click', function (event) {
+            if (event.target === externalLinkModal) {
+                closeExternalLinkModalView();
+                syncUi();
+            }
+        });
+    }
+
     window.addEventListener('keydown', function (event) {
         if (event.key === 'Escape' && state.configModalOpen) {
             closeConfigModal();
@@ -4046,6 +4127,10 @@
             closeAgentTemplateModal();
             syncUi();
         }
+        if (event.key === 'Escape' && state.externalLinkModalOpen) {
+            closeExternalLinkModalView();
+            syncUi();
+        }
         if (event.key === 'Escape' && state.mobileSidebarOpen) {
             closeMobileSessionPanel();
         }
@@ -4128,6 +4213,37 @@
         }
     });
 
+    if (externalLinkCancelBtn) {
+        externalLinkCancelBtn.addEventListener('click', function () {
+            closeExternalLinkModalView();
+            syncUi();
+        });
+    }
+
+    if (externalLinkOpenBtn) {
+        externalLinkOpenBtn.addEventListener('click', function () {
+            confirmExternalLinkOpen();
+            syncUi();
+        });
+    }
+
+    if (markdownRenderer && typeof markdownRenderer.setLinkOpenHandler === 'function') {
+        markdownRenderer.setLinkOpenHandler(function (url) {
+            openExternalLinkModalView(url);
+            syncUi();
+        });
+    }
+
+    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
+};