@wendongfly/myhi 1.3.197 → 1.3.198

package/dist/chat.html

@@ -11,6 +11,7 @@
   <title>myhi 会话</title>
   <script src="/lib/machine.js" data-session></script>
   <script src="/lib/prefs.js"></script>
+  <script src="/lib/attn.js"></script>
   <script src="/sio-client/socket.io.min.js"></script>
   <script src="/theme.js"></script>
   <script>
@@ -24,6 +25,9 @@
       if(em==='1') r.classList.add('embed');
       // 首页电脑端工作台右侧嵌入：保留本页顶栏，左侧已有任务列表 → 藏掉分屏/切换/返回；
       // 页面里的链接（如「首页 ⚙ 设置」）在整个窗口打开，别在右侧小框里再套一个首页
+      // 手机（触屏且窄屏，平板横屏 >768px 按电脑处理）且未关「移动端精简」→ 精简布局
+      var cs={};try{cs=JSON.parse(localStorage.getItem('myhi_chat_settings')||'{}')||{}}catch(e){}
+      if(!em&&cs.mobileCompact!==false&&matchMedia('(pointer: coarse) and (max-width: 768px)').matches) r.classList.add('m');
       if(em==='ws'){ r.classList.add('embed-ws'); var bs=document.createElement('base'); bs.target='_top'; document.head.appendChild(bs); }
     }catch(e){}})();
   </script>
@@ -77,6 +81,26 @@
     .top-btn:hover { background: var(--surface2); color: var(--text); }
     .top-btn:active { transform: scale(0.92); }
 
+    /* ── 移动端精简（html.m）：顶栏只留 ← / ●任务名▾ / ⋯，状态行收进 ⋯ ── */
+    #title-row { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
+    #m-dot, #m-back, #m-more, #m-ro { display: none; }
+    html.m #m-back, html.m #m-more { display: inline-flex; }
+    html.m #m-dot { display: inline-block; }
+    html.m #m-ro.show { display: inline-flex; }
+    html.m .top-hide-m, html.m #status-bar, html.m #session-cwd { display: none !important; }
+    html.m #title-group { cursor: pointer; }
+    html.m #session-title::after { content: ' ▾'; color: var(--muted); font-size: 0.7rem; font-weight: 400; }
+    html.m #ctx-chip:not(.hi) { display: none !important; }
+    html.m #sk-builtin-skills, html.m #sk-custom-skills { display: none !important; }
+    html.m #top-bar { transition: margin-top 0.2s ease; }
+    #m-more { position: relative; font-size: 1.1rem; letter-spacing: 1px; }
+    #m-more.dot::after { content: ''; position: absolute; top: 6px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
+    #m-ro { font-size: 0.68rem; color: var(--muted); border: 1px solid var(--border); border-radius: 10px; padding: 0.1rem 0.45rem; white-space: nowrap; flex-shrink: 0; cursor: pointer; }
+    /* 其他任务完成 / 等你回复的提醒条 */
+    #m-toast { position: fixed; left: 0.6rem; right: 0.6rem; top: calc(3.2rem + env(safe-area-inset-top)); z-index: 110; background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--green); border-radius: 10px; padding: 0.6rem 0.8rem; font-size: 0.82rem; box-shadow: 0 6px 20px rgba(0,0,0,0.35); display: none; cursor: pointer; }
+    #m-toast.show { display: block; }
+    #m-toast .sub { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
     /* ── 状态栏 ─────────────────────────────── */
     #status-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.75rem; background: var(--bg); border-bottom: 1px solid var(--surface2); font-size: 0.72rem; overflow-x: auto; flex-shrink: 0; scrollbar-width: none; }
     #status-bar::-webkit-scrollbar { display: none; }
@@ -651,21 +675,27 @@
 
   <div id="top-bar">
     <button id="grid-btn" class="top-btn" onclick="location.href='/grid'" title="分屏工作台（多任务并排）" style="font-size:1.05rem;padding:0 0.35rem;color:var(--blue2)">▦</button>
