@xcanwin/manyoyo 5.2.9 → 5.2.15

package/lib/web/frontend/app.css

@@ -104,17 +104,16 @@ body::after {
     z-index: 1;
     height: 100vh;
     height: 100dvh;
-    padding: 18px;
+    padding: 0;
     display: grid;
     grid-template-columns: minmax(282px, 334px) minmax(0, 1fr);
-    gap: 16px;
+    gap: 0;
 }
 
 .sidebar,
 .main {
-    border-radius: 18px;
-    border: 1px solid var(--line);
-    box-shadow: var(--shadow-soft);
+    border-radius: 0;
+    border: none;
 }
 
 .sidebar {
@@ -125,6 +124,7 @@ body::after {
     gap: 12px;
     background:
         linear-gradient(165deg, #fffefd 0%, #f8f1e7 100%);
+    border-right: 1px solid var(--line);
     animation: panelIn 320ms ease both;
 }
 
@@ -246,12 +246,17 @@ textarea:focus-visible {
 }
 
 .mobile-session-toggle,
-.mobile-actions-toggle,
 .mobile-sidebar-close,
 .sidebar-backdrop {
     display: none;
 }
 
+.mobile-actions-toggle {
+    display: inline-flex;
+    padding: 8px 12px;
+    font-size: 13px;
+}
+
 .sidebar-backdrop[hidden] {
     display: none !important;
 }
@@ -561,6 +566,7 @@ textarea:focus-visible {
 }
 
 .header {
+    position: relative;
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
@@ -570,6 +576,7 @@ textarea:focus-visible {
 }
 
 .header-main {
+    flex: 1;
     min-width: 0;
     display: flex;
     flex-direction: column;
@@ -605,10 +612,23 @@ textarea:focus-visible {
 }
 
 .header-actions {
-    display: flex;
-    align-items: center;
+    display: none;
+    position: absolute;
+    top: calc(100% + 6px);
+    right: 8px;
+    z-index: 8;
+    width: min(240px, calc(100vw - 36px));
+    padding: 8px;
+    border: 1px solid var(--line);
+    border-radius: 10px;
+    background: #fffaf2;
+    box-shadow: var(--shadow-strong);
+    grid-template-columns: 1fr;
     gap: 8px;
-    flex-wrap: wrap;
+}
+
+body.mobile-actions-open .header-actions {
+    display: grid;
 }
 
 .mode-switch {
@@ -652,17 +672,6 @@ body.terminal-mode #modeTerminalBtn {
     border-color: var(--accent-strong);
 }
 
-.mode-terminal-controls {
-    display: none;
-    align-items: center;
-    gap: 8px;
-    min-width: 0;
-}
-
-body.terminal-mode .mode-terminal-controls {
-    display: inline-flex;
-}
-
 #messages {
     min-height: 0;
     overflow-y: auto;
@@ -682,28 +691,13 @@ body.terminal-mode .mode-terminal-controls {
     min-height: 0;
     display: none;
     flex-direction: column;
-    gap: 8px;
-    margin: 10px 8px 0;
-    padding: 12px;
-    border: 1px solid var(--line);
-    border-radius: 14px;
-    background: rgba(255, 251, 245, 0.9);
-}
-
-.terminal-status {
-    display: inline-block;
-    color: var(--muted);
-    font-size: 12px;
-    white-space: nowrap;
+    margin: 4px 0 0;
 }
 
 #terminalScreen {
     flex: 1;
     min-height: 0;
     height: 100%;
-    border-radius: 12px;
-    border: 1px solid #2a3544;
-    box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.14);
     overflow: hidden;
     background: var(--terminal-bg);
 }
@@ -711,18 +705,13 @@ body.terminal-mode .mode-terminal-controls {
 #terminalScreen .xterm {
     width: 100%;
     height: 100%;
-    padding: 8px 6px;
+    padding: 4px 6px;
 }
 
 #terminalScreen .xterm-screen {
     width: 100%;
 }
 
-.terminal-foot {
-    color: var(--muted);
-    font-size: 12px;
-}
-
 body.command-mode #messages {
     display: flex;
 }
