opencode-tokenwatch 0.3.2 → 0.4.0

package/dist/queries.js

@@ -90,41 +90,41 @@ export async function getCurrentSessionStats(sessionId) {
     return getSummary(filters);
 }
 export async function getSummary(filters = {}) {
-    const sql = `
-SELECT
-  group_concat(distinct coalesce(json_extract(m.data, '$.modelID'), 'unknown')) as models_used,
-  group_concat(distinct coalesce(json_extract(m.data, '$.providerID'), 'unknown')) as providers_used,
-  count(*) as request_count,
-  sum(coalesce(json_extract(m.data, '$.tokens.total'), 0)) as total_tokens,
-  sum(coalesce(json_extract(m.data, '$.tokens.input'), 0)) as input_tokens,
-  sum(coalesce(json_extract(m.data, '$.tokens.output'), 0)) as output_tokens,
-  sum(coalesce(json_extract(m.data, '$.tokens.reasoning'), 0)) as reasoning_tokens,
-  sum(coalesce(json_extract(m.data, '$.tokens.cache.read'), 0)) as cache_read,
-  sum(coalesce(json_extract(m.data, '$.tokens.cache.write'), 0)) as cache_write,
-  sum(coalesce(json_extract(m.data, '$.cost'), 0)) as total_cost
-FROM message m
-WHERE ${messageWhere(filters)}
+    const sql = `
+SELECT
+  group_concat(distinct coalesce(json_extract(m.data, '$.modelID'), 'unknown')) as models_used,
+  group_concat(distinct coalesce(json_extract(m.data, '$.providerID'), 'unknown')) as providers_used,
+  count(*) as request_count,
+  sum(coalesce(json_extract(m.data, '$.tokens.total'), 0)) as total_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.input'), 0)) as input_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.output'), 0)) as output_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.reasoning'), 0)) as reasoning_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.cache.read'), 0)) as cache_read,
+  sum(coalesce(json_extract(m.data, '$.tokens.cache.write'), 0)) as cache_write,
+  sum(coalesce(json_extract(m.data, '$.cost'), 0)) as total_cost
+FROM message m
+WHERE ${messageWhere(filters)}
   `.trim();
     const rows = await queryDb(sql);
     return toSessionTokenData(rows[0]);
 }
 export async function getModelBreakdown(filters = {}) {
-    const sql = `
-SELECT
-  coalesce(json_extract(m.data, '$.providerID'), 'unknown') as provider,
-  coalesce(json_extract(m.data, '$.modelID'), 'unknown') as model,
-  count(*) as requests,
-  count(distinct m.session_id) as sessions,
-  sum(coalesce(json_extract(m.data, '$.tokens.total'), 0)) as total_tokens,
-  sum(coalesce(json_extract(m.data, '$.tokens.input'), 0)) as input_tokens,
-  sum(coalesce(json_extract(m.data, '$.tokens.output'), 0)) as output_tokens,
-  sum(coalesce(json_extract(m.data, '$.tokens.reasoning'), 0)) as reasoning_tokens,
-  sum(coalesce(json_extract(m.data, '$.tokens.cache.read'), 0)) as cache_read,
-  sum(coalesce(json_extract(m.data, '$.cost'), 0)) as total_cost
-FROM message m
-WHERE ${messageWhere(filters)}
-GROUP BY provider, model
-ORDER BY total_tokens DESC
+    const sql = `
+SELECT
+  coalesce(json_extract(m.data, '$.providerID'), 'unknown') as provider,
+  coalesce(json_extract(m.data, '$.modelID'), 'unknown') as model,
+  count(*) as requests,
+  count(distinct m.session_id) as sessions,
+  sum(coalesce(json_extract(m.data, '$.tokens.total'), 0)) as total_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.input'), 0)) as input_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.output'), 0)) as output_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.reasoning'), 0)) as reasoning_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.cache.read'), 0)) as cache_read,
+  sum(coalesce(json_extract(m.data, '$.cost'), 0)) as total_cost
+FROM message m
+WHERE ${messageWhere(filters)}
+GROUP BY provider, model
+ORDER BY total_tokens DESC
   `.trim();
     const rows = await queryDb(sql);
     return rows.map((row) => ({
@@ -141,21 +141,21 @@ ORDER BY total_tokens DESC
     }));
 }
 export async function getProviderBreakdown(filters = {}) {
-    const sql = `
-SELECT
-  coalesce(json_extract(m.data, '$.providerID'), 'unknown') as provider,
-  count(*) as requests,
-  count(distinct m.session_id) as sessions,
-  sum(coalesce(json_extract(m.data, '$.tokens.total'), 0)) as total_tokens,
-  sum(coalesce(json_extract(m.data, '$.tokens.input'), 0)) as input_tokens,
-  sum(coalesce(json_extract(m.data, '$.tokens.output'), 0)) as output_tokens,
-  sum(coalesce(json_extract(m.data, '$.tokens.reasoning'), 0)) as reasoning_tokens,
-  sum(coalesce(json_extract(m.data, '$.tokens.cache.read'), 0)) as cache_read,
-  sum(coalesce(json_extract(m.data, '$.cost'), 0)) as total_cost
-FROM message m
-WHERE ${messageWhere(filters)}
-GROUP BY provider
-ORDER BY total_tokens DESC
+    const sql = `
+SELECT
+  coalesce(json_extract(m.data, '$.providerID'), 'unknown') as provider,
+  count(*) as requests,
+  count(distinct m.session_id) as sessions,
+  sum(coalesce(json_extract(m.data, '$.tokens.total'), 0)) as total_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.input'), 0)) as input_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.output'), 0)) as output_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.reasoning'), 0)) as reasoning_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.cache.read'), 0)) as cache_read,
+  sum(coalesce(json_extract(m.data, '$.cost'), 0)) as total_cost
+FROM message m
+WHERE ${messageWhere(filters)}
+GROUP BY provider
+ORDER BY total_tokens DESC
   `.trim();
     const rows = await queryDb(sql);
     return rows.map((row) => ({
@@ -172,22 +172,22 @@ ORDER BY total_tokens DESC
 }
 export async function getDailyBreakdown(filters = {}) {
     const limit = filters.limit ?? 30;
-    const sql = `
-SELECT
-  date(m.time_created / 1000, 'unixepoch', 'localtime') as day,
-  count(*) as requests,
-  count(distinct m.session_id) as sessions,
-  sum(coalesce(json_extract(m.data, '$.tokens.total'), 0)) as total_tokens,
-  sum(coalesce(json_extract(m.data, '$.tokens.input'), 0)) as input_tokens,
-  sum(coalesce(json_extract(m.data, '$.tokens.output'), 0)) as output_tokens,
-  sum(coalesce(json_extract(m.data, '$.tokens.reasoning'), 0)) as reasoning_tokens,
-  sum(coalesce(json_extract(m.data, '$.tokens.cache.read'), 0)) as cache_read,
-  sum(coalesce(json_extract(m.data, '$.cost'), 0)) as total_cost
-FROM message m
-WHERE ${messageWhere(filters)}
-GROUP BY day
-ORDER BY day DESC
-LIMIT ${Math.max(1, limit)}
+    const sql = `
+SELECT
+  date(m.time_created / 1000, 'unixepoch', 'localtime') as day,
+  count(*) as requests,
+  count(distinct m.session_id) as sessions,
+  sum(coalesce(json_extract(m.data, '$.tokens.total'), 0)) as total_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.input'), 0)) as input_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.output'), 0)) as output_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.reasoning'), 0)) as reasoning_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.cache.read'), 0)) as cache_read,
+  sum(coalesce(json_extract(m.data, '$.cost'), 0)) as total_cost
+FROM message m
+WHERE ${messageWhere(filters)}
+GROUP BY day
+ORDER BY day DESC
+LIMIT ${Math.max(1, limit)}
   `.trim();
     const rows = await queryDb(sql);
     return rows.map((row) => ({
@@ -204,26 +204,26 @@ LIMIT ${Math.max(1, limit)}
 }
 export async function getSessionBreakdown(filters = {}) {
     const limit = filters.limit ?? 15;
-    const sql = `
-SELECT
-  s.id as session_id,
-  s.title as title,
-  coalesce(json_extract(m.data, '$.providerID'), json_extract(s.model, '$.providerID'), 'unknown') as provider,
-  coalesce(json_extract(m.data, '$.modelID'), json_extract(s.model, '$.id'), 'unknown') as model,
-  count(*) as requests,
-  sum(coalesce(json_extract(m.data, '$.tokens.total'), 0)) as total_tokens,
-  sum(coalesce(json_extract(m.data, '$.tokens.input'), 0)) as input_tokens,
-  sum(coalesce(json_extract(m.data, '$.tokens.output'), 0)) as output_tokens,
-  sum(coalesce(json_extract(m.data, '$.tokens.reasoning'), 0)) as reasoning_tokens,
-  sum(coalesce(json_extract(m.data, '$.tokens.cache.read'), 0)) as cache_read,
-  sum(coalesce(json_extract(m.data, '$.cost'), 0)) as total_cost,
-  date(max(m.time_created) / 1000, 'unixepoch', 'localtime') as day
-FROM message m
-JOIN session s ON s.id = m.session_id
-WHERE ${messageWhere(filters)}
-GROUP BY s.id, s.title, provider, model
-ORDER BY max(m.time_created) DESC
-LIMIT ${Math.max(1, limit)}
+    const sql = `
+SELECT
+  s.id as session_id,
+  s.title as title,
+  coalesce(json_extract(m.data, '$.providerID'), json_extract(s.model, '$.providerID'), 'unknown') as provider,
+  coalesce(json_extract(m.data, '$.modelID'), json_extract(s.model, '$.id'), 'unknown') as model,
+  count(*) as requests,
+  sum(coalesce(json_extract(m.data, '$.tokens.total'), 0)) as total_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.input'), 0)) as input_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.output'), 0)) as output_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.reasoning'), 0)) as reasoning_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.cache.read'), 0)) as cache_read,
+  sum(coalesce(json_extract(m.data, '$.cost'), 0)) as total_cost,
+  date(max(m.time_created) / 1000, 'unixepoch', 'localtime') as day
+FROM message m
+JOIN session s ON s.id = m.session_id
+WHERE ${messageWhere(filters)}
+GROUP BY s.id, s.title, provider, model
+ORDER BY max(m.time_created) DESC
+LIMIT ${Math.max(1, limit)}
   `.trim();
     const rows = await queryDb(sql);
     return rows.map((row) => ({
@@ -242,21 +242,21 @@ LIMIT ${Math.max(1, limit)}
     }));
 }
 export async function getAvailableModels() {
-    const sql = `
-SELECT distinct coalesce(json_extract(m.data, '$.modelID'), 'unknown') as value
-FROM message m
-WHERE ${messageWhere({})}
-ORDER BY value ASC
+    const sql = `
+SELECT distinct coalesce(json_extract(m.data, '$.modelID'), 'unknown') as value
+FROM message m
+WHERE ${messageWhere({})}
+ORDER BY value ASC
   `.trim();
     const rows = await queryDb(sql);
     return rows.map((row) => row.value ?? "unknown");
 }
 export async function getAvailableProviders() {
-    const sql = `
-SELECT distinct coalesce(json_extract(m.data, '$.providerID'), 'unknown') as value
-FROM message m
-WHERE ${messageWhere({})}
-ORDER BY value ASC
+    const sql = `
+SELECT distinct coalesce(json_extract(m.data, '$.providerID'), 'unknown') as value
+FROM message m
+WHERE ${messageWhere({})}
+ORDER BY value ASC
   `.trim();
     const rows = await queryDb(sql);
     return rows.map((row) => row.value ?? "unknown");
@@ -281,16 +281,16 @@ export async function getErrorStats(filters = {}) {
     }
     const baseWhere = baseConds.join(" AND ");
     // 按模型细化：同时统计成功和失败请求
-    const sql = `
-SELECT
-  coalesce(json_extract(m.data, '$.providerID'), 'unknown') as provider,
-  coalesce(json_extract(m.data, '$.modelID'), 'unknown') as model,
-  count(*) as total,
-  sum(CASE WHEN coalesce(json_extract(m.data, '$.tokens.total'), 0) = 0 THEN 1 ELSE 0 END) as failed
-FROM message m
-WHERE ${baseWhere}
-GROUP BY provider, model
-ORDER BY failed DESC
+    const sql = `
+SELECT
+  coalesce(json_extract(m.data, '$.providerID'), 'unknown') as provider,
+  coalesce(json_extract(m.data, '$.modelID'), 'unknown') as model,
+  count(*) as total,
+  sum(CASE WHEN coalesce(json_extract(m.data, '$.tokens.total'), 0) = 0 THEN 1 ELSE 0 END) as failed
+FROM message m
+WHERE ${baseWhere}
+GROUP BY provider, model
+ORDER BY failed DESC
   `.trim();
     try {
         const rows = await queryDb(sql);

package/dist/sidebar.jsx

@@ -360,75 +360,75 @@ export function TokenWatchPanel(props) {
     ref={(el) => { outerBoxRef = el; }} onSizeChange={() => {
             if (outerBoxRef)
                 setPanelWidth(outerBoxRef.width);
-        }} flexDirection="column" border={true} borderStyle="rounded" borderColor={borderColor()}>
-
+        }} 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")}
-        </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={borderColor()}>{divider()}</text>
-
+            ══════════════════════════════════════ */}
+      <box flexDirection="row" justifyContent="space-between" onMouseDown={toggle.global} paddingX={1}>
+        <text fg={primaryColor()}>
+          {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={borderColor()}>{divider()}</text>
+
         {/* ══════════════════════════════════════
             全局统计：Total / Req / Input / Output 均匀分行排布
-            ══════════════════════════════════════ */}
-        <box flexDirection="row" paddingX={1}>
+            ══════════════════════════════════════ */}
+        <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>
+            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>
-
+        }}
+          </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()}>
+            ══════════════════════════════════════ */}
+        <For each={modelStats()}>
           {([key, stat]) => {
             const isExpanded = () => collapse().models[key] !== true;
             const hitDenom = stat.totalInput + stat.cacheRead;
@@ -496,109 +496,109 @@ export function TokenWatchPanel(props) {
             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()}>
-                    <span style={{ fg: hitRateColor(hitRate) }}>●</span>
-                    {" "}
-                    <span style={{ fg: primaryColor() }}>{shortTitle}</span>
-                  </text>
-                  <text fg={mutedColor()}>{modelHeaderRight()}</text>
-                </box>
-
-                <Show when={isExpanded()}>
-                  <box flexDirection="column" paddingX={1}>
-
-                    {/* 模型指标三列网格，外带圆角边框 (取消上下间距) */}
-                    <box flexDirection="column" border={true} borderStyle="rounded" borderColor={borderColor()}>
-                      <box flexDirection="row">
+            <box flexDirection="column" marginTop={1}>
+
+                {/* 模型 Header：左侧 ● 名称，右侧 统计+箭头 */}
+                <box flexDirection="row" justifyContent="space-between" onMouseDown={() => toggle.model(key)} paddingX={1}>
+                  <text fg={mutedColor()}>
+                    <span style={{ fg: hitRateColor(hitRate) }}>●</span>
+                    {" "}
+                    <span style={{ fg: primaryColor() }}>{shortTitle}</span>
+                  </text>
+                  <text fg={mutedColor()}>{modelHeaderRight()}</text>
+                </box>
+
+                <Show when={isExpanded()}>
+                  <box flexDirection="column" paddingX={1}>
+
+                    {/* 模型指标三列网格，外带圆角边框 (取消上下间距) */}
+                    <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>
+                    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>
-                    </box>
-
-                    {/* 缓存进度条 */}
-                    <text fg={mutedColor()}>
-                      {paddedCachePrefix()}
-                      <span style={{ fg: hitRateColor(hitRate) }}>
-                        {progressFilled(hitRate, modelBarWidth())}{progressRemaining(hitRate, modelBarWidth())}{" "}{hitRate.toFixed(0)}%
-                      </span>
+                }}
+                        </For>
+                      </box>
+                    </box>
+
+                    {/* 缓存进度条 */}
+                    <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>
+                    : 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>
-
+        }}
+        </For>
+
         {/* ══════════════════════════════════════
             Token 分布区块：左右 space-between 对齐布局 (取消进度条)
-            ══════════════════════════════════════ */}
-        <Show when={config().sidebar.showTokenDistribution}>
-          <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"]}>
-              <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>
+            ══════════════════════════════════════ */}
+        <Show when={config().sidebar.showTokenDistribution}>
+          <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"]}>
+              <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>);
 }