-    <div id="title-group">
-      <div id="session-title">加载中...</div>
+    <button id="m-back" class="top-btn" onclick="goHome()" 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="M15 18l-6-6 6-6"/></svg>
+    </button>
+    <div id="title-group" onclick="if(document.documentElement.classList.contains('m'))openSwitchSheet()">
+      <div id="title-row"><span id="m-dot" class="sb-dot idle"></span><div id="session-title">加载中...</div></div>
       <div id="session-cwd"></div>
     </div>
-    <button class="top-btn" onclick="openChatHelp()" title="使用说明" style="font-size:0.7rem;color:var(--muted)">?</button>
-    <button class="top-btn" onclick="openSettings()" title="设置">
+    <span id="m-ro" onclick="toggleControl()"></span>
+    <button class="top-btn top-hide-m" onclick="openChatHelp()" title="使用说明" style="font-size:0.7rem;color:var(--muted)">?</button>
+    <button class="top-btn top-hide-m" onclick="openSettings()" 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"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
     </button>
     <button class="top-btn" id="ctx-chip" onclick="openCtxSheet()" title="会话数据：上下文水位 / 成本 / token 明细" style="display:none;width:auto;padding:0 0.5rem;white-space:nowrap;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="返回">
+    <button class="top-btn top-hide-m" onclick="openFilePanel()" title="文件" style="font-size:0.7rem;color:var(--muted)">文件</button>
+    <button class="top-btn top-hide-m" onclick="openSwitchSheet()" title="切换会话" style="font-size:0.7rem;color:var(--muted)">切换</button>
+    <button class="top-btn top-hide-m" 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>
+    <button id="m-more" class="top-btn" onclick="openMobileMore()" title="更多">⋯</button>
   </div>
+  <div id="m-toast"></div>
 
   <div id="status-bar">
     <span class="sb-item" id="work-status"><span class="sb-dot idle"></span> 空闲</span>
@@ -770,7 +800,7 @@
       <button class="sk sk-claude" data-sk="followup" onclick="openFollowUpSheet()" style="color:var(--blue2)">🔄 跟进</button>
       <button class="sk sk-claude" data-sk="git" onclick="openGitSheet()" style="color:var(--green)">提交</button>
       <button class="sk sk-claude" data-sk="memory" onclick="showMemory()">记忆</button>
-      <button class="sk sk-claude" data-sk="skills" onclick="openSkillSheet()" style="color:var(--purple2)">技能</button>
+      <button class="sk sk-claude" data-sk="skills" onclick="skillBtnTap()" style="color:var(--purple2)">技能</button>
       <span id="sk-builtin-skills" data-sk="skills"></span>
       <span id="sk-custom-skills" data-sk="skills"></span>
     </div>
@@ -824,6 +854,7 @@
       <div class="set-line"><span>思考过程</span><div id="seg-think" class="seg-row"><button class="seg" data-v="hide">隐藏</button><button class="seg" data-v="fold">折叠</button><button class="seg" data-v="open">展开</button></div></div>
       <div class="set-line"><span>工具调用</span><div id="seg-tools" class="seg-row"><button class="seg" data-v="fold">折叠</button><button class="seg" data-v="open">展开</button></div></div>
       <div class="set-line"><span>工具输出<small>AI 执行命令/读文件的原始结果</small></span><div id="seg-toolout" class="seg-row"><button class="seg" data-v="hide">隐藏</button><button class="seg" data-v="clip">前8行</button><button class="seg" data-v="all">全部</button></div></div>
+      <div class="set-line"><span>手机布局<small>仅手机生效：精简只留任务名、状态与切换</small></span><div id="seg-mobile" class="seg-row"><button class="seg" data-v="on">精简</button><button class="seg" data-v="off">完整</button></div></div>
       <label class="setting-toggle" id="row-parse"><span>把终端里的 Claude 输出整理成聊天样式</span><input type="checkbox" id="set-parse" checked></label>
     </div>
     <div class="setting-group" data-stab="chat" style="display:none">
