opencode-cache-hit 0.2.0 → 0.2.1

package/src/agents-view.tsx

@@ -5,15 +5,10 @@ import type { CacheHitMetrics } from "./use-cache-hit-metrics.ts"
 import { aggregateSubAgents } from "./stats.ts"
 import { computeSubsSaved } from "./pricing.ts"
 import { formatTokenCount } from "./format-tokens.ts"
-import { TuiMetricRow, truncateVisual, type PanelLayout } from "./tui-panel/index.ts"
+import { formatSubAgentLabel, modelRowColor } from "./format-model.ts"
+import { TuiMetricRow, type PanelLayout } from "./tui-panel/index.ts"
 import type { ProviderInfo, SubAgentSummary } from "./types.ts"
 
-function agentRowLabel(id: string, gauge: number): string {
-  const tail = id.length > 10 ? id.slice(-8) : id
-  const raw = id.length > 10 ? "\u2026" + tail : tail
-  return truncateVisual(raw, Math.max(6, gauge - 14))
-}
-
 function subHasActivity(sub: SubAgentSummary): boolean {
   return sub.cost > 0 || sub.cacheRead > 0 || sub.cacheWrite > 0 || sub.input > 0
 }
@@ -57,9 +52,14 @@ export function AgentsView(props: {
             <TuiMetricRow
               pal={m.pal()}
               layout={layout}
-              label={"  " + agentRowLabel(sub.id, layout.gauge())}
+              label={
+                "  " +
+                formatSubAgentLabel(sub, layout.gauge(), props.formatCost, m.t().tok)
+              }
               value={sub.cost > 0 ? props.formatCost(sub.cost) : formatTokenCount(sub.input)}
               unit={sub.cost > 0 ? "" : m.t().tok}
+              labelFg={modelRowColor(sub.model, sub.providerID, m.pal())}
+              valueFg={m.pal().muted}
             />
           </Show>
         )}

package/src/cache-ttl-view.tsx

@@ -9,7 +9,6 @@ import type { AssistantMessage } from "./types.ts"
 import type { CacheTTLConfig } from "./plugin-config.ts"
 import { parseDuration } from "./plugin-config.ts"
 import type { PanelPalette, PanelLayout } from "./tui-panel/index.ts"
-import { TuiMetricRow } from "./tui-panel/index.ts"
 
 const SECOND = 1000
 const MINUTE = 60 * SECOND
