@wendongfly/myhi 1.3.188 → 1.3.190

package/dist/chat.html

@@ -9,7 +9,7 @@
   <link rel="manifest" href="/manifest.json">
   <link rel="apple-touch-icon" href="/icon.png">
   <title>myhi 会话</title>
-  <script src="/lib/machine.js"></script>
+  <script src="/lib/machine.js" data-session></script>
   <script src="/sio-client/socket.io.min.js"></script>
   <script>
     (function(){try{
@@ -202,6 +202,9 @@
     .msg-raw:hover .raw-copy, .raw-copy.done { opacity: 1; }
     .raw-copy:hover, .cp-btn:hover { color: var(--text); border-color: var(--blue); }
     @media (hover: none) { .raw-copy { opacity: 0.85; } }
+    /* AI 工具的原始输出默认不显示（设置→聊天→显示 打开；终端会话的命令输出不受影响） */
+    body.hide-toolout .msg-raw.tool-out { display: none; }
+    .setting-toggle.off { opacity: 0.45; pointer-events: none; }
     /* 消息里其他带框内容（代码块/表格/diff/工具详情…）同款复制按钮，见 attachCopyBtns */
     .cpw, .cp-host { position: relative; }
     .cp-btn { user-select: none; }
@@ -647,7 +650,8 @@
       <label class="setting-toggle"><span>显示思考过程</span><input type="checkbox" id="set-thinking" checked></label>
       <label class="setting-toggle"><span>工具调用默认折叠</span><input type="checkbox" id="set-collapse" checked></label>
       <label class="setting-toggle"><span>思考过程默认折叠</span><input type="checkbox" id="set-thinkcollapse" checked></label>
-      <label class="setting-toggle"><span>工具输出只显示前 8 行（可展开）</span><input type="checkbox" id="set-rawclip" checked></label>
+      <label class="setting-toggle"><span>显示工具输出内容（AI 执行命令/读文件的原始结果）</span><input type="checkbox" id="set-toolout"></label>
+      <label class="setting-toggle" id="row-rawclip"><span>　└ 工具输出只显示前 8 行（可展开）</span><input type="checkbox" id="set-rawclip" checked></label>
     </div>
     <div class="setting-group" data-stab="chat" style="display:none">
       <h4>输入</h4>
@@ -1209,7 +1213,7 @@
     // 快捷栏：skVisible 逐按钮勾选（唯一显隐依据，null=默认全显）；skMode 仅记录最接近的预设（高亮用）
     const SK_LABELS = { draft:'📥 草稿', folder:'📂 文件夹', model:'模型', plan:'计划', compact:'压缩', resume:'恢复', clear:'清除', secrets:'🔑 密钥', guard:'🛡 护栏', followup:'🔄 跟进', git:'提交', memory:'记忆', skills:'技能', cost:'费用' };
     const SK_NORMAL_PRESET = ['draft', 'folder', 'plan', 'clear', 'guard', 'memory', 'skills'];
-    const DEFAULT_SETTINGS = { parseOutput: true, showThinking: true, collapseTools: true, thinkCollapsed: true, rawClip: true, enterMode: 'auto', skMode: null, skVisible: null };
+    const DEFAULT_SETTINGS = { parseOutput: true, showThinking: true, collapseTools: true, thinkCollapsed: true, rawClip: true, showToolOut: false, enterMode: 'auto', skMode: null, skVisible: null };
     let settings = loadSettings();
 
     function loadSettings() { try { return { ...DEFAULT_SETTINGS, ...JSON.parse(localStorage.getItem('myhi_chat_settings')) }; } catch { return { ...DEFAULT_SETTINGS }; } }
@@ -1315,6 +1319,21 @@
     let _historyLoading = false;  // 防抖锁
     let _userScrolledUp = false;  // 用户已主动往上翻 → 关掉 trim 防被自动删
     const _histFingerprints = new Set(); // 已渲染历史消息指纹（翻页重叠兜底去重，agent:history 重放时清空）
+    // 回放里已画过的块（工具调用 id / 工具结果 id / 文本按 message.id）。AI 正在跑时进入会话（分屏盯任务最常见）：
+    // 服务端从 transcript 回放时，最新几条已经写进 transcript，紧接着同样的块又作为实时事件推过来 → 画两次。
+    // 实时事件按这些 id 查重，回放过的就跳过；agent:history 重放时清空。
+    const _replayedBlocks = new Set();
+    function blockKey(block, msgId) {
+      if (block.type === 'tool_use' && block.id) return 'tu:' + block.id;
+      if (block.type === 'tool_result' && block.tool_use_id) return 'tr:' + block.tool_use_id;
+      if (block.type === 'text' && block.text && msgId) return 'tx:' + msgId + ':' + block.text.slice(0, 80);
+      return null;
+    }
+    // 实时块是否在回放里画过（画过返回 true，调用方跳过）
+    function seenInReplay(block, msgId) {
+      const k = blockKey(block, msgId);
+      return !!k && _replayedBlocks.has(k);
+    }
 
     // 命令历史
     const cmdHistory = [];
@@ -2080,6 +2099,9 @@
     }
 
     function renderHistoryMessage(msg, parent) {
+      if (msg.type === 'assistant' && Array.isArray(msg.message?.content)) {
+        for (const b of msg.message.content) { const k = blockKey(b, msg.message.id); if (k) _replayedBlocks.add(k); }
+      } else if (msg.type === 'tool_result' && msg.id) _replayedBlocks.add('tr:' + msg.id);
       if (subaRoute(msg)) return; // 子代理内部历史消息归入对应面板（_history 兜底路径才有）
       const fp = histFingerprint(msg);
       if (fp) {
@@ -2094,7 +2116,7 @@
         if (!text) return;
         // 与 live 一致：工具输出 = 工具卡后面的独立 raw 代码块（addRawOutput 同款）
         const el = document.createElement('div');
-        el.className = 'msg msg-raw';
+        el.className = 'msg msg-raw tool-out';
         const block = document.createElement('div');
         block.className = 'code-block';
         block.innerHTML = renderAnsiHtml(text);
@@ -2268,13 +2290,14 @@
       }
     }
 
-    function addRawOutput(raw) {
+    // tool=true：AI 工具的输出（受「显示工具输出内容」开关控制）；否则是终端会话的命令输出，始终显示
+    function addRawOutput(raw, tool = false) {
       endStream(); endToolGroup();
       removeThinking();
       if (!stripAnsi(raw).trim()) return;
-      // 合并到上一个 raw 输出块（避免 DOM 碎片化）
+      // 合并到上一个同类 raw 输出块（避免 DOM 碎片化）
       const last = chatArea.lastElementChild;
-      if (last?.classList.contains('msg-raw')) {
+      if (last?.classList.contains('msg-raw') && last.classList.contains('tool-out') === tool) {
         const block = last.querySelector('.code-block');
         if (block) {
           block.innerHTML += renderAnsiHtml(raw);
@@ -2287,7 +2310,7 @@
         }
       }
       const msg = document.createElement('div');
-      msg.className = 'msg msg-raw';
+      msg.className = 'msg msg-raw' + (tool ? ' tool-out' : '');
       const block = document.createElement('div');
       block.className = 'code-block';
       block.innerHTML = renderAnsiHtml(raw);
@@ -2714,6 +2737,7 @@
         case 'user': {
           // 只有字符串 content 才可能是真人/草稿发言；claude 原生 user 事件带数组 content
           // （tool_result 块）不是用户说话，别渲染成气泡
+          if (msg.from && msg.from === socket.id) break;   // 自己发的，sendCommand 时已经画过
           if (msg.content && typeof msg.content === 'string') {
             endStream();
             const kind = syntheticUserKind(msg.content);
@@ -2743,6 +2767,7 @@
             // 避免渲染完第一段 text 后置位标志，导致同事件内 [text, tool_use, text] 的第二段被跳过
             const skipText = _streamedTextThisCall;
             for (const block of msg.message.content) {
+              if (seenInReplay(block, msg.message.id)) continue;   // 进会话时回放里已经画过
               if (block.type === 'thinking' && block.thinking) {
                 showThinking(block.thinking);
               } else if (block.type === 'text' && block.text) {
@@ -2761,7 +2786,7 @@
                 }
               } else if (block.type === 'tool_result') {
                 const content = typeof block.content === 'string' ? block.content : JSON.stringify(block.content);
-                if (!subaTryComplete(block.tool_use_id, content)) addRawOutput(content);
+                if (!subaTryComplete(block.tool_use_id, content)) addRawOutput(content, true);
               }
             }
           }
@@ -2841,11 +2866,11 @@
           // 独立工具结果消息。同时作为 call 边界兜底：如果某适配器没发 message_start，
           // 这里重置 call 标志能保证后续 assistant 文本不被前一个 call 的标志误吃
           _streamedTextThisCall = false;
-          if (msg.content) {
+          if (msg.content && !seenInReplay({ type: 'tool_result', tool_use_id: msg.tool_use_id })) {
             const text = typeof msg.content === 'string' ? msg.content
               : Array.isArray(msg.content) ? msg.content.map(b => b.text || '').join('\n')
               : JSON.stringify(msg.content);
-            if (text.trim() && !subaTryComplete(msg.tool_use_id, text)) addRawOutput(text);
+            if (text.trim() && !subaTryComplete(msg.tool_use_id, text)) addRawOutput(text, true);
           }
           setWorkState('working');
           break;
@@ -2878,6 +2903,7 @@
 
       subaResetAll();
       _histFingerprints.clear();
+      _replayedBlocks.clear();
       for (const msg of history) {
         renderHistoryMessage(msg, chatArea);
         trimMessages(); scrollToBottom();
@@ -4100,6 +4126,8 @@
       document.getElementById('set-collapse').checked = settings.collapseTools;
       document.getElementById('set-thinkcollapse').checked = settings.thinkCollapsed !== false;
       document.getElementById('set-rawclip').checked = settings.rawClip !== false;
+      document.getElementById('set-toolout').checked = !!settings.showToolOut;
+      applyToolOut();
       syncEnterModeUI();
       syncSkModeUI();
     }
@@ -4107,6 +4135,17 @@
     document.getElementById('set-thinking').addEventListener('change', (e) => { settings.showThinking = e.target.checked; saveSettings(); });
     document.getElementById('set-collapse').addEventListener('change', (e) => { settings.collapseTools = e.target.checked; saveSettings(); });
     document.getElementById('set-thinkcollapse').addEventListener('change', (e) => { settings.thinkCollapsed = e.target.checked; saveSettings(); });
+    // 工具输出显隐：关着时「只显示前 8 行」没意义，置灰
+    function applyToolOut() {
+      document.body.classList.toggle('hide-toolout', !settings.showToolOut);
+      document.getElementById('row-rawclip')?.classList.toggle('off', !settings.showToolOut);
+    }
+    applyToolOut();
+    document.getElementById('set-toolout').addEventListener('change', (e) => {
+      settings.showToolOut = e.target.checked; saveSettings(); applyToolOut();
+      // 刚显示出来的块要重新量一次高度（隐藏时量不出是否超过 8 行）
+      if (settings.showToolOut) chatArea.querySelectorAll('.msg-raw.tool-out').forEach(m => rawClipSync(m));
+    });
     document.getElementById('set-rawclip').addEventListener('change', (e) => {
       settings.rawClip = e.target.checked; saveSettings();
       // 已渲染的输出块立即跟随新默认（用户手动点过的块也一并重置）
@@ -6242,38 +6281,48 @@
       setTimeout(checkUpdate, 10 * 60 * 1000);
     })();
 
-    window.doUpdate = async function() {
+    // 等升级落地：轮询 /api/version（重启/停服期间连不上是正常的）。
+    // 成功 = 版本变了（且等于目标）；失败 = 服务端报了本次升级的失败原因；10 分钟兜底超时。
+    async function waitUpgrade(from, target, onTick) {
+      const t0 = Date.now();
+      while (Date.now() - t0 < 10 * 60 * 1000) {
+        await new Promise(r => setTimeout(r, 3000));
+        let v = null;
+        try { const r = await fetch('/api/version', { cache: 'no-store' }); if (r.ok) v = await r.json(); } catch {}
+        onTick?.(!!v, Math.round((Date.now() - t0) / 1000));
+        if (!v) continue;
+        if (v.current !== from && (!target || v.current === target)) return { ok: true, version: v.current };
+        const last = v.upgrade?.last;
+        if (!v.upgrade?.running && last && !last.ok && last.at >= t0 - 5000) return { ok: false, error: last.error };
+      }
+      return { ok: false, error: '等了 10 分钟仍未完成，请稍后刷新页面查看版本，或到服务器上查看 myhi log' };
+    }
+    window.doUpdate = async function(force) {
       if (!_versionInfo?.updateAvailable) return;
-      if (!confirm(`更新 myhi?\n当前: ${_versionInfo.current}\n最新: ${_versionInfo.latest}\n\n更新后服务将自动重启`)) return;
+      if (!force && !confirm(`更新 myhi?\n当前: ${_versionInfo.current}\n最新: ${_versionInfo.latest}\n\n更新后服务将自动重启`)) return;
       const badge = document.getElementById('update-badge');
-      badge.textContent = '⬆ 更新中...';
-      badge.style.color = 'var(--muted)';
+      const setBadge = (t, c) => { badge.textContent = t; badge.style.color = c || 'var(--muted)'; };
+      setBadge('⬆ 更新中...');
       try {
-        const resp = await fetch('/api/update', { method: 'POST' });
-        const data = await resp.json();
+        const resp = await fetch('/api/update', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ force: !!force }) });
+        const data = await resp.json().catch(() => ({}));
         if (!data.ok) {
+          // 有任务正在执行：说清楚会打断谁，确认后强制升级
+          if (data.busy?.length) {
+            if (confirm(data.error + '\n\n仍然现在升级吗？')) return doUpdate(true);
+            setBadge(`⬆ ${_versionInfo.latest}`, 'var(--yellow)'); return;
+          }
           addStatusMessage('更新失败：' + (data.error || '未知错误'));
-          badge.textContent = '⬆ 更新失败';
-          badge.style.color = 'var(--red)';
+          setBadge('⬆ 更新失败', 'var(--red)');
           return;
         }
         addStatusMessage(data.message || '升级中...');
-        badge.textContent = '⬆ 重启中...';
-        // 等待服务重启后自动刷新
-        setTimeout(() => {
-          let retries = 0;
-          const poll = setInterval(async () => {
-            try {
-              const r = await fetch('/api/version');
-              if (r.ok) { clearInterval(poll); location.reload(); }
-            } catch {}
-            if (++retries > 30) { clearInterval(poll); badge.textContent = '⬆ 请手动刷新'; badge.style.color = 'var(--red)'; }
-          }, 3000);
-        }, 5000);
+        const r = await waitUpgrade(data.from, data.target, (up, sec) => setBadge(up ? `⬆ 安装中 ${sec}s` : `⬆ 重启中 ${sec}s`));
+        if (r.ok) { addStatusMessage(`已升级到 ${r.version}，即将刷新`); setTimeout(() => location.reload(), 800); }
+        else { addStatusMessage('更新失败：' + r.error); setBadge('⬆ 更新失败', 'var(--red)'); }
       } catch (e) {
         addStatusMessage('更新失败: ' + e.message);
-        badge.textContent = `⬆ ${_versionInfo.latest}`;
-        badge.style.color = 'var(--yellow)';
+        setBadge(`⬆ ${_versionInfo.latest}`, 'var(--yellow)');
       }
     };
 

package/dist/index.html

@@ -187,6 +187,13 @@
     }
     .empty-state svg { opacity: 0.3; }
     .empty-state p { font-size: 0.95rem; }
+    .empty-new { background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 0.65rem 1.4rem; font-size: 0.92rem; font-weight: 600; cursor: pointer; box-shadow: 0 4px 16px rgba(124,58,237,0.35); }
+    .empty-new:hover { background: var(--accent2); }
+    .empty-state small { font-size: 0.72rem; opacity: 0.8; }
+    /* 搜索框旁的「＋ 新建任务」：大屏上右下角 FAB 离内容太远容易看不到；手机上有 FAB 就够了 */
+    #new-btn { flex-shrink: 0; white-space: nowrap; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-size: 0.8rem; font-weight: 600; padding: 0.42rem 0.85rem; cursor: pointer; }
+    #new-btn:hover { background: var(--accent2); }
+    @media (max-width: 540px) { #new-btn { display: none; } }
 
     /* ── Session card ── */
     .card {
@@ -283,6 +290,14 @@
       z-index: 20;
     }
     #fab:active { background: var(--accent2); transform: scale(0.93); }
+    /* 首次引导关掉后：FAB 呼吸光圈 + 气泡指一下「点这里新建任务」，只出现一次 */
+    #fab.hint { animation: fabPulse 1.4s ease-out infinite; }
+    @keyframes fabPulse { 0% { box-shadow: 0 0 0 0 rgba(124,58,237,0.7), 0 4px 20px rgba(124,58,237,0.5); } 100% { box-shadow: 0 0 0 22px rgba(124,58,237,0), 0 4px 20px rgba(124,58,237,0.5); } }
+    #fab-tip { display: none; position: fixed; z-index: 21; right: max(5.2rem, calc(env(safe-area-inset-right) + 4.7rem)); bottom: max(1.85rem, calc(env(safe-area-inset-bottom) + 1.35rem));
+      background: var(--accent); color: #fff; font-size: 0.85rem; font-weight: 600; padding: 0.5rem 0.8rem; border-radius: 10px; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,0.35); cursor: pointer; }
+    #fab-tip::after { content: ''; position: absolute; right: -6px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-right: none; border-left-color: var(--accent); }
+    #fab-tip.show { display: block; animation: tipIn 0.3s ease; }
+    @keyframes tipIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
 
     /* 随手记 FAB：灵感常常在你不在任何会话页的时候冒出来，首页也得能记 */
     #fab-note {
@@ -604,6 +619,7 @@
              autocomplete="off" spellcheck="false"
              style="flex:1;background:var(--bg,var(--bg));border:1px solid var(--border,var(--border));border-radius:8px;color:var(--text,var(--text));font-size:0.8rem;padding:0.4rem 0.7rem;outline:none">
       <span id="search-count" style="font-size:0.72rem;color:var(--muted,var(--muted));white-space:nowrap"></span>
+      <button id="new-btn" onclick="openSheet()" title="新建任务（也可点右下角 ＋）">＋ 新建任务</button>
     </div>
     <div id="group-seg" style="display:inline-flex;align-self:flex-start;background:var(--bg,var(--bg));border:1px solid var(--border,var(--border));border-radius:8px;overflow:hidden">
       <button class="grp-btn" data-group="time"    style="background:none;border:none;color:var(--muted,var(--muted));font-size:0.78rem;padding:0.35rem 0.8rem;cursor:pointer">最近</button>
@@ -619,13 +635,16 @@
         <rect x="2" y="4" width="20" height="16" rx="2"/>
         <path d="M8 9l4 3-4 3M13 15h3"/>
       </svg>
-      <p>还没有终端会话</p>
+      <p>还没有任务</p>
+      <button class="empty-new" onclick="openSheet()">＋ 新建第一个任务</button>
+      <small>以后随时点右下角的 ＋ 新建</small>
     </div>
   </div>
 </div>
 
 <!-- FAB -->
-<button id="fab" onclick="openSheet()">+</button>
+<button id="fab" onclick="openSheet()" title="新建任务">+</button>
+<div id="fab-tip" onclick="openSheet()">👉 点这里新建任务</div>
 <button id="fab-note" onclick="openNoteSheet()" title="随手记：把想法先记进某个任务的草稿箱">📥</button>
 
 <!-- 使用说明 / 快速上手（首次访问自动弹出，之后从顶栏 ❓ 打开）。桌面居中卡片，手机底部抽屉 -->
@@ -653,7 +672,7 @@
   <div class="hs-tip">📱 手机浏览器打开同一地址即可（局域网 / Tailscale），建议「添加到主屏幕」当 App 用。</div>
   <div class="hs-actions">
     <button class="hs-ghost" onclick="closeHelpSheet()">我知道了</button>
-    <button class="hs-primary" onclick="closeHelpSheet(); openSheet();">＋ 新建第一个任务</button>
+    <button class="hs-primary" onclick="closeHelpSheet(true); openSheet();">＋ 新建第一个任务</button>
   </div>
 </div>
 
@@ -709,7 +728,7 @@
   <div class="set-group-t">这台电脑 · 所有设备生效</div>
   <div class="set-card">
     <div class="set-item inp">
-      <div class="set-lbl">本机名称<small>显示在浏览器标签上</small></div>
+      <div class="set-lbl">本机显示名<small>首页 / 分屏的浏览器标签显示它，不改电脑主机名；留空用主机名</small></div>
       <div class="set-ctl">
         <input id="set-machine-name" class="set-inp" maxlength="32" autocomplete="off" data-save="saveMachineName">
         <button class="set-btn" onclick="saveMachineName()">保存</button>
@@ -1224,7 +1243,9 @@
         <rect x="2" y="4" width="20" height="16" rx="2"/>
         <path d="M8 9l4 3-4 3M13 15h3"/>
       </svg>
-      <p>还没有终端会话</p>
+      <p>还没有任务</p>
+      <button class="empty-new" onclick="openSheet()">＋ 新建第一个任务</button>
+      <small>以后随时点右下角的 ＋ 新建</small>
     </div>`;
 
   function cardHTML(s) {
@@ -1422,11 +1443,21 @@
     document.getElementById('help-backdrop').style.display = 'block';
     document.getElementById('help-sheet').style.display = 'block';
   };
-  window.closeHelpSheet = function() {
+  window.closeHelpSheet = function(creating) {
     document.getElementById('help-backdrop').style.display = 'none';
     document.getElementById('help-sheet').style.display = 'none';
+    const first = !localStorage.getItem('myhi_onboarded');
     localStorage.setItem('myhi_onboarded', '1');   // 看过一次就不再自动弹
+    // 第一次看完引导点的是「我知道了 / ✕」：把用户的视线引到右下角 ＋（大屏上它离内容很远，容易看不到）
+    if (first && !creating) showFabHint();
   };
+  function showFabHint() {
+    const fab = document.getElementById('fab'), tip = document.getElementById('fab-tip');
+    fab.classList.add('hint'); tip.classList.add('show');
+    const done = () => { fab.classList.remove('hint'); tip.classList.remove('show'); document.removeEventListener('pointerdown', done, true); };
+    setTimeout(() => document.addEventListener('pointerdown', done, true), 300);   // 点任何地方（含 ＋ 本身）就收起
+    setTimeout(done, 12000);
+  }
   // 首次访问：自动弹快速上手，带着建第一个任务
   if (!localStorage.getItem('myhi_onboarded') && !new URLSearchParams(location.search).get('embed')) {
     setTimeout(openHelpSheet, 600);