@@ -1167,7 +1198,7 @@
   <div id="cmd-sheet" class="action-sheet">
     <div class="action-sheet-backdrop" onclick="closeCmdSheet()"></div>
     <div class="action-sheet-box" style="max-height:75vh;display:flex;flex-direction:column">
-      <div class="action-sheet-title">自定义命令</div>
+      <div class="action-sheet-title" id="cmd-sheet-title">自定义命令</div>
       <div style="padding:0.3rem 0.2rem">
         <input id="cmd-filter" class="slash-inp" placeholder="搜索命令..." autocomplete="off">
       </div>
@@ -2798,6 +2829,7 @@
       };
       const s = STATES[state] || STATES.idle;
       el.innerHTML = `<span class="sb-dot ${s.dot}"></span> ${s.text}`;
+      const md = document.getElementById('m-dot'); if (md) { md.className = 'sb-dot ' + s.dot; md.title = s.text; }
       // 回归 idle 由 result / agent:busy false / session-exit 驱动，
       // 不做定时兜底——长工具调用期间兜底会让取消按钮提前消失。
       if (currentSession?.mode === 'agent') {
@@ -3442,12 +3474,13 @@
       if (tokens > 0) _lastCtxTokens = tokens;
       const chip = document.getElementById('ctx-chip');
       if (!chip) return;
-      if (!tokens || tokens <= 0) { chip.style.display = 'none'; return; }
+      if (!tokens || tokens <= 0) { chip.style.display = 'none'; chip.classList.remove('hi'); return; }
       const limit = ctxLimit(tokens);
       const pct = Math.min(100, Math.round(tokens / limit * 100));
       chip.style.display = '';
       chip.textContent = `◈ ${pct}%`;
       chip.style.color = pct >= 90 ? 'var(--red)' : pct >= 75 ? 'var(--yellow)' : 'var(--muted)';
+      chip.classList.toggle('hi', pct >= 75);   // 手机精简布局只在偏高时才露出来
       // 压缩快捷按钮同步高亮（agent 栏是 doSlashCmd('/compact')，PTY 栏是 doCompact()）
       for (const sel of [
         '#sk-claude-agent button[onclick*="/compact"]',
@@ -3938,6 +3971,9 @@
         document.querySelectorAll('.sk').forEach(b => b.disabled = !canTakeControl());
       }
       updateShortcutBar();
+      // 手机顶栏：没控制权时露出一个小标（只读 / 获取控制 / X 控制中），点了等同控制徽标
+      const ro = document.getElementById('m-ro');
+      if (ro) { ro.textContent = controlling ? '' : badge.textContent; ro.classList.toggle('show', !controlling); }
     }
 
     // ── 设置面板 ──────────────────────────────────
@@ -4575,6 +4611,14 @@
       if (b.dataset.v !== 'hide') settings.thinkCollapsed = b.dataset.v === 'fold';
       saveSettings(); syncDisplaySegs();
     }));
+    const syncMobileSeg = () => document.querySelectorAll('#seg-mobile .seg').forEach(b => b.classList.toggle('active', b.dataset.v === (settings.mobileCompact === false ? 'off' : 'on')));
+    syncMobileSeg();
+    document.querySelectorAll('#seg-mobile .seg').forEach(b => b.addEventListener('click', () => {
+      const v = b.dataset.v !== 'off';
+      if ((settings.mobileCompact !== false) === v) return;
+      settings.mobileCompact = v; saveSettings(); syncMobileSeg();
+      location.reload();   // 布局类在页面头部就定了，切换后重载最干净
+    }));
     document.querySelectorAll('#seg-tools .seg').forEach(b => b.addEventListener('click', () => {
       settings.collapseTools = b.dataset.v === 'fold'; saveSettings(); syncDisplaySegs();
     }));
@@ -4603,6 +4647,104 @@
     window.goHome = goHome;
     window.goBack = function() { goHome(); };
 