@@ -121,13 +120,9 @@ export function CacheTTLView(props: {
 
   return (
     <Show when={elapsed() !== null}>
-      <TuiMetricRow
-        pal={props.pal}
-        layout={props.layout}
-        label={props.label}
-        value={`${statusIcon()} ${formatElapsed(elapsed()!)}`}
-        fg={statusColor()}
-      />
+      <text fg={statusColor()}>
+        {props.layout.row(props.label, `${statusIcon()} ${formatElapsed(elapsed()!)}`, "")}
+      </text>
     </Show>
   )
 }

package/src/format-cost.ts

@@ -73,6 +73,76 @@ export function normalizeCostDisplay(raw: unknown): CostDisplayConfig {
   return cfg
 }
 
+/** Resolved params for static HTML dashboards (timeline-dashboard.ts). */
+export type CostDisplayEmbed = {
+  currency: CurrencyCode
+  costUnit: CurrencyCode
+  rate: number
+  symbol: string
+  decimals: number
+  minDisplay: number
+  /** Chart axis / table header, e.g. "Cost (¥)". */
+  chartLabel: string
+  /** Empty when display currency matches JSONL cost unit. */
+  costNote: string
+}
+
+function currencyOrDefault(code: unknown): CurrencyCode {
+  return typeof code === "string" && code in CURRENCY_PRESETS ? (code as CurrencyCode) : DEFAULT_COST_DISPLAY.currency
+}
+
+/** Guarantee finite rate/symbol/decimals for HTML embed + Chart.js. */
+export function sanitizeCostDisplayEmbed(embed: CostDisplayEmbed): CostDisplayEmbed {
+  const currency = currencyOrDefault(embed.currency)
+  const costUnit = currencyOrDefault(embed.costUnit)
+  const preset = CURRENCY_PRESETS[currency]
+  let rate = embed.rate
+  if (!Number.isFinite(rate) || rate <= 0) {
+    rate = costUnit === currency ? 1 : (DEFAULT_COST_DISPLAY.rate ?? 1)
+  }
+  const symbol =
+    typeof embed.symbol === "string" && embed.symbol.length > 0 ? embed.symbol : preset.symbol
+  const decimals =
+    typeof embed.decimals === "number" && embed.decimals >= 0 && Number.isFinite(embed.decimals)
+      ? embed.decimals
+      : preset.decimals
+  const minDisplay =
+    typeof embed.minDisplay === "number" && embed.minDisplay > 0 && Number.isFinite(embed.minDisplay)
+      ? embed.minDisplay
+      : preset.minDisplay
+  const chartLabel = `Cost (${symbol})`
+  const costNote =
+    costUnit === currency ? "" : `JSONL cost is ${costUnit}; displayed as ${currency} @ ${rate}`
+  return { currency, costUnit, rate, symbol, decimals, minDisplay, chartLabel, costNote }
+}
+
+export function buildCostDisplayEmbed(config: CostDisplayConfig | unknown): CostDisplayEmbed {
+  const cfg = normalizeCostDisplay(config)
+  const currency = currencyOrDefault(cfg.currency)
+  const preset = CURRENCY_PRESETS[currency]
+  const symbol = cfg.symbol ?? preset.symbol
+  const decimals = cfg.decimals ?? preset.decimals
+  const minDisplay = cfg.minDisplay ?? preset.minDisplay
+  const costUnit = currencyOrDefault(cfg.costUnit ?? cfg.convert?.from ?? DEFAULT_COST_DISPLAY.costUnit)
+  const rate = costUnit === currency ? 1 : resolveExchangeRate({ ...cfg, currency, costUnit })
+  return sanitizeCostDisplayEmbed({
+    currency,
+    costUnit,
+    rate,
+    symbol,
+    decimals,
+    minDisplay,
+    chartLabel: `Cost (${symbol})`,
+    costNote:
+      costUnit === currency ? "" : `JSONL cost is ${costUnit}; displayed as ${currency} @ ${rate}`,
+  })
+}
+
+/** No config file / partial config / invalid fields → safe embed for dashboards. */
+export function normalizeCostDisplayEmbed(raw: unknown): CostDisplayEmbed {
+  return buildCostDisplayEmbed(raw)
+}
+
 export function createCostFormatter(config: CostDisplayConfig): (amountUsd: number) => string {
   const preset = CURRENCY_PRESETS[config.currency]
   const symbol = config.symbol ?? preset.symbol

package/src/format-model.ts

@@ -0,0 +1,227 @@
+import { formatTokenCount } from "./format-tokens.ts"
+import { shortModelName } from "./stats.ts"
+import type { PanelPalette } from "./tui-panel/palette.ts"
+import { toneBrandHex } from "./tui-panel/palette.ts"
+import { UNIT_GAP, truncateVisual, visualWidth } from "./tui-panel/layout.ts"
+import type { SubAgentSummary } from "./types.ts"
+
+const INDENT_COLS = 2
+const MIN_ROW_GAP = 1
+const MIN_LABEL_BUDGET = 6
+const ID_TAIL_DEFAULT = 6
+const ID_TAIL_MIN = 4
+
+export type ModelFamilyId =
+  | "claude"
+  | "deepseek"
+  | "openai"
+  | "gemini"
+  | "qwen"
+  | "glm"
+  | "kimi"
+  | "minimax"
+  | "grok"
+  | "mimo"
+  | "meta"
+  | "mistral"
+
+/**
+ * Approximate vendor brand colors (pre-toning). Tuned for recognition on dark terminals.
+ * Applied via `toneBrandHex` — not the panel semantic keys (`warning`, `primary`, …).
+ */
+export const MODEL_BRAND_HEX: Record<ModelFamilyId, string> = {
+  claude: "#D4A574",
+  deepseek: "#4D6BFE",
+  openai: "#10A37F",
+  gemini: "#5B8DEF",
+  qwen: "#6157E5",
+  glm: "#2F67F6",
+  kimi: "#5B8FF9",
+  minimax: "#FF6B35",
+  grok: "#A8ADB8",
+  mimo: "#7C6FE8",
+  meta: "#0668E1",
+  mistral: "#FF8200",
+}
+
+/** Fallback hues for unknown providers (also toned; never panel `success` green). */
+const UNKNOWN_BRAND_HEX = ["#8B9DAF", "#9CAF8B", "#A89BBF", "#B0A080"] as const
+
+type ModelFamilyRule = {
+  id: ModelFamilyId
+  match: (name: string, providerID: string) => boolean
+}
+
+/**
+ * Built-in model/provider families (label stays full `displayModelName`).
+ * First match wins — order from more specific vendor slugs to broad prefixes.
+ */
+export const MODEL_FAMILY_RULES: readonly ModelFamilyRule[] = [
+  {
+    id: "claude",
+    match: (n, p) =>
+      p === "anthropic" ||
+      n.startsWith("claude-") ||
+      /(^|-)(sonnet|opus|haiku)(-|$)/i.test(n),
+  },
+  {
+    id: "deepseek",
+    match: (n, p) => p === "deepseek" || n.startsWith("deepseek-"),
+  },
+  {
+    id: "openai",
+    match: (n, p) =>
+      p === "openai" ||
+      n.startsWith("gpt-") ||
+      /^o[13](-|$)/.test(n) ||
+      n.startsWith("chatgpt-"),
+  },
+  {
+    id: "gemini",
+    match: (n, p) => p === "google" || n.startsWith("gemini-"),
+  },
+  {
+    id: "qwen",
+    match: (n, p) => p === "qwen" || p === "alibaba" || n.startsWith("qwen"),
+  },
+  {
+    id: "glm",
+    match: (n, p) =>
+      p === "zhipu" ||
+      p === "zhipuai" ||
+      n.startsWith("glm-") ||
+      n.includes("chatglm"),
+  },
+  {
+    id: "kimi",
+    match: (n, p) => p === "moonshot" || n.startsWith("kimi-"),
+  },
+  {
+    id: "minimax",
+    match: (n, p) => p === "minimax" || n.startsWith("minimax"),
+  },
+  {
+    id: "grok",
+    match: (n, p) => p === "x-ai" || p === "xai" || n.startsWith("grok-"),
+  },
+  {
+    id: "mimo",
+    match: (n, p) => p === "mimo" || n.startsWith("mimo-"),
+  },
+  {
+    id: "meta",
+    match: (n, p) => p === "meta" || n.startsWith("llama-") || n.includes("meta-llama"),
+  },
+  {
+    id: "mistral",
+    match: (n, p) => p === "mistral" || n.startsWith("mistral-") || n.startsWith("codestral-"),
+  },
+]
+
+/** Strip release-date tails only — same spirit as main-session `modelShort`. */
+export function stripModelDateSuffix(name: string): string {
+  return name.replace(/-20\d{6,}$/, "").replace(/-\d{8}$/, "")
+}
+
+/** Sub-agent label text: `shortModelName` + date trim; row layout truncates visually. */
+export function displayModelName(modelId: string): string {
+  const name = shortModelName(modelId)
+  if (!name) return ""
+  return stripModelDateSuffix(name)
+}
+
+/** @deprecated alias */
+export function compactModelLabel(modelId: string, _providerID = ""): string {
+  return displayModelName(modelId)
+}
+
+function normalizeForFamilyMatch(s: string): string {
+  return s.toLowerCase()
+}
+
+function findFamilyRule(name: string, providerID: string): ModelFamilyRule | undefined {
+  const n = normalizeForFamilyMatch(name)
+  const p = normalizeForFamilyMatch(providerID)
+  return MODEL_FAMILY_RULES.find((r) => r.match(n, p))
+}
+
+export function modelFamilyId(modelId: string, providerID: string): ModelFamilyId | null {
+  const name = shortModelName(modelId)
+  if (!name) return null
+  return findFamilyRule(name, providerID)?.id ?? null
+}
+
+function stableHash(s: string): number {
+  let h = 5381
+  for (let i = 0; i < s.length; i++) h = (h * 33) ^ s.charCodeAt(i)
+  return h >>> 0
+}
+
+/** Sub-agent label color from vendor brand hex (toned for TUI). */
+export function modelRowColor(modelId: string, providerID: string, pal: PanelPalette): string {
+  const fallback = pal.muted
+  const family = modelFamilyId(modelId, providerID)
+  if (family) return toneBrandHex(MODEL_BRAND_HEX[family], fallback)
+  const name = shortModelName(modelId)
+  const key = providerID || name.split("-")[0] || name
+  const idx = stableHash(key) % UNKNOWN_BRAND_HEX.length
+  return toneBrandHex(UNKNOWN_BRAND_HEX[idx]!, fallback)
+}
+
+export function sessionIdTail(id: string, tailLen: number): string {
+  if (!id) return ""
+  if (id.length <= tailLen) return id
+  return "\u2026" + id.slice(-tailLen)
+}
+
+export function subAgentLabelBudget(gauge: number, value: string, unit: string): number {
+  const rightW = visualWidth(value) + (unit ? visualWidth(unit) + UNIT_GAP : 0)
+  return Math.max(MIN_LABEL_BUDGET, gauge - rightW - INDENT_COLS - MIN_ROW_GAP)
+}
+
+/** Sub-agent label: `{model} …{idTail}` — model first; truncation keeps model prefix. */
+export function formatSubAgentLabel(
+  sub: SubAgentSummary,
+  gauge: number,
+  formatCost: (n: number) => string,
+  tokUnit: string,
+): string {
+  const value = sub.cost > 0 ? formatCost(sub.cost) : formatTokenCount(sub.input)
+  const unit = sub.cost > 0 ? "" : tokUnit
+  const budget = subAgentLabelBudget(gauge, value, unit)
+
+  if (!shortModelName(sub.model)) {
+    return truncateVisual(sessionIdTail(sub.id, ID_TAIL_DEFAULT), budget)
+  }
+
+  const model = displayModelName(sub.model)
+  return joinModelAndSessionId(model, sub.id, budget)
+}
+
+function joinModelAndSessionId(model: string, id: string, budget: number): string {
+  if (!model) {
+    return truncateVisual(sessionIdTail(id, ID_TAIL_DEFAULT), budget)
+  }
+
+  const tryPair = (tailLen: number, trimModel: boolean): string | null => {
+    const idPart = sessionIdTail(id, tailLen)
+    const idBlockW = visualWidth(idPart) + 1
+    if (budget <= idBlockW) return null
+    const modelPart = trimModel ? truncateVisual(model, budget - idBlockW) : model
+    if (!modelPart) return null
+    const combined = modelPart + " " + idPart
+    return visualWidth(combined) <= budget ? combined : null
+  }
+
+  for (const tailLen of [ID_TAIL_DEFAULT, ID_TAIL_MIN]) {
+    const full = tryPair(tailLen, false)
+    if (full) return full
+  }
+
+  for (const tailLen of [ID_TAIL_MIN, ID_TAIL_DEFAULT]) {
+    const trimmed = tryPair(tailLen, true)
+    if (trimmed) return trimmed
+  }
+
+  return truncateVisual(model, budget)
+}

package/src/sidebar-host.tsx

@@ -16,6 +16,7 @@ import { loadPluginConfig } from "./load-config.ts"
 /**
  * Session-scoped sidebar host. Bumps `refreshTick` on message.updated (same as visual-cache)
  * so memos re-read api.state.session.messages.
+ * Timeline writes are event-driven: message.updated → handleMessage → appendFile.
  */
 export function CacheHitSidebarHost(props: {
   sessionId: string
@@ -44,8 +45,6 @@ export function CacheHitSidebarHost(props: {
     config: props.timeline,
     getRootSessionId: () => props.sessionId,
     getChildIds: childIds,
-    getMessages: (id) =>
-      (props.api.state.session.messages(id) ?? []) as AssistantMessage[],
   })
   onCleanup(() => timeline.dispose())
 
@@ -56,7 +55,6 @@ export function CacheHitSidebarHost(props: {
     setChildIds,
     onSynced: () => {
       bumpRefresh()
-      timeline.schedule()
     },
   })
   onCleanup(() => childSync.dispose())
@@ -97,15 +95,17 @@ export function CacheHitSidebarHost(props: {
     timeline.resetForRootChange()
     if (sid) {
       childSync.loadChildren()
-      timeline.schedule()
     }
   })
 
   createEffect(() => {
     const unsub = props.api.event.on("message.updated", (event) => {
       bumpRefresh()
-      childSync.onForeignSessionActivity(event.properties?.info?.sessionID)
-      timeline.schedule()
+      const sid = event.properties?.info?.sessionID
+      childSync.onForeignSessionActivity(sid)
+      if (sid && event.properties?.info) {
+        timeline.handleMessage(sid, event.properties.info as AssistantMessage)
+      }
     })
     onCleanup(() => unsub?.())
   })

package/src/timeline/collector.ts

@@ -1,6 +1,6 @@
 import type { TimelineConfig } from "../plugin-config.ts"
 import type { AssistantMessage } from "../types.ts"
-import { buildCallRecords, mergeAndSortRecords } from "./records.ts"
+import { assistantMessageToRecord } from "./records.ts"
 import {
   appendTimelineRecord,
   localDateKey,
@@ -10,10 +10,9 @@ import {
 } from "./writer.ts"
 import type { LlmCallRecord } from "./types.ts"
 
-export const TIMELINE_DEBOUNCE_MS = 500
-
 export type TimelineCollector = {
-  schedule: () => void
+  /** Process a single message from a message.updated event. */
+  handleMessage: (sessionID: string, msg: AssistantMessage) => void
   resetForRootChange: () => void
   dispose: () => void
   memoryRecords: () => readonly LlmCallRecord[]
@@ -23,13 +22,12 @@ export function createTimelineCollector(opts: {
   config: TimelineConfig
   getRootSessionId: () => string
   getChildIds: () => readonly string[]
-  getMessages: (sessionId: string) => readonly AssistantMessage[]
   /** Test hook: replace disk append */
   append?: (logPath: string, record: LlmCallRecord) => Promise<void>
 }): TimelineCollector {
   if (!opts.config.enabled) {
     return {
-      schedule: () => {},
+      handleMessage: () => {},
       resetForRootChange: () => {},
       dispose: () => {},
       memoryRecords: () => [],
@@ -51,106 +49,61 @@ export function createTimelineCollector(opts: {
       maxLogFiles: opts.config.maxLogFiles,
     })
   }
-  const flushedKeys = new Set<string>()
+
   let activeDateKey = localDateKey()
-  let debounceTimer: ReturnType<typeof setTimeout> | undefined
   let memory: LlmCallRecord[] = []
-  let collectGen = 0
+  let disposed = false
 
   const ensureDateKey = () => {
     const today = localDateKey()
     if (today !== activeDateKey) {
-      flushedKeys.clear()
       activeDateKey = today
     }
     return today
   }
 
-  const clearDebounce = () => {
-    if (debounceTimer !== undefined) clearTimeout(debounceTimer)
-    debounceTimer = undefined
-  }
-
-  const shouldFlushToDisk = (rec: LlmCallRecord): boolean => {
-    if (flushedKeys.has(rec.messageKey)) return false
-    if (rec.isComplete) return true
-    return opts.config.flushIncomplete
-  }
-
-  const flushRecords = async (records: LlmCallRecord[], rootId: string, gen: number) => {
-    const logPath = timelineDailyLogPath(logsDir, ensureDateKey())
-    for (const rec of records) {
-      if (gen !== collectGen || opts.getRootSessionId() !== rootId) return
-      if (!shouldFlushToDisk(rec)) continue
-      flushedKeys.add(rec.messageKey)
-      try {
-        await append(logPath, rec)
-      } catch {
-        flushedKeys.delete(rec.messageKey)
-      }
-    }
-  }
-
-  const collectNow = () => {
-    clearDebounce()
+  const handleMessage = (sessionID: string, msg: AssistantMessage) => {
+    if (disposed) return
     const rootId = opts.getRootSessionId()
-    if (!rootId) {
-      memory = []
+    if (!rootId) return
+
+    let scope: "main" | "child"
+    if (sessionID === rootId) {
+      scope = "main"
+    } else if (opts.getChildIds().includes(sessionID)) {
+      scope = "child"
+    } else {
       return
     }
-    const gen = collectGen
-    const chunks: LlmCallRecord[][] = []
-    const mainMsgs = opts.getMessages(rootId)
-    if (mainMsgs.length) {
-      chunks.push(
-        buildCallRecords(rootId, rootId, "main", mainMsgs, {
-          logSummaryMessages: opts.config.logSummaryMessages,
-        }),
-      )
-    }
-    for (const cid of opts.getChildIds()) {
-      const msgs = opts.getMessages(cid)
-      if (msgs.length) {
-        chunks.push(
-          buildCallRecords(cid, rootId, "child", msgs, {
-            logSummaryMessages: opts.config.logSummaryMessages,
-          }),
-        )
-      }
-    }
-    if (gen !== collectGen || opts.getRootSessionId() !== rootId) return
-    memory = mergeAndSortRecords(chunks)
-    const toFlush = memory.filter(shouldFlushToDisk)
-    if (toFlush.length > 0) {
-      queueMicrotask(() => flushRecords(toFlush, rootId, gen))
-    }
-  }
 
-  const schedule = () => {
-    clearDebounce()
-    if (!opts.getRootSessionId()) return
-    debounceTimer = setTimeout(() => {
-      debounceTimer = undefined
-      collectNow()
-    }, TIMELINE_DEBOUNCE_MS)
-  }
+    if (msg.role !== "assistant") return
+    if (!opts.config.logSummaryMessages && msg.summary === true) return
 
-  const resetForRootChange = () => {
-    collectGen++
-    clearDebounce()
-    memory = []
-  }
+    const rec = assistantMessageToRecord(msg, sessionID, rootId, scope, Date.now())
+    if (!rec) return
+    if (!opts.config.flushIncomplete && !rec.isComplete) return
 
-  const dispose = () => {
-    collectGen++
-    clearDebounce()
-  }
+    const logPath = timelineDailyLogPath(logsDir, ensureDateKey())
+    void append(logPath, rec).catch(() => {})
 
-  const memoryRecords = () => {
+    memory.push(rec)
     const max = opts.config.maxMemoryRows
-    if (memory.length <= max) return memory
-    return memory.slice(-max)
+    while (memory.length > max) memory.shift()
   }
 
-  return { schedule, resetForRootChange, dispose, memoryRecords }
+  return {
+    handleMessage,
+    resetForRootChange: () => {
+      memory = []
+    },
+    dispose: () => {
+      disposed = true
+      memory = []
+    },
+    memoryRecords: () => {
+      const max = opts.config.maxMemoryRows
+      if (memory.length <= max) return memory
+      return memory.slice(-max)
+    },
+  }
 }

package/src/timeline/records.ts

@@ -25,18 +25,6 @@ export function messageKeyFor(msg: AssistantMessage, sessionId: string): string
   return `${sessionId}:${created}:${msg.modelID ?? ""}`
 }
 
-export function sortKeyForRecord(r: LlmCallRecord): number {
-  const ts = r.completedAt ?? r.created
-  return new Date(ts).getTime()
-}
-
-export function mergeAndSortRecords(chunks: readonly LlmCallRecord[][]): LlmCallRecord[] {
-  const all = chunks.flat()
-  const keyed = all.map(r => ({ r, k: sortKeyForRecord(r) }))
-  keyed.sort((a, b) => a.k - b.k)
-  return keyed.map(x => x.r)
-}
-
 export function assistantMessageToRecord(
   msg: AssistantMessage,
   sessionId: string,
@@ -72,21 +60,3 @@ export function assistantMessageToRecord(
   }
 }
 
-export function buildCallRecords(
-  sessionId: string,
-  rootSessionId: string,
-  scope: "main" | "child",
-  messages: readonly AssistantMessage[],
-  opts?: { logSummaryMessages?: boolean; recordedAt?: number },
-): LlmCallRecord[] {
-  const now = opts?.recordedAt ?? Date.now()
-  const logSummary = opts?.logSummaryMessages !== false
-  const out: LlmCallRecord[] = []
-  for (const msg of messages) {
-    if (!logSummary && msg.summary === true) continue
-    const rec = assistantMessageToRecord(msg, sessionId, rootSessionId, scope, now)
-    if (rec) out.push(rec)
-  }
-  return out
-}
-

package/src/tui-panel/README.md

@@ -36,7 +36,7 @@ export function MySidebar(props: { theme: Record<string, unknown> }) {
         open={open()}
         onToggle={() => setOpen((o) => !o)}
         title="My Panel"
-        version="0.1.0"
+        version="0.2.0"
       />
       <Show when={open()}>
         <Show
@@ -69,7 +69,7 @@ export function MySidebar(props: { theme: Record<string, unknown> }) {
 | `TuiPanel` | Outer border + padding |
 | `TuiPanelTitle` | Foldable title; optional `collapsed` summary |
 | `TuiSection` | `▼` section header + separator fill |
-| `TuiMetricRow` | Label left, value (+ unit) right |
+| `TuiMetricRow` | Label left, value (+ unit) right; optional `labelFg` / `valueFg` for split colors |
 | `TuiHitRow` | Hit bar + % + trend |
 | `computeHitBarWidth` | Dynamic bar width |
 

package/src/tui-panel/README.zh-CN.md

@@ -36,7 +36,7 @@ export function MySidebar(props: { theme: Record<string, unknown> }) {
         open={open()}
         onToggle={() => setOpen((o) => !o)}
         title="My Panel"
-        version="0.1.0"
+        version="0.2.0"
       />
       <Show when={open()}>
         <Show
@@ -69,7 +69,7 @@ export function MySidebar(props: { theme: Record<string, unknown> }) {
 | `TuiPanel` | 外框 + padding |
 | `TuiPanelTitle` | 可折叠标题；可选 `collapsed` 摘要 |
 | `TuiSection` | `▼` 区块标题 + 分隔线填充 |
-| `TuiMetricRow` | 左标签右数值（可选 unit） |
+| `TuiMetricRow` | 左标签右数值（可选 unit）；可选 `labelFg` / `valueFg` 分段上色 |
 | `TuiHitRow` | Hit 条 + % + 趋势 |
 | `computeHitBarWidth` | 动态进度条宽度 |