@xcanwin/manyoyo 3.8.7 → 3.9.3

package/lib/web/static/app.css

@@ -0,0 +1,315 @@
+:root {
+    --bg: #f4f7f5;
+    --panel: #ffffff;
+    --panel-soft: #f0f5f2;
+    --line: #dbe4de;
+    --text: #0f2f20;
+    --muted: #4a6256;
+    --accent: #0f9d58;
+    --accent-strong: #087f45;
+    --user-bubble: #e4f5eb;
+    --assistant-bubble: #f7faf8;
+    --system-bubble: #eef4ff;
+    --sidebar-width: 280px;
+    --header-height: 70px;
+    --composer-height: 176px;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    height: 100vh;
+    overflow: hidden;
+    font-family: "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+    color: var(--text);
+    background: radial-gradient(circle at 0 0, #d8efe2 0%, var(--bg) 45%, #f5f8f6 100%);
+}
+
+.app {
+    height: 100vh;
+}
+
+.sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: var(--sidebar-width);
+    z-index: 30;
+    border-right: 1px solid var(--line);
+    background: linear-gradient(180deg, #f9fcfa 0%, #eef6f1 100%);
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.brand {
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    font-size: 16px;
+}
+
+.new-session {
+    display: flex;
+    gap: 8px;
+}
+
+.new-session input {
+    flex: 1;
+    border: 1px solid var(--line);
+    border-radius: 10px;
+    padding: 9px 10px;
+    background: var(--panel);
+}
+
+button {
+    border: none;
+    border-radius: 10px;
+    padding: 9px 12px;
+    font-weight: 600;
+    cursor: pointer;
+    background: var(--accent);
+    color: #fff;
+}
+
+button:hover {
+    background: var(--accent-strong);
+}
+
+button.secondary {
+    background: var(--panel-soft);
+    color: var(--text);
+    border: 1px solid var(--line);
+}
+
+button.secondary:hover {
+    background: #e6efe9;
+}
+
+#sessionList {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding-right: 4px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.session-item {
+    text-align: left;
+    width: 100%;
+    background: var(--panel);
+    color: var(--text);
+    border: 1px solid var(--line);
+    padding: 10px;
+    border-radius: 12px;
+    transition: 120ms ease;
+}
+
+.session-item.active {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 2px rgba(15, 157, 88, 0.15);
+}
+
+.session-name {
+    font-size: 13px;
+    font-weight: 700;
+    margin-bottom: 3px;
+    word-break: break-all;
+}
+
+.session-meta {
+    font-size: 12px;
+    color: var(--muted);
+}
+
+.empty {
+    color: var(--muted);
+    font-size: 13px;
+    padding: 8px 4px;
+}
+
+.main {
+    margin-left: var(--sidebar-width);
+    height: 100vh;
+}
+
+.header {
+    position: fixed;
+    top: 0;
+    left: var(--sidebar-width);
+    right: 0;
+    height: var(--header-height);
+    z-index: 20;
+    border-bottom: 1px solid var(--line);
+    background: rgba(255, 255, 255, 0.75);
+    backdrop-filter: blur(6px);
+    padding: 14px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+}
+
+#activeTitle {
+    margin: 0;
+    font-size: 17px;
+    font-weight: 700;
+}
+
+.header-actions {
+    display: flex;
+    gap: 8px;
+}
+
+#messages {
+    position: fixed;
+    left: var(--sidebar-width);
+    right: 0;
+    top: var(--header-height);
+    bottom: var(--composer-height);
+    overflow-y: auto;
+    scroll-behavior: smooth;
+    padding: 18px 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+
+#messages::-webkit-scrollbar {
+    width: 10px;
+}
+
+#messages::-webkit-scrollbar-thumb {
+    background: #bdd8c8;
+    border-radius: 8px;
+}
+
+.msg {
+    display: flex;
+    flex-direction: column;
+    max-width: 920px;
+    width: fit-content;
+}
+
+.msg.user {
+    align-self: flex-end;
+}
+
+.msg.assistant,
+.msg.system {
+    align-self: flex-start;
+}
+
+.role {
+    font-size: 12px;
+    color: var(--muted);
+    margin-bottom: 4px;
+    font-weight: 600;
+}
+
+.bubble {
+    border: 1px solid var(--line);
+    background: var(--assistant-bubble);
+    border-radius: 12px;
+    padding: 10px 12px;
+}
+
+.msg.user .bubble {
+    background: var(--user-bubble);
+}
+
+.msg.system .bubble {
+    background: var(--system-bubble);
+}
+
+.bubble pre {
+    margin: 0;
+    white-space: pre-wrap;
+    word-break: break-word;
+    font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+    font-size: 13px;
+    line-height: 1.5;
+}
+
+.composer {
+    position: fixed;
+    left: var(--sidebar-width);
+    right: 0;
+    bottom: 0;
+    min-height: var(--composer-height);
+    z-index: 20;
+    border-top: 1px solid var(--line);
+    padding: 12px 20px 16px;
+    background: rgba(255, 255, 255, 0.86);
+}
+
+.composer-inner {
+    display: flex;
+    gap: 10px;
+    align-items: flex-end;
+}
+
+#commandInput {
+    width: 100%;
+    min-height: 120px;
+    height: 120px;
+    max-height: 300px;
+    border: 1px solid var(--line);
+    border-radius: 12px;
+    padding: 11px 12px;
+    resize: none;
+    font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
+    font-size: 13px;
+    background: #fff;
+}
+
+#sendBtn[disabled] {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+@media (max-width: 900px) {
+    body {
+        height: auto;
+        overflow: auto;
+    }
+
+    .sidebar {
+        position: static;
+        width: auto;
+        z-index: auto;
+        border-right: none;
+        border-bottom: 1px solid var(--line);
+        max-height: 42vh;
+    }
+
+    .main {
+        margin-left: 0;
+        min-height: 58vh;
+        height: auto;
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+    }
+
+    .header {
+        position: static;
+        height: auto;
+    }
+
+    #messages {
+        position: static;
+        min-height: 42vh;
+        max-height: 42vh;
+    }
+
+    .composer {
+        position: static;
+        min-height: auto;
+    }
+}

