@wendongfly/myhi 1.3.154 → 1.3.155

package/dist/chat.html

@@ -402,7 +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="doCompact()" title="上下文水位（点击压缩释放空间）" style="display:none;font-size:0.7rem;color:var(--muted)">上下文</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>
@@ -604,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">
@@ -2249,6 +2259,7 @@
             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] 的第二段被跳过
@@ -2625,8 +2636,10 @@
     // 数据源：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) {
-      // 200k 窗口装不下 >200k，超过即证明是 1M 上下文模型
+      if (_ctxIs1M) return 1_000_000;
+      // 没有 [1m] 标记时的兜底：200k 窗口装不下 >200k，超过即证明是 1M
       return tokens > 200_000 ? 1_000_000 : 200_000;
     }
     function ctxUpdate(tokens) {
@@ -2661,6 +2674,71 @@
     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 用户实测）。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wendongfly/myhi",
-  "version": "1.3.154",
+  "version": "1.3.155",
   "description": "Web-based terminal sharing with chat UI — control your terminal from phone via LAN/Tailscale",
   "type": "module",
   "main": "dist/index.js",