zcode-pro 1.2.0 → 1.2.1

package/src/inject/features/settings-dialog.js

@@ -1,6 +1,6 @@
 // “ZCode Pro 增强设置”弹窗：功能开关 + 样式调整 + 运行状态。
 // 顶部标签页切换（视觉参考侧栏“分组/项目”切换）；配置写入 helper（~/.zcode/zcodepro.json）。
-import { h, t, rpc, getConfig, clearConfigCache, errText, HELPER_URL, isZhLocale, isNewProjectSidebar, DEFAULT_SHORTCUTS } from '../core.js';
+import { h, t, rpc, getConfig, clearConfigCache, errText, HELPER_URL, isZhLocale, isNewProjectSidebar, DEFAULT_SHORTCUTS, DEFAULT_STATUS_ITEMS, DEFAULT_TURN_ITEMS, STATUS_SESSION_IDS, STATUS_GLOBAL_IDS } from '../core.js';
 import { openDialog, dialogFooter, btnPrimary, btnSecondary, btnSmall, settingRow, ensureStyle, showToast, numberField, unitField } from '../ui.js';
 import { comboField, providerOptionsOf, modelOptionsOf, modelPlaceholderOf, isManualConn } from '../provider-fields.js';
 import { refreshAliases } from './alias.js';
@@ -355,6 +355,16 @@ export function openSettingsDialog() {
             if (await setFeature('imageCopy', next)) f.imageCopy = next;
             refreshRows();
           }),