package/lib/web/static/app.html

@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>MANYOYO Web</title>
+    <link rel="stylesheet" href="/app/static/app.css" />
+</head>
+<body>
+    <div class="app">
+        <aside class="sidebar">
+            <div class="brand">MANYOYO Web</div>
+            <form class="new-session" id="newSessionForm">
+                <input id="newSessionName" placeholder="容器名 (例如 myy-dev)" />
+                <button type="submit">新建</button>
+            </form>
+            <div id="sessionList"></div>
+        </aside>
+        <main class="main">
+            <header class="header">
+                <h1 id="activeTitle">未选择会话</h1>
+                <div class="header-actions">
+                    <button type="button" id="refreshBtn" class="secondary">刷新</button>
+                    <button type="button" id="removeBtn" class="secondary">删除容器</button>
+                    <button type="button" id="removeAllBtn" class="secondary">删除容器与聊天记录</button>
+                </div>
+            </header>
+            <section id="messages"></section>
+            <form class="composer" id="composer">
+                <div class="composer-inner">
+                    <textarea id="commandInput" placeholder="输入容器命令，例如: ls -la"></textarea>
+                    <button type="submit" id="sendBtn">发送</button>
+                </div>
+            </form>
+        </main>
+    </div>
+
+    <script src="/app/static/app.js"></script>
+</body>
+</html>

package/lib/web/static/app.js