+    // ── 手机精简布局：⋯ 更多菜单 / 技能按钮 / 未读标记 / 其他任务提醒 ──────────
+    const IS_M = document.documentElement.classList.contains('m');
+    // 技能按钮：手机上快捷栏不平铺技能，点「技能」直接出可运行列表（底部有「管理技能」）
+    window.skillBtnTap = function() { if (IS_M) openCmdSheet(); else openSkillSheet(); };
+
+    // ⋯ 菜单：状态行（在线/控制、项目说明、升级提示）和顶栏低频按钮都收在这；有待处理提示时 ⋯ 带红点
+    const _shown = (id) => { const e = document.getElementById(id); return e && e.style.display !== 'none' && e.textContent.trim() ? e : null; };
+    function mMoreDot() {
+      const g = _shown('guide-chip');
+      document.getElementById('m-more')?.classList.toggle('dot', !!(_shown('update-badge') || _shown('claude-update-badge') || (g && g.textContent.includes('偏长'))));
+    }
+    if (IS_M) new MutationObserver(mMoreDot).observe(document.getElementById('status-bar'), { subtree: true, childList: true, attributes: true, characterData: true });
+    window.openMobileMore = function() {
+      const items = [];
+      const add = (icon, text, fn, color) => items.push({ icon, text, fn, color });
+      add('📁', '文件', () => openFilePanel());
+      const ctx = _shown('ctx-chip'); if (ctx) add('◈', '会话数据（上下文 ' + ctx.textContent.replace(/[^\d%]/g, '') + '）', () => openCtxSheet());
+      const vc = _shown('viewer-count'), cb = _shown('control-badge');
+      if (vc || cb) add('👥', [vc?.textContent, cb?.textContent].filter(Boolean).join(' · '), () => cb && toggleControl());
+      const g = _shown('guide-chip'); if (g) add('', g.textContent, () => showMemory('project'), g.textContent.includes('偏长') ? 'var(--yellow)' : '');
+      const u = _shown('update-badge'); if (u) add('', 'myhi 有更新：' + u.textContent.replace('⬆', '').trim(), () => doUpdate(), 'var(--yellow)');
+      const cu = _shown('claude-update-badge'); if (cu) add('', 'Claude 有更新：' + cu.textContent.replace('⬆', '').trim(), () => doClaudeUpdate(), 'var(--blue)');
+      add('⚙', '设置', () => openSettings());
+      add('❓', '使用说明', () => openChatHelp());
+      const ov = document.createElement('div');
+      ov.style.cssText = 'position:fixed;inset:0;z-index:120;background:rgba(0,0,0,0.5);display:flex;align-items:flex-end';
+      const esc2 = (t) => { const d = document.createElement('div'); d.textContent = t; return d.innerHTML; };
+      ov.innerHTML = '<div style="background:var(--surface);border-radius:18px 18px 0 0;width:100%;padding:0.4rem 0 max(0.8rem,env(safe-area-inset-bottom))">' +
+        '<div style="padding:0.5rem 1.1rem 0.3rem;font-size:0.72rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + esc2(document.getElementById('session-cwd')?.textContent || '') + '</div>' +
+        items.map((it, i) => '<div data-i="' + i + '" style="padding:0.8rem 1.1rem;border-top:1px solid var(--surface2);font-size:0.9rem;cursor:pointer;color:' + (it.color || 'var(--text)') + '">' + (it.icon ? it.icon + '&nbsp; ' : '') + esc2(it.text) + '</div>').join('') +
+        '</div>';
+      ov.onclick = (e) => { const r = e.target.closest('[data-i]'); ov.remove(); if (r) items[+r.dataset.i].fn(); };
+      document.body.appendChild(ov);
+    };
+
+    // 手机：手指往上推（往下看内容）收起顶栏，往下拉再出现；只跟手势走，AI 输出时的自动滚底不触发
+    if (IS_M) {
+      const bar = document.getElementById('top-bar');
+      let y0 = null, hidden = false;
+      const setHidden = (h) => {
+        if (h === hidden) return; hidden = h;
+        bar.style.marginTop = h ? -bar.offsetHeight + 'px' : '';
+      };
+      chatArea.addEventListener('touchstart', (e) => { y0 = e.touches[0].clientY; }, { passive: true });
+      chatArea.addEventListener('touchmove', (e) => {
+        if (y0 == null) return;
+        const dy = e.touches[0].clientY - y0;
+        if (Math.abs(dy) < 12) return;
+        setHidden(dy < 0 && chatArea.scrollTop > 40);
+        y0 = e.touches[0].clientY;
+      }, { passive: true });
+      chatArea.addEventListener('touchend', () => { y0 = null; }, { passive: true });
+      chatArea.addEventListener('scroll', () => { if (chatArea.scrollTop < 10) setHidden(false); }, { passive: true });
+    }
+
+    // 本页在看 = 本任务已读（切换面板 / 首页据此算「新完成」）
+    let _seenAt = 0;
+    function markSeenNow(force) {
+      if (document.hidden || !window.myhiAttn) return;
+      if (!force && Date.now() - _seenAt < 2000) return;
+      _seenAt = Date.now(); myhiAttn.markSeen(SESSION_ID);
+    }
+    markSeenNow(true);
+    document.addEventListener('visibilitychange', () => markSeenNow(true));
+    window.addEventListener('pagehide', () => markSeenNow(true));
+    socket.on('agent:message', () => markSeenNow());
+
+    // 其他任务的提醒：手机上每 8 秒拉一次列表（页面可见时），有任务转为「等你回复」或刚跑完就弹提示条，点了直接切过去
+    let _attnSnap = null, _toastTimer = null;
+    function mToast(s, kind) {
+      const el = document.getElementById('m-toast'); if (!el) return;
+      const esc2 = (t) => { const d = document.createElement('div'); d.textContent = t || ''; return d.innerHTML; };
+      el.style.borderLeftColor = myhiAttn.color[kind] || 'var(--green)';
+      el.innerHTML = '<div>「' + esc2(s.title || '(无标题)') + '」' + (kind === 'wait' ? '在等你回复' : '已完成') + ' <span style="color:var(--muted);font-size:0.72rem">点此切换</span></div>' +
+        (s.lastText ? '<div class="sub">' + esc2(s.lastText) + '</div>' : '');
+      el.onclick = () => { window.location.href = '/terminal/' + s.id; };
+      el.classList.add('show');
+      clearTimeout(_toastTimer); _toastTimer = setTimeout(() => el.classList.remove('show'), 8000);
+    }
+    function attnCheck(list) {
+      if (!IS_M || !window.myhiAttn || !Array.isArray(list)) return;
+      myhiAttn.init(list);
+      const me = list.find(x => x.id === SESSION_ID)?.owner;
+      const snap = {};
+      for (const s of list) {
+        const st = s.pending > 0 ? 'wait' : s.busy ? 'busy' : '';
+        snap[s.id] = st;
+        // 只提醒自己的任务（管理员的列表里有别人的任务，别人的完成不该弹给你）
+        if (!_attnSnap || s.id === SESSION_ID || !(s.id in _attnSnap) || (me && s.owner && s.owner !== me)) continue;
+        const was = _attnSnap[s.id];
+        if (st === 'wait' && was !== 'wait') mToast(s, 'wait');
+        else if (was === 'busy' && st === '') mToast(s, 'done');
+      }
+      _attnSnap = snap;
+    }
+    socket.on('sessions', attnCheck);
+    if (IS_M) setInterval(() => { if (!document.hidden && socket.connected) socket.emit('list'); }, 8000);
+
     // ── 快速切换会话（免退出到首页）──────────────────────────
     function switchRelTime(ms) {
       if (!ms) return '';
@@ -4624,6 +4766,8 @@
         sessions = await res.json();
       } catch { addStatusMessage && addStatusMessage('会话列表加载失败'); return; }
       sessions.sort((a, b) => switchSessTime(b) - switchSessTime(a)); // 最新在前
