opencode-cache-hit 0.2.0 → 0.2.2

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

@@ -6,16 +6,21 @@ import { createTimelineCollector } from "./timeline/collector.ts"
 import type { AssistantMessage, OpenCodeTuiApi, SubAgentSummary } from "./types.ts"
 import {
   emptySessionSnapshot,
+  aggregateFromSessionObject,
   aggregateSessionFromMessages,
+  mainSessionHasStats,
   subAgentHasStats,
   toSubAgentSummary,
+  withModelFallback,
 } from "./stats.ts"
 import { createChildSessionSync } from "./child-session-sync.ts"
 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.
+ * Session-scoped sidebar host. Bumps `refreshTick` on message.updated
+ * so memos re-compute. Prefers session.get() for aggregate cost/tokens
+ * (DB-level, not capped at 100 messages), falls back to session.messages().
+ * Timeline writes are event-driven: message.updated → handleMessage → appendFile.
  */
 export function CacheHitSidebarHost(props: {
   sessionId: string
@@ -44,8 +49,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 +59,6 @@ export function CacheHitSidebarHost(props: {
     setChildIds,
     onSynced: () => {
       bumpRefresh()
-      timeline.schedule()
     },
   })
   onCleanup(() => childSync.dispose())
@@ -65,6 +67,14 @@ export function CacheHitSidebarHost(props: {
     void refreshTick()
     const sid = props.sessionId
     if (!sid) return emptySessionSnapshot()
+    const session = props.api.state.session.get(sid)
+    if (session) {
+      const snap = aggregateFromSessionObject(session)
+      if (mainSessionHasStats(snap)) {
+        const msgs = props.api.state.session.messages(sid) as AssistantMessage[] | undefined
+        return msgs ? withModelFallback(snap, msgs) : snap
+      }
+    }
     const msgs = props.api.state.session.messages(sid)
     return msgs?.length
       ? aggregateSessionFromMessages(msgs as AssistantMessage[])
@@ -78,17 +88,27 @@ export function CacheHitSidebarHost(props: {
     return (props.api.state.session.messages(sid) ?? []) as AssistantMessage[]
   })
 
-  const subAgentList = createMemo(() =>
-    childIds()
+  const subAgentList = createMemo(() => {
+    void refreshTick()
+    return childIds()
       .map((cid) => {
+        const session = props.api.state.session.get(cid)
+        if (session) {
+          const snap = aggregateFromSessionObject(session)
+          if (subAgentHasStats(snap)) {
+            const msgs = props.api.state.session.messages(cid) as AssistantMessage[] | undefined
+            const merged = msgs ? withModelFallback(snap, msgs) : snap
+            return toSubAgentSummary(cid, merged)
+          }
+        }
         const msgs = props.api.state.session.messages(cid)
         if (!msgs?.length) return null
         const snap = aggregateSessionFromMessages(msgs as AssistantMessage[])
         if (!subAgentHasStats(snap)) return null
         return toSubAgentSummary(cid, snap)
       })
-      .filter(Boolean) as SubAgentSummary[],
-  )
+      .filter(Boolean) as SubAgentSummary[]
+  })
 
   createEffect(() => {
     const sid = props.sessionId
@@ -97,15 +117,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/stats.ts

@@ -1,4 +1,4 @@
-import type { AssistantMessage, SessionSnapshot, SubAgentSummary } from "./types.ts"
+import type { AssistantMessage, SessionObject, SessionSnapshot, SubAgentSummary } from "./types.ts"
 
 export function mainSessionHasStats(main: SessionSnapshot): boolean {
   return (
@@ -14,6 +14,21 @@ export function emptySessionSnapshot(): SessionSnapshot {
   return { model: "", providerID: "", input: 0, output: 0, reasoning: 0, cacheRead: 0, cacheWrite: 0, cost: 0 }
 }
 
+export function aggregateFromSessionObject(session: SessionObject): SessionSnapshot {
+  const t = session.tokens
+  const c = t?.cache
+  return {
+    model: session.model?.id ?? "",
+    providerID: session.model?.providerID ?? "",
+    input: t?.input ?? 0,
+    output: t?.output ?? 0,
+    reasoning: t?.reasoning ?? 0,
+    cacheRead: c?.read ?? 0,
+    cacheWrite: c?.write ?? 0,
+    cost: session.cost ?? 0,
+  }
+}
+
 export function aggregateSessionFromMessages(messages: readonly AssistantMessage[]): SessionSnapshot {
   let model = "",
     providerID = "",
@@ -81,6 +96,31 @@ export function subAgentHasStats(snap: SessionSnapshot): boolean {
   )
 }
 
+/**
+ * Fill missing model / providerID from the last assistant message.
+ * Session aggregates may have cost/tokens but lack model metadata;
+ * this avoids losing pricing/display when session.get() is used.
+ */
+export function withModelFallback(
+  snap: SessionSnapshot,
+  messages: readonly AssistantMessage[],
+): SessionSnapshot {
+  if (snap.model && snap.providerID) return snap
+
+  let model = snap.model
+  let providerID = snap.providerID
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const m = messages[i]
+    if (m.role !== "assistant") continue
+    if (!model && m.modelID) model = m.modelID
+    if (!providerID && m.providerID) providerID = m.providerID
+    if (model && providerID) break
+  }
+  return model === snap.model && providerID === snap.providerID
+    ? snap
+    : { ...snap, model, providerID }
+}
+
 export function sidebarShouldShow(
   main: SessionSnapshot,
   subs: readonly SubAgentSummary[],