@wendongfly/myhi 1.3.153 → 1.3.155

package/dist/chat.html

@@ -402,6 +402,7 @@
     <button class="top-btn" 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;font-size:0.7rem;color:var(--muted)">上下文</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>
@@ -603,6 +604,16 @@
   <button id="new-msg-btn" onclick="jumpToBottom()">↓ 新消息</button>
 
   <!-- 模型选择面板 -->
+  <!-- 会话数据面板：上下文水位 + 本会话成本/token 明细（点顶栏水位 chip 打开）-->
+  <div id="ctx-sheet" class="action-sheet">
+    <div class="action-sheet-backdrop" onclick="closeCtxSheet()"></div>
+    <div class="action-sheet-box">
+      <div class="action-sheet-title">会话数据</div>
+      <div id="ctx-sheet-body" style="padding:0 0.2rem"><div style="text-align:center;color:var(--muted);font-size:0.8rem;padding:1rem">加载中...</div></div>
+      <button class="action-sheet-cancel" onclick="closeCtxSheet()">关闭</button>
+    </div>
+  </div>
+
   <div id="model-sheet" class="action-sheet">
     <div class="action-sheet-backdrop" onclick="closeModelSheet()"></div>
     <div class="action-sheet-box">
@@ -2167,6 +2178,7 @@
       claudeSession = isClaudeSession(session) || session.mode === 'agent';
       updateShortcutBar();
       updatePlanButton();
+      ctxUpdate(session.contextTokens || 0);
 
       // 更新输入框占位符
       cmdInput.placeholder = session.mode === 'agent' ? '输入消息...' : '输入命令...';
@@ -2242,6 +2254,12 @@
           break;
         case 'assistant':
           removeThinking();