+      const A = window.myhiAttn; if (A) A.init(sessions);
+      const attnOf = (s) => (A && s.id !== SESSION_ID ? A.of(s) : (s.pending > 0 ? 'wait' : s.busy ? 'busy' : ''));
       const esc2 = (s) => { const d = document.createElement('div'); d.textContent = s == null ? '' : s; return d.innerHTML; };
       let mode = localStorage.getItem('myhi_group_mode') || 'time'; // 与首页共用记忆
 
@@ -4631,12 +4775,15 @@
         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:var(--text3);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(' · ');
+        const at = attnOf(s);
+        const sub = [A && at ? A.label[at] : (s.busy ? '运行中' : ''), proj, switchRelTime(switchSessTime(s)), s.controlHolderName ? (s.controlHolderName + ' 控制中') : ''].filter(Boolean).join(' · ');
+        const dotC = at && A ? A.color[at] : (s.alive ? 'var(--green)' : 'var(--dim)');
         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 var(--surface2);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 ? 'var(--green)' : 'var(--dim)') + '"></span>' +
+          '<span style="width:8px;height:8px;border-radius:50%;flex-shrink:0;background:' + dotC + (at === 'wait' || at === 'busy' ? ';animation:pulse 1s infinite' : '') + '"></span>' +
           '<div style="flex:1;min-width:0">' +
             '<div style="font-size:0.9rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + esc2(s.title || '(无标题)') + ' ' + (cur ? '<span style="font-size:0.68rem;color:var(--purple)">· 当前</span>' : '') + '</div>' +
             '<div style="font-size:0.72rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + esc2(sub) + '</div>' +