@@ -0,0 +1,276 @@
+(function () {
+    const state = {
+        sessions: [],
+        active: '',
+        messages: [],
+        sending: false
+    };
+
+    const sessionList = document.getElementById('sessionList');
+    const activeTitle = document.getElementById('activeTitle');
+    const messagesNode = document.getElementById('messages');
+    const newSessionForm = document.getElementById('newSessionForm');
+    const newSessionName = document.getElementById('newSessionName');
+    const composer = document.getElementById('composer');
+    const commandInput = document.getElementById('commandInput');
+    const sendBtn = document.getElementById('sendBtn');
+    const refreshBtn = document.getElementById('refreshBtn');
+    const removeBtn = document.getElementById('removeBtn');
+    const removeAllBtn = document.getElementById('removeAllBtn');
+
+    function roleName(role) {
+        if (role === 'user') return '你';
+        if (role === 'assistant') return '容器输出';
+        return '系统';
+    }
+
+    function formatStatus(status) {
+        if (!status) return 'history';
+        return status;
+    }
+
+    async function api(url, options) {
+        const requestOptions = Object.assign(
+            { headers: { 'Content-Type': 'application/json' } },
+            options || {}
+        );
+        const response = await fetch(url, requestOptions);
+        if (response.status === 401) {
+            window.location.href = '/';
+            throw new Error('未登录或登录已过期');
+        }
+        let data = {};
+        try {
+            data = await response.json();
+        } catch (e) {
+            data = {};
+        }
+        if (!response.ok) {
+            throw new Error(data.error || '请求失败');
+        }
+        return data;
+    }
+
+    function setSending(value) {
+        state.sending = value;
+        sendBtn.disabled = value || !state.active;
+        commandInput.disabled = !state.active;
+    }
+
+    function updateHeader() {
+        if (!state.active) {
+            activeTitle.textContent = '未选择会话';
+            removeBtn.disabled = true;
+            removeAllBtn.disabled = true;
+            setSending(false);
+            commandInput.value = '';
+            return;
+        }
+        activeTitle.textContent = state.active;
+        removeBtn.disabled = false;
+        removeAllBtn.disabled = false;
+        setSending(state.sending);
+    }
+
+    function renderSessions() {
+        sessionList.innerHTML = '';
+        if (!state.sessions.length) {
+            const empty = document.createElement('div');
+            empty.className = 'empty';
+            empty.textContent = '暂无 manyoyo 会话';
+            sessionList.appendChild(empty);
+            return;
+        }
+
+        state.sessions.forEach(function (session) {
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = 'session-item' + (state.active === session.name ? ' active' : '');
+            btn.innerHTML =
+                '<div class="session-name">' + session.name + '</div>' +
+                '<div class="session-meta">' + formatStatus(session.status) + '</div>';
+            btn.addEventListener('click', function () {
+                state.active = session.name;
+                updateHeader();
+                renderSessions();
+                loadMessages();
+            });
+            sessionList.appendChild(btn);
+        });
+    }
+
+    function renderMessages(messages) {
+        messagesNode.innerHTML = '';
+        if (!messages.length) {
+            const empty = document.createElement('div');
+            empty.className = 'empty';
+            empty.textContent = '输入命令后，容器输出会显示在这里。';
+            messagesNode.appendChild(empty);
+            return;
+        }
+
+        messages.forEach(function (msg) {
+            const row = document.createElement('article');
+            row.className = 'msg ' + (msg.role || 'system');
+
+            const role = document.createElement('div');
+            role.className = 'role';
+            role.textContent = roleName(msg.role);
+
+            const bubble = document.createElement('div');
+            bubble.className = 'bubble';
+
+            const pre = document.createElement('pre');
+            pre.textContent = msg.content || '';
+            bubble.appendChild(pre);
+
+            row.appendChild(role);
+            row.appendChild(bubble);
+            messagesNode.appendChild(row);
+        });
+
+        messagesNode.scrollTop = messagesNode.scrollHeight;
+    }
+
+    async function loadSessions(preferredName) {
+        const data = await api('/api/sessions');
+        state.sessions = Array.isArray(data.sessions) ? data.sessions : [];
+
+        if (preferredName) {
+            state.active = preferredName;
+        }
+
+        if (state.active && !state.sessions.some(function (s) { return s.name === state.active; })) {
+            state.active = '';
+        }
+
+        if (!state.active && state.sessions.length) {
+            state.active = state.sessions[0].name;
+        }
+
+        updateHeader();
+        renderSessions();
+        await loadMessages();
+    }
+
+    async function loadMessages() {
+        if (!state.active) {
+            state.messages = [];
+            renderMessages(state.messages);
+            return;
+        }
+        const data = await api('/api/sessions/' + encodeURIComponent(state.active) + '/messages');
+        state.messages = Array.isArray(data.messages) ? data.messages : [];
+        renderMessages(state.messages);
+    }
+
+    newSessionForm.addEventListener('submit', async function (event) {
+        event.preventDefault();
+        try {
+            const name = (newSessionName.value || '').trim();
+            const data = await api('/api/sessions', {
+                method: 'POST',
+                body: JSON.stringify({ name: name })
+            });
+            newSessionName.value = '';
+            await loadSessions(data.name);
+        } catch (e) {
+            alert(e.message);
+        }
+    });
+
+    composer.addEventListener('submit', async function (event) {
+        event.preventDefault();
+        if (!state.active) return;
+        if (state.sending) return;
+        const command = (commandInput.value || '').trim();
+        if (!command) return;
+
+        const submitSession = state.active;
+        const previousMessages = state.messages.slice();
+        state.messages = state.messages.concat([{
+            role: 'user',
+            content: command,
+            timestamp: new Date().toISOString(),
+            pending: true
+        }]);
+        renderMessages(state.messages);
+
+        setSending(true);
+        try {
+            commandInput.value = '';
+            commandInput.focus();
+            await api('/api/sessions/' + encodeURIComponent(submitSession) + '/run', {
+                method: 'POST',
+                body: JSON.stringify({ command: command })
+            });
+            await loadSessions(submitSession);
+        } catch (e) {
+            if (state.active === submitSession) {
+                state.messages = previousMessages;
+                renderMessages(state.messages);
+            }
+            alert(e.message);
+        } finally {
+            setSending(false);
+            commandInput.focus();
+        }
+    });
+
+    commandInput.addEventListener('keydown', function (event) {
+        if (event.key !== 'Enter' || event.isComposing) {
+            return;
+        }
+
+        // Shift+Enter / Option(Alt)+Enter: 换行
+        if (event.shiftKey || event.altKey) {
+            return;
+        }
+
+        // Enter / Ctrl+Enter: 发送
+        event.preventDefault();
+        if (!state.active || state.sending) {
+            return;
+        }
+        composer.requestSubmit();
+    });
+
+    refreshBtn.addEventListener('click', function () {
+        loadSessions(state.active).catch(function (e) { alert(e.message); });
+    });
+
+    removeBtn.addEventListener('click', async function () {
+        if (!state.active) return;
+        const yes = confirm('确认删除容器 ' + state.active + ' ? 仅删除容器，历史消息仍保留。');
+        if (!yes) return;
+        try {
+            const current = state.active;
+            await api('/api/sessions/' + encodeURIComponent(current) + '/remove', {
+                method: 'POST'
+            });
+            await loadSessions('');
+        } catch (e) {
+            alert(e.message);
+        }
+    });
+
+    removeAllBtn.addEventListener('click', async function () {
+        if (!state.active) return;
+        const yes = confirm('确认删除容器和聊天记录 ' + state.active + ' ? 删除后无法恢复。');
+        if (!yes) return;
+        try {
+            const current = state.active;
+            await api('/api/sessions/' + encodeURIComponent(current) + '/remove-with-history', {
+                method: 'POST'
+            });
+            await loadSessions('');
+        } catch (e) {
+            alert(e.message);
+        }
+    });
+
+    setSending(false);
+    loadSessions().catch(function (e) {
+        alert(e.message);
+    });
+})();