+          if (msg.message?.usage) {
+            const cu = msg.message.usage;
+            const ct = (cu.input_tokens || 0) + (cu.cache_read_input_tokens || 0) + (cu.cache_creation_input_tokens || 0);
+            if (ct > 0) ctxUpdate(ct);
+          }
+          if (/\[1m\]/i.test(msg.message?.model || '')) _ctxIs1M = true;
           if (msg.message?.content) {
             // 进入 loop 前快照：同一 assistant 事件里所有 text 块统一按入口时刻的 call 标志决定，
             // 避免渲染完第一段 text 后置位标志，导致同事件内 [text, tool_use, text] 的第二段被跳过
@@ -2286,6 +2304,12 @@
           // 关键：idle 放最后——渲染最终答复的 addAssistantMessage 会把状态置回 'working'，
           // 若在其之前置 idle 会被顶回「执行中」+ 取消按钮不复位。渲染全部完成后再回 idle。
           setWorkState('idle');
+          // 收尾水位提示：assistant 流中已实时更新 chip，这里按最终 usage 补一次提示（80/90 档各一次）
+          {
+            const ru = msg.usage;
+            const ct = ru ? (ru.input_tokens || 0) + (ru.cache_read_input_tokens || 0) + (ru.cache_creation_input_tokens || 0) : 0;
+            if (ct > 0) { ctxUpdate(ct); ctxMaybeNudge(ct); }
+          }
           break;
         case 'content_block_start':
           // 流式内容块开始：thinking 时创建占位，由 thinking_delta 增量填充；
@@ -2608,6 +2632,113 @@
 
     // ── 输入处理 ──────────────────────────────────
     window.sendCommand = sendCommand;
+    // ── 上下文水位指示 ──────────────────────────────
+    // 数据源：claude 每条 assistant/result 消息的 usage（input + cache 读/写）≈ 当前上下文 token 总量。
+    // claude 满 ~90% 会 auto-compact；myhi 显示水位 + 过阈值提示，让用户在任务节点**主动**压缩更可控。
+    const CTX_WARN = 0.75, CTX_URGENT = 0.9;
+    let _ctxIs1M = false; // stream 里 model 带 [1m] 后缀（如 claude-opus-5-5[1m]）→ 精确判定 1M 窗口
+    function ctxLimit(tokens) {
+      if (_ctxIs1M) return 1_000_000;
+      // 没有 [1m] 标记时的兜底：200k 窗口装不下 >200k，超过即证明是 1M
+      return tokens > 200_000 ? 1_000_000 : 200_000;
+    }
+    function ctxUpdate(tokens) {
+      const chip = document.getElementById('ctx-chip');
+      if (!chip) return;
+      if (!tokens || tokens <= 0) { chip.style.display = 'none'; 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)';
+      // 压缩快捷按钮同步高亮（agent 栏是 doSlashCmd('/compact')，PTY 栏是 doCompact()）
+      for (const sel of [
+        '#sk-claude-agent button[onclick*="/compact"]',
+        '#sk-claude-pty button[onclick*="compact"]',
+      ]) {
+        const cbtn = document.querySelector(sel);
+        if (cbtn) cbtn.style.color = pct >= 75 ? (pct >= 90 ? 'var(--red)' : 'var(--yellow)') : '';
+      }
+    }
+    let _ctxNudgeLevel = 0; // 已提示过的档位：0 无 / 1 警告 / 2 紧急
+    function ctxMaybeNudge(tokens) {
+      const pct = tokens / ctxLimit(tokens) * 100;
+      const level = pct >= 90 ? 2 : pct >= 75 ? 1 : 0;
+      if (level <= _ctxNudgeLevel) return;
+      _ctxNudgeLevel = level;
+      const msg = level === 2
+        ? `⚠️ 上下文已用约 ${Math.round(pct)}%，快满了——claude 即将自动压缩（可能丢细节）。建议现在就在任务节点点「压缩」主动收尾，或 /clear 重开干净会话。`
+        : `💡 上下文已用约 ${Math.round(pct)}%。建议在当前任务收尾后点「压缩」（/compact）释放空间，长对话越往后越慢越贵。`;
+      addStatusMessage(msg);
+    }
+    window.ctxUpdate = ctxUpdate;     // 惯例挂 window（同 doClear/doCompact），便于外部/测试驱动
+    window.ctxMaybeNudge = ctxMaybeNudge;
+
+    // ── 会话数据面板 ────────────────────────────────
+    // 点顶栏「上下文 N%」chip 打开：水位 + 本会话成本/token 明细。
+    // 数据每次打开时从 /api/sessions 现取（toJSON.usage 是服务端权威累计，前端不用自己维护账本）。
+    window.openCtxSheet = async function() {
+      document.getElementById('ctx-sheet').classList.add('open');
+      const body = document.getElementById('ctx-sheet-body');
+      try {
+        const list = await (await fetch('/api/sessions', { credentials: 'same-origin' })).json();
+        const s = (Array.isArray(list) ? list : list.sessions || []).find((x) => x.id === SESSION_ID);
+        if (!s) { body.innerHTML = '<div style="text-align:center;color:var(--muted);font-size:0.8rem;padding:1rem">会话数据不可用</div>'; return; }
+        body.innerHTML = ctxRenderSheet(s);
+      } catch {
+        body.innerHTML = '<div style="text-align:center;color:var(--red);font-size:0.8rem;padding:1rem">加载失败</div>';
+      }
+    };
+    window.closeCtxSheet = function() {
+      document.getElementById('ctx-sheet').classList.remove('open');
+    };
+    function ctxRenderSheet(s) {
+      const C = 'style="margin-bottom:0.7rem;padding:0.7rem 0.85rem;background:var(--bg);border:1px solid var(--surface2);border-radius:10px"';
+      const H = 'style="font-size:0.78rem;font-weight:700;margin-bottom:0.45rem;color:var(--text)"';
+      const R = 'style="display:flex;justify-content:space-between;font-size:0.78rem;color:var(--text2);line-height:1.7"';
+      const V = 'style="color:var(--text);font-family:\'SF Mono\',Consolas,monospace"';
+      const u = s.usage || {};
+      const tokens = s.contextTokens || 0;
+      let html = '';
+
+      // ① 上下文水位
+      if (tokens > 0) {
+        const limit = ctxLimit(tokens);
+        const pct = Math.min(100, Math.round(tokens / limit * 100));
+        const barColor = pct >= 90 ? 'var(--red)' : pct >= 75 ? 'var(--yellow)' : 'var(--blue2)';
+        html += `<div ${C}><div ${H}>上下文水位</div>` +
+          `<div style="background:var(--surface2);border-radius:6px;height:10px;overflow:hidden;margin-bottom:0.4rem"><div style="width:${pct}%;height:100%;background:${barColor};border-radius:6px;transition:width 0.4s"></div></div>` +
+          `<div ${R}><span>${pct}%（${pct >= 90 ? '快满了，建议主动压缩' : pct >= 75 ? '建议任务节点压缩' : '健康'}）</span><span ${V}>${(tokens / 1000).toFixed(1)}k / ${limit >= 1_000_000 ? '1M' : '200k'}</span></div></div>`;
+      } else {
+        html += `<div ${C}><div ${H}>上下文水位</div><div ${R}><span style="color:var(--muted)">本轮还没跑过查询</span></div></div>`;
+      }
+
+      // ② 累计用量（服务端权威账本）
+      html += `<div ${C}><div ${H}>本会话累计</div>` +
+        `<div ${R}><span>查询轮数</span><span ${V}>${u.queryCount || 0}</span></div>` +
+        `<div ${R}><span>花费</span><span ${V}>$${(u.totalCostUSD || 0).toFixed(4)}</span></div>` +
+        `<div ${R}><span>输入 token</span><span ${V}>${fmtK(u.totalInputTokens)}</span></div>` +
+        `<div ${R}><span>输出 token</span><span ${V}>${fmtK(u.totalOutputTokens)}</span></div>` +
+        `<div ${R}><span>cache 读</span><span ${V}>${fmtK(u.totalCacheReadTokens)}</span></div>` +
+        `<div ${R}><span>cache 写</span><span ${V}>${fmtK(u.totalCacheCreationTokens)}</span></div></div>`;
+
+      // ③ 各模型明细（切过模型的会话能看到分模型账目）
+      const mu = u.modelUsage || {};
+      const models = Object.entries(mu);
+      if (models.length) {
+        html += `<div ${C}><div ${H}>分模型</div>`;
+        for (const [m, d] of models) {
+          html += `<div ${R}><span style="max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="${m}">${m}</span><span ${V}>${fmtK(d.inputTokens)}入/${fmtK(d.outputTokens)}出 · $${(d.costUSD || 0).toFixed(4)}</span></div>`;
+        }
+        html += '</div>';
+      }
+      return html;
+    }
+    function fmtK(n) {
+      n = n || 0;
+      return n >= 1_000_000 ? (n / 1_000_000).toFixed(2) + 'M' : n >= 1000 ? (n / 1000).toFixed(1) + 'k' : String(n);
+    }
+
     // 服务端本地处理的 slash 命令（agent.js 拦截后只回一条 system/info、不 spawn claude、
     // 永远等不到 result）—— 这些不能进 thinking/working 态，否则没人把它清回来：
     // 切模型后输入框永远「运行中」（1.3.152 用户实测）。
@@ -3710,6 +3841,8 @@
         if (!isController && canTakeControl()) socket.emit('take-control', { sessionId: SESSION_ID });
         socket.emit('agent:query', { prompt: '/clear' });
         addStatusMessage('已清除对话和 Claude 上下文');
+        _ctxNudgeLevel = 0;
+        ctxUpdate(0); // 上下文已清空，水位指示复位
       } else {
         addStatusMessage('聊天记录已清除');
       }