+            (s.lastText ? '<div style="font-size:0.72rem;color:var(--text2, var(--muted));opacity:0.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">🤖 ' + esc2(s.lastText) + '</div>' : '') +
             (tags ? '<div style="display:flex;flex-wrap:wrap;gap:0.25rem;margin-top:0.25rem">' + tags + '</div>' : '') +
           '</div></div>';
       };
@@ -4659,7 +4806,12 @@
           if (untag.length) h += groupHdr('未分类', untag.length) + untag.map(rowHTML).join('');
           return h;
         }
-        return sessions.map(rowHTML).join('');
+        // 最近：需要你关注的排前面（等你回复 > 执行中 > 新完成），其余按时间
+        const buckets = { wait: [], busy: [], done: [], '': [] };
+        for (const s of sessions) buckets[attnOf(s)].push(s);
+        if (!buckets.wait.length && !buckets.busy.length && !buckets.done.length) return sessions.map(rowHTML).join('');
+        return ['wait', 'busy', 'done', ''].filter(k => buckets[k].length)
+          .map(k => groupHdr(k ? ({ wait: '🟠 等你回复', busy: '🔵 执行中', done: '🟢 新完成' })[k] : '其他', buckets[k].length) + buckets[k].map(rowHTML).join('')).join('');
       };
 
       const overlay = document.createElement('div');
@@ -6147,19 +6299,23 @@
       filterInp.value = '';
       const render = (keyword = '') => {
         const kw = keyword.toLowerCase();
-        // 命令面板只列用户/项目技能（内置技能始终在快捷栏直接显示）
+        // 命令面板只列用户/项目技能（内置技能在快捷栏直接显示）；手机精简布局快捷栏不平铺技能 → 内置也列进来
+        const mob = document.documentElement.classList.contains('m');
+        document.getElementById('cmd-sheet-title').textContent = mob ? '技能' : '自定义命令';
         const filtered = _customSkills.filter(s =>
-          s.source !== 'builtin' && (!kw || s.name.toLowerCase().includes(kw) || (s.desc || '').toLowerCase().includes(kw)));
-        listEl.innerHTML = filtered.length
+          (mob || s.source !== 'builtin') && (!kw || s.name.toLowerCase().includes(kw) || (s.desc || '').toLowerCase().includes(kw)));
+        filtered.sort((a, b) => (a.source === 'builtin') - (b.source === 'builtin'));
+        listEl.innerHTML = (filtered.length
           ? filtered.map(s => `<div class="action-sheet-item" onclick="runSkillAndClose('${escHtml(s.name)}', '${s.kind || 'command'}')">
-              <div><div style="color:var(--purple3)">${s.kind === 'skill' ? '🧠 ' : '/'}${escHtml(s.name)}</div>${s.desc ? `<div class="desc">${escHtml(s.desc)}</div>` : ''}</div>
+              <div><div style="color:${s.source === 'builtin' ? 'var(--teal)' : 'var(--purple3)'}">${s.kind === 'skill' ? '🧠 ' : '/'}${escHtml(s.name)}</div>${s.desc ? `<div class="desc">${escHtml(s.desc)}</div>` : ''}</div>
             </div>`).join('')
-          : '<div style="text-align:center;color:var(--muted);padding:1.5rem 0;font-size:0.82rem">无匹配命令</div>';
+          : '<div style="text-align:center;color:var(--muted);padding:1.5rem 0;font-size:0.82rem">无匹配命令</div>')
+          + (mob ? `<div class="action-sheet-item" onclick="closeCmdSheet();openSkillSheet()"><div><div style="color:var(--muted)">⚙ 管理技能（生成 / 编辑 / 分享 / 导入）</div></div></div>` : '');
       };
       render();
       filterInp.oninput = (e) => render(e.target.value);
       sheet.classList.add('open');
