opencode-cache-hit 0.1.0 → 0.2.1

package/src/timeline/writer.ts

@@ -1,11 +1,11 @@
 import { appendFile, mkdir, readdir, stat, unlink } from "node:fs/promises"
+import { homedir } from "node:os"
 import { dirname, join } from "node:path"
 import type { TimelineConfig } from "../plugin-config.ts"
-import { PLUGIN_ROOT } from "../load-config.ts"
 import type { LlmCallRecord } from "./types.ts"
 import { rotateFileBySize, trimFileToMaxLines } from "./rotation.ts"
 
-export const DEFAULT_TIMELINE_DIR = join(PLUGIN_ROOT, "logs")
+export const DEFAULT_TIMELINE_DIR = join(homedir(), ".local", "share", "opencode", "logs", "cache-hit")
 export const TIMELINE_FILE_PREFIX = "timeline"
 
 export type TimelineWriteOptions = Pick<
@@ -14,8 +14,9 @@ export type TimelineWriteOptions = Pick<
 >
 
 export function resolveTimelineDir(config: TimelineConfig): string {
-  const raw = config.dir?.trim()
-  return raw.length > 0 ? raw : DEFAULT_TIMELINE_DIR
+  const raw = (config.dir ?? "").trim()
+  if (!raw) return DEFAULT_TIMELINE_DIR
+  return raw.startsWith("~/") ? join(homedir(), raw.slice(2)) : raw
 }
 
 /** Local calendar day `YYYY-MM-DD` for daily log files. */

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` | 动态进度条宽度 |
 

package/src/tui-panel/components.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource @opentui/solid */
 import { Show, type JSX } from "solid-js"
-import { padBeforeTitleSummary, sepAfterPrefix, visualWidth } from "./layout.ts"
+import { padBeforeTitleSummary, sepAfterPrefix, UNIT_GAP, visualWidth } from "./layout.ts"
 import type { PanelLayout } from "./use-panel-layout.ts"
 import type { PanelPalette } from "./palette.ts"
 
@@ -126,18 +126,45 @@ export function TuiSection(props: {
   )
 }
 
+function metricRowGap(label: string, value: string, unit: string, gauge: number): number {
+  const used =
+    visualWidth(label) + visualWidth(value) + (unit ? visualWidth(unit) + UNIT_GAP : 0)
+  return Math.max(1, gauge - used)
+}
+
 export function TuiMetricRow(props: {
   pal: PanelPalette
   layout: PanelLayout
   label: string
   value: string
   unit?: string
+  /** Whole line (label + value + unit). Ignored when `labelFg` / `valueFg` set. */
   fg?: string
+  /** Label-only color (e.g. sub-agent model); value stays `valueFg` or muted. */
+  labelFg?: string
+  valueFg?: string
 }) {
-  const fg = props.fg ?? props.pal.muted
+  const unit = props.unit ?? ""
+  const unitSuffix = unit ? " " + unit : ""
+  const split = props.labelFg !== undefined || props.valueFg !== undefined
+  if (split) {
+    const gap = metricRowGap(props.label, props.value, unit, props.layout.gauge())
+    const labelColor = props.labelFg ?? props.fg ?? props.pal.muted
+    const valueColor = props.valueFg ?? props.fg ?? props.pal.muted
+    return (
+      <text>
+        <span style={{ fg: labelColor }}>{props.label}</span>
+        {" ".repeat(gap)}
+        <span style={{ fg: valueColor }}>
+          {props.value}
+          {unitSuffix}
+        </span>
+      </text>
+    )
+  }
   return (
-    <text fg={fg}>
-      {props.layout.row(props.label, props.value, props.unit ?? "")}
+    <text fg={props.fg ?? props.pal.muted}>
+      {props.layout.row(props.label, props.value, unit)}
     </text>
   )
 }

package/src/tui-panel/index.ts

@@ -19,7 +19,12 @@ export {
   padBeforeTitleSummary,
 } from "./layout.ts"
 
-export { buildPanelPalette, themeColorToHex, type PanelPalette } from "./palette.ts"
+export {
+  buildPanelPalette,
+  themeColorToHex,
+  toneBrandHex,
+  type PanelPalette,
+} from "./palette.ts"
 
 export {
   createPanelLayout,

package/src/tui-panel/palette.ts

@@ -79,6 +79,11 @@ export function themeColorToHex(raw: unknown, fallback: string): string {
   return "#" + [c.r, c.g, c.b].map((v) => v.toString(16).padStart(2, "0")).join("")
 }
 
+/** Tone a vendor brand hex for dark TUI panels (same max saturation as theme colors). */
+export function toneBrandHex(hex: string, fallback: string): string {
+  return desaturateTo(hex, MAX_SAT, fallback)
+}
+
 export function buildPanelPalette(theme: Record<string, unknown>): PanelPalette {
   const sat = (k: string, fb: string) => desaturateTo(theme[k], MAX_SAT, fb)
   return {

package/src/types.ts

@@ -1,5 +1,6 @@
 export type SessionSnapshot = {
   model: string
+  providerID: string
   input: number
   output: number
   reasoning: number
@@ -10,6 +11,8 @@ export type SessionSnapshot = {
 
 export type SubAgentSummary = {
   id: string
+  model: string
+  providerID: string
   cost: number
   input: number
   output: number
@@ -23,6 +26,7 @@ export type AssistantMessage = {
   id?: string
   messageID?: string
   modelID?: string
+  providerID?: string
   cost?: number
   /** OpenCode SDK: true = summary/compaction message, not a full LLM pricing turn */
   summary?: boolean
@@ -38,9 +42,21 @@ export type AssistantMessage = {
   }
 }
 
+export type ModelCost = {
+  input: number
+  output: number
+  cache: { read: number; write: number }
+}
+
+export type ProviderInfo = {
+  id: string
+  models: { [key: string]: { cost: ModelCost } }
+}
+
 export type OpenCodeTuiApi = {
   state: {
     path: { directory: string }
+    provider: ReadonlyArray<ProviderInfo>
     session: {
       messages: (id: string) => unknown[] | undefined
       get: (id: string) => { parentID?: string } | undefined

package/src/use-cache-hit-metrics.ts

@@ -10,14 +10,14 @@ import {
 import { computeHitBarWidth, visualWidth } from "./tui-panel/layout.ts"
 import { buildPanelPalette, type PanelPalette } from "./tui-panel/palette.ts"
 import type { PanelLayout } from "./tui-panel/use-panel-layout.ts"
-import type { AssistantMessage, SessionSnapshot, SubAgentSummary } from "./types.ts"
+import type { AssistantMessage, ProviderInfo, SessionSnapshot, SubAgentSummary } from "./types.ts"
 import {
   cacheHitRatio,
-  combinedCacheHitRatio,
   computePerCallHitTrend,
   mainSessionHasStats,
   shortModelName,
 } from "./stats.ts"
+import { computePricing, type PricingInfo } from "./pricing.ts"
 
 function activeLang(display: DisplayConfig) {
   return display.lang === "auto" ? resolveLang("auto") : display.lang
@@ -35,6 +35,7 @@ export function useCacheHitMetrics(props: {
   messages: Accessor<AssistantMessage[]>
   main: Accessor<SessionSnapshot>
   subAgents: Accessor<SubAgentSummary[]>
+  providers: Accessor<ReadonlyArray<ProviderInfo>>
   layout: PanelLayout
 }) {
   const pal = createMemo(() => buildPanelPalette(props.theme()))
@@ -44,12 +45,10 @@ export function useCacheHitMetrics(props: {
   const main = createMemo(() => props.main())
   const perCall = createMemo(() => computePerCallHitTrend(props.messages()))
   const sessionRatio = createMemo(() => cacheHitRatio(main().cacheRead, main().input))
-  const combinedRatio = createMemo(() => combinedCacheHitRatio(main(), subs()))
 
-  const showCombinedHit = createMemo(() => {
-    if (subs().length === 0) return false
-    return Math.abs(combinedRatio() - sessionRatio()) >= 0.0005
-  })
+  const pricing = createMemo<PricingInfo>(() =>
+    computePricing(props.providers(), main().providerID, main().model, main().cacheRead),
+  )
 
   const mainHasStats = createMemo(() => mainSessionHasStats(main()))
   const hasData = createMemo(() => mainHasStats() || subs().length > 0)
@@ -85,9 +84,9 @@ export function useCacheHitMetrics(props: {
     main,
     mainHasStats,
     perCall,
+    pricing,
     sessionPct: createMemo(() => formatRatioAsPercent(sessionRatio())),
-    combinedPct: createMemo(() => formatRatioAsPercent(combinedRatio())),
-    showCombinedHit,
+
     hasData,
     trendLabel,
     bar,

package/src/version.ts

@@ -1 +1,4 @@
-export const PLUGIN_VERSION = "0.1.0"
+import packageJson from "../package.json" with { type: "json" }
+
+/** Sidebar label; kept in sync with package.json "version". */
+export const PLUGIN_VERSION = packageJson.version

package/src/widget.tsx

@@ -1,10 +1,11 @@
 /** @jsxImportSource @opentui/solid */
 import { createMemo, createSignal, Show, type Accessor } from "solid-js"
-import type { DisplayConfig } from "./plugin-config.ts"
-import type { AssistantMessage, SessionSnapshot, SubAgentSummary } from "./types.ts"
+import type { DisplayConfig, CacheTTLConfig } from "./plugin-config.ts"
+import type { AssistantMessage, ProviderInfo, SessionSnapshot, SubAgentSummary } from "./types.ts"
 import { PLUGIN_VERSION } from "./version.ts"
 import { AgentsView } from "./agents-view.tsx"
 import { MainSessionView } from "./main-session-view.tsx"
+
 import { useCacheHitMetrics } from "./use-cache-hit-metrics.ts"
 import {
   createPanelLayout,
@@ -22,10 +23,13 @@ export function CacheHitSidebar(props: {
   sessionId: Accessor<string>
   theme: Record<string, unknown>
   display: DisplayConfig
+  cacheTTL: CacheTTLConfig
   messages: Accessor<AssistantMessage[]>
   main: Accessor<SessionSnapshot>
   subAgents: Accessor<SubAgentSummary[]>
+  providers: Accessor<ReadonlyArray<ProviderInfo>>
   formatCost: (amount: number) => string
+  formatRate: (perMillion: number) => string
 }) {
   const [panelOpen, setPanelOpen] = createSignal(true)
   const detail = createSectionFold(true)
@@ -41,6 +45,7 @@ export function CacheHitSidebar(props: {
     messages: props.messages,
     main: props.main,
     subAgents: props.subAgents,
+    providers: props.providers,
     layout,
   })
 
@@ -96,6 +101,9 @@ export function CacheHitSidebar(props: {
               detail={detail}
               model={model}
               formatCost={props.formatCost}
+              formatRate={props.formatRate}
+              cacheTTL={props.cacheTTL}
+              messages={props.messages}
             />
             <Show when={m.subs().length > 0}>
               <TuiSection
@@ -106,7 +114,7 @@ export function CacheHitSidebar(props: {
                 suffix={agentsSuffix()}
                 onToggle={agents.toggle}
               >
-                <AgentsView m={m} layout={layout} formatCost={props.formatCost} />
+                <AgentsView m={m} layout={layout} providers={props.providers()} formatCost={props.formatCost} />
               </TuiSection>
             </Show>
           </Show>