myagent-ai 1.7.3 → 1.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myagent-ai",
-  "version": "1.7.3",
+  "version": "1.7.4",
   "description": "本地桌面端执行型AI助手 - Open Interpreter 风格 | Local Desktop Execution-Oriented AI Assistant",
   "main": "main.py",
   "bin": {

package/web/ui/chat/chat.css

@@ -588,6 +588,13 @@ input,textarea,select{font:inherit}
 }
 .rp-section-toggle:hover{background:var(--bg4);color:var(--text)}
 .rp-section-toggle.expanded{transform:rotate(90deg)}
+.rp-section-action-btn{
+  width:20px;height:20px;border-radius:3px;border:none;
+  background:transparent;color:var(--text3);
+  display:inline-grid;place-items:center;flex-shrink:0;
+  cursor:pointer;transition:var(--transition);
+}
+.rp-section-action-btn:hover{background:var(--bg4);color:var(--accent)}
 
 /* Master Agent Card (全权Agent) */
 .rp-master-card{
@@ -1204,8 +1211,9 @@ input,textarea,select{font:inherit}
   opacity:0;position:absolute;right:8px;top:50%;transform:translateY(-50%);
   width:24px;height:24px;border-radius:4px;display:grid;place-items:center;
   background:var(--bg2);transition:var(--transition);font-size:12px;color:var(--text3);
+  pointer-events:none;
 }
-.group-item:hover .group-delete{opacity:1}
+.group-item:hover .group-delete{opacity:1;pointer-events:auto}
 .group-delete:hover{background:var(--danger);color:#fff}
 
 /* Group Chat Messages */
@@ -1643,3 +1651,143 @@ input,textarea,select{font:inherit}
     font-family: inherit;
     white-space: pre-wrap;
   }
+
+/* ══════════════════════════════════════════════════════
+   ── Mobile Responsive (≤768px) ──
+   ══════════════════════════════════════════════════════ */
+
+/* ── Mobile Overlay Backdrop (placed outside media query so JS can always use it) ── */
+.mobile-overlay{
+  position:fixed;inset:0;
+  background:rgba(0,0,0,.4);
+  z-index:45;
+  opacity:0;visibility:hidden;
+  transition:opacity .3s ease,visibility .3s ease;
+  pointer-events:none;
+}
+.mobile-overlay.active{
+  opacity:1;visibility:visible;
+  pointer-events:auto;
+}
+
+@media(max-width:768px){
+
+  /* ── Sidebar: Fixed overlay sliding from left ── */
+  .sidebar{
+    position:fixed;
+    left:0;top:0;
+    width:85vw;max-width:320px;
+    height:100vh;
+    z-index:50;
+    transform:translateX(-100%);
+    transition:transform .3s cubic-bezier(.4,0,.2,1);
+    box-shadow:none;
+  }
+  .sidebar.mobile-open{
+    transform:translateX(0);
+    box-shadow:4px 0 24px rgba(0,0,0,.15);
+  }
+
+  /* ── Agent Panel: Fixed overlay sliding from right ── */
+  .agent-panel{
+    position:fixed;
+    right:0;top:0;
+    width:85vw;max-width:340px;
+    height:100vh;
+    z-index:50;
+    transform:translateX(100%);
+    transition:transform .3s cubic-bezier(.4,0,.2,1);
+    box-shadow:none;
+  }
+  .agent-panel.mobile-open{
+    transform:translateX(0);
+    box-shadow:-4px 0 24px rgba(0,0,0,.15);
+  }
+
+  /* ── Hide desktop toggle buttons on mobile ── */
+  .sidebar-toggle,
+  .agent-toggle{
+    display:none!important;
+  }
+
+  /* ── Header ── */
+  .main-header{
+    height:50px;min-height:50px;
+    padding:0 12px;
+  }
+  .main-title{
+    font-size:14px;
+    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+    min-width:0;
+  }
+
+  /* ── Messages ── */
+  .messages-container{
+    padding:12px;
+  }
+  .messages-inner{
+    max-width:100%;
+  }
+  .message-bubble{
+    max-width:88%;
+  }
+  .message-bubble pre{
+    font-size:12px;
+  }
+
+  /* ── Input Area ── */
+  .input-area{
+    padding:10px 12px;
+  }
+  .input-wrapper{
+    max-width:100%;
+  }
+  .input-box textarea{
+    min-height:60px;
+  }
+
+  /* ── Modals ── */
+  .modal,
+  .agent-modal,
+  .platform-modal{
+    width:95%;max-height:90vh;padding:20px;
+  }
+
+  /* ── Toast ── */
+  .toast-container{
+    top:12px;right:12px;left:12px;
+  }
+  .toast{
+    max-width:100%;
+  }
+
+  /* ── Welcome Card Capabilities ── */
+  .capabilities{
+    grid-template-columns:1fr 1fr;
+  }
+
+  /* ── Execution Timer ── */
+  .exec-timer{
+    max-width:100%;
+  }
+
+  /* ── Empty State ── */
+  .empty-icon{
+    font-size:40px;
+  }
+  .empty-title{
+    font-size:16px;
+  }
+}
+
+/* ══════════════════════════════════════════════════════
+   ── Very Small Phones (≤480px) ──
+   ══════════════════════════════════════════════════════ */
+@media(max-width:480px){
+  .message-bubble{
+    max-width:92%;
+  }
+  .main-header{
+    padding:0 8px;
+  }
+}