@@ -989,13 +978,14 @@ body.command-mode .msg.origin-agent .bubble {
 
     .sidebar {
         position: fixed;
-        left: max(10px, env(safe-area-inset-left));
-        top: max(10px, env(safe-area-inset-top));
-        bottom: max(10px, env(safe-area-inset-bottom));
+        left: env(safe-area-inset-left, 0px);
+        top: env(safe-area-inset-top, 0px);
+        bottom: env(safe-area-inset-bottom, 0px);
         width: min(86vw, 346px);
         max-width: 346px;
         max-height: none;
         background: rgba(255, 252, 246, 0.98);
+        border-radius: 0;
         z-index: 40;
         transform: translateX(calc(-100% - 16px));
         opacity: 0;
@@ -1012,14 +1002,15 @@ body.command-mode .msg.origin-agent .bubble {
 
     .main {
         position: fixed;
-        left: max(10px, env(safe-area-inset-left));
-        right: max(10px, env(safe-area-inset-right));
-        top: max(10px, env(safe-area-inset-top));
-        bottom: max(10px, env(safe-area-inset-bottom));
+        left: env(safe-area-inset-left, 0px);
+        right: env(safe-area-inset-right, 0px);
+        top: env(safe-area-inset-top, 0px);
+        bottom: env(safe-area-inset-bottom, 0px);
         height: auto;
         min-height: auto;
         overflow: hidden;
         z-index: 1;
+        grid-template-columns: minmax(0, 1fr);
     }
 
     #messages,
@@ -1040,10 +1031,6 @@ body.command-mode .msg.origin-agent .bubble {
         font-size: 13px;
     }
 
-    .mobile-actions-toggle {
-        display: none;
-    }
-
     .sidebar-backdrop {
         display: block;
         position: fixed;
@@ -1068,7 +1055,6 @@ body.command-mode .msg.origin-agent .bubble {
     }
 
     .header {
-        position: relative;
         padding: 10px 12px 16px;
     }
 
@@ -1080,57 +1066,21 @@ body.command-mode .msg.origin-agent .bubble {
         display: none;
     }
 
-    .header-actions {
-        display: none;
-        position: absolute;
-        top: calc(100% + 6px);
-        right: 8px;
-        z-index: 8;
-        width: min(240px, calc(100vw - 36px));
-        padding: 8px;
-        border: 1px solid var(--line);
-        border-radius: 10px;
-        background: #fffaf2;
-        box-shadow: var(--shadow-strong);
-        grid-template-columns: 1fr;
-        gap: 8px;
-    }
-
-    body.mobile-actions-open .header-actions {
-        display: grid;
-    }
-
-    .mobile-actions-toggle {
-        display: inline-flex;
-        padding: 8px 12px;
-        font-size: 13px;
-    }
-
     .mode-switch {
         margin: 8px 8px 2px;
-        overflow-x: auto;
+        flex-wrap: wrap;
         padding: 8px;
         gap: 8px;
     }
 
-    .mode-switch-left,
-    .mode-terminal-controls,
-    .mode-switch button {
-        flex: 0 0 auto;
+    .mode-switch-left {
+        flex: 1 1 auto;
+        min-width: 0;
     }
 
     .mode-switch button {
-        min-width: 90px;
-    }
-
-    .mode-terminal-controls {
-        gap: 6px;
-    }
-
-    .terminal-status {
-        max-width: 5.2em;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        flex: 0 0 auto;
+        min-width: 84px;
     }
 
     #commandInput {

package/lib/web/frontend/app.html

@@ -70,16 +70,12 @@
                     <button type="button" id="modeCommandBtn" class="secondary">命令模式</button>
                     <button type="button" id="modeTerminalBtn" class="secondary">交互终端</button>
                 </div>
-                <div class="mode-terminal-controls">
-                    <button type="button" id="terminalConnectBtn">连接终端</button>
-                    <button type="button" id="terminalDisconnectBtn" class="secondary">断开终端</button>
-                    <span id="terminalStatus" class="terminal-status">未连接</span>
-                </div>
+
             </section>
             <section id="messages"></section>
             <section id="terminalPanel" hidden>
                 <div id="terminalScreen" aria-label="终端输出区域"></div>
-                <div class="terminal-foot">点击终端后可直接输入；适用于 codex / claude 等交互式 agent。</div>
+
             </section>
             <form class="composer" id="composer">
                 <div class="composer-inner">

package/lib/web/frontend/app.js

@@ -118,9 +118,6 @@
     const modeTerminalBtn = document.getElementById('modeTerminalBtn');
     const messagesNode = document.getElementById('messages');
     const terminalPanel = document.getElementById('terminalPanel');
-    const terminalConnectBtn = document.getElementById('terminalConnectBtn');
-    const terminalDisconnectBtn = document.getElementById('terminalDisconnectBtn');
-    const terminalStatus = document.getElementById('terminalStatus');
     const terminalScreen = document.getElementById('terminalScreen');
     const composer = document.getElementById('composer');
     const commandInput = document.getElementById('commandInput');
@@ -565,15 +562,6 @@
         state.terminal.term.writeln(text);
     }
 
-    function renderTerminalIntro() {
-        if (!state.terminal.term) return;
-        state.terminal.term.reset();
-        writeTerminalLine('MANYOYO Interactive Terminal');
-        writeTerminalLine(state.active ? ('当前会话: ' + state.active) : '当前会话: 未选择');
-        writeTerminalLine('点击“连接终端”后可运行 codex / claude 等交互式 agent。');
-        writeTerminalLine('');
-    }
-
     function resolveFitAddonCtor() {
         if (window.FitAddon && typeof window.FitAddon.FitAddon === 'function') {
             return window.FitAddon.FitAddon;
@@ -710,7 +698,6 @@
             notifyTerminalResize(false);
         });
         state.terminal.terminalReady = true;
-        renderTerminalIntro();
         return true;
     }
 
@@ -856,10 +843,6 @@
         return MOBILE_LAYOUT_MEDIA.matches;
     }
 
-    function isMobileCompactLayout() {
-        return MOBILE_COMPACT_MEDIA.matches;
-    }
-
     function setMobileSessionPanel(open) {
         state.mobileSidebarOpen = Boolean(open);
         const mobileLayout = isMobileLayout();
@@ -885,14 +868,9 @@
 
     function setMobileActionsMenu(open) {
         state.mobileActionsOpen = Boolean(open);
-        const compactLayout = isMobileCompactLayout();
-        if (!compactLayout) {
-            state.mobileActionsOpen = false;
-        }
-        const shouldOpen = state.mobileActionsOpen && compactLayout;
-        document.body.classList.toggle('mobile-actions-open', shouldOpen);
+        document.body.classList.toggle('mobile-actions-open', state.mobileActionsOpen);
         if (mobileActionsToggle) {
-            mobileActionsToggle.setAttribute('aria-expanded', shouldOpen ? 'true' : 'false');
+            mobileActionsToggle.setAttribute('aria-expanded', state.mobileActionsOpen ? 'true' : 'false');
         }
     }
 
@@ -986,16 +964,6 @@
         if (createModal) {
             createModal.hidden = !state.createModalOpen;
         }
-        if (terminalConnectBtn) {
-            terminalConnectBtn.disabled = !state.active || busy || state.terminal.connecting || state.terminal.connected;
-        }
-        if (terminalDisconnectBtn) {
-            terminalDisconnectBtn.disabled = !(state.terminal.connecting || state.terminal.connected);
-        }
-        if (terminalStatus) {
-            terminalStatus.textContent = state.terminal.status;
-        }
-
         if (!state.active) {
             sendState.textContent = '未选择会话';
         } else if (agentMode && !agentEnabled) {
@@ -1194,8 +1162,10 @@
             closeMobileSessionPanel();
         }
         if (state.mode === 'terminal' && ensureTerminalReady()) {
-            renderTerminalIntro();
             scheduleTerminalFit(false);
+            if (!state.terminal.connected && !state.terminal.connecting) {
+                connectTerminal();
+            }
         }
         renderSessionActiveState();
         syncUi();
@@ -1528,8 +1498,8 @@
         }
 
         if (state.mode === 'terminal' && ensureTerminalReady() && !state.terminal.connected && !state.terminal.connecting) {
-            renderTerminalIntro();
             scheduleTerminalFit(false);
+            connectTerminal();
         }
 
         if (opts.reloadMessages) {
@@ -1879,28 +1849,15 @@
             renderMessages(state.messages, { forceFullRender: true });
             syncUi();
             if (ensureTerminalReady()) {
-                if (!state.terminal.connected && !state.terminal.connecting) {
-                    renderTerminalIntro();
-                }
                 scheduleTerminalFit(false);
                 state.terminal.term.focus();
+                if (!state.terminal.connected && !state.terminal.connecting) {
+                    connectTerminal();
+                }
             }
         });
     }
 
