@wendongfly/myhi 1.3.91 → 1.3.93

package/dist/chat.html

@@ -281,6 +281,7 @@
     </button>
     <button class="top-btn" onclick="showUsage()" title="用量" style="font-size:0.7rem;color:var(--muted)">用量</button>
     <button class="top-btn" onclick="openFilePanel()" title="文件" style="font-size:0.7rem;color:var(--muted)">文件</button>
+    <button class="top-btn" onclick="openSwitchSheet()" title="切换会话" style="font-size:0.7rem;color:var(--muted)">切换</button>
     <button class="top-btn" onclick="goBack()" title="返回">
       <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
     </button>
@@ -1122,6 +1123,10 @@
     let _toolGroupCount = 0;
 
     function addToolMessage(raw, toolName) {
+      // 关键：结束当前 assistant 文本流。否则 _streamEl 仍指向工具前那个气泡，
+      // 下一个 LLM call 的流式文本会并进那个（位于工具组之上的）旧气泡，
+      // 造成「文本堆在上面、工具回显落在后面」的错序——重进后按 history 顺序回放才正常。
+      endStream();
       removeThinking();
       const icon = TOOL_ICONS[toolName] || '🔧';
       const collapsed = settings.collapseTools;
@@ -2303,6 +2308,101 @@
     // ── 辅助 ──────────────────────────────────────
     function updateViewers(count) { document.getElementById('viewer-count').textContent = count > 1 ? `${count} 人在线` : ''; }
     window.goBack = function() { window.location.href = '/'; };
+
+    // ── 快速切换会话（免退出到首页）──────────────────────────
+    function switchRelTime(ms) {
+      if (!ms) return '';
+      const diff = Date.now() - ms;
+      if (diff < 60000) return '刚刚';
+      if (diff < 3600000) return Math.floor(diff / 60000) + '分钟前';
+      if (diff < 86400000) return Math.floor(diff / 3600000) + '小时前';
+      const d = new Date(ms);
+      if (diff < 172800000) return '昨天';
+      return (d.getMonth() + 1) + '月' + d.getDate() + '日';
+    }
+    function switchSessTime(s) {
+      return (s.lastActivityAt || (s.createdAt ? new Date(s.createdAt).getTime() : 0)) || 0;
+    }
+    window.openSwitchSheet = async function() {
+      let sessions = [];
+      try {
+        const res = await fetch('/api/sessions', { headers: { 'Cache-Control': 'no-cache' } });
+        sessions = await res.json();
+      } catch { addStatusMessage && addStatusMessage('会话列表加载失败'); return; }
+      sessions.sort((a, b) => switchSessTime(b) - switchSessTime(a)); // 最新在前
+      const esc2 = (s) => { const d = document.createElement('div'); d.textContent = s == null ? '' : s; return d.innerHTML; };
+      let mode = localStorage.getItem('myhi_group_mode') || 'time'; // 与首页共用记忆
+
+      const rowHTML = (s) => {
+        const cur = s.id === SESSION_ID;
+        const proj = (s.cwd || '').replace(/\\/g, '/').split('/').filter(Boolean).slice(-1)[0] || '';
+        const tags = (s.tags || []).map(x => '<span style="font-size:0.62rem;color:#a9b6c2;background:rgba(124,58,237,0.14);border:1px solid rgba(124,58,237,0.35);border-radius:999px;padding:0 0.4rem">' + esc2(x) + '</span>').join(' ');
+        const sub = [proj, switchRelTime(switchSessTime(s)), s.busy ? '运行中' : '', s.controlHolderName ? (s.controlHolderName + ' 控制中') : ''].filter(Boolean).join(' · ');
+        return '<div data-sid="' + esc2(s.id) + '" style="display:flex;align-items:center;gap:0.6rem;padding:0.7rem 1.1rem;border-top:1px solid #21262d;cursor:pointer;' + (cur ? 'background:rgba(124,58,237,0.12)' : '') + '">' +
+          '<span style="width:8px;height:8px;border-radius:50%;flex-shrink:0;background:' + (s.alive ? '#3fb950' : '#6e7681') + '"></span>' +
+          '<div style="flex:1;min-width:0">' +
+            '<div style="font-size:0.9rem;color:#e6edf3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + esc2(s.title || '(无标题)') + ' ' + (cur ? '<span style="font-size:0.68rem;color:#7c3aed">· 当前</span>' : '') + '</div>' +
+            '<div style="font-size:0.72rem;color:#8b949e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + esc2(sub) + '</div>' +
+            (tags ? '<div style="display:flex;flex-wrap:wrap;gap:0.25rem;margin-top:0.25rem">' + tags + '</div>' : '') +
+          '</div></div>';
+      };
+      const groupHdr = (label, n) => '<div style="padding:0.5rem 1.1rem 0.3rem;color:#8b949e;font-size:0.72rem;font-weight:600;background:#0d1117">' + esc2(label) + ' · <span style="font-weight:400">' + n + '</span></div>';
+      const pushInto = (map, key, s) => { if (!map.has(key)) map.set(key, []); map.get(key).push(s); };
+
+      const buildBody = () => {
+        if (!sessions.length) return '<div style="padding:1rem;color:#8b949e;text-align:center">暂无其他会话</div>';
+        if (mode === 'project') {
+          const g = new Map();
+          for (const s of sessions) pushInto(g, (s.cwd || '').replace(/\\/g, '/').split('/').filter(Boolean).slice(-1)[0] || '(默认目录)', s);
+          return [...g.entries()].sort((a, b) => switchSessTime(b[1][0]) - switchSessTime(a[1][0]))
+            .map(([name, arr]) => groupHdr('📁 ' + name, arr.length) + arr.map(rowHTML).join('')).join('');
+        }
+        if (mode === 'tag') {
+          const g = new Map(); const untag = [];
+          for (const s of sessions) { const ts = s.tags || []; if (!ts.length) { untag.push(s); continue; } for (const t of ts) pushInto(g, t, s); }
+          let h = [...g.entries()].sort((a, b) => switchSessTime(b[1][0]) - switchSessTime(a[1][0]))
+            .map(([name, arr]) => groupHdr('🏷 ' + name, arr.length) + arr.map(rowHTML).join('')).join('');
+          if (untag.length) h += groupHdr('未分类', untag.length) + untag.map(rowHTML).join('');
+          return h;
+        }
+        return sessions.map(rowHTML).join('');
+      };
+
+      const overlay = document.createElement('div');
+      overlay.style.cssText = 'position:fixed;inset:0;z-index:120;background:rgba(0,0,0,0.6);display:flex;align-items:flex-end;justify-content:center';
+      const box = document.createElement('div');
+      box.style.cssText = 'background:#161b22;border-radius:18px 18px 0 0;width:100%;max-width:640px;max-height:78vh;display:flex;flex-direction:column;padding-bottom:max(0.8rem,env(safe-area-inset-bottom))';
+      const segBtn = (m, label) => '<button class="sw-seg" data-m="' + m + '" style="background:' + (mode === m ? '#7c3aed' : 'none') + ';color:' + (mode === m ? '#fff' : '#8b949e') + ';border:none;font-size:0.74rem;padding:0.3rem 0.7rem;cursor:pointer;' + (m !== 'time' ? 'border-left:1px solid #30363d' : '') + '">' + label + '</button>';
+      box.innerHTML = '<div style="padding:0.75rem 1.1rem 0.5rem;display:flex;justify-content:space-between;align-items:center;gap:0.5rem">' +
+          '<span style="font-size:0.85rem;font-weight:600;color:#e6edf3">切换会话（' + sessions.length + '）</span>' +
+          '<div style="display:flex;align-items:center;gap:0.5rem">' +
+            '<div style="display:inline-flex;border:1px solid #30363d;border-radius:7px;overflow:hidden">' + segBtn('time', '最近') + segBtn('project', '项目') + segBtn('tag', '标签') + '</div>' +
+            '<button id="sw-home" style="background:none;border:1px solid #30363d;color:#8b949e;font-size:0.72rem;padding:0.25rem 0.6rem;border-radius:6px;cursor:pointer">＋ 新建</button>' +
+          '</div>' +
+        '</div>' +
+        '<div id="sw-body" style="overflow:auto">' + buildBody() + '</div>' +
+        '<button id="sw-cancel" style="margin:0.5rem 1.1rem 0;background:none;border:1px solid #30363d;color:#8b949e;font-size:0.85rem;padding:0.7rem;border-radius:10px;cursor:pointer">取消</button>';
+      overlay.appendChild(box);
+      const close = () => overlay.remove();
+      overlay.addEventListener('click', (e) => { if (e.target === overlay) close(); });
+      box.querySelector('#sw-cancel').onclick = close;
+      box.querySelector('#sw-home').onclick = () => { window.location.href = '/'; };
+      const bindRows = () => box.querySelectorAll('[data-sid]').forEach(row => row.onclick = () => {
+        const sid = row.dataset.sid;
+        if (sid && sid !== SESSION_ID) window.location.href = '/terminal/' + sid;
+        else close();
+      });
+      bindRows();
+      box.querySelectorAll('.sw-seg').forEach(b => b.onclick = () => {
+        mode = b.dataset.m;
+        localStorage.setItem('myhi_group_mode', mode);
+        box.querySelectorAll('.sw-seg').forEach(x => { const on = x.dataset.m === mode; x.style.background = on ? '#7c3aed' : 'none'; x.style.color = on ? '#fff' : '#8b949e'; });
+        box.querySelector('#sw-body').innerHTML = buildBody();
+        bindRows();
+      });
+      document.body.appendChild(overlay);
+    };
+
     function scrollToBottom() { requestAnimationFrame(() => { chatArea.scrollTop = chatArea.scrollHeight; }); }
     function trimMessages() {
       if (_userScrolledUp) return; // 用户在往上翻历史，禁用自动删
@@ -2323,6 +2423,7 @@
       // 当前主力（Anthropic 最新一代，2026-04 时点）
       { id: 'claude-sonnet-4-6', label: 'Sonnet 4.6', desc: '默认推荐 · 速度+智能平衡 · 1M ctx' },
       { id: 'claude-opus-4-7',   label: 'Opus 4.7',   desc: '最强推理 · agentic coding · 1M ctx' },
+      { id: 'claude-fable-5',    label: 'Fable 5',    desc: 'Claude 5 家族 · Max plan 标配（消耗较快）' },
       { id: 'claude-haiku-4-5',  label: 'Haiku 4.5',  desc: '最快最便宜 · 200k ctx' },
       // 备选（上一代，仍可用）
       { id: 'claude-opus-4-6',   label: 'Opus 4.6',   desc: '上一代 Opus（备选）' },

package/dist/index.html

@@ -140,6 +140,16 @@
       overflow: hidden;
       text-overflow: ellipsis;
     }
+    .tag-chip {
+      display: inline-block;
+      font-size: 0.66rem;
+      color: #a9b6c2;
+      background: rgba(124,58,237,0.14);
+      border: 1px solid rgba(124,58,237,0.35);
+      border-radius: 999px;
+      padding: 0.05rem 0.45rem;
+      line-height: 1.5;
+    }
 
     .card-right {
       display: flex;
@@ -427,6 +437,15 @@
 
   <!-- 升级管理已移至 /admin -->
 
+  <div id="view-controls" style="display:flex;flex-direction:column;gap:0.5rem;margin-bottom:0.75rem">
+    <div id="group-seg" style="display:inline-flex;align-self:flex-start;background:var(--bg,#0d1117);border:1px solid var(--border,#21262d);border-radius:8px;overflow:hidden">
+      <button class="grp-btn" data-group="time"    style="background:none;border:none;color:var(--muted,#8b949e);font-size:0.78rem;padding:0.35rem 0.8rem;cursor:pointer">最近</button>
+      <button class="grp-btn" data-group="project" style="background:none;border:none;color:var(--muted,#8b949e);font-size:0.78rem;padding:0.35rem 0.8rem;cursor:pointer;border-left:1px solid var(--border,#21262d)">项目</button>
+      <button class="grp-btn" data-group="tag"     style="background:none;border:none;color:var(--muted,#8b949e);font-size:0.78rem;padding:0.35rem 0.8rem;cursor:pointer;border-left:1px solid var(--border,#21262d)">标签</button>
+    </div>
+    <div id="tag-filter" style="display:none;flex-wrap:wrap;gap:0.35rem"></div>
+  </div>
+
   <div id="list">
     <div class="empty-state">
       <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
@@ -451,8 +470,8 @@
   <div class="presets" id="presets"></div>
 
   <div class="field">
-    <label>名称</label>
-    <input id="inp-title" type="text" placeholder="自定义名称…" autocomplete="off" spellcheck="false">
+    <label>名称 <span style="font-weight:400;text-transform:none;color:var(--red,#f85149)">必填</span></label>
+    <input id="inp-title" type="text" placeholder="请输入任务名称" autocomplete="off" spellcheck="false">
   </div>
   <div class="field">
     <label>启动命令 <span style="font-weight:400;text-transform:none">(可选)</span></label>
@@ -661,47 +680,171 @@
     return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
   }
 
-  function renderSessions(sessions) {
-    if (!sessions.length) {
-      list.innerHTML = `<div class="empty-state">
-        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-          <rect x="2" y="4" width="20" height="16" rx="2"/>
-          <path d="M8 9l4 3-4 3M13 15h3"/>
-        </svg>
-        <p>还没有终端会话</p>
+  // 会话的「最后任务时间」：优先最后活动时间，回退创建时间。ms 数或 ISO 皆可。
+  function sessionTime(s) {
+    const v = s.lastActivityAt || s.createdAt || 0;
+    const ms = typeof v === 'number' ? v : new Date(v).getTime();
+    return isNaN(ms) ? 0 : ms;
+  }
+
+  // 相对时间：刚刚 / N分钟前 / N小时前 / 昨天 HH:MM / M月D日
+  function fmtRelTime(ms) {
+    if (!ms) return '';
+    const now = Date.now();
+    const diff = now - ms;
+    if (diff < 60_000) return '刚刚';
+    if (diff < 3_600_000) return Math.floor(diff / 60_000) + '分钟前';
+    if (diff < 86_400_000) return Math.floor(diff / 3_600_000) + '小时前';
+    const d = new Date(ms);
+    const hm = d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    if (diff < 172_800_000) return '昨天 ' + hm;
+    return (d.getMonth() + 1) + '月' + d.getDate() + '日';
+  }
+
+  // 项目名 = cwd 最后一段
+  function projectName(cwd) {
+    if (!cwd) return '(默认目录)';
+    const parts = cwd.replace(/\\/g, '/').split('/').filter(Boolean);
+    return parts[parts.length - 1] || '(根)';
+  }
+
+  // 视图状态：分组方式 + 标签筛选
+  let _allSessions = [];
+  let _groupMode = localStorage.getItem('myhi_group_mode') || 'time'; // time | project | tag
+  let _tagFilter = null; // 仅 tag 模式下：只看某标签
+
+  const EMPTY_HTML = `<div class="empty-state">
+      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+        <rect x="2" y="4" width="20" height="16" rx="2"/>
+        <path d="M8 9l4 3-4 3M13 15h3"/>
+      </svg>
+      <p>还没有终端会话</p>
+    </div>`;
+
+  function cardHTML(s) {
+    const safeTitle = esc(s.title || '');
+    const safeId    = esc(s.id);
+    const color  = avatarColor(s.title);
+    const letter = esc((s.title || '?')[0].toUpperCase());
+    const sub    = esc([fmtCwd(s.cwd), fmtRelTime(sessionTime(s)), s.viewers > 0 ? `${s.viewers} 在线` : '', s.controlHolderName ? `${s.controlHolderName} 控制中` : ''].filter(Boolean).join('  ·  '));
+    const tags = (s.tags || []).map(t => `<span class="tag-chip">${esc(t)}</span>`).join('');
+    return `
+      <div class="card" data-id="${safeId}" data-title="${safeTitle}">
+        <div class="avatar" style="background:${color}">${letter}</div>
+        <div class="card-body">
+          <div class="card-title">${safeTitle}</div>
+          <div class="card-sub">${sub}</div>
+          ${tags ? `<div class="card-tags" style="display:flex;flex-wrap:wrap;gap:0.3rem;margin-top:0.3rem">${tags}</div>` : ''}
+        </div>
+        <div class="card-right">
+          <div class="status-dot ${s.alive ? 'alive' : 'dead'}"></div>
+          ${s.viewers > 1 ? `<div class="viewers">👁 ${s.viewers}</div>` : ''}
+        </div>
       </div>`;
-      return;
-    }
+  }
 
-    list.innerHTML = sessions.map(s => {
-      const safeTitle = esc(s.title || '');
-      const safeId    = esc(s.id);
-      const color  = avatarColor(s.title);
-      const letter = esc((s.title || '?')[0].toUpperCase());
-      const sub    = esc([fmtCwd(s.cwd), fmtTime(s.createdAt), s.viewers > 0 ? `${s.viewers} 在线` : '', s.controlHolderName ? `${s.controlHolderName} 控制中` : ''].filter(Boolean).join('  ·  '));
-      return `
-        <div class="card" data-id="${safeId}" data-title="${safeTitle}">
-          <div class="avatar" style="background:${color}">${letter}</div>
-          <div class="card-body">
-            <div class="card-title">${safeTitle}</div>
-            <div class="card-sub">${sub}</div>
-          </div>
-          <div class="card-right">
-            <div class="status-dot ${s.alive ? 'alive' : 'dead'}"></div>
-            ${s.viewers > 1 ? `<div class="viewers">👁 ${s.viewers}</div>` : ''}
-          </div>
-        </div>`;
-    }).join('');
+  function groupHeaderHTML(label, count) {
+    return `<div class="group-header" style="display:flex;align-items:center;gap:0.5rem;margin:0.85rem 0.2rem 0.4rem;color:var(--muted,#8b949e);font-size:0.75rem;font-weight:600">
+      <span>${esc(label)}</span>
+      <span style="color:var(--border,#30363d)">·</span>
+      <span style="font-weight:400">${count}</span>
+    </div>`;
+  }
+
+  function renderSessions(sessions) {
+    if (Array.isArray(sessions)) _allSessions = sessions;
+    renderTagFilter();
+    updateGroupSeg();
+
+    const items = [..._allSessions].sort((a, b) => sessionTime(b) - sessionTime(a)); // 最新在前
+    if (!items.length) { list.innerHTML = EMPTY_HTML; return; }
+
+    let html = '';
+    if (_groupMode === 'project') {
+      const groups = new Map();
+      for (const s of items) {
+        const k = projectName(s.cwd);
+        if (!groups.has(k)) groups.set(k, []);
+        groups.get(k).push(s);
+      }
+      // 组按组内最新会话时间排序
+      const ordered = [...groups.entries()].sort((a, b) => sessionTime(b[1][0]) - sessionTime(a[1][0]));
+      for (const [name, arr] of ordered) {
+        html += groupHeaderHTML('📁 ' + name, arr.length);
+        html += arr.map(cardHTML).join('');
+      }
+    } else if (_groupMode === 'tag') {
+      let shown = items;
+      if (_tagFilter) shown = items.filter(s => (s.tags || []).includes(_tagFilter));
+      const tagged = new Map();
+      const untagged = [];
+      for (const s of shown) {
+        const tags = s.tags || [];
+        if (!tags.length) { untagged.push(s); continue; }
+        for (const t of tags) {
+          if (_tagFilter && t !== _tagFilter) continue;
+          if (!tagged.has(t)) tagged.set(t, []);
+          tagged.get(t).push(s);
+        }
+      }
+      const ordered = [...tagged.entries()].sort((a, b) => sessionTime(b[1][0]) - sessionTime(a[1][0]));
+      for (const [name, arr] of ordered) {
+        html += groupHeaderHTML('🏷 ' + name, arr.length);
+        html += arr.map(cardHTML).join('');
+      }
+      if (!_tagFilter && untagged.length) {
+        html += groupHeaderHTML('未分类', untagged.length);
+        html += untagged.map(cardHTML).join('');
+      }
+    } else {
+      html = items.map(cardHTML).join('');
+    }
+    list.innerHTML = html;
 
-    // 用事件委托替代内联 onclick/oncontextmenu
+    // 事件委托：点击打开、右键/长按出菜单
     list.querySelectorAll('.card').forEach(card => {
       const id = card.dataset.id;
       const title = card.dataset.title;
       card.addEventListener('click', () => openSession(id));
-      card.addEventListener('contextmenu', (e) => showKill(e, id, title));
+      card.addEventListener('contextmenu', (e) => showActions(e, id, title));
+      // 移动端长按
+      let lpTimer = null;
+      card.addEventListener('touchstart', (e) => { lpTimer = setTimeout(() => showActions(e, id, title), 550); }, { passive: true });
+      card.addEventListener('touchend', () => clearTimeout(lpTimer));
+      card.addEventListener('touchmove', () => clearTimeout(lpTimer));
     });
   }
 
+  function renderTagFilter() {
+    const bar = document.getElementById('tag-filter');
+    if (_groupMode !== 'tag') { bar.style.display = 'none'; return; }
+    const allTags = [...new Set(_allSessions.flatMap(s => s.tags || []))].sort();
+    if (!allTags.length) { bar.style.display = 'none'; return; }
+    bar.style.display = 'flex';
+    const mk = (label, val, active) =>
+      `<button class="tagf-btn" data-tag="${val === null ? '' : esc(val)}" style="background:${active ? 'var(--accent,#7c3aed)' : 'var(--bg,#0d1117)'};color:${active ? '#fff' : 'var(--muted,#8b949e)'};border:1px solid ${active ? 'var(--accent,#7c3aed)' : 'var(--border,#21262d)'};border-radius:999px;font-size:0.72rem;padding:0.2rem 0.6rem;cursor:pointer">${esc(label)}</button>`;
+    bar.innerHTML = mk('全部', null, !_tagFilter) + allTags.map(t => mk(t, t, _tagFilter === t)).join('');
+    bar.querySelectorAll('.tagf-btn').forEach(b => b.addEventListener('click', () => {
+      _tagFilter = b.dataset.tag || null;
+      renderSessions();
+    }));
+  }
+
+  function updateGroupSeg() {
+    document.querySelectorAll('.grp-btn').forEach(b => {
+      const on = b.dataset.group === _groupMode;
+      b.style.background = on ? 'var(--accent,#7c3aed)' : 'none';
+      b.style.color = on ? '#fff' : 'var(--muted,#8b949e)';
+    });
+  }
+
+  document.querySelectorAll('.grp-btn').forEach(b => b.addEventListener('click', () => {
+    _groupMode = b.dataset.group;
+    _tagFilter = null;
+    localStorage.setItem('myhi_group_mode', _groupMode);
+    renderSessions();
+  }));
+
   // ── Navigation ──────────────────────────────────────────────
   function openSession(id) {
     window.location.href = `/terminal/${id}`;
@@ -806,7 +949,7 @@
     document.querySelectorAll('.chip').forEach((c, j) =>
       c.classList.toggle('selected', j === i));
     const p = PRESETS[i];
-    document.getElementById('inp-title').value = p.title;
+    // 不再自动把名称填成 claude/gemini/shell —— 名称必填、留给用户输入任务名
     document.getElementById('inp-cmd').value   = p.cmd || '';
   }
 
@@ -830,7 +973,13 @@
   });
 
   function createSession() {
-    const title   = document.getElementById('inp-title').value.trim() || 'shell';
+    const titleInput = document.getElementById('inp-title');
+    const title   = titleInput.value.trim();
+    if (!title) {
+      alert('请输入任务名称');
+      titleInput.focus();
+      return;
+    }
     const initCmd = document.getElementById('inp-cmd').value.trim()   || undefined;
     const cwd     = document.getElementById('inp-cwd').value.trim()   || undefined;
     if (cwd) recordDir(cwd);
@@ -1040,8 +1189,42 @@
 
   // ── Kill ─────────────────────────────────────────────────────
   let _killId = null;
-  function showKill(e, id, title) {
+  // 会话操作菜单：打开 / 重命名 / 设置标签 / 终止
+  function showActions(e, id, title) {
     e.preventDefault();
+    const s = _allSessions.find(x => x.id === id);
+    const curTags = (s?.tags || []).join(', ');
+    const overlay = document.createElement('div');
+    overlay.style.cssText = 'position:fixed;inset:0;z-index:80;background:rgba(0,0,0,0.55);display:flex;align-items:flex-end;justify-content:center';
+    const box = document.createElement('div');
+    box.style.cssText = 'background:var(--surface,#161b22);border-radius:18px 18px 0 0;width:100%;max-width:640px;padding:0.5rem 0 max(1rem,env(safe-area-inset-bottom))';
+    const mkBtn = (label, color) => `<button style="display:block;width:100%;text-align:left;background:none;border:none;border-top:1px solid var(--border,#21262d);color:${color || 'var(--text,#e6edf3)'};font-size:0.95rem;padding:0.9rem 1.25rem;cursor:pointer">${label}</button>`;
+    box.innerHTML =
+      `<div style="padding:0.6rem 1.25rem 0.4rem;color:var(--muted,#8b949e);font-size:0.8rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(title)}</div>` +
+      mkBtn('打开') + mkBtn('重命名') + mkBtn('设置标签') + mkBtn('终止会话', 'var(--red,#f85149)') +
+      `<button style="display:block;width:100%;background:none;border:none;border-top:6px solid var(--bg,#0d1117);color:var(--muted,#8b949e);font-size:0.9rem;padding:0.85rem;cursor:pointer">取消</button>`;
+    overlay.appendChild(box);
+    const close = () => overlay.remove();
+    overlay.addEventListener('click', (ev) => { if (ev.target === overlay) close(); });
+    const btns = box.querySelectorAll('button');
+    btns[0].onclick = () => { close(); openSession(id); };
+    btns[1].onclick = () => {
+      close();
+      const nv = prompt('重命名会话', title);
+      if (nv && nv.trim()) socket.emit('rename', { sessionId: id, title: nv.trim() });
+    };
+    btns[2].onclick = () => {
+      close();
+      const nv = prompt('设置标签（多个用逗号分隔，留空清除）', curTags);
+      if (nv !== null) socket.emit('set-tags', { sessionId: id, tags: nv.split(/[,，]/).map(t => t.trim()).filter(Boolean) });
+    };
+    btns[3].onclick = () => { close(); showKill(e, id, title); };
+    btns[4].onclick = close;
+    document.body.appendChild(overlay);
+  }
+
+  function showKill(e, id, title) {
+    if (e && e.preventDefault) e.preventDefault();
     _killId = id;
     document.getElementById('kill-title').textContent = title;
     document.getElementById('kill-menu').classList.add('open');