package/web/ui/chat/chat_container.html

@@ -18,6 +18,9 @@
   <div id="rightAgentsContainer"></div>
 </div>
 
+<!-- Mobile Overlay -->
+<div class="mobile-overlay" id="chatMobileOverlay"></div>
+
 <!-- Toast Container -->
 <div class="toast-container" id="toastContainer"></div>
 

package/web/ui/chat/chat_main.js

@@ -28,18 +28,119 @@ initTheme();
 document.getElementById('themeToggle')?.addEventListener('click', toggleTheme);
 
 // ── Sidebar Collapse ──
+function isMobile() { return window.innerWidth <= 768; }
+
 function toggleSidebar() {
   const sidebar = document.getElementById('sidebar');
   const toggleBtn = document.getElementById('sidebarToggle');
   if (!sidebar) return;
-  sidebar.classList.toggle('collapsed');
-  const isCollapsed = sidebar.classList.contains('collapsed');
-  if (toggleBtn) toggleBtn.textContent = isCollapsed ? '▶' : '◀';
-  localStorage.setItem('myagent-sidebar-collapsed', isCollapsed);
+  if (isMobile()) {
+    // Mobile: toggle as overlay
+    const overlay = document.getElementById('chatMobileOverlay');
+    const isOpen = sidebar.classList.contains('mobile-open');
+    if (isOpen) {
+      closeMobileSidebar();
+    } else {
+      sidebar.classList.add('mobile-open');
+      if (overlay) overlay.classList.add('active');
+      // Close agent panel if open
+      closeMobileAgentPanel();
+    }
+  } else {
+    // Desktop: collapse/expand
+    sidebar.classList.toggle('collapsed');
+    const isCollapsed = sidebar.classList.contains('collapsed');
+    if (toggleBtn) toggleBtn.textContent = isCollapsed ? '▶' : '◀';
+    localStorage.setItem('myagent-sidebar-collapsed', isCollapsed);
+  }
+}
+
+function closeMobileSidebar() {
+  const sidebar = document.getElementById('sidebar');
+  const overlay = document.getElementById('chatMobileOverlay');
+  if (sidebar) sidebar.classList.remove('mobile-open');
+  if (overlay) overlay.classList.remove('active');
+}
+
+function toggleMobileAgentPanel() {
+  const panel = document.getElementById('agentPanel');
+  const overlay = document.getElementById('chatMobileOverlay');
+  if (!panel) return;
+  const isOpen = panel.classList.contains('mobile-open');
+  if (isOpen) {
+    closeMobileAgentPanel();
+  } else {
+    panel.classList.add('mobile-open');
+    if (overlay) overlay.classList.add('active');
+    // Close sidebar if open
+    closeMobileSidebar();
+  }
+}
+
+function closeMobileAgentPanel() {
+  const panel = document.getElementById('agentPanel');
+  const overlay = document.getElementById('chatMobileOverlay');
+  if (panel) panel.classList.remove('mobile-open');
+  if (overlay) overlay.classList.remove('active');
+}
+
+// Mobile overlay click closes both panels
+document.addEventListener('click', function(e) {
+  if (e.target && e.target.id === 'chatMobileOverlay') {
+    closeMobileSidebar();
+    closeMobileAgentPanel();
+  }
+});
+
+// Show/hide mobile agents button based on screen size
+function checkChatMobile() {
+  const btn = document.getElementById('mobileAgentsBtn');
+  if (btn) btn.style.display = isMobile() ? 'grid' : 'none';
 }