+          settingRow(L.featureSandboxReclaim, L.featureSandboxReclaimDesc, f.sandboxReclaim !== false, async () => {
+            const next = !(f.sandboxReclaim !== false);
+            if (await setFeature('sandboxReclaim', next)) f.sandboxReclaim = next;
+            refreshRows();
+          }),
+          settingRow(L.featurePluginCardRetry, L.featurePluginCardRetryDesc, f.pluginCardRetry !== false, async () => {
+            const next = !(f.pluginCardRetry !== false);
+            if (await setFeature('pluginCardRetry', next)) f.pluginCardRetry = next;
+            refreshRows();
+          }),
           settingRow(L.featureWsRunning, L.featureWsRunningDesc, f.wsRunningSpin !== false, async () => {
             const next = !(f.wsRunningSpin !== false);
             if (await setFeature('wsRunningSpin', next)) f.wsRunningSpin = next;
@@ -365,6 +375,16 @@ export function openSettingsDialog() {
             if (await setFeature('newtabPanels', next)) f.newtabPanels = next;
             refreshRows();
           }),
+          settingRow(L.featureStatusBar, L.featureStatusBarDesc, f.statusBar !== false, async () => {
+            const next = !(f.statusBar !== false);
+            if (await setFeature('statusBar', next)) f.statusBar = next;
+            refreshRows();
+          }),
+          settingRow(L.featureTurnUsage, L.featureTurnUsageDesc, f.turnUsage !== false, async () => {
+            const next = !(f.turnUsage !== false);
+            if (await setFeature('turnUsage', next)) f.turnUsage = next;
+            refreshRows();
+          }),
           (() => {
             // 标题 = “自动更新 duanluan/zcode-plugins 插件”，仓库名可点击跳转仓库
             const repoLink = h('span', {
@@ -534,7 +554,7 @@ export function openSettingsDialog() {
           h('div', { class: 'shrink-0' }, btnSmall(L.hkReset, () => { void resetShortcuts(); }))),
         hkCard,
       );
-      const paneStyles = h('div', { role: 'tabpanel', class: 'mt-4', style: 'display:none' });
+      const paneStyles = h('div', { role: 'tabpanel', class: 'mt-2', style: 'display:none' });
       const panePerf = h('div', { role: 'tabpanel', class: 'mt-4', style: 'display:none' });
       const paneAgents = h('div', { role: 'tabpanel', class: 'mt-2', style: 'display:none' });
       const paneProxy = h('div', { role: 'tabpanel', class: 'mt-4', style: 'display:none' });
@@ -728,7 +748,125 @@ export function openSettingsDialog() {
         for (const c of fontCells) c.setOptions(list);
       })();
       renderToolbarSwitch();
-      paneStyles.append(
+      // “样式”标签页的二级结构：样式调整（原内容）/ 状态栏（统计项顺序与显隐）
+      const paneStylesSub1 = h('div', { class: 'mt-4' });
+      const paneStylesSub2 = h('div', { class: 'mt-4', style: 'display:none' });
+      const ITEM_NAMES = {
+        ctx: 'sbItemCtx', questions: 'sbItemQuestions',
+        todayTokens: 'sbItemTodayTokens', totalTokens: 'sbItemTotalTokens', tasks: 'sbItemTasks',
+      };
+      // 读取并归一化：会话组项在前、全局组项在后（组内保持保存的顺序），
+      // 保证状态栏两组之间只有一道竖线
+      const sbItems = () => {
+        const saved = config.statusBar && Array.isArray(config.statusBar.items) ? config.statusBar.items : null;
+        if (!saved) return DEFAULT_STATUS_ITEMS.map((x) => ({ ...x }));
+        const byId = new Map(saved.map((x) => [x.id, x]));
+        const list = saved.filter((x) => ITEM_NAMES[x.id]).map((x) => ({ on: x.on !== false, id: x.id }));
+        for (const d of DEFAULT_STATUS_ITEMS) if (!byId.has(d.id)) list.push({ ...d });
+        return [
+          ...list.filter((x) => STATUS_SESSION_IDS.has(x.id)),
+          ...list.filter((x) => STATUS_GLOBAL_IDS.has(x.id)),
+        ];
+      };
+      let sbSaving = false; // 保存进行中忽略后续点击：连点会基于旧配置覆盖掉上一次的改动
+      const saveSbItems = async (next) => {
+        if (sbSaving) return;
+        sbSaving = true;
+        try {
+        const res = await rpc('/config', { method: 'POST', body: { statusBar: { items: next } } });
+        clearConfigCache();
+        window.dispatchEvent(new CustomEvent('zcodepro:config-changed'));
+        if (!res.ok) { showToast(L.failed + ': ' + errText(res), 'error'); renderSbItems(); return; }
+        if (res.config && res.config.statusBar) config.statusBar = res.config.statusBar;
+        } finally { sbSaving = false; }
+        renderSbItems();
+      };
+      const sbList = h('div', { class: 'divide-y divide-border rounded-xl border border-border' });
+      const sbGlobalList = h('div', { class: 'divide-y divide-border rounded-xl border border-border' });
+      // 每轮统计节（输入/输出/缓存，只开关不排序——显示顺序固定）
+      const TURN_NAMES = { turnIn: 'sbLabelIn', turnOut: 'sbLabelOut', turnCache: 'sbLabelCache' };
+      const turnItems = () => {
+        const saved = config.statusBar && Array.isArray(config.statusBar.turnItems) ? config.statusBar.turnItems : null;
+        if (!saved) return DEFAULT_TURN_ITEMS.map((x) => ({ ...x }));
+        const byId = new Map(saved.map((x) => [x.id, x]));
+        const list = saved.filter((x) => TURN_NAMES[x.id]).map((x) => ({ on: x.on !== false, id: x.id }));
+        for (const d of DEFAULT_TURN_ITEMS) if (!byId.has(d.id)) list.push({ ...d });
+        return list;
+      };
+      const saveTurnItems = async (next) => {
+        if (sbSaving) return;
+        sbSaving = true;
+        try {
+        const res = await rpc('/config', { method: 'POST', body: { statusBar: { turnItems: next } } });
+        clearConfigCache();
+        window.dispatchEvent(new CustomEvent('zcodepro:config-changed'));
+        if (!res.ok) { showToast(L.failed + ': ' + errText(res), 'error'); renderSbItems(); return; }
+        if (res.config && res.config.statusBar) config.statusBar = res.config.statusBar;
+        } finally { sbSaving = false; }
+        renderSbItems();
+      };
+      const turnList = h('div', { class: 'divide-y divide-border rounded-xl border border-border' });
+      const renderSbItems = () => {
+        turnList.replaceChildren(...turnItems().map((it, i) => h('div', { class: 'flex items-center gap-2 px-3 py-2' },
+          h('span', { class: 'min-w-0 flex-1 truncate text-ui-sm text-foreground-subtle' }, L[TURN_NAMES[it.id]] || it.id),
+          btnSmall(it.on ? L.sbVisible : L.sbHidden, () => { void saveTurnItems(turnItems().map((x) => x.id === it.id ? { ...x, on: !x.on } : x)); }),
+          btnSmall('↑', () => { const a = turnItems(); if (i > 0) { [a[i - 1], a[i]] = [a[i], a[i - 1]]; void saveTurnItems(a); } }),
+          btnSmall('↓', () => { const a = turnItems(); if (i < a.length - 1) { [a[i], a[i + 1]] = [a[i + 1], a[i]]; void saveTurnItems(a); } }))));
+        // 两节各列各的组；↑/↓ 只在组内移动（跨组相邻的交换会被组过滤弹开）
+        const list = sbItems();
+        const renderGroup = (el, groupIds) => {
+          const idxs = list.map((x, i) => i).filter((i) => groupIds.has(list[i].id));
+          el.replaceChildren(...idxs.map((i) => {
+            const it = list[i];
+            const swap = (dir) => {
+              const a = sbItems();
+              // 找同组相邻项的索引再交换，天然不会越组
+              const same = a.map((x, j) => j).filter((j) => groupIds.has(a[j].id));
+              const pos = same.indexOf(i);
+              const other = same[pos + dir];
+              if (other == null) return;
+              [a[i], a[other]] = [a[other], a[i]];
+              void saveSbItems(a);
+            };
+            return h('div', { class: 'flex items-center gap-2 px-3 py-2' },
+              h('span', { class: 'min-w-0 flex-1 truncate text-ui-sm text-foreground-subtle' },
+                L[ITEM_NAMES[it.id]] || it.id),
+              btnSmall(it.on ? L.sbVisible : L.sbHidden, () => { void saveSbItems(sbItems().map((x, j) => j === i ? { ...x, on: !x.on } : x)); }),
+              btnSmall('↑', () => swap(-1)),
+              btnSmall('↓', () => swap(1)));
+          }));
+        };
+        renderGroup(sbList, STATUS_SESSION_IDS);
+        renderGroup(sbGlobalList, STATUS_GLOBAL_IDS);
+      };
+      renderSbItems();
+      paneStylesSub2.append(
+        h('p', { class: 'text-ui-sm/relaxed text-foreground-subtle' }, L.featureStatusBarDesc),
+        h('div', { class: 'mt-3 mb-1 text-ui-sm font-medium' }, L.sbGroupSession),
+        sbList,
+        h('div', { class: 'mt-3 mb-1 text-ui-sm font-medium' }, L.sbGroupGlobal),
+        sbGlobalList,
+        h('div', { class: 'mt-3 mb-1 text-ui-sm font-medium' }, L.sbGroupTurn),
+        turnList);
+      let stylesSubTab = 'styles';
+      const stylesSubTablist = h('div', { role: 'tablist', 'aria-orientation': 'horizontal', class: 'zcodepro-tablist' });
+      const renderStylesSubTabs = () => stylesSubTablist.replaceChildren(...[
+        ['styles', L.tabStylesPane],
+        ['status', L.tabStatusPane],
+      ].map(([id, label]) => h('button', {
+        type: 'button', role: 'tab', class: 'zcodepro-tab',
+        'aria-selected': String(stylesSubTab === id),
+        'data-state': stylesSubTab === id ? 'active' : 'inactive',
+        onClick: () => {
+          stylesSubTab = id;
+          paneStylesSub1.style.display = id === 'styles' ? '' : 'none';
+          paneStylesSub2.style.display = id === 'status' ? '' : 'none';
+          renderStylesSubTabs();
+        },
+      }, label)));
+      renderStylesSubTabs();
+      paneStyles.append(stylesSubTablist, paneStylesSub1, paneStylesSub2);
+      paneStylesSub1.append(
         toolbarSwitchWrap,
         h('div', { class: 'mt-2 flex flex-col gap-0.5 rounded-xl border border-border p-1' },
           ...fontCells.map((c) => h('div', { class: 'rounded-lg transition-colors hover:bg-surface-hover' }, c.el))),
@@ -1600,6 +1738,11 @@ export function openSettingsDialog() {
             modeBtn('fallback', L.visionModeFallback, L.visionModeFallbackDesc),
             modeBtn('pipeline', L.visionModePipeline, L.visionModePipelineDesc),
             h('div', { class: 'ml-auto flex items-center gap-4' },
+              settingRow(L.visionCardUi, '', visionCfg.cardUi !== false, async () => {
+                visionCfg.cardUi = !(visionCfg.cardUi !== false);
+                await persistVision();
+                renderVision();
+              }),
               settingRow(L.visionForceIntercept, '', visionCfg.forceIntercept !== false, async () => {
                 visionCfg.forceIntercept = !(visionCfg.forceIntercept !== false);
                 await persistVision();

package/src/inject/features/status-bar.js

@@ -0,0 +1,274 @@
+// 状态栏统计：主界面底部右下角一行小字，按用户配置的顺序显示统计项。
+// 会话项（上下文占用 / 提问次数）跟随当前会话，无选中会话时自动隐藏；
+// 全局项（今日 / 累计 token、任务总数）优先取官方使用统计（云端，5 分钟刷新），
+// 回退本地聚合。数据 2 秒刷新一次；上下文占用读官方输入框工具栏的窗口显示
+//（“已用 497,101 / 总量 1,000,000”），按官方同款格式渲染。
+import { t, rpc, getConfig, isZhLocale, DEFAULT_STATUS_ITEMS } from '../core.js';
+import { ensureStyle } from '../ui.js';
+
+let enabled = true;
+let items = DEFAULT_STATUS_ITEMS.map((x) => ({ ...x }));
+let barEl = null;
+let lastStats = null; // /stats/usage 响应缓存（失败保旧值）
+
+// —— 工具 ——
+
+// 官方输入框工具栏的上下文显示：title 形如“上下文已用 61,400 / 总量 1,000,000”，
+// 解析出已用与总量；读不到返回 null（ctx 项回退按会话记录估算 token 数）。
+// 直接在全文档找（该显示全局唯一），排除自己渲染的 title
+function readCtx() {
+  for (const el of document.querySelectorAll('[title], [aria-label]')) {
+    if (el.closest('.zcodepro-statusbar')) continue;
+    const text = el.getAttribute('title') || el.getAttribute('aria-label') || '';
+    if (!/上下文|context/i.test(text)) continue;
+    // 格式为「已用 497,101 / 总量 1,000,000」：斜杠后可能带“总量”等文字再接数字
+    const m = text.match(/([\d][\d,]*)\s*\/[^0-9]*([\d][\d,]*)/);
+    if (!m) continue;
+    const used = Number(m[1].replace(/,/g, ''));
+    const size = Number(m[2].replace(/,/g, ''));
+    if (used > 0 && size > used) return { used, size };
+  }
+  return null;
+}
+
+// 官方使用统计（设置 → 数据与统计 → 使用统计 的同款服务）：真累计/今日/任务数，
+// 比本地 rollout 聚合完整。云端接口低频刷新（5 分钟一次），失败静默回退本地数据
+let usageSvc = null;
+let official = null; // { todayTokens, totalTokens, totalSessions }
+let officialAt = 0;
+// 从 React fiber 树遍历（newtab-panels.js 同款）
+function eachFiber(visit) {
+  const rootEl = document.getElementById('root');
+  const key = rootEl && Object.keys(rootEl).find((k) => k.startsWith('__reactContainer$'));
+  if (!key) return;
+  let visited = 0;
+  const walk = (f) => {
+    if (!f || visited > 200000) return false;
+    visited++;
+    if (visit(f)) return true;
+    return walk(f.child) || walk(f.sibling);
+  };
+  walk(rootEl[key]);
+}
+
+function findUsageService() {
+  let found = null;
+  const seen = new Set();
+  const scan = (o) => {
+    if (!o || typeof o !== 'object' || seen.has(o) || found) return;
+    seen.add(o);
+    if (typeof o.usageStatsService === 'object' && o.usageStatsService) { found = o.usageStatsService; return; }
+    for (const v of Object.values(o)) if (v && typeof v === 'object') scan(v);
+  };
+  eachFiber((f) => {
+    for (const h of [f.memoizedProps, f.memoizedState]) {
+      if (!h || typeof h !== 'object') continue;
+      scan(h);
+      if (found) return true;
+    }
+    return false;
+  });
+  return found;
+}
+function refreshOfficial() {
+  // 成功后 5 分钟刷新一次；尚未成功（页面刚加载服务未就绪等）30 秒重试，
+  // 避免首次失败吃满冷却期
+  const period = official ? 5 * 60_000 : 30_000;
+  if (Date.now() - officialAt < period) return;
+  officialAt = Date.now();
+  void (async () => {
+    try {
+      if (!usageSvc) usageSvc = findUsageService();
+      if (!usageSvc || typeof usageSvc.getAppUsageSnapshot !== 'function') return;
+      const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+      const [all, d7] = await Promise.all([
+        usageSvc.getAppUsageSnapshot({ range: 'all', timeZone }),
+        usageSvc.getAppUsageSnapshot({ range: '7d', timeZone }),
+      ]);
+      const now = new Date();
+      const key = now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0') + '-' + String(now.getDate()).padStart(2, '0');
+      let todayTokens = 0;
+      const day = ((d7 && Array.isArray(d7.dailyModelUsage)) ? d7.dailyModelUsage : []).find((d) => d.date === key);
+      if (day) for (const m of day.models || []) todayTokens += Number(m.totalTokens) || 0;
+      official = {
+        todayTokens,
+        totalTokens: Number(all && all.summary && all.summary.totalTokens) || 0,
+        totalSessions: Number(all && all.summary && all.summary.totalSessions) || 0,
+      };
+      renderBar();
+    } catch {
+      usageSvc = null; // 服务失效（页面重载等），下个周期重挖
+    }
+  })();
+}
+
+// 全局组统计项（会话组之外的都算会话级）：两组之间渲染竖线分隔
+const GLOBAL_GROUP = new Set(['todayTokens', 'totalTokens', 'tasks']);
+
+// 各统计项的 lucide 图标（12px 内联，描边风格与官方一致）
+const SB_ICONS = {
+  ctx: '<path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/>',
+  asks: '<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>',
+  today: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/>',
+  total: '<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/>',
+  tasks: '<rect x="3" y="5" width="6" height="6" rx="1"/><path d="m3 17 2 2 4-4"/><path d="M13 6h8"/><path d="M13 12h8"/><path d="M13 18h8"/>',
+  coins: '<circle cx="8" cy="8" r="6"/><path d="M18.09 10.37A6 6 0 1 1 10.34 18"/><path d="M7 6h1v4"/><path d="m16.71 13.88.7.71-2.82 2.82"/>',
+};
+const sbIcon = (name) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="zcodepro-sb-icon">${SB_ICONS[name]}</svg>`;
+
+function fmtTokens(n) {
+  if (n >= 1e9) return (n / 1e9).toFixed(1) + 'B';
+  if (n >= 1e6) return (n / 1e6).toFixed(1) + 'M';
+  if (n >= 1e3) return (n / 1e3).toFixed(1) + 'k';
+  return String(n);
+}
+
+// 数值格式与官方“上下文容量”显示一致：中文界面按数量级用“万/亿”
+//（48.4万、900万、3.5亿），不足一万显示原数；其它语言沿用 k/M 缩写
+function fmtNum(n) {
+  if (!isZhLocale()) return fmtTokens(n);
+  if (n < 10000) return String(n);
+  if (n >= 100000000) {
+    const yi = Math.round((n / 100000000) * 10) / 10;
+    return (yi % 1 === 0 ? String(yi) : yi.toFixed(1)) + '亿';
+  }
+  const wan = Math.round((n / 10000) * 10) / 10;
+  return (wan % 1 === 0 ? String(wan) : wan.toFixed(1)) + '万';
+}
+
+// —— 渲染 ——
+
+// 生成一项的 { html, title, tone }；数据不可得返回 null（该项隐藏）。
+// 每项 = 图标 + 短标签 + 数值（标签跟随界面语言），悬停 title 给全名与明细
+function itemContent(id, L) {
+  const g = lastStats && lastStats.global;
+  const label = (text) => `<em>${text}</em>`;
+  switch (id) {
+    case 'ctx': {
+      const dom = readCtx();
+      if (dom) {
+        const pct = Math.round((dom.used / dom.size) * 1000) / 10;
+        const tone = pct >= 95 ? 'danger' : pct >= 80 ? 'warn' : '';
+        return {
+          html: sbIcon('ctx') + label(L.sbLabelCtx) + `<b>${fmtNum(dom.used)}/${fmtNum(dom.size)}${isZhLocale() ? '（' : '('}${pct}%${isZhLocale() ? '）' : ')'}</b>`,
+          title: `${L.sbItemCtx}：${dom.used.toLocaleString()} / ${dom.size.toLocaleString()}`,
+          tone,
+        };
+      }
+      return null; // 官方窗口数据不在（视图切换间隙等）时该项隐藏
+    }
+    case 'questions': {
+      // 官方“对话问题导航”的真实计数（当前会话的问题总数）
+      const nav = document.querySelector('[data-testid="v4-turn-navigator"]');
+      const n = nav ? Number(nav.getAttribute('data-item-count')) : 0;
+      return n > 0 ? { html: sbIcon('asks') + label(L.sbLabelQuestions) + String(n), title: L.sbItemQuestions } : null;
+    }
+    case 'todayTokens': {
+      const n = official ? official.todayTokens : (g ? g.todayTokens : 0);
+      return n > 0 ? { html: sbIcon('today') + label(L.sbLabelToday) + fmtNum(n), title: L.sbItemTodayTokens } : null;
+    }
+    case 'totalTokens': {
+      const n = official ? official.totalTokens : (g ? g.totalTokens : 0);
+      return n > 0 ? { html: sbIcon('total') + label(L.sbLabelTotal) + fmtNum(n), title: L.sbItemTotalTokens } : null;
+    }
+    case 'tasks': {
+      const n = official ? official.totalSessions : (g ? g.tasks : 0);
+      return n > 0 ? { html: sbIcon('tasks') + label(L.sbLabelTasks) + String(n), title: L.sbItemTasks } : null;
+    }
+    default:
+      return null;
+  }
+}
+
+function renderBar() {
+  // 3.16.1 的输入框是 contenteditable（旧版是 textarea），两种都认
+  const ta = document.querySelector('textarea, [contenteditable=true]');
+  const host = ta && (ta.closest('form') || ta.parentElement);
+  if (!enabled || !host || !host.parentElement) {
+    if (barEl) barEl.remove();
+    barEl = null;
+    return;
+  }
+  if (!barEl || !barEl.isConnected) {
+    if (!barEl) {
+      barEl = document.createElement('div');
+      barEl.className = 'zcodepro-statusbar';
+    }
+    host.parentElement.insertBefore(barEl, host.nextSibling);
+  }
+  // 新建会话视图（无选中会话）下方是官方的功能按钮区，不能往下压：上下对称
+  // 留 7px；普通会话视图下方是窗口底的官方留白，压进去贴底（同为约 7px）。
+  // 按选中会话判定视图（按钮区与状态条不在同一父容器，兄弟判断不可用）
+  const hasSession = !![...document.querySelectorAll('[data-task-item-key]')]
+    .find((e) => (e.className + '').includes('bg-selected'));
+  barEl.style.marginBottom = hasSession ? '-14px' : '0';
+  barEl.style.paddingBottom = hasSession ? '0' : '7px';
+  const L = t();
+  const parts = [];
+  let lastGroup = '';
+  for (const it of items) {
+    if (!it.on) continue;
+    const c = itemContent(it.id, L);
+    if (!c) continue;
+    const group = GLOBAL_GROUP.has(it.id) ? 'g' : 's';
+    // 会话项与全局项之间用竖线分隔（比项间的 · 更强的分界）
+    if (lastGroup && group !== lastGroup) parts.push('<span class="zcodepro-statusbar-groupsep"></span>');
+    lastGroup = group;
+    parts.push(`<span title="${c.title.replace(/"/g, '&quot;')}"${c.tone ? ` data-tone="${c.tone}"` : ''}>${c.html}</span>`);
+  }
+  // 组内项之间用 ·，跨组竖线两侧不再叠加 ·
+  const SEP = '<span class="zcodepro-statusbar-sep">·</span>';
+  const GROUPSEP = '<span class="zcodepro-statusbar-groupsep"></span>';
+  barEl.innerHTML = parts.reduce((acc, p, i) => {
+    if (i === 0) return p;
+    if (p === GROUPSEP || parts[i - 1] === GROUPSEP) return acc + p;
+    return acc + SEP + p;
+  }, '');
+  barEl.style.display = parts.length ? '' : 'none';
+}
+
+async function tick() {
+  if (!enabled || document.hidden) return;
+  refreshOfficial();
+  const res = await rpc('/stats/usage').catch(() => null);
+  if (res && res.ok) lastStats = res;
+  renderBar();
+}
+
+export function startStatusBar() {
+  ensureStyle();
+  const refreshCfg = () => {
+    void getConfig().then((cfg) => {
+      enabled = cfg.features ? cfg.features.statusBar !== false : true;
+      const saved = cfg.statusBar && Array.isArray(cfg.statusBar.items) ? cfg.statusBar.items : null;
+      if (saved) {
+        // 保存的顺序为准（会话组在前已由设置保存时归一化；这里再归一化一次
+        // 防御旧版本保存的交错顺序）；新版本新增的默认项按默认组位补齐
+        const byId = new Map(saved.map((x) => [x.id, x]));
+        const list = saved.filter((x) => DEFAULT_STATUS_ITEMS.some((d) => d.id === x.id)).map((x) => ({ ...x }));
+        const known = new Set(list.map((x) => x.id));
+        for (const d of DEFAULT_STATUS_ITEMS) {
+          if (!known.has(d.id)) list.push({ ...d });
+        }
+        items = [
+          ...list.filter((x) => !GLOBAL_GROUP.has(x.id)),
+          ...list.filter((x) => GLOBAL_GROUP.has(x.id)),
+        ];
+      } else {
+        items = DEFAULT_STATUS_ITEMS.map((x) => ({ ...x }));
+      }
+      renderBar();
+    }).catch(() => {});
+  };
+  refreshCfg();
+  window.addEventListener('zcodepro:config-changed', refreshCfg);
+  document.addEventListener('visibilitychange', () => { if (!document.hidden) void tick(); });
+  setInterval(() => { void tick(); }, 2000);
+  // 视图切换（进新建会话、换会话等）时 DOM 变动立即重渲染（去抖 300ms）：
+  // 否则状态条要等下一个 2 秒周期，期间残留上一个视图的统计项与间距
+  let rerenderTimer = 0;
+  new MutationObserver(() => {
+    if (rerenderTimer) return;
+    rerenderTimer = setTimeout(() => { rerenderTimer = 0; renderBar(); }, 300);
+  }).observe(document.body, { childList: true, subtree: true });
+}

package/src/inject/features/turn-usage.js

@@ -0,0 +1,195 @@
+// 每轮回答的 token 用量：在回答末尾操作按钮（复制/赞/踩/分叉/钩子）行的时间
+// 后面追加“竖线 + 输入/输出/缓存”标注（段顺序与显隐可在设置里调）。
+// 数据来自本地模型调用记录（helper 按本地分钟分桶），按“本条提问到下一条
+// 提问”的区间归属到回答行；本地记录只保留最近一段，覆盖不到的旧回答不标注。
+import { t, rpc, getConfig, isZhLocale } from '../core.js';
+
+let enabled = true;
+let recentTurns = []; // [{hm, in, out, cacheRead, ts}] 按时间倒序
+let scanTimer = 0;
+// 三段（输入/输出/缓存）的显隐与顺序：设置 → 样式 → 状态栏 → 每轮统计
+let turnCfg = [
+  { id: 'turnIn', on: true },
+  { id: 'turnOut', on: true },
+  { id: 'turnCache', on: true },
+];
+const refreshTurnItems = () => {
+  void getConfig().then((cfg) => {
+    const saved = cfg.statusBar && Array.isArray(cfg.statusBar.turnItems) ? cfg.statusBar.turnItems : null;
+    if (!saved) return;
+    const known = new Set(turnCfg.map((x) => x.id));
+    const list = saved.filter((x) => x && known.has(x.id)).map((x) => ({ id: x.id, on: x.on !== false }));
+    for (const d of turnCfg) if (!list.some((x) => x.id === d.id)) list.push({ ...d });
+    turnCfg = list;
+  }).catch(() => {});
+};
+
+// 与状态栏同款的小图标（上/下箭头、层叠缓存）
+const ICONS = {
+  up: '<path d="m5 12 7-7 7 7"/><path d="M12 19V5"/>',
+  down: '<path d="M12 5v14"/><path d="m19 12-7 7-7-7"/>',
+  cache: '<path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/>',
+};
+const icon = (name) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:11px;height:11px;vertical-align:-1.5px;opacity:.6">${ICONS[name]}</svg>`;
+
+// 与状态栏同款：中文用 万/亿，其它语言 k/M 缩写
+function fmt(n) {
+  if (!isZhLocale()) {
+    if (n >= 1e9) return (n / 1e9).toFixed(1) + 'B';
+    if (n >= 1e6) return (n / 1e6).toFixed(1) + 'M';
+    if (n >= 1e3) return (n / 1e3).toFixed(1) + 'k';
+    return String(n);
+  }
+  if (n >= 1e8) return (n / 1e8).toFixed(1) + '亿';
+  if (n >= 1e4) {
+    const wan = Math.round((n / 1e4) * 10) / 10;
+    return (wan % 1 === 0 ? String(wan) : wan.toFixed(1)) + '万';
+  }
+  return String(n);
+}
+
+// 回答操作行：按结构特征识别——回答行有赞/踩按钮（v4-feedback-），用户消息行
+// 没有（只有复制/编辑），比时间文本稳（官方改时间格式不影响识别）。
+// 行内时间文本只用于解析该轮的提问时刻
+function findRows() {
+  const rows = [];
+  for (const btn of document.querySelectorAll('[data-testid^="v4-copy-"]')) {
+    const row = btn.parentElement;
+    if (!row || row.dataset.zcodeproTurn) continue;
+    if (!row.querySelector('[data-testid^="v4-feedback-"]')) continue;
+    const timeEl = [...row.querySelectorAll('span')].find((s) => /\d{1,2}:\d{2}$/.test((s.textContent || '').trim()));
+    if (timeEl) { const ts = rowTimeTs((timeEl.textContent || '').trim()); if (ts != null) rows.push({ row, ts }); }
+  }
+  return rows;
+}
+
+// 当前会话 id：优先选中行，回退侧栏最新一行（与状态栏同口径）
+function currentSessionId() {
+  const rows = [...document.querySelectorAll('[data-task-item-key]')];
+  const cur = rows.find((e) => (e.className + '').includes('bg-selected')) || rows[rows.length - 1];
+  const key = cur ? cur.getAttribute('data-task-item-key') : '';
+  const i = key.lastIndexOf(':sess');
+  return i > 0 ? key.slice(i + 1) : '';
+}
+
+function injectRow(row, bucket) {
+  row.dataset.zcodeproTurn = '1';
+  if (!bucket || bucket.in + bucket.out <= 0) return;
+  const L = t();
+  const el = document.createElement('span');
+  el.dataset.zcodeproTurnSpan = '1';
+  el.className = 'select-none text-ui-sm text-foreground-subtlest';
+  // 按钮行是 flex 容器：本元素作为子项会被压缩导致内容折行，锁成单行
+  el.style.whiteSpace = 'nowrap';
+  el.style.display = 'inline-flex';
+  el.style.alignItems = 'center';
+  el.style.gap = '4px'; // 组与 · 分隔之间的间距
+  el.style.marginLeft = '10px'; // 与左侧时间拉开
+  // 与状态栏同款：图标 + 文字 + 数据；缓存有量时给命中率
+  // 保留两位小数：长上下文会话命中率普遍 99%+，取整会全部显示 100% 失真
+  const cachePct = bucket.in > 0 && bucket.cacheRead > 0
+    ? (bucket.cacheRead / bucket.in * 100).toFixed(2) : '';
+  const group = (html) => `<span style="display:inline-flex;align-items:center;gap:2px">${html}</span>`;
+  const em = (text) => `<em style="font-style:normal;opacity:.75">${text}</em>`;
+  const DOT = '<span style="opacity:.45">·</span>'; // 与状态栏同款分隔
+  // 段按设置保存的顺序渲染，段间用 ·；首段左侧竖线与底部状态栏的组分隔同款；
+  // 全部隐藏时不注入（连竖线一起没有）
+  const sections = [];
+  for (const s of turnCfg) {
+    if (!s.on) continue;
+    if (s.id === 'turnIn') sections.push(group(icon('up') + em(L.sbLabelIn) + fmt(bucket.in)));
+    else if (s.id === 'turnOut') sections.push(group(icon('down') + em(L.sbLabelOut) + fmt(bucket.out)));
+    else if (s.id === 'turnCache' && cachePct) sections.push(group(icon('cache') + em(L.sbLabelCache) + cachePct + '%'));
+  }
+  if (!sections.length) { delete row.dataset.zcodeproTurn; el.remove(); return; }
+  const VBAR = '<span style="display:inline-block;width:1px;height:10px;background:currentColor;opacity:.3;margin:0 5px"></span>';
+  el.innerHTML = VBAR + sections.join(DOT);
+  el.title = `${L.turnUsageTitle}：${L.sbLabelIn} ${bucket.in.toLocaleString()} / ${L.sbLabelOut} ${bucket.out.toLocaleString()}`
+    + (bucket.cacheRead > 0 ? ` / ${L.sbLabelCache} ${bucket.cacheRead.toLocaleString()}` : '');
+  row.append(el); // 追加在按钮行末尾（时间之后）
+}
+
+// 回答行时间文本 → 当年本地时间的时间戳（毫秒）。
+// 官方三种形态：今天“18:16”、昨天“昨天 18:16”、更早“10/21 17:41”。
+// 行时间是提问时刻，调用桶是完成时刻——一轮的用量按“本条提问到下一条
+// 提问之间”的区间归属（见 scan），因此这里只取可比时间戳
+function rowTimeTs(text) {
+  const now = new Date();
+  let m = text.match(/^(\d{1,2}):(\d{2})$/);
+  if (m) return new Date(now.getFullYear(), now.getMonth(), now.getDate(), +m[1], +m[2]).getTime();
+  m = text.match(/^昨天\s*(\d{1,2}):(\d{2})$/);
+  if (m) { const y = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1); return new Date(y.getFullYear(), y.getMonth(), y.getDate(), +m[1], +m[2]).getTime(); }
+  m = text.match(/^(\d{1,2})\/(\d{1,2})\s*(\d{1,2}):(\d{2})$/);
+  if (m) return new Date(now.getFullYear(), +m[1] - 1, +m[2], +m[3], +m[4]).getTime();
+  return null;
+}
+
+let lastSid = '';
+function scan() {
+  if (!enabled) return;
+  // 会话切换瞬间：旧会话的桶还留在 recentTurns 里，若继续归属会把别的会话
+  // 的调用安到新视图的旧回答上——先清掉并立即重拉（拉到前只清不注）
+  const sid = currentSessionId();
+  if (sid !== lastSid) {
+    lastSid = sid;
+    recentTurns = [];
+    void tick();
+  }
+  // 每轮重算：先移除上一次注入的标注并清行标记（进行中的轮数值会增长）；
+  // 按标题前缀一并清掉旧版本格式的标注
+  for (const el of document.querySelectorAll('[data-zcodepro-turn-span], span[title^="本轮"], span[title^="Turn"]')) el.remove();
+  for (const row of document.querySelectorAll('[data-zcodepro-turn]')) delete row.dataset.zcodeproTurn;
+  if (document.hidden || !recentTurns.length) return;
+  const rows = findRows().sort((a, b) => a.ts - b.ts); // 可见行按时间升序
+  if (!rows.length) return;
+  // 区间归属：每条回答拥有“自己的提问时刻 ≤ 桶完成时刻 < 下一条提问时刻”
+  // 的全部调用（一轮可能跨多个分钟）；最后一条收到其后所有桶（进行中的轮）。
+  // 行集是虚拟列表的可见窗口，同一条回答的邻居行在场时归属稳定
+  const agg = rows.map(() => ({ in: 0, out: 0, cacheRead: 0 }));
+  const dayOf = (t) => { const d = new Date(t); return d.getFullYear() * 10000 + (d.getMonth() + 1) * 100 + d.getDate(); };
+  for (const b of recentTurns) {
+    let owner = -1;
+    for (let i = 0; i < rows.length; i++) {
+      if (rows[i].ts <= b.ts) owner = i;
+      else break;
+    }
+    if (owner < 0) continue; // 比窗口里最早的行还早：不属于可见任何一条
+    // 同日约束：跨天的桶不归属（昨天的旧行不吞今天的调用——今天的提问
+    // 行可能只是不在当前虚拟列表窗口里）
+    if (dayOf(rows[owner].ts) !== dayOf(b.ts)) continue;
+    agg[owner].in += b.in;
+    agg[owner].out += b.out;
+    agg[owner].cacheRead += b.cacheRead;
+  }
+  for (let i = 0; i < rows.length; i++) {
+    if (agg[i].in + agg[i].out > 0) injectRow(rows[i].row, agg[i]);
+  }
+}
+
+async function tick() {
+  if (!enabled || document.hidden) return;
+  const sid = currentSessionId();
+  const res = await rpc('/stats/usage' + (sid ? '?session=' + encodeURIComponent(sid) : '')).catch(() => null);
+  if (res && res.ok && Array.isArray(res.recentTurns)) {
+    // 同分钟桶随时间增长，全量替换
+    recentTurns = res.recentTurns;
+    scan();
+  }
+}
+
+export function startTurnUsage() {
+  void getConfig().then((cfg) => { enabled = cfg.features ? cfg.features.turnUsage !== false : true; }).catch(() => {});
+  refreshTurnItems();
+  window.addEventListener('zcodepro:config-changed', () => {
+    void getConfig().then((cfg) => { enabled = cfg.features ? cfg.features.turnUsage !== false : true; }).catch(() => {});
+    refreshTurnItems();
+  });
+  // 回答行出现即注入（去抖）；数据 5 秒刷新一次
+  const observer = new MutationObserver(() => {
+    if (scanTimer) return;
+    scanTimer = setTimeout(() => { scanTimer = 0; scan(); }, 1200); // 滚动/复用渲染稳定后再注
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
+  setInterval(() => { void tick(); }, 5000);
+  document.addEventListener('visibilitychange', () => { if (!document.hidden) void tick(); });
+}