opencode-tokenwatch 0.2.0 → 0.3.1

package/dist/sidebar.jsx

@@ -1,7 +1,7 @@
 import { createSignal, createMemo, createEffect, For, Show, onMount, onCleanup } from "solid-js";
 import { RGBA } from "@opentui/core";
 import { formatTokens, formatCost, formatDuration } from "./formatter.js";
-import { t, setLanguage } from "./i18n.js";
+import { t as baseT, setLanguage } from "./i18n.js";
 const DEFAULT_CONFIG = {
     sidebar: { showPerformance: true, showPricing: true, showTokenDistribution: true, showTrend: true },
     language: "auto",
@@ -17,6 +17,29 @@ function progressFilled(percent, width) {
 function progressRemaining(percent, width) {
     return "░".repeat(Math.max(0, width - progressBarWidth(percent, width)));
 }
+function getVisualWidth(str) {
+    let w = 0;
+    for (const c of str) {
+        const code = c.codePointAt(0) ?? 0;
+        if ((code >= 0x4E00 && code <= 0x9FFF) || (code >= 0x3040 && code <= 0x30FF) ||
+            (code >= 0xAC00 && code <= 0xD7A3) || (code >= 0x1100 && code <= 0x11FF) ||
+            (code >= 0x2E80 && code <= 0x2EFF)) {
+            w += 2;
+        }
+        else {
+            w += 1;
+        }
+    }
+    return w;
+}
+function centerAlign(text, width) {
+    const visualW = getVisualWidth(text);
+    if (visualW >= width)
+        return text;
+    const left = Math.floor((width - visualW) / 2);
+    const right = width - visualW - left;
+    return " ".repeat(left) + text + " ".repeat(right);
+}
 function hitRateColor(rate) {
     if (rate >= 85)
         return RGBA.fromInts(76, 175, 80, 255);
@@ -24,6 +47,18 @@ function hitRateColor(rate) {
         return RGBA.fromInts(255, 193, 7, 255);
     return RGBA.fromInts(244, 67, 54, 255);
 }
+/** 各 Token 分布角色的颜色 */
+function distRoleColor(role) {
+    const map = {
+        system: RGBA.fromInts(130, 80, 255, 255),
+        user: RGBA.fromInts(88, 166, 255, 255),
+        toolCall: RGBA.fromInts(210, 153, 34, 255),
+        toolResult: RGBA.fromInts(219, 109, 40, 255),
+        output: RGBA.fromInts(63, 185, 80, 255),
+        other: RGBA.fromInts(72, 79, 88, 255),
+    };
+    return map[role] ?? RGBA.fromInts(72, 79, 88, 255);
+}
 function estimateTokens(text) {
     if (!text || text.length === 0)
         return 0;
@@ -76,9 +111,19 @@ export function loadConfig(api) {
 }
 export function TokenWatchPanel(props) {
     const { api, theme, perfTracker } = props;
-    const getMessages = () => props.messages;
+    const getMessages = () => props.messages();
     const [config, setConfig] = createSignal(loadConfig(api));
+    // 同步初始化语言以防首帧渲染使用错误的 detectLanguage 默认值
+    setLanguage(config().language);
     let knownCfgVer = api.kv?.get?.("tokenwatch-config-version");
+    // ── 响应式翻译函数 ──
+    const t = (key) => {
+        // 显式订阅 config 的变化以建立 SolidJS 追踪依赖
+        void config().language;
+        return baseT(key);
+    };
+    // 检测是否是纯英文标签，用于全大写转换
+    const isEnglish = (str) => /^[a-zA-Z\s\.\/]+$/.test(str);
     createEffect(() => {
         const timer = setInterval(() => {
             const v = api.kv?.get?.("tokenwatch-config-version");
@@ -90,22 +135,30 @@ export function TokenWatchPanel(props) {
         onCleanup(() => clearInterval(timer));
     });
     const [collapse, setCollapse] = createSignal(loadCollapseState(api));
-    const [panelWidth, setPanelWidth] = createSignal(40);
+    // ── 真实面板宽度：通过 ref + onSizeChange 从渲染引擎获取 ──
+    // 初始值给一个合理默认，渲染后立即更新为实际值
+    const [panelWidth, setPanelWidth] = createSignal(38);
+    let outerBoxRef = null;
     createEffect(() => setLanguage(config().language));
+    // ── 颜色 helpers ──
     const primaryColor = () => theme.current.primary;
     const mutedColor = () => theme.current.textMuted;
-    const textColor = () => theme.current.text;
+    const dimColor = () => RGBA.fromInts(72, 79, 88, 255);
+    const greenColor = () => RGBA.fromInts(63, 185, 80, 255);
+    const borderColor = () => RGBA.fromInts(55, 65, 80, 255);
+    // ── 数据聚合 ──
     const modelStats = createMemo(() => {
         const map = new Map();
-        for (const msg of props.allTokenMessages) {
+        for (const msg of props.allTokenMessages()) {
             const key = `${msg.providerID}/${msg.modelID}`;
             let e = map.get(key);
             if (!e) {
-                e = { providerID: msg.providerID, modelID: msg.modelID, totalInput: 0, totalOutput: 0, cacheRead: 0, cacheWrite: 0, totalCost: 0, requestCount: 0 };
+                e = { providerID: msg.providerID, modelID: msg.modelID, totalInput: 0, totalOutput: 0, totalReasoning: 0, cacheRead: 0, cacheWrite: 0, totalCost: 0, requestCount: 0 };
                 map.set(key, e);
             }
             e.totalInput += msg.inputTokens;
             e.totalOutput += msg.outputTokens;
+            e.totalReasoning += msg.reasoningTokens;
             e.cacheRead += msg.cacheRead;
             e.cacheWrite += msg.cacheWrite;
             e.totalCost += msg.cost;
@@ -114,16 +167,21 @@ export function TokenWatchPanel(props) {
         return Array.from(map.entries()).sort((a, b) => (b[1].totalInput + b[1].totalOutput) - (a[1].totalInput + a[1].totalOutput));
     });
     const sessionTotals = createMemo(() => {
-        let i = 0, o = 0, cr = 0, cw = 0, r = 0, c = 0;
+        let i = 0, o = 0, ir = 0, cr = 0, cw = 0, r = 0, c = 0;
         for (const [, s] of modelStats()) {
             i += s.totalInput;
             o += s.totalOutput;
+            ir += s.totalReasoning;
             cr += s.cacheRead;
             cw += s.cacheWrite;
             r += s.requestCount;
             c += s.totalCost;
         }
-        return { totalInput: i, totalOutput: o, totalCacheRead: cr, totalCacheWrite: cw, totalRequests: r, totalCost: c, totalTokens: i + o + cr + cw };
+        return { totalInput: i, totalOutput: o, totalReasoning: ir, totalCacheRead: cr, totalCacheWrite: cw, totalRequests: r, totalCost: c, totalTokens: i + o + ir + cr + cw };
+    });
+    const globalHitRate = createMemo(() => {
+        const denom = sessionTotals().totalInput + sessionTotals().totalCacheRead;
+        return denom > 0 ? (sessionTotals().totalCacheRead / denom) * 100 : -1;
     });
     const modelHitRate = createMemo(() => {
         return modelStats().map(([key, stat]) => {
@@ -131,7 +189,7 @@ export function TokenWatchPanel(props) {
             if (denom === 0)
                 return { key, rate: 0, msgs: [] };
             const msgs = [];
-            for (const msg of props.allTokenMessages) {
+            for (const msg of props.allTokenMessages()) {
                 const pk = `${msg.providerID}/${msg.modelID}`;
                 if (pk !== key)
                     continue;
@@ -147,10 +205,8 @@ export function TokenWatchPanel(props) {
             const sumSlice = (start, end) => {
                 let sumCache = 0, sumTotal = 0;
                 for (let i = start; i < end && i < msgs.length; i++) {
-                    const input = msgs[i].inputTokens;
-                    const cache = msgs[i].cacheRead;
-                    sumCache += cache;
-                    sumTotal += input + cache;
+                    sumCache += msgs[i].cacheRead;
+                    sumTotal += msgs[i].inputTokens + msgs[i].cacheRead;
                 }
                 return { sumCache, sumTotal };
             };
@@ -163,7 +219,13 @@ export function TokenWatchPanel(props) {
         });
     });
     const [partVersion, setPartVersion] = createSignal(0);
+    const perfStats = createMemo(() => {
+        void props.allTokenMessages();
+        void partVersion();
+        return perfTracker.getSessionStats();
+    });
     const tokenDistribution = createMemo(() => {
+        void props.allTokenMessages();
         void partVersion();
         const dist = {};
         try {
@@ -209,6 +271,7 @@ export function TokenWatchPanel(props) {
                 catch {
                     continue;
                 }
+                let msgEstimatedOutput = 0;
                 for (const p of parts) {
                     if (p.type === "tool") {
                         let rawInput = "";
@@ -230,20 +293,36 @@ export function TokenWatchPanel(props) {
                             dist.toolResult = (dist.toolResult ?? 0) + estimateTokens(p.state.error);
                         }
                     }
+                    else if (p.type === "text" && p.text) {
+                        msgEstimatedOutput += estimateTokens(p.text);
+                    }
                     else if (p.type === "reasoning") {
-                        dist.agent = (dist.agent ?? 0) + estimateTokens(p.text ?? "");
+                        msgEstimatedOutput += estimateTokens(p.text ?? "");
                     }
                     else if (p.type === "subtask") {
-                        dist.agent = (dist.agent ?? 0) + estimateTokens(p.prompt || p.description || "");
+                        msgEstimatedOutput += estimateTokens(p.prompt || p.description || "");
                     }
                 }
                 const tokens = msg.tokens;
-                if (tokens?.output)
-                    dist.output = (dist.output ?? 0) + tokens.output;
+                if (tokens?.output !== undefined || tokens?.reasoning !== undefined) {
+                    dist.output = (dist.output ?? 0) + (tokens?.output ?? 0) + (tokens?.reasoning ?? 0);
+                }
+                else {
+                    dist.output = (dist.output ?? 0) + msgEstimatedOutput;
+                }
             }
         }
+        const realInput = sessionTotals().totalInput;
+        if (realInput > 0) {
+            const estimated = (dist.system ?? 0) + (dist.user ?? 0)
+                + (dist.toolCall ?? 0) + (dist.toolResult ?? 0);
+            const other = realInput - estimated;
+            if (other > 50)
+                dist.other = other;
+        }
         return dist;
     });
+    // ── 折叠状态 toggle ──
     const toggle = {
         global: () => setCollapse(p => { const n = { ...p, global: !p.global }; saveCollapseState(api, n); return n; }),
         model: (k) => setCollapse(p => { const n = { ...p, models: { ...p.models, [k]: !p.models[k] } }; saveCollapseState(api, n); return n; }),
@@ -251,112 +330,262 @@ export function TokenWatchPanel(props) {
     };
     onMount(() => {
         const unsubPart = api.event?.on?.("message.part.updated", () => setPartVersion(v => v + 1));
-        const unsubMsg = api.event?.on?.("message.updated", () => setPartVersion(v => v + 1));
         onCleanup(() => { try {
             unsubPart?.();
-            unsubMsg?.();
         }
         catch { } });
     });
-    return (<box flexDirection="column" width={panelWidth()}>
-      <box onMouseDown={toggle.global}>
+    // ── 宽度派生值 ──
+    // innerWidth：边框内可用列数 = panelWidth - 2（左右边框各1格）
+    // barWidth：进度条宽 = innerWidth - paddingX(1*2) - "Cache: "(7) - " XX%"(4) - "↑X.X%"(最多6) = innerWidth - 19
+    // 分隔线：innerWidth - paddingX(1*2) = innerWidth - 2
+    const innerWidth = () => panelWidth() - 2;
+    const barWidth = () => Math.max(8, innerWidth() - 19);
+    const divider = () => {
+        const w = innerWidth();
+        if (w <= 2)
+            return "─".repeat(w);
+        return " " + "─".repeat(w - 2) + " ";
+    };
+    return (<box 
+    // ── 不设置固定 width，让外层容器决定宽度 ──
+    // ref + onSizeChange：布局完成后获取真实宽度，用于内部字符宽度计算
+    ref={(el) => { outerBoxRef = el; }} onSizeChange={() => {
+            if (outerBoxRef)
+                setPanelWidth(outerBoxRef.width);
+        }} flexDirection="column" border={true} borderStyle="rounded" borderColor={borderColor()}>
+
+      {/* ══════════════════════════════════════
+            面板 Header：▾ TokenWatch  89.1% hit
+            justifyContent="space-between" 左右分布
+            ══════════════════════════════════════ */}
+      <box flexDirection="row" justifyContent="space-between" onMouseDown={toggle.global} paddingX={1}>
         <text fg={primaryColor()}>
-          {collapse().global ? "▶" : "▼"} {t("panelTitle")}
-          {collapse().global ? `  ${t("cacheRead")}:${formatTokens(sessionTotals().totalCacheRead)}  ${t("requests")}:${sessionTotals().totalRequests}` : ""}
+          {collapse().global ? "▶" : "▾"} {t("panelTitle")}
+        </text>
+        <text fg={mutedColor()}>
+          {collapse().global ? (<>
+              {formatTokens(sessionTotals().totalTokens)}
+              {globalHitRate() >= 0 ? (<span style={{ fg: hitRateColor(globalHitRate()) }}>
+                  {` (${globalHitRate().toFixed(1)}% hit)`}
+                </span>) : ""}
+            </>) : (globalHitRate() >= 0 ? (<span style={{ fg: hitRateColor(globalHitRate()) }}>
+                {`${globalHitRate().toFixed(1)}% hit`}
+              </span>) : "")}
         </text>
       </box>
 
       <Show when={!collapse().global}>
-        <text fg={mutedColor()}>
-          {t("total")}:{formatTokens(sessionTotals().totalTokens)}  {t("requests")}:{sessionTotals().totalRequests}
-        </text>
-        <text fg={mutedColor()}>
-          {t("input")}:{formatTokens(sessionTotals().totalInput)}  {t("output")}:{formatTokens(sessionTotals().totalOutput)}  {t("cacheRead")}:{formatTokens(sessionTotals().totalCacheRead)}
-        </text>
-        <Show when={sessionTotals().totalCost > 0}>
-          <text fg={mutedColor()}>
-            {t("cost")}:{formatCost(sessionTotals().totalCost)}
-          </text>
+
+        {/* 标题下分隔线 */}
+        <text fg={borderColor()}>{divider()}</text>
+
+        {/* ══════════════════════════════════════
+            全局统计：Total / Req / Input / Output 均匀分行排布
+            ══════════════════════════════════════ */}
+        <box flexDirection="row" paddingX={1}>
+          <For each={[
+            { val: formatTokens(sessionTotals().totalTokens), lbl: t("total") },
+            { val: sessionTotals().totalRequests.toString(), lbl: t("requests") },
+            { val: formatTokens(sessionTotals().totalInput), lbl: t("input") },
+            { val: formatTokens(sessionTotals().totalOutput), lbl: t("output") }
+        ]}>
+            {(item, idx) => {
+            const colW = () => {
+                const totalW = panelWidth() - 4;
+                const base = Math.floor(totalW / 4);
+                return idx() === 3 ? totalW - base * 3 : base;
+            };
+            return (<box width={colW()} flexDirection="column">
+                  <text fg={primaryColor()}>{centerAlign(item.val, colW())}</text>
+                  <text fg={dimColor()}>
+                    {centerAlign(isEnglish(item.lbl) ? item.lbl.toUpperCase() : item.lbl, colW())}
+                  </text>
+                </box>);
+        }}
+          </For>
+        </box>
+
+        {/* 成本展示 */}
+        <Show when={config().sidebar.showPricing && sessionTotals().totalCost > 0}>
+          <box flexDirection="row" justifyContent="center" marginTop={1}>
+            <text fg={mutedColor()}>
+              {t("cost")}:{" "}
+              <span style={{ fg: greenColor() }}>
+                {formatCost(sessionTotals().totalCost)}
+              </span>
+            </text>
+          </box>
         </Show>
 
+        {/* ══════════════════════════════════════
+            各模型块：无分隔线，用 marginTop=1 隔开
+            ══════════════════════════════════════ */}
         <For each={modelStats()}>
           {([key, stat]) => {
-            const modelCollapsed = () => collapse().models[key] !== true;
-            const totalInput = stat.totalInput + stat.cacheRead;
-            const hitRate = totalInput > 0 ? (stat.cacheRead / totalInput) * 100 : 0;
-            const trendData = modelTrend().find(h => h.key === key);
-            const trendStr = trendData?.trend !== null && trendData?.trend !== undefined && trendData.trend !== 0
-                ? (trendData.trend >= 0 ? `${t("trendUp")}${trendData.trend.toFixed(1)}%` : `${t("trendDown")}${Math.abs(trendData.trend).toFixed(1)}%`)
-                : "";
-            const title = `${stat.providerID}/${stat.modelID}`;
-            const shortTitle = title.length > 32 ? title.slice(0, 30) + "…" : title;
-            return (<box flexDirection="column">
-                <box onMouseDown={() => toggle.model(key)}>
-                  <text fg={primaryColor()}>{modelCollapsed() ? "▼" : "▶"} {shortTitle}</text>
-                </box>
-                <text fg={mutedColor()}>
-                  {t("total")}:{formatTokens(stat.totalInput + stat.totalOutput + stat.cacheRead + stat.cacheWrite)}  {t("requests")}:{stat.requestCount}
-                </text>
-                <text fg={mutedColor()}>
-                  {t("input")}:{formatTokens(stat.totalInput)}  {t("output")}:{formatTokens(stat.totalOutput)}
-                </text>
-                <text fg={mutedColor()}>
-                    {t("cache")}:{formatTokens(stat.cacheRead + stat.cacheWrite)}(
-                    <span style={{ fg: hitRateColor(hitRate) }}>
-                      {progressFilled(hitRate, Math.max(3, Math.floor(panelWidth() / 3)))}
-                      {progressRemaining(hitRate, Math.max(3, Math.floor(panelWidth() / 3)))}
-                      {" "}{hitRate.toFixed(0)}%
-                    </span>
-                    {trendStr ? ` ${trendStr}` : ""})
-                </text>
-                <Show when={stat.totalCost > 0}>
+            const isExpanded = () => collapse().models[key] !== true;
+            const hitDenom = stat.totalInput + stat.cacheRead;
+            const hitRate = hitDenom > 0 ? (stat.cacheRead / hitDenom) * 100 : 0;
+            const trendStr = () => {
+                if (!config().sidebar.showTrend)
+                    return "";
+                const td = modelTrend().find(h => h.key === key);
+                if (!td?.trend || td.trend === 0)
+                    return "";
+                return td.trend > 0
+                    ? ` ${t("trendUp")}${td.trend.toFixed(1)}%`
+                    : ` ${t("trendDown")}${Math.abs(td.trend).toFixed(1)}%`;
+            };
+            const trendColor = () => {
+                const td = modelTrend().find(h => h.key === key);
+                return (td?.trend ?? 0) >= 0
+                    ? RGBA.fromInts(63, 185, 80, 255)
+                    : RGBA.fromInts(244, 67, 54, 255);
+            };
+            // 模型名处理：假如总长超过22字符，且格式为 厂商/模型厂商/模型名称，去除中间模型厂商，只留 provider/modelname 格式
+            let fullTitle = `${stat.providerID}/${stat.modelID}`;
+            if (fullTitle.length > 22) {
+                const parts = fullTitle.split("/");
+                if (parts.length >= 3) {
+                    fullTitle = `${parts[0]}/${parts[parts.length - 1]}`;
+                }
+            }
+            // 模型名截断：内容宽 - paddingX(2) - "● "(2) - " ×NNN ▾"(最多8) = innerWidth - 12
+            const maxNameLen = Math.max(8, innerWidth() - 12);
+            const shortTitle = fullTitle.length > maxNameLen
+                ? fullTitle.slice(0, maxNameLen - 1) + "…"
+                : fullTitle;
+            // 折叠：右侧显示总 token；展开：右侧显示请求数
+            const modelHeaderRight = () => {
+                if (!isExpanded()) {
+                    const total = stat.totalInput + stat.totalOutput + stat.totalReasoning + stat.cacheRead + stat.cacheWrite;
+                    return `${formatTokens(total)} ▶`;
+                }
+                return `×${stat.requestCount} ▾`;
+            };
+            // 计算模型总 tokens
+            const modelTotalTokens = stat.totalInput + stat.totalOutput + stat.totalReasoning + stat.cacheRead + stat.cacheWrite;
+            // 计算对齐标签 (使用 getter 以保持响应式切换)
+            const targetW = () => {
+                const cacheLabel = t("cache") + ":";
+                const costLabel = t("cost") + ":";
+                return Math.max(getVisualWidth(cacheLabel), getVisualWidth(costLabel));
+            };
+            const paddedCachePrefix = () => {
+                const label = t("cache") + ":";
+                return label + " ".repeat(targetW() - getVisualWidth(label));
+            };
+            const paddedCostPrefix = () => {
+                const label = t("cost") + ":";
+                return label + " ".repeat(targetW() - getVisualWidth(label));
+            };
+            // 缓存进度条宽度：可用宽度 panelWidth() - 4 减去前缀 targetW()，减去百分比(4)，减去趋势(6)
+            const modelBarWidth = () => Math.max(8, (panelWidth() - 4) - targetW() - 11);
+            return (
+            // marginTop=1 提供模型间视觉间距（TUI最小单位为1行）
+            <box flexDirection="column" marginTop={1}>
+
+                {/* 模型 Header：左侧 ● 名称，右侧 统计+箭头 */}
+                <box flexDirection="row" justifyContent="space-between" onMouseDown={() => toggle.model(key)} paddingX={1}>
                   <text fg={mutedColor()}>
-                    {t("cost")}:{formatCost(stat.totalCost)}
+                    <span style={{ fg: hitRateColor(hitRate) }}>●</span>
+                    {" "}
+                    <span style={{ fg: primaryColor() }}>{shortTitle}</span>
                   </text>
-                </Show>
+                  <text fg={mutedColor()}>{modelHeaderRight()}</text>
+                </box>
 
-                <Show when={modelCollapsed()}>
-                  <Show when={config().sidebar.showPerformance}>
-                    <box flexDirection="column">
-                      <box onMouseDown={() => toggle.sub(`perf-${key}`)}>
-                        <text fg={textColor()}>{!collapse().subBlocks[`perf-${key}`] ? "▼" : "▶"}  ── {t("performance")} ──</text>
-                      </box>
-                      <Show when={!collapse().subBlocks[`perf-${key}`]}>
-                        <text fg={mutedColor()}>
-                          {t("ttft")}:{formatDuration(perfTracker.getSessionStats().models[key]?.avgTTFT ?? null)}  {t("tps")}:{perfTracker.getSessionStats().models[key]?.avgTPS?.toFixed(1) ?? "—"}  {t("latency")}:{formatDuration(perfTracker.getSessionStats().models[key]?.avgLatency ?? null)}
-                        </text>
-                      </Show>
-                    </box>
-                  </Show>
+                <Show when={isExpanded()}>
+                  <box flexDirection="column" paddingX={1}>
 
-                  <Show when={config().sidebar.showPricing && stat.totalCost > 0}>
-                    <box flexDirection="column">
-                      <box onMouseDown={() => toggle.sub(`pricing-${key}`)}>
-                        <text fg={textColor()}>{!collapse().subBlocks[`pricing-${key}`] ? "▼" : "▶"}  ── {t("pricing")} ──</text>
+                    {/* 模型指标三列网格，外带圆角边框 (取消上下间距) */}
+                    <box flexDirection="column" border={true} borderStyle="rounded" borderColor={borderColor()}>
+                      <box flexDirection="row">
+                        <For each={[
+                    { val: formatTokens(modelTotalTokens), lbl: t("total") },
+                    { val: formatTokens(stat.totalInput), lbl: t("input") },
+                    { val: formatTokens(stat.totalOutput), lbl: t("output") }
+                ]}>
+                          {(item, idx) => {
+                    const colW = () => {
+                        const totalW = panelWidth() - 6; // 边框占用 2 列
+                        const base = Math.floor(totalW / 3);
+                        return idx() === 2 ? totalW - base * 2 : base;
+                    };
+                    return (<box width={colW()} flexDirection="column">
+                                <text fg={primaryColor()}>{centerAlign(item.val, colW())}</text>
+                                <text fg={dimColor()}>
+                                  {centerAlign(isEnglish(item.lbl) ? item.lbl.toUpperCase() : item.lbl, colW())}
+                                </text>
+                              </box>);
+                }}
+                        </For>
                       </box>
-                      <Show when={!collapse().subBlocks[`pricing-${key}`]}>
-                        <text fg={mutedColor()}>    {t("cost")}:{formatCost(stat.totalCost)}</text>
-                        <text fg={mutedColor()}>    {t("modelLabel")}:{stat.providerID}/{stat.modelID}</text>
-                      </Show>
                     </box>
-                  </Show>
+
+                    {/* 缓存进度条 */}
+                    <text fg={mutedColor()}>
+                      {paddedCachePrefix()}
+                      <span style={{ fg: hitRateColor(hitRate) }}>
+                        {progressFilled(hitRate, modelBarWidth())}{progressRemaining(hitRate, modelBarWidth())}{" "}{hitRate.toFixed(0)}%
+                      </span>
+                      {trendStr()
+                    ? <span style={{ fg: trendColor() }}>{trendStr()}</span>
+                    : null}
+                    </text>
+
+                    {/* 性能指标 */}
+                    <Show when={config().sidebar.showPerformance && !!perfStats().models[key]}>
+                      <text fg={mutedColor()} marginTop={1}>
+                        {t("ttft")} <span style={{ fg: primaryColor() }}>{formatDuration(perfStats().models[key]?.avgTTFT ?? null)}</span>
+                        {"  "}{t("tps")} <span style={{ fg: primaryColor() }}>{perfStats().models[key]?.avgTPS?.toFixed(1) ?? "—"}</span>
+                        {"  "}{t("lat")} <span style={{ fg: primaryColor() }}>{formatDuration(perfStats().models[key]?.avgLatency ?? null)}</span>
+                      </text>
+                    </Show>
+
+                    {/* 成本 */}
+                    <Show when={config().sidebar.showPricing && stat.totalCost > 0}>
+                      <text fg={mutedColor()}>{paddedCostPrefix()}{formatCost(stat.totalCost)}</text>
+                    </Show>
+
+                  </box>
                 </Show>
               </box>);
         }}
         </For>
 
+        {/* ══════════════════════════════════════
+            Token 分布区块：左右 space-between 对齐布局 (取消进度条)
+            ══════════════════════════════════════ */}
         <Show when={config().sidebar.showTokenDistribution}>
-          <box flexDirection="column">
-            <box onMouseDown={() => toggle.sub("token-dist")}>
-              <text fg={primaryColor()}>{!collapse().subBlocks["token-dist"] ? "▼" : "▶"}  ── {t("tokenDistribution")} ──</text>
+          <box flexDirection="column" marginTop={1}>
+
+            {/* 分隔线 */}
+            <text fg={borderColor()}>{divider()}</text>
+
+            {/* Header */}
+            <box flexDirection="row" onMouseDown={() => toggle.sub("token-dist")} paddingX={1}>
+              <text fg={greenColor()}>
+                {!collapse().subBlocks["token-dist"] ? "▾" : "▶"} {t("tokenDistribution")}
+              </text>
             </box>
+
             <Show when={!collapse().subBlocks["token-dist"]}>
-              <For each={Object.entries(tokenDistribution())}>
-                {([role, tokens]) => (<text fg={mutedColor()}>    {t(role)}:{formatTokens(tokens)}</text>)}
-              </For>
+              <box flexDirection="column" paddingX={1} marginTop={1}>
+                <For each={Object.entries(tokenDistribution()).filter(([_, val]) => val > 0)}>
+                  {([role, val]) => (<box flexDirection="row" justifyContent="space-between">
+                      <box flexDirection="row">
+                        <text fg={distRoleColor(role)}>█ </text>
+                        <text fg={mutedColor()}>{t(role)}</text>
+                      </box>
+                      <text fg={mutedColor()}>{formatTokens(val)}</text>
+                    </box>)}
+                </For>
+              </box>
             </Show>
           </box>
         </Show>
+
       </Show>
     </box>);
 }

package/dist/stats-store.d.ts

@@ -0,0 +1,23 @@
+/**
+ * stats-store.ts — 持久化聚合统计存储
+ *
+ * 设计目标：将性能指标的"聚合统计"与"原始 JSONL 日志"彻底解耦。
+ * - 每次请求完成时，通过 updatePersistedStats() 增量写入 JSON 统计文件
+ * - 统计文件永久累积，不受 JSONL 日志轮转/窗口限制影响
+ * - 百分位数采用 Reservoir Sampling 保持有界内存占用
+ * - 首次启动时自动从现有 JSONL 日志迁移，不丢失历史数据
+ */
+import type { LogEntry, ModelPerfStats } from "./formatter.js";
+/**
+ * 将一条新的日志条目增量更新到持久化统计文件。
+ * 在 perf-tracker.ts 的 appendLog() 之后调用。
+ *
+ * 设计原则：本函数只做增量更新，迁移逻辑由 readPersistedStats() 负责。
+ * 这样可以避免迁移与增量更新之间的竞态问题。
+ */
+export declare function updatePersistedStats(entry: LogEntry): void;
+/**
+ * 读取所有持久化统计，返回 ModelPerfStats 数组（含分位数）。
+ * 用于 HTML 报告生成，替代 aggregatePerfStats(readLogs(N)) 的有限窗口方案。
+ */
+export declare function readPersistedStats(): ModelPerfStats[];