dsh-token-gauge 0.1.0

package/lib/index.js

@@ -0,0 +1,234 @@
+// src/host.ts
+import { readFileSync, writeFileSync, mkdirSync, existsSync } from "node:fs";
+import { homedir } from "node:os";
+import { join } from "node:path";
+var PLUGIN_ID = "dsh-token-gauge";
+var DATA_DIR = join(homedir(), ".dsh-token-gauge");
+var STATE_FILE = join(DATA_DIR, "state.json");
+var DEFAULT_PRICING = {
+  "deepseek-chat": { inputHit: 0.5, inputMiss: 2, output: 8, cacheWrite: 2 },
+  "deepseek-v3": { inputHit: 0.5, inputMiss: 2, output: 8, cacheWrite: 2 },
+  "deepseek-reasoner": { inputHit: 1, inputMiss: 4, output: 16, cacheWrite: 4 },
+  "deepseek-r1": { inputHit: 1, inputMiss: 4, output: 16, cacheWrite: 4 },
+  "deepseek-v4-flash": { inputHit: 0.5, inputMiss: 2, output: 2, cacheWrite: 2 },
+  "deepseek-v4-pro": { inputHit: 1, inputMiss: 4, output: 8, cacheWrite: 4 },
+  "deepseek-coder": { inputHit: 0.5, inputMiss: 2, output: 8, cacheWrite: 2 },
+  __default__: { inputHit: 0.5, inputMiss: 2, output: 8, cacheWrite: 2 }
+};
+function emptyEntry() {
+  return { input: 0, cacheRead: 0, cacheWrite: 0, output: 0, cost: 0, calls: 0 };
+}
+function addEntry(t, s) {
+  t.input += s.input;
+  t.cacheRead += s.cacheRead;
+  t.cacheWrite += s.cacheWrite;
+  t.output += s.output;
+  t.cost += s.cost;
+  t.calls += s.calls;
+}
+function mergedPricing(settings) {
+  return { ...DEFAULT_PRICING, ...settings.pricing || {} };
+}
+function costFor(modelKey, b, pricing) {
+  const p = pricing[modelKey] || pricing["__default__"] || DEFAULT_PRICING["__default__"];
+  return (b.input * p.inputMiss + b.cacheRead * p.inputHit + b.cacheWrite * p.cacheWrite + b.output * p.output) / 1e6;
+}
+function todayKey(d = /* @__PURE__ */ new Date()) {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+function monthKey(d = /* @__PURE__ */ new Date()) {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
+}
+function weekKey(d = /* @__PURE__ */ new Date()) {
+  const date = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
+  const dayNum = (date.getUTCDay() + 6) % 7;
+  date.setUTCDate(date.getUTCDate() - dayNum + 3);
+  const firstThursday = new Date(Date.UTC(date.getUTCFullYear(), 0, 4));
+  const week = 1 + Math.round(
+    ((date.getTime() - firstThursday.getTime()) / 864e5 - 3 + (firstThursday.getUTCDay() + 6) % 7) / 7
+  );
+  return `${d.getFullYear()}-W${String(week).padStart(2, "0")}`;
+}
+function defaultSettings() {
+  return {
+    style: "ev",
+    // 默认风格：现代电车科技
+    palette: "neon",
+    // 默认配色：霓虹蓝
+    lang: "zh",
+    metric: "global",
+    display: {
+      usage: true,
+      cost: true,
+      io: true,
+      cacheMiss: true
+    },
+    limits: { global: null, daily: null, weekly: null, monthly: null },
+    pricing: {}
+  };
+}
+function defaultState() {
+  return {
+    global: emptyEntry(),
+    daily: {},
+    weekly: {},
+    monthly: {},
+    sessions: {},
+    models: {},
+    activeSession: "",
+    settings: defaultSettings()
+  };
+}
+function loadState() {
+  try {
+    if (existsSync(STATE_FILE)) {
+      const raw = JSON.parse(readFileSync(STATE_FILE, "utf8"));
+      const base = defaultState();
+      const merged = {
+        ...base,
+        ...raw,
+        settings: { ...base.settings, ...raw.settings || {} }
+      };
+      merged.settings.display = { ...base.settings.display, ...raw.settings?.display || {} };
+      merged.settings.limits = { ...base.settings.limits, ...raw.settings?.limits || {} };
+      merged.settings.pricing = raw.settings?.pricing || {};
+      merged.daily = raw.daily || {};
+      merged.weekly = raw.weekly || {};
+      merged.monthly = raw.monthly || {};
+      merged.sessions = raw.sessions || {};
+      merged.models = raw.models || {};
+      merged.global = { ...emptyEntry(), ...raw.global || {} };
+      return merged;
+    }
+  } catch (e) {
+    console.warn(`[${PLUGIN_ID}] load state failed, use default:`, e);
+  }
+  return defaultState();
+}
+function saveState(state) {
+  try {
+    mkdirSync(DATA_DIR, { recursive: true });
+    writeFileSync(STATE_FILE, JSON.stringify(state));
+  } catch (e) {
+    console.warn(`[${PLUGIN_ID}] save state failed:`, e);
+  }
+}
+function extractUsage(data) {
+  if (!data) return null;
+  const u = data.usage ?? data;
+  const input = u.input_tokens ?? u.prompt_tokens ?? u.uncachedInput ?? u.input ?? u.total_input_tokens ?? 0;
+  const cacheRead = u.cache_read_tokens ?? u.cacheRead ?? u.prompt_cache_hit_tokens ?? u.cache_read ?? 0;
+  const cacheWrite = u.cache_write_tokens ?? u.cacheWrite ?? u.cache_write ?? 0;
+  const output = u.output_tokens ?? u.completion_tokens ?? u.output ?? u.total_output_tokens ?? 0;
+  if (!input && !cacheRead && !cacheWrite && !output) return null;
+  const model = data.model ?? u.model ?? "unknown";
+  const session = data.session ?? u.session ?? data.sessionId ?? u.sessionId ?? "";
+  const id = data.id ?? u.id ?? data.seq ?? u.seq;
+  return {
+    buckets: { input: Number(input) || 0, cacheRead: Number(cacheRead) || 0, cacheWrite: Number(cacheWrite) || 0, output: Number(output) || 0 },
+    model,
+    session,
+    id
+  };
+}
+var name = PLUGIN_ID;
+var inject = ["events"];
+function apply(ctx) {
+  const state = loadState();
+  let saveTimer = null;
+  const scheduleSave = () => {
+    if (saveTimer) return;
+    saveTimer = setTimeout(() => {
+      saveTimer = null;
+      saveState(state);
+    }, 400);
+  };
+  const pushState = () => {
+    ctx.events.emit(`${PLUGIN_ID}:state`, state);
+  };
+  const countedIds = /* @__PURE__ */ new Set();
+  const accumulate = (data) => {
+    const ex = extractUsage(data);
+    if (!ex) return;
+    if (ex.id) {
+      if (countedIds.has(ex.id)) return;
+      countedIds.add(ex.id);
+    }
+    const modelKey = ex.model || "unknown";
+    if (ex.session) state.activeSession = ex.session;
+    const pricing = mergedPricing(state.settings);
+    const cost = costFor(modelKey, ex.buckets, pricing);
+    const e = { ...ex.buckets, cost, calls: 1 };
+    addEntry(state.global, e);
+    const dk = todayKey();
+    state.daily[dk] = state.daily[dk] || emptyEntry();
+    addEntry(state.daily[dk], e);
+    const wk = weekKey();
+    state.weekly[wk] = state.weekly[wk] || emptyEntry();
+    addEntry(state.weekly[wk], e);
+    const mk = monthKey();
+    state.monthly[mk] = state.monthly[mk] || emptyEntry();
+    addEntry(state.monthly[mk], e);
+    if (ex.session) {
+      state.sessions[ex.session] = state.sessions[ex.session] || emptyEntry();
+      addEntry(state.sessions[ex.session], e);
+    }
+    state.models[modelKey] = state.models[modelKey] || emptyEntry();
+    addEntry(state.models[modelKey], e);
+    scheduleSave();
+    pushState();
+  };
+  ctx.effect(() => {
+    const onUsage = (data) => accumulate(data);
+    ctx.events.on("assistant/message.usage", onUsage);
+    ctx.events.on("usage", onUsage);
+    ctx.events.on("assistant/message", (data) => {
+      if (data && (data.usage || data.data && data.data.usage)) onUsage(data);
+    });
+    return () => {
+      ctx.events.off("assistant/message.usage", onUsage);
+      ctx.events.off("usage", onUsage);
+    };
+  });
+  ctx.effect(() => {
+    const onCmd = (msg) => {
+      if (!msg || typeof msg.type !== "string") return;
+      switch (msg.type) {
+        case "getState":
+          pushState();
+          break;
+        case "setSettings":
+          state.settings = { ...state.settings, ...msg.payload || {} };
+          scheduleSave();
+          pushState();
+          break;
+        case "resetSettings":
+          state.settings = defaultSettings();
+          scheduleSave();
+          pushState();
+          break;
+        case "clearUsage":
+          state.global = emptyEntry();
+          state.daily = {};
+          state.weekly = {};
+          state.monthly = {};
+          state.sessions = {};
+          state.models = {};
+          countedIds.clear();
+          scheduleSave();
+          pushState();
+          break;
+        default:
+          break;
+      }
+    };
+    ctx.events.on(`${PLUGIN_ID}:cmd`, onCmd);
+    return () => ctx.events.off(`${PLUGIN_ID}:cmd`, onCmd);
+  });
+  pushState();
+}
+export {
+  apply,
+  inject,
+  name
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "dsh-token-gauge",
+  "version": "0.1.0",
+  "description": "DSH Web 侧边栏机车风格 Token 用量与费用仪表盘插件（多风格/多配色/限额/中英文/报表导出）",
+  "displayName": "Token 机车仪表盘 / Token Gauge Dashboard",
+  "type": "module",
+  "main": "./lib/index.js",
+  "dsh": {
+    "host": "./lib/index.js",
+    "client": "./lib/client.js"
+  },
+  "files": [
+    "lib",
+    "src",
+    "cordis.patch.yml",
+    "README.md",
+    "README.en.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "node build.mjs",
+    "prepack": "node build.mjs"
+  },
+  "keywords": [
+    "dsh",
+    "dsh-plugin",
+    "deepseek",
+    "deepseek-harness",
+    "token-usage",
+    "token-cost",
+    "dashboard",
+    "gauge",
+    "sidebar"
+  ],
+  "author": "liumiaozhi",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/liumiaozhi/dsh-token-gauge.git"
+  },
+  "homepage": "https://github.com/liumiaozhi/dsh-token-gauge#readme",
+  "bugs": {
+    "url": "https://github.com/liumiaozhi/dsh-token-gauge/issues"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "devDependencies": {
+    "@deepseek-ai/cordis": "*",
+    "esbuild": "^0.21.5",
+    "typescript": "^5.4.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  }
+}

package/src/client.ts

@@ -0,0 +1,160 @@
+// ============================================================================
+// DSH Client 半边：注册侧边栏 Tab，渲染机车风格仪表盘 + 设置弹窗
+// 运行环境：浏览器。纯原生 DOM/SVG，无外部运行时依赖（React 等由 DSH 平台提供，本插件不依赖）。
+// ============================================================================
+import type { Context } from '@deepseek-ai/cordis/client'
+import { getStyle, applyPalette, buildCss } from './styles'
+import { createGauge } from './gauge'
+import { t } from './i18n'
+import { downloadReport } from './export'
+import { createSettingsModal } from './settings'
+
+const PLUGIN_ID = 'dsh-token-gauge'
+
+function totalOf(b: any): number {
+  return (b?.input || 0) + (b?.cacheRead || 0) + (b?.cacheWrite || 0) + (b?.output || 0)
+}
+function todayKey(d = new Date()): string {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+function monthKey(d = new Date()): string {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
+}
+function weekKey(d = new Date()): string {
+  const date = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()))
+  const dayNum = (date.getUTCDay() + 6) % 7
+  date.setUTCDate(date.getUTCDate() - dayNum + 3)
+  const firstThursday = new Date(Date.UTC(date.getUTCFullYear(), 0, 4))
+  const week =
+    1 +
+    Math.round(
+      ((date.getTime() - firstThursday.getTime()) / 86400000 - 3 + ((firstThursday.getUTCDay() + 6) % 7)) / 7,
+    )
+  return `${d.getFullYear()}-W${String(week).padStart(2, '0')}`
+}
+
+function fallbackState(): any {
+  return {
+    global: {},
+    daily: {},
+    weekly: {},
+    monthly: {},
+    sessions: {},
+    models: {},
+    activeSession: '',
+    settings: {
+      style: 'ev',
+      palette: 'neon',
+      lang: 'zh',
+      metric: 'global',
+      display: { usage: true, cost: true, io: true, cacheMiss: true },
+      limits: { global: null, daily: null, weekly: null, monthly: null },
+      pricing: {},
+    },
+  }
+}
+
+export const name = PLUGIN_ID
+export const inject = ['webview', 'events']
+export function apply(ctx: Context): void {
+  // 注入一次全局样式
+  if (!document.getElementById('tg-gauge-style')) {
+    const st = document.createElement('style')
+    st.id = 'tg-gauge-style'
+    st.textContent = buildCss()
+    document.head.appendChild(st)
+  }
+
+  let state: any = null
+  const tr = (k: string) => t((state?.settings?.lang as 'zh' | 'en') || 'zh', k)
+
+  const root = document.createElement('div')
+  root.className = 'tg-root tg-style-ev'
+
+  // 头部
+  const head = document.createElement('div')
+  head.className = 'tg-head'
+  const titleEl = document.createElement('div')
+  titleEl.className = 'tg-title'
+  titleEl.textContent = 'Token 仪表盘'
+  const gear = document.createElement('div')
+  gear.className = 'tg-gear'
+  gear.textContent = '⚙'
+  gear.title = '设置'
+  head.append(titleEl, gear)
+  root.appendChild(head)
+
+  // 空数据提示
+  const empty = document.createElement('div')
+  empty.className = 'tg-empty'
+  empty.style.display = 'none'
+  root.appendChild(empty)
+
+  // 仪表盘
+  const gauge = createGauge()
+  root.appendChild(gauge.el)
+
+  // 设置弹窗
+  const modal = createSettingsModal({
+    getLang: () => (state?.settings?.lang as 'zh' | 'en') || 'zh',
+    onSettings: (patch) => ctx.events.emit(`${PLUGIN_ID}:cmd`, { type: 'setSettings', payload: patch }),
+    onExport: (format) => {
+      if (state) downloadReport(state, (state.settings.lang as 'zh' | 'en') || 'zh', format)
+    },
+    onClear: () => ctx.events.emit(`${PLUGIN_ID}:cmd`, { type: 'clearUsage' }),
+    onReset: () => ctx.events.emit(`${PLUGIN_ID}:cmd`, { type: 'resetSettings' }),
+  })
+  root.appendChild(modal.el)
+
+  gear.addEventListener('click', () => modal.open(state || fallbackState()))
+
+  // 计算当前指标的量程/费用
+  const computeMetric = (s: any): { value: number; limit: number | null; cost: number } => {
+    const metric = s.settings.metric
+    let entry: any = s.global
+    let limit: number | null = s.settings.limits.global
+    if (metric === 'session') {
+      entry = s.sessions[s.activeSession] || {}
+      limit = s.settings.limits.daily
+    } else if (metric === 'today' || metric === 'daily') {
+      entry = s.daily[todayKey()] || {}
+      limit = s.settings.limits.daily
+    } else if (metric === 'weekly') {
+      entry = s.weekly[weekKey()] || {}
+      limit = s.settings.limits.weekly
+    } else if (metric === 'monthly') {
+      entry = s.monthly[monthKey()] || {}
+      limit = s.settings.limits.monthly
+    }
+    return { value: totalOf(entry), limit, cost: entry.cost || 0 }
+  }
+
+  const applyState = (s: any): void => {
+    state = s
+    root.className = 'tg-root ' + getStyle(s.settings.style).className
+    applyPalette(root, s.settings.palette)
+    titleEl.textContent = tr('title')
+    const m = computeMetric(s)
+    gauge.update({ value: m.value, limit: m.limit, cost: m.cost, state: s, display: s.settings.display, t: tr, lang: s.settings.lang })
+    const hasData = totalOf(s.global) > 0
+    empty.style.display = hasData ? 'none' : ''
+    empty.textContent = tr('noData')
+    modal.sync(s)
+  }
+
+  ctx.effect(() => {
+    ctx.events.on(`${PLUGIN_ID}:state`, applyState)
+    // 请求初始状态
+    ctx.events.emit(`${PLUGIN_ID}:cmd`, { type: 'getState' })
+    return () => ctx.events.off(`${PLUGIN_ID}:state`, applyState)
+  })
+
+  // 注册侧边栏 Tab
+  ctx.webview.registerSidebarTab({
+    id: PLUGIN_ID,
+    label: 'Token 仪表盘',
+    render(container: HTMLElement) {
+      container.appendChild(root)
+    },
+  })
+}

package/src/export.ts

@@ -0,0 +1,81 @@
+// 用量报表导出（浏览器端）：CSV / JSON 生成与下载
+import { t } from './i18n'
+
+interface BucketLike {
+  input?: number
+  cacheRead?: number
+  cacheWrite?: number
+  output?: number
+  cost?: number
+  calls?: number
+}
+
+function total(b: BucketLike): number {
+  return (b.input || 0) + (b.cacheRead || 0) + (b.cacheWrite || 0) + (b.output || 0)
+}
+
+function num(v: number): string {
+  return String(Math.round(v || 0))
+}
+
+function rowOf(key: string, b: BucketLike): string[] {
+  return [key, num(b.input), num(b.cacheRead), num(b.cacheWrite), num(b.output), num(total(b)), (b.cost || 0).toFixed(4), num(b.calls)]
+}
+
+export function buildCsv(state: any, lang: 'zh' | 'en'): string {
+  const L = (k: string) => t(lang, k)
+  const lines: string[] = []
+  lines.push(`# ${L('title')} - ${new Date().toLocaleString(lang === 'zh' ? 'zh-CN' : 'en-US')}`)
+  lines.push('')
+
+  lines.push(`# ${L('global')}`)
+  lines.push(['', L('inputTokens'), L('cacheHit'), L('cacheWrite'), L('outputTokens'), L('totalTokens'), L('totalCost') + '(¥)', L('calls')].join(','))
+  lines.push(rowOf(L('global'), state.global || {}).join(','))
+  lines.push('')
+
+  lines.push(`# ${L('model')}`)
+  lines.push(['', L('inputTokens'), L('cacheHit'), L('cacheWrite'), L('outputTokens'), L('totalTokens'), L('totalCost') + '(¥)', L('calls')].join(','))
+  for (const [k, v] of Object.entries<any>(state.models || {})) lines.push(rowOf(k, v).join(','))
+
+  for (const period of ['daily', 'weekly', 'monthly', 'sessions'] as const) {
+    const map = (state as any)[period] || {}
+    const title = period === 'daily' ? L('metricDaily') : period === 'weekly' ? L('metricWeekly') : period === 'monthly' ? L('metricMonthly') : L('sessions')
+    lines.push('')
+    lines.push(`# ${title}`)
+    lines.push(['', L('inputTokens'), L('cacheHit'), L('cacheWrite'), L('outputTokens'), L('totalTokens'), L('totalCost') + '(¥)', L('calls')].join(','))
+    for (const [k, v] of Object.entries<any>(map)) lines.push(rowOf(k, v).join(','))
+  }
+  return lines.join('\n')
+}
+
+export function buildJson(state: any): string {
+  return JSON.stringify(
+    {
+      generatedAt: new Date().toISOString(),
+      global: state.global || {},
+      models: state.models || {},
+      daily: state.daily || {},
+      weekly: state.weekly || {},
+      monthly: state.monthly || {},
+      sessions: state.sessions || {},
+      settings: state.settings || {},
+    },
+    null,
+    2,
+  )
+}
+
+export function downloadReport(state: any, lang: 'zh' | 'en', format: 'csv' | 'json'): void {
+  const content = format === 'csv' ? buildCsv(state, lang) : buildJson(state)
+  const mime = format === 'csv' ? 'text/csv;charset=utf-8' : 'application/json'
+  const filename = `token-gauge-${new Date().toISOString().slice(0, 10)}.${format}`
+  const blob = new Blob([content], { type: mime })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  setTimeout(() => URL.revokeObjectURL(url), 1000)
+}

package/src/gauge.ts

@@ -0,0 +1,163 @@
+// SVG 弧形仪表盘：指针随用量/限额平滑转动，下方显示用量与费用数字
+import { formatInt, formatMoney, formatCompact, clamp, autoMax } from './util'
+
+const SVGNS = 'http://www.w3.org/2000/svg'
+const CX = 100
+const CY = 100
+const R = 78
+const START = 150 // 起始角（屏幕坐标，y 向下）
+const END = 390 // 终止角（=30°+360），扫角 240°
+const SWEEP = END - START
+
+interface DisplayFlags {
+  usage: boolean
+  cost: boolean
+  io: boolean
+  cacheMiss: boolean
+}
+
+export interface GaugePayload {
+  value: number
+  limit: number | null
+  cost: number
+  state: any
+  display: DisplayFlags
+  t: (k: string) => string
+  lang: 'zh' | 'en'
+}
+
+function polar(angleDeg: number, r: number): [number, number] {
+  const a = (angleDeg * Math.PI) / 180
+  return [CX + r * Math.cos(a), CY + r * Math.sin(a)]
+}
+
+function arcPath(r: number, a0: number, a1: number): string {
+  const [sx, sy] = polar(a0, r)
+  const [ex, ey] = polar(a1, r)
+  const large = a1 - a0 > 180 ? 1 : 0
+  return `M ${sx.toFixed(2)} ${sy.toFixed(2)} A ${r} ${r} 0 ${large} 1 ${ex.toFixed(2)} ${ey.toFixed(2)}`
+}
+
+function svg(tag: string, attrs: Record<string, string>): SVGElement {
+  const el = document.createElementNS(SVGNS, tag) as SVGElement
+  for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v)
+  return el
+}
+
+function totalOf(b: any): number {
+  return (b?.input || 0) + (b?.cacheRead || 0) + (b?.cacheWrite || 0) + (b?.output || 0)
+}
+
+export interface GaugeHandle {
+  el: HTMLElement
+  update: (p: GaugePayload) => void
+}
+
+export function createGauge(): GaugeHandle {
+  const wrap = document.createElement('div')
+  wrap.className = 'tg-gauge-wrap'
+
+  const s = svg('svg', { class: 'tg-gauge', viewBox: '0 0 200 200', role: 'img' }) as SVGSVGElement
+
+  // 背景轨道
+  s.appendChild(svg('path', { class: 'tg-track', d: arcPath(R, START, END) }))
+  // 危险区（顶部 15%，透明度随接近限额连续渐变）
+  const dangerEl = svg('path', { class: 'tg-danger', d: arcPath(R, START + SWEEP * 0.85, END) })
+  s.appendChild(dangerEl)
+
+  // 刻度 + 刻度标签
+  const labelEls: { el: SVGElement; frac: number }[] = []
+  for (let i = 0; i <= 10; i++) {
+    const frac = i / 10
+    const ang = START + SWEEP * frac
+    const major = i % 5 === 0
+    const rOut = R + (major ? 9 : 5)
+    const rIn = R - 2
+    const [x1, y1] = polar(ang, rOut)
+    const [x2, y2] = polar(ang, rIn)
+    s.appendChild(svg('line', { class: 'tg-tick', x1: x1.toFixed(2), y1: y1.toFixed(2), x2: x2.toFixed(2), y2: y2.toFixed(2), 'stroke-width': major ? '2.5' : '1.5' }))
+    if (major) {
+      const [lx, ly] = polar(ang, R - 18)
+      const txt = svg('text', { class: 'tg-ticklabel', x: lx.toFixed(2), y: (ly + 3).toFixed(2), 'text-anchor': 'middle' })
+      txt.textContent = String(Math.round(frac * 100))
+      s.appendChild(txt)
+      labelEls.push({ el: txt, frac })
+    }
+  }
+
+  // 指针
+  const needle = svg('g', { class: 'tg-needle' })
+  const tipY = CY - (R - 14)
+  const poly = svg('polygon', {
+    points: `${CX},${tipY} ${CX - 4},${CY + 6} ${CX},${CY + 14} ${CX + 4},${CY + 6}`,
+  })
+  needle.appendChild(poly)
+  s.appendChild(needle)
+
+  // 中心轴
+  s.appendChild(svg('circle', { class: 'tg-hub', cx: String(CX), cy: String(CY), r: '6' }))
+
+  wrap.appendChild(s as unknown as Node)
+
+  // 数字读数（费用在上、用量在下，间距缩小）
+  const readout = document.createElement('div')
+  readout.className = 'tg-readout'
+  const costEl = document.createElement('div')
+  costEl.className = 'tg-cost'
+  const usageEl = document.createElement('div')
+  usageEl.className = 'tg-usage'
+  const cards = document.createElement('div')
+  cards.className = 'tg-cards'
+  readout.append(costEl, usageEl, cards)
+  wrap.appendChild(readout)
+
+  const update = (p: GaugePayload) => {
+    const max = p.limit && p.limit > 0 ? p.limit : autoMax(p.value)
+    const ratio = max > 0 ? p.value / max : 0
+    const visual = clamp(ratio, 0, 1)
+    const needleAngle = START + visual * SWEEP
+    const deg = needleAngle - 270
+    ;(needle as SVGElement & { style: CSSStyleDeclaration }).style.transform = `rotate(${deg.toFixed(2)}deg)`
+
+    // 刻度标签按当前量程刷新
+    for (const { el, frac } of labelEls) el.textContent = formatCompact(max * frac)
+
+    // 危险/警告态
+    const over = ratio >= 1
+    const proximity = clamp((ratio - 0.7) / 0.3, 0, 1)
+    dangerEl.style.opacity = (proximity * 0.95).toFixed(3)
+    needle.setAttribute('class', over ? 'tg-needle tg-over' : 'tg-needle')
+
+    // 读数（费用在上、用量单位 k tokens）
+    if (p.display.cost) {
+      costEl.style.display = ''
+      costEl.textContent = formatMoney(p.cost)
+    } else costEl.style.display = 'none'
+    if (p.display.usage) {
+      usageEl.style.display = ''
+      usageEl.innerHTML = `${(p.value / 1000).toLocaleString('en-US', { maximumFractionDigits: 1 })}<small>k tokens</small>`
+    } else usageEl.style.display = 'none'
+
+    // 副卡片（4 格：输入 / 输出 / 缓存命中 / 缓存未命中）
+    cards.innerHTML = ''
+    const addCard = (k: string, v: string) => {
+      const c = document.createElement('div')
+      c.className = 'tg-card'
+      c.innerHTML = `<div class="k">${k}</div><div class="v">${v}</div>`
+      cards.appendChild(c)
+    }
+    if (p.display.io) {
+      addCard(p.t('input'), formatInt(p.state?.global?.input || 0))
+      addCard(p.t('output'), formatInt(p.state?.global?.output || 0))
+    }
+    if (p.display.cacheMiss) {
+      const hit = p.state?.global?.cacheRead || 0
+      const input = p.state?.global?.input || 0
+      const miss = Math.max(0, input - hit)
+      addCard(p.t('cacheHit'), formatInt(hit))
+      addCard(p.t('cacheMiss'), formatInt(miss))
+    }
+  }
+
+  return { el: wrap, update }
+}