-    if (terminalConnectBtn) {
-        terminalConnectBtn.addEventListener('click', function () {
-            connectTerminal();
-        });
-    }
-
-    if (terminalDisconnectBtn) {
-        terminalDisconnectBtn.addEventListener('click', function () {
-            disconnectTerminal('终端已手动断开');
-            syncUi();
-        });
-    }
-
     refreshBtn.addEventListener('click', function () {
         closeMobileActionsMenu();
         loadSessions(state.active).catch(function (e) { alert(e.message); });
@@ -1993,7 +1950,6 @@
 
     document.addEventListener('click', function (event) {
         if (!state.mobileActionsOpen) return;
-        if (!isMobileCompactLayout()) return;
         const target = event.target;
         if (mobileActionsToggle && mobileActionsToggle.contains(target)) return;
         if (headerActions && headerActions.contains(target)) return;

package/lib/web/server.js

@@ -940,9 +940,36 @@ function buildCreateRuntime(ctx, state, payload) {
     };
 }
 
+// Estimate container start time from "Up X hours/minutes/seconds" status string.
+// Uses relative time to avoid Podman Machine VM clock drift issues.
+function estimateStartTimeFromStatus(status) {
+    if (!status) return null;
+    const s = status.trim().toLowerCase();
+    if (!s.startsWith('up ')) return null;
+    const rest = s.slice(3).trim();
+    const now = Date.now();
+
+    const units = [
+        { re: /^(\d+)\s+week/, ms: 7 * 24 * 3600 * 1000 },
+        { re: /^(\d+)\s+day/, ms: 24 * 3600 * 1000 },
+        { re: /^(\d+)\s+hour/, ms: 3600 * 1000 },
+        { re: /^(\d+)\s+min/, ms: 60 * 1000 },
+        { re: /^(\d+)\s+second/, ms: 1000 },
+    ];
+    for (const { re, ms } of units) {
+        const m = rest.match(re);
+        if (m) return new Date(now - parseInt(m[1]) * ms).toISOString();
+    }
+    // "about a minute", "a minute", "about an hour", "an hour", "less than a second"
+    if (/\bminute\b/.test(rest)) return new Date(now - 60 * 1000).toISOString();
+    if (/\bhour\b/.test(rest)) return new Date(now - 3600 * 1000).toISOString();
+    if (/\bsecond\b/.test(rest)) return new Date(now).toISOString();
+    return null;
+}
+
 function listWebManyoyoContainers(ctx) {
     const output = ctx.dockerExecArgs(
-        ['ps', '-a', '--filter', 'label=manyoyo.default_cmd', '--format', '{{.Names}}\t{{.Status}}\t{{.Image}}'],
+        ['ps', '-a', '--format', '{{.Names}}\t{{.Status}}\t{{.Image}}'],
         { ignoreError: true }
     );
 
@@ -956,10 +983,15 @@ function listWebManyoyoContainers(ctx) {
         if (!ctx.isValidContainerName(name)) {
             return;
         }
+        const imageName = image || '';
+        if (!imageName.includes('manyoyo') && !name.startsWith('manyoyo-') && !name.startsWith('my-')) {
+            return;
+        }
         map[name] = {
             name,
             status: status || 'unknown',
-            image: image || ''
+            image: imageName,
+            createdAt: estimateStartTimeFromStatus(status)
         };
     });
 
@@ -1117,7 +1149,7 @@ function buildSessionSummary(ctx, state, containerMap, name) {
     const agentMeta = getAgentRuntimeMeta(history);
     const latestMessage = history.messages.length ? history.messages[history.messages.length - 1] : null;
     const containerInfo = containerMap[name] || {};
-    const updatedAt = history.updatedAt || (latestMessage && latestMessage.timestamp) || null;
+    const updatedAt = history.updatedAt || (latestMessage && latestMessage.timestamp) || containerInfo.createdAt || null;
     return {
         name,
         status: containerInfo.status || 'history',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xcanwin/manyoyo",
-    "version": "5.2.9",
+    "version": "5.2.15",
     "imageVersion": "1.8.1-common",
     "description": "AI Agent CLI Security Sandbox for Docker and Podman",
     "keywords": [