-      setTimeout(() => filterInp.focus(), 100);
+      if (!document.documentElement.classList.contains('m')) setTimeout(() => filterInp.focus(), 100);   // 手机上自动聚焦会弹键盘挡住列表
     };
     window.closeCmdSheet = function() {
       document.getElementById('cmd-sheet').classList.remove('open');

package/dist/index.html

@@ -17,6 +17,7 @@
   <title>myhi</title>
   <script src="/lib/machine.js"></script>
   <script src="/lib/prefs.js"></script>
+  <script src="/lib/attn.js"></script>
   <script src="/sio-client/socket.io.min.js"></script>
   <script src="/theme.js"></script>
   <script>
@@ -74,8 +75,8 @@
       justify-content: space-between;
       gap: 0.75rem;
       padding: 0 0.75rem;
-      padding-top: max(1rem, env(safe-area-inset-top));
-      padding-bottom: 0.75rem;
+      padding-top: max(0.45rem, env(safe-area-inset-top));
+      padding-bottom: 0.45rem;
       background: var(--bg);
       position: sticky;
       top: 0;
@@ -402,6 +403,10 @@
     .st-busy::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: stPulse 1.2s ease-in-out infinite; }
     @keyframes stPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }
     .st-dead { color: var(--muted); }
+    .st-wait { color: #db6d28; font-weight: 600; }
+    .st-wait::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #db6d28; animation: stPulse 0.8s ease-in-out infinite; }
+    .st-done { color: var(--green); font-weight: 600; }
+    .st-done::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
     .viewers {
       font-size: 0.7rem;
       color: var(--muted);
@@ -738,8 +743,6 @@
     <button id="ws-collapse" onclick="wsSetCollapsed(true)" title="收起任务栏（收起后左侧保留窄栏）">«</button>
     <div class="hd-actions">
       <button id="grid-btn" class="hd-btn" onclick="location.href='/grid'" title="分屏工作台（多任务并排）">▦<span class="hd-txt"> 分屏</span></button>
-      <button id="doctor-btn" class="hd-btn" onclick="openDoctor()" title="会话体检">🩺<span class="hd-txt"> 体检</span></button>
-      <button id="usage-btn" class="hd-btn" onclick="showUsage()" title="用量">📊<span class="hd-txt"> 用量</span></button>
       <button id="help-btn" class="hd-btn" onclick="openHelpSheet()" title="使用说明 / 快速上手">❓<span class="hd-txt"> 帮助</span></button>
       <button id="settings-btn" class="hd-btn" onclick="openSettings()" title="设置（外观 / 本机名称 / 语音 / 服务）">⚙<span class="hd-txt"> 设置</span></button>
       <button id="user-btn" class="hd-btn" onclick="toggleUserMenu(event)" title="账户：修改密码 / 退出登录" style="display:none">👤<span id="user-name" class="hd-txt"></span></button>
@@ -924,6 +927,12 @@
     <div id="set-asr-status" class="set-status"></div>
   </div>
 
+  <div class="set-group-t">工具</div>
+  <div class="set-card">
+    <button class="set-link" onclick="closeSettings();openDoctor()">🩺 会话体检 <small>查中毒 / 过大的会话，一键重开</small></button>
+    <button class="set-link" onclick="closeSettings();showUsage()">📊 用量 <small>费用 / token 统计</small></button>
+  </div>
+
   <div id="set-svc">
     <div class="set-group-t" id="set-svc-t">服务</div>
     <div class="set-card">
@@ -1561,7 +1570,11 @@
     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('');
     // 会话名片：一堆会话都叫 claude，靠第一条真人消息认出「这个任务当初是干啥的」
-    const gist = s.firstUserText
+    const at = window.myhiAttn ? myhiAttn.of(s) : '';
+    // 等你回复 / 新完成：比起「当初问了啥」，AI 最后说了啥更有用
+    const gist = (at === 'wait' || at === 'done') && s.lastText
+      ? `<div class="card-gist" style="font-size:0.72rem;color:var(--muted,var(--muted));margin-top:0.18rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0.85">🤖 ${esc(s.lastText)}</div>`
+      : s.firstUserText
       ? `<div class="card-gist" style="font-size:0.72rem;color:var(--muted,var(--muted));margin-top:0.18rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0.85">💬 ${esc(s.firstUserText)}</div>`
       : '';
     const nDraft = _draftCounts[s.id] || 0;
@@ -1579,8 +1592,10 @@
         </div>
         <div class="card-right">
           <button class="card-more" title="更多操作（重命名 / 标签 / 终止）">⋯</button>
-          ${!s.alive ? '<div class="st st-dead" title="会话进程已退出，点进去会自动恢复">已停止</div>'
-            : s.busy ? '<div class="st st-busy" title="AI 正在执行">执行中</div>' : ''}
+          ${at === 'wait' ? '<div class="st st-wait" title="AI 在等你回答提问 / 审批方案">等你回复</div>'
+            : !s.alive ? '<div class="st st-dead" title="会话进程已退出，点进去会自动恢复">已停止</div>'
+            : s.busy ? '<div class="st st-busy" title="AI 正在执行">执行中</div>'
+            : at === 'done' ? '<div class="st st-done" title="你上次看过之后有了新回复">新完成</div>' : ''}
           ${s.viewers > 1 ? `<div class="viewers">👁 ${s.viewers}</div>` : ''}
         </div>
       </div>`;
@@ -1608,8 +1623,11 @@
     </div>`;
   }
 
+  // 手机（触屏窄屏）的「最近」视图按关注度分组；电脑工作台左侧列表保持纯时间序
+  const _attnFirst = () => !!window.myhiAttn && matchMedia('(pointer: coarse) and (max-width: 768px)').matches;
   function renderSessions(sessions) {
     if (Array.isArray(sessions)) _allSessions = sessions;
+    if (window.myhiAttn) myhiAttn.init(_allSessions);
     // 正在原地改名：列表每 5 秒刷新一次会把输入框冲掉，先攒着，改完再刷
     if (_renaming) { _renderPending = true; return; }
     renderTagFilter();
@@ -1670,6 +1688,14 @@
         html += groupHeaderHTML('未分类', untagged.length, 't:__none__');
         if (!isCollapsed('t:__none__') || q) html += untagged.map(cardHTML).join('');
       }
+    } else if (_attnFirst()) {
+      // 手机：需要你关注的排前面（等你回复 > 执行中 > 新完成），其余按时间
+      const b = { wait: [], busy: [], done: [], '': [] };
+      for (const s of items) b[myhiAttn.of(s)].push(s);
+      const lbl = { wait: '🟠 等你回复', busy: '🔵 执行中', done: '🟢 新完成', '': '其他' };
+      const any = b.wait.length || b.busy.length || b.done.length;
+      html = !any ? items.map(cardHTML).join('')
+        : ['wait', 'busy', 'done', ''].filter(k => b[k].length).map(k => groupHeaderHTML(lbl[k], b[k].length) + b[k].map(cardHTML).join('')).join('');
     } else {
       html = items.map(cardHTML).join('');
     }