package/lib/web/static/login.css

@@ -0,0 +1,81 @@
+:root {
+    --bg: #f4f7f5;
+    --panel: #ffffff;
+    --line: #dbe4de;
+    --text: #0f2f20;
+    --muted: #4a6256;
+    --accent: #0f9d58;
+    --accent-strong: #087f45;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    min-height: 100vh;
+    display: grid;
+    place-items: center;
+    font-family: "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+    color: var(--text);
+    background: radial-gradient(circle at 0 0, #d8efe2 0%, var(--bg) 45%, #f5f8f6 100%);
+}
+
+.card {
+    width: min(420px, calc(100vw - 32px));
+    background: var(--panel);
+    border: 1px solid var(--line);
+    border-radius: 14px;
+    padding: 24px;
+}
+
+h1 {
+    margin: 0 0 6px;
+    font-size: 22px;
+}
+
+p {
+    margin: 0 0 18px;
+    color: var(--muted);
+    font-size: 13px;
+}
+
+label {
+    display: block;
+    margin: 10px 0 6px;
+    font-size: 13px;
+    font-weight: 600;
+}
+
+input {
+    width: 100%;
+    border: 1px solid var(--line);
+    border-radius: 10px;
+    padding: 10px 11px;
+    font-size: 14px;
+}
+
+button {
+    width: 100%;
+    margin-top: 14px;
+    border: none;
+    border-radius: 10px;
+    padding: 10px 12px;
+    font-size: 14px;
+    font-weight: 700;
+    color: #fff;
+    background: var(--accent);
+    cursor: pointer;
+}
+
+button:hover {
+    background: var(--accent-strong);
+}
+
+.error {
+    margin-top: 10px;
+    min-height: 20px;
+    font-size: 13px;
+    color: #b00020;
+}