-// Restore sidebar state
+window.addEventListener('resize', checkChatMobile);
+// Run after DOM ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', checkChatMobile);
+} else {
+  checkChatMobile();
+}
+
+// Override toggleAgentPanel for mobile (deferred since function is defined later)
+var _origToggleAgentPanel = null;
+(function() {
+  var origDef = toggleAgentPanel;
+  if (typeof origDef === 'function') {
+    _origToggleAgentPanel = origDef;
+    toggleAgentPanel = function() {
+      if (isMobile()) {
+        toggleMobileAgentPanel();
+      } else {
+        _origToggleAgentPanel();
+      }
+    };
+  }
+})();
+// Also override after definition via setTimeout (fallback)
+setTimeout(function() {
+  if (!_origToggleAgentPanel && typeof toggleAgentPanel === 'function') {
+    // Check if it's already the mobile version
+    var testFn = toggleAgentPanel.toString();
+    if (testFn.indexOf('toggleMobileAgentPanel') === -1) {
+      _origToggleAgentPanel = toggleAgentPanel;
+      toggleAgentPanel = function() {
+        if (isMobile()) {
+          toggleMobileAgentPanel();
+        } else {
+          _origToggleAgentPanel();
+        }
+      };
+    }
+  }
+}, 0);
+
+// Restore sidebar state (desktop only)
 (function() {
-  if (localStorage.getItem('myagent-sidebar-collapsed') === 'true') {
+  if (localStorage.getItem('myagent-sidebar-collapsed') === 'true' && !isMobile()) {
     const sidebar = document.getElementById('sidebar');
     const toggleBtn = document.getElementById('sidebarToggle');
     if (sidebar) sidebar.classList.add('collapsed');
@@ -966,6 +1067,7 @@ async function selectAgent(agentPath) {
   // 如果 loadSessions 已经 auto-selected 了 session，UI 已由 selectSession 设置好，不再覆盖
 
   document.getElementById('userInput').focus();
+  if (isMobile()) closeMobileAgentPanel();
   // Reload task plan if in exec mode
   if (state.chatMode === 'exec') loadTaskPlan();
   // Reset escalation and update exec mode UI
@@ -1434,9 +1536,13 @@ function newChat() {
 async function selectSession(id) {
   if (id === '__new__') {
     newChat();
+    if (isMobile()) closeMobileSidebar();
+    return;
+  }
+  if (state.activeSessionId === id && state.messages.length > 0) {
+    if (isMobile()) closeMobileSidebar();
     return;
   }
-  if (state.activeSessionId === id && state.messages.length > 0) return;
 
   // 重置生成状态，防止残留的 isGenerating=true 导致输入框锁定
   state.isGenerating = false;
@@ -1470,6 +1576,7 @@ async function selectSession(id) {
   }
   renderMessages();
   document.getElementById('userInput').focus();
+  if (isMobile()) closeMobileSidebar();
 }
 
 async function deleteSession(id) {

package/web/ui/chat/groupchat.js

@@ -37,7 +37,7 @@ async function fetchGroups() {
 async function createGroupApi(name, description, emoji, color, members) {
   return await api('/api/groups', {
     method: 'POST',
-    body: JSON.stringify({ name, description, emoji, color, members }),
+    body: JSON.stringify({ name, description, avatar_emoji: emoji, avatar_color: color, members }),
   });
 }
 
@@ -109,13 +109,12 @@ function renderGroups() {
     var memberCount = (g.members || []).length;
     var isActive = g.id === currentGroupId;
     html += '<div class="group-item ' + (isActive ? 'active' : '') + '" onclick="selectGroup(\'' + escapeHtml(g.id) + '\')" title="' + escapeHtml(g.name) + '">';
-    html += '<div class="group-icon">' + escapeHtml(g.emoji || '👥') + '</div>';
+    html += '<div class="group-icon"' + (g.avatar_color ? ' style="background:' + escapeHtml(g.avatar_color) + ';color:#fff"' : '') + '>' + escapeHtml(g.avatar_emoji || g.emoji || '👥') + '</div>';
     html += '<div class="group-info">';
     html += '<div class="group-name">' + escapeHtml(g.name) + '</div>';
     html += '<div class="group-preview">' + escapeHtml(g.description || memberCount + ' 位成员') + '</div>';
     html += '</div>';
     html += '<span class="group-badge">' + memberCount + '</span>';
-    html += '<button class="group-delete" onclick="event.stopPropagation();deleteGroupConfirm(\'' + escapeHtml(g.id) + '\')" title="删除">✕</button>';
     html += '</div>';
   }
   listEl.innerHTML = html;
@@ -145,7 +144,7 @@ async function selectGroup(gid) {
     var groupData = await getGroup(gid);
 
     // Update header
-    document.getElementById('headerTitle').textContent = (groupData.emoji || '👥') + ' ' + groupData.name;
+    document.getElementById('headerTitle').textContent = (groupData.avatar_emoji || groupData.emoji || '👥') + ' ' + groupData.name;
     document.getElementById('activeAgentBadge').style.display = 'none';
     document.getElementById('groupBackBtn').style.display = '';
     document.getElementById('groupSettingsBtn').style.display = '';
@@ -217,7 +216,7 @@ function renderGroupMessages() {
   if (groupMessages.length === 0) {
     var group = groups.find(function(g) { return g.id === currentGroupId; });
     html = '<div class="welcome-card">'
-      + '<h2><span class="emoji">' + escapeHtml((group && group.emoji) || '👥') + '</span>'
+      + '<h2><span class="emoji">' + escapeHtml((group && (group.avatar_emoji || group.emoji)) || '👥') + '</span>'
       + ' <span>群聊: ' + escapeHtml((group && group.name) || '') + '</span></h2>'
       + '<p class="subtitle">向所有成员发送消息，每个 Agent 会分别回复</p>'
       + '</div>';
@@ -426,8 +425,8 @@ async function showGroupSettingsModal() {
       + '</div>'
       + '<div class="agent-form-group"><label>头像</label>'
       + '<div class="agent-avatar-picker" id="groupSettingsEmojiPicker">'
-      + emojis.map(function(e) { return '<div class="agent-avatar-option ' + ((groupData.emoji || '👥') === e ? 'selected' : '') + '" onclick="pickGroupSettingsEmoji(this,\'' + e + '\')" data-emoji="' + e + '">' + e + '</div>'; }).join('')
-      + '</div><input type="hidden" id="groupSettingsEmoji" value="' + escapeHtml(groupData.emoji || '👥') + '"></div>'
+      + emojis.map(function(e) { return '<div class="agent-avatar-option ' + ((groupData.avatar_emoji || groupData.emoji || '👥') === e ? 'selected' : '') + '" onclick="pickGroupSettingsEmoji(this,\'' + e + '\')" data-emoji="' + e + '">' + e + '</div>'; }).join('')
+      + '</div><input type="hidden" id="groupSettingsEmoji" value="' + escapeHtml(groupData.avatar_emoji || groupData.emoji || '👥') + '"></div>'
       + '<div class="agent-form-group"><label>成员 (' + members.length + ')</label>'
       + '<div style="margin-bottom:8px">'
       + '<button class="config-action-btn" onclick="showAddMemberToGroup()" style="font-size:12px;padding:6px 12px">'
@@ -463,14 +462,14 @@ async function saveGroupSettings() {
     await updateGroup(currentGroupId, {
       name: name,
       description: document.getElementById('groupSettingsDesc').value.trim(),
-      emoji: document.getElementById('groupSettingsEmoji').value
+      avatar_emoji: document.getElementById('groupSettingsEmoji').value
     });
     toast('群聊设置已保存', 'success');
     closeGroupModal();
     await fetchGroups();
     var group = groups.find(function(g) { return g.id === currentGroupId; });
     if (group) {
-      document.getElementById('headerTitle').textContent = (group.emoji || '👥') + ' ' + group.name;
+      document.getElementById('headerTitle').textContent = (group.avatar_emoji || group.emoji || '👥') + ' ' + group.name;
     }
   } catch (e) {
     toast('保存失败: ' + e.message, 'error');

package/web/ui/chat/middle_chat.html

@@ -12,6 +12,9 @@
         </span>
       </div>
       <div class="header-actions">
+        <button class="header-btn" id="mobileAgentsBtn" onclick="toggleMobileAgentPanel()" title="Agents" style="display:none">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+        </button>
         <button class="header-btn" id="groupBackBtn" onclick="exitGroupChat()" title="返回对话" style="display:none">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
         </button>

package/web/ui/chat/right_agents.html

@@ -39,7 +39,12 @@
       <div id="rpGroupSection">
         <div class="rp-section-header" onclick="toggleRpSection('group')">
           <span class="rp-section-title">👥 群聊</span>
-          <span class="rp-section-toggle expanded" id="rpGroupToggle">▶</span>
+          <div style="display:flex;align-items:center;gap:4px">
+            <button class="rp-section-action-btn" onclick="event.stopPropagation();showCreateGroupModal()" title="创建群聊">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+            </button>
+            <span class="rp-section-toggle expanded" id="rpGroupToggle">▶</span>
+          </div>
         </div>
         <div class="rp-section-body" id="rpGroupBody">
           <div class="group-list" id="groupList">

package/web/ui/index.html

@@ -151,6 +151,29 @@ tr:hover{background:var(--surface2)}
 [data-theme="claude"] .badge-red{background:#c9444422}
 [data-theme="claude"] .badge-yellow{background:#c4862b22}
 [data-theme="claude"] .badge-blue{background:#4a7fc922}
+/* ── Mobile Responsive ── */
+@media(max-width:768px){
+  body{flex-direction:column}
+  .sidebar{position:fixed;left:0;top:0;height:100vh;width:260px;max-width:80vw;z-index:50;transform:translateX(-100%);transition:transform .3s ease;flex-shrink:0}
+  .sidebar.mobile-open{transform:translateX(0)}
+  .sidebar.collapsed{width:260px;transform:translateX(-100%)}
+  .sidebar.collapsed.mobile-open{transform:translateX(0)}
+  .sidebar-toggle{display:none!important}
+  .mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:45;display:none}
+  .mobile-overlay.active{display:block}
+  .header{padding:12px 16px}
+  .header h2{font-size:16px}
+  .content{padding:16px}
+  .grid{grid-template-columns:1fr}
+  .form-row{grid-template-columns:1fr}
+  .table-wrap{overflow-x:auto}
+  .modal{width:95%;max-height:90vh;padding:16px}
+  .modal-wide{max-width:95%}
+  .tabs{gap:0;overflow-x:auto}
+  .toast{left:16px;right:16px;bottom:16px}
+  .agent-card{flex-direction:column;align-items:flex-start}
+  .agent-card .flex.flex-col{flex-direction:row;gap:4px}
+}
 </style>
 </head>
 <body>
@@ -181,8 +204,9 @@ tr:hover{background:var(--surface2)}
     · <a href="#" onclick="checkUpdate(true)" style="color:var(--primary)">检查更新</a>
   </div>
 </div>
+<div class="mobile-overlay" id="adminMobileOverlay" onclick="closeMobileSidebar()"></div>
 <div class="main">
-  <div class="header"><div style="display:flex;align-items:center;gap:12px"><h2 id="pageTitle">📊 仪表盘</h2><button class="header-btn" id="themeToggle" title="切换主题"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div><div style="display:flex;align-items:center;gap:8px"><span class="status-dot"></span>运行中</div></div>
+  <div class="header"><div style="display:flex;align-items:center;gap:12px"><button class="header-btn" id="mobileMenuBtn" onclick="toggleMobileSidebar()" style="display:none" title="菜单"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg></button><h2 id="pageTitle">📊 仪表盘</h2><button class="header-btn" id="themeToggle" title="切换主题"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div><div style="display:flex;align-items:center;gap:8px"><span class="status-dot"></span>运行中</div></div>
   <div class="content" id="content"></div>
 </div>
 <div id="modalContainer"></div>
@@ -250,12 +274,28 @@ function initTheme(){const s=localStorage.getItem('myagent-theme')||'claude';doc
 function toggleTheme(){const c=document.documentElement.getAttribute('data-theme')||'claude';const n=c==='claude'?'dark':'claude';document.documentElement.setAttribute('data-theme',n);localStorage.setItem('myagent-theme',n);updateThemeIcon(n)}
 function updateThemeIcon(t){const b=document.getElementById('themeToggle');if(!b)return;if(t==='dark'){b.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>';b.title='切换到 Claude 风格'}else{b.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>';b.title='切换到夜间模式'}}
 // ── Sidebar Collapse ──
-function toggleSidebar(){const s=document.getElementById('adminSidebar');const t=document.getElementById('sidebarToggle');if(!s)return;s.classList.toggle('collapsed');const isCollapsed=s.classList.contains('collapsed');t.textContent=isCollapsed?'▶':'◀';localStorage.setItem('myagent-admin-sidebar-collapsed',isCollapsed)}
+function toggleSidebar(){const s=document.getElementById('adminSidebar');const t=document.getElementById('sidebarToggle');if(!s)return;s.classList.toggle('collapsed');const isCollapsed=s.classList.contains('collapsed');t.textContent=isCollapsed?'▶':'◀';localStorage.setItem('myagent-admin-sidebar-collapsed',isCollapsed);closeMobileSidebar()}
 // Initialize
 initTheme();
 document.getElementById('themeToggle')?.addEventListener('click',toggleTheme);
 if(localStorage.getItem('myagent-admin-sidebar-collapsed')==='true'){document.getElementById('adminSidebar')?.classList.add('collapsed');const t=document.getElementById('sidebarToggle');if(t)t.textContent='▶'}
 
+// ── Mobile Sidebar ──
+function toggleMobileSidebar(){
+  const s=document.getElementById('adminSidebar');
+  const o=document.getElementById('adminMobileOverlay');
+  s.classList.toggle('mobile-open');
+  o.classList.toggle('active');
+}
+function closeMobileSidebar(){
+  document.getElementById('adminSidebar').classList.remove('mobile-open');
+  document.getElementById('adminMobileOverlay').classList.remove('active');
+}
+// Show hamburger on mobile
+function checkMobile(){const btn=document.getElementById('mobileMenuBtn');if(btn)btn.style.display=window.innerWidth<=768?'grid':'none'}
+window.addEventListener('resize',checkMobile);
+checkMobile();
+
 loadVersion();
 setTimeout(()=>checkUpdate(false),30000);
 function showConfirm(title,msg,onOk){
@@ -266,6 +306,7 @@ function showConfirm(title,msg,onOk){
 }
 
 function showPage(page){
+  closeMobileSidebar();
   currentPage=page;
   document.querySelectorAll('.nav-item').forEach((n,i)=>n.classList.toggle('active',Object.keys(pages)[i]===page));
   $('pageTitle').textContent=pages[page]||page;