opencode-visual-cache 1.7.0-beta.2 → 1.7.0-beta.4

package/src/v2/sidebar.tsx

@@ -1,69 +1,69 @@
-/** @jsxImportSource @opentui/solid */
-
-import { createMemo, For, Show } from "solid-js"
-import type { Context } from "./types"
-import { collectSessionStats, hitRate } from "./data"
-import { fmt, fmtCost, progressBar, visualPadEnd } from "../core"
-
-const LABEL_GAP = 1
-const BAR_BRACKETS = 2
-const BAR_GAP = 1
-const PCT_FIXED_WIDTH = 5
-const MIN_PANEL_WIDTH = 20
-const DEFAULT_PANEL_WIDTH = 26
-
-export function SidebarView(props: { context: Context; sessionID: string }) {
-  const stats = createMemo(() => collectSessionStats(props.context, props.sessionID))
-  const rate = createMemo(() => hitRate(stats()))
-  const theme = props.context.theme
-
-  const rateColor = () => {
-    const r = rate()
-    if (r >= 85) return theme.text.feedback.success.default
-    if (r >= 70) return theme.text.feedback.warning.default
-    return theme.text.feedback.error.default
-  }
-  const barWidth = () =>
-    Math.max(MIN_PANEL_WIDTH, Math.min(DEFAULT_PANEL_WIDTH, props.context.app.version ? DEFAULT_PANEL_WIDTH : DEFAULT_PANEL_WIDTH)) -
-    LABEL_GAP - BAR_BRACKETS - BAR_GAP - PCT_FIXED_WIDTH - 1
-
-  const rows = () => {
-    const s = stats()
-    return [
-      { label: "Hit", value: fmt(s.cacheRead) + " tok", color: rateColor() },
-      { label: "Miss", value: fmt(s.input + s.cacheWrite) + " tok", color: theme.text.default },
-      { label: "Write", value: fmt(s.cacheWrite) + " tok", color: theme.text.subdued },
-      { label: "Out", value: fmt(s.output) + " tok", color: theme.text.subdued },
-    ]
-  }
-
-  return (
-    <Show when={stats().hasData}>
-      <box>
-        <box flexDirection="row" gap={LABEL_GAP}>
-          <text fg={theme.text.default}>Cache</text>
-          <text fg={rateColor()}>
-            {"["}
-            {progressBar(rate(), barWidth())}
-            {"]"}
-          </text>
-          <text fg={rateColor()}>{rate().toFixed(1) + "%"}</text>
-        </box>
-        <For each={rows()}>
-          {(row) => (
-            <box flexDirection="row" gap={LABEL_GAP}>
-              <text fg={theme.text.default}>{visualPadEnd(row.label, 5)}</text>
-              <text fg={row.color}>{row.value}</text>
-            </box>
-          )}
-        </For>
-        <Show when={stats().cost > 0}>
-          <box flexDirection="row" gap={LABEL_GAP}>
-            <text fg={theme.text.default}>{"Cost"}</text>
-            <text fg={theme.text.default}>{fmtCost(stats().cost)}</text>
-          </box>
-        </Show>
-      </box>
-    </Show>
-  )
-}
+/** @jsxImportSource @opentui/solid */
+
+import { createMemo, For, Show } from "solid-js"
+import type { Context } from "./types"
+import { collectSessionStats, hitRate } from "./data"
+import { fmt, fmtCost, progressBar, visualPadEnd } from "../core"
+
+const LABEL_GAP = 1
+const BAR_BRACKETS = 2
+const BAR_GAP = 1
+const PCT_FIXED_WIDTH = 5
+const MIN_PANEL_WIDTH = 20
+const DEFAULT_PANEL_WIDTH = 26
+
+export function SidebarView(props: { context: Context; sessionID: string }) {
+  const stats = createMemo(() => collectSessionStats(props.context, props.sessionID))
+  const rate = createMemo(() => hitRate(stats()))
+  const theme = props.context.theme
+
+  const rateColor = () => {
+    const r = rate()
+    if (r >= 85) return theme.text.feedback.success.default
+    if (r >= 70) return theme.text.feedback.warning.default
+    return theme.text.feedback.error.default
+  }
+  const barWidth = () =>
+    Math.max(MIN_PANEL_WIDTH, Math.min(DEFAULT_PANEL_WIDTH, props.context.app.version ? DEFAULT_PANEL_WIDTH : DEFAULT_PANEL_WIDTH)) -
+    LABEL_GAP - BAR_BRACKETS - BAR_GAP - PCT_FIXED_WIDTH - 1
+
+  const rows = () => {
+    const s = stats()
+    return [
+      { label: "Hit", value: fmt(s.cacheRead) + " tok", color: rateColor() },
+      { label: "Miss", value: fmt(s.input + s.cacheWrite) + " tok", color: theme.text.default },
+      { label: "Write", value: fmt(s.cacheWrite) + " tok", color: theme.text.subdued },
+      { label: "Out", value: fmt(s.output) + " tok", color: theme.text.subdued },
+    ]
+  }
+
+  return (
+    <Show when={stats().hasData}>
+      <box>
+        <box flexDirection="row" gap={LABEL_GAP}>
+          <text fg={theme.text.default}>Cache</text>
+          <text fg={rateColor()}>
+            {"["}
+            {progressBar(rate(), barWidth())}
+            {"]"}
+          </text>
+          <text fg={rateColor()}>{rate().toFixed(1) + "%"}</text>
+        </box>
+        <For each={rows()}>
+          {(row) => (
+            <box flexDirection="row" gap={LABEL_GAP}>
+              <text fg={theme.text.default}>{visualPadEnd(row.label, 5)}</text>
+              <text fg={row.color}>{row.value}</text>
+            </box>
+          )}
+        </For>
+        <Show when={stats().cost > 0}>
+          <box flexDirection="row" gap={LABEL_GAP}>
+            <text fg={theme.text.default}>{"Cost"}</text>
+            <text fg={theme.text.default}>{fmtCost(stats().cost)}</text>
+          </box>
+        </Show>
+      </box>
+    </Show>
+  )
+}

package/src/v2/status.tsx

@@ -1,96 +1,96 @@
-/** @jsxImportSource @opentui/solid */
-
-import { createMemo, For, Show } from "solid-js"
-import type { Context } from "./types"
-import type { PanelSignals } from "../panel/panel-api"
-import { collectLastHitRate } from "./data"
-import { desaturateTo, fmtCompact, formatBalanceText, MAX_SAT, FALLBACK, visualWidth } from "../core"
-import { createT } from "../i18n"
-import { mapTheme } from "./theme"
-
-/**
- * 底部状态栏（prompt.footer.status）——对齐 V1 BottomStatusBar 统计段口径：
- * 单条命中率（最后一条有 token 的 assistant 消息）+ 趋势 + Tokens 总量 + 余额。
- * 余额读共享 signals.balanceState（PluginRoot 驱动轮询）；provider 不支持余额时隐藏余额段（对齐 V1）。
- * 颜色经 mapTheme（V1 形状）——与侧边栏命中率颜色同源，保证两处一致。
- */
-export function StatusView(props: {
-  context: Context
-  signals: PanelSignals
-  sessionID: string
-}) {
-  const t = createT(() => props.signals.langCode())
-
-  // 与侧边栏 TokenCachePanel 同一颜色来源（mapTheme → desaturateTo）
-  const pal = createMemo(() => {
-    const th = mapTheme(props.context.theme) as unknown as Record<string, string>
-    const sat = (k: string, fb: string) => desaturateTo(th[k], MAX_SAT, fb)
-    return {
-      text: sat("text", FALLBACK.text),
-      muted: sat("textMuted", FALLBACK.muted),
-      success: sat("success", FALLBACK.success),
-      warning: sat("warning", FALLBACK.warning),
-      error: sat("error", FALLBACK.error),
-    }
-  })
-
-  const stats = createMemo(() => collectLastHitRate(props.context, props.sessionID))
-
-  const hitColor = createMemo(() => {
-    const r = stats().hitRate
-    if (r >= 85) return pal().success
-    if (r >= 70) return pal().warning
-    return pal().error
-  })
-
-  // 命中率趋势：最后一条与上一条的差值；|Δ| < 0.05 视为无变化（null = 不显示）
-  const trend = createMemo(() => {
-    const s = stats()
-    if (s.prevHitRate < 0 || s.hitRate < 0) return null
-    const d = s.hitRate - s.prevHitRate
-    return Math.abs(d) < 0.05 ? null : d
-  })
-
-  // 余额文本（对齐 V1）：ok → 数值；loading → …；error → ⚠；idle → -
-  const balanceText = createMemo(() => {
-    const s = props.signals.balanceState()
-    if (s.status === "ok" && s.data) return formatBalanceText(s.data, props.signals.balanceCurrency(), props.signals.exchangeRate())
-    if (s.status === "loading") return "\u2026"
-    if (s.status === "error") return "\u26a0"
-    return "-"
-  })
-
-  const segs = createMemo<{ text: string; color: string | undefined }[]>(() => {
-    const s = stats()
-    const hr = s.hitRate >= 0 ? (Math.floor(s.hitRate * 10) / 10).toFixed(1) + "%" : "--"
-    const out: { text: string; color: string | undefined }[] = [
-      { text: t("barHit") + " ", color: pal().muted },
-      { text: hr, color: hitColor() },
-    ]
-    const tr = trend()
-    if (tr !== null) {
-      out.push({ text: " " + (tr > 0 ? "\u2191" : "\u2193") + Math.abs(tr).toFixed(1) + "%", color: tr > 0 ? pal().success : pal().error })
-    }
-    out.push({ text: " \u00b7 " + t("barTok") + " ", color: pal().muted })
-    out.push({ text: s ? fmtCompact(s.input + s.read + s.write) : "--", color: pal().text })
-    if (!props.signals.balanceUnsupported()) {
-      out.push({ text: " \u00b7 " + t("barBal") + " ", color: pal().muted })
-      out.push({ text: balanceText(), color: pal().text })
-    }
-    out.push({ text: " \u00b7 ", color: pal().muted })
-    return out
-  })
-  const segsW = createMemo(() => {
-    let w = 0
-    for (const sg of segs()) w += visualWidth(sg.text)
-    return w
-  })
-
-  return (
-    <Show when={segsW() > 0}>
-      <text>
-        <For each={segs()}>{(sg) => <span style={{ fg: sg.color }}>{sg.text}</span>}</For>
-      </text>
-    </Show>
-  )
-}
+/** @jsxImportSource @opentui/solid */
+
+import { createMemo, For, Show } from "solid-js"
+import type { Context } from "./types"
+import type { PanelSignals } from "../panel/panel-api"
+import { collectLastHitRate } from "./data"
+import { desaturateTo, fmtCompact, formatBalanceText, MAX_SAT, FALLBACK, visualWidth } from "../core"
+import { createT } from "../i18n"
+import { mapTheme } from "./theme"
+
+/**
+ * 底部状态栏（prompt.footer.status）——对齐 V1 BottomStatusBar 统计段口径：
+ * 单条命中率（最后一条有 token 的 assistant 消息）+ 趋势 + Tokens 总量 + 余额。
+ * 余额读共享 signals.balanceState（PluginRoot 驱动轮询）；provider 不支持余额时隐藏余额段（对齐 V1）。
+ * 颜色经 mapTheme（V1 形状）——与侧边栏命中率颜色同源，保证两处一致。
+ */
+export function StatusView(props: {
+  context: Context
+  signals: PanelSignals
+  sessionID: string
+}) {
+  const t = createT(() => props.signals.langCode())
+
+  // 与侧边栏 TokenCachePanel 同一颜色来源（mapTheme → desaturateTo）
+  const pal = createMemo(() => {
+    const th = mapTheme(props.context.theme) as unknown as Record<string, string>
+    const sat = (k: string, fb: string) => desaturateTo(th[k], MAX_SAT, fb)
+    return {
+      text: sat("text", FALLBACK.text),
+      muted: sat("textMuted", FALLBACK.muted),
+      success: sat("success", FALLBACK.success),
+      warning: sat("warning", FALLBACK.warning),
+      error: sat("error", FALLBACK.error),
+    }
+  })
+
+  const stats = createMemo(() => collectLastHitRate(props.context, props.sessionID))
+
+  const hitColor = createMemo(() => {
+    const r = stats().hitRate
+    if (r >= 85) return pal().success
+    if (r >= 70) return pal().warning
+    return pal().error
+  })
+
+  // 命中率趋势：最后一条与上一条的差值；|Δ| < 0.05 视为无变化（null = 不显示）
+  const trend = createMemo(() => {
+    const s = stats()
+    if (s.prevHitRate < 0 || s.hitRate < 0) return null
+    const d = s.hitRate - s.prevHitRate
+    return Math.abs(d) < 0.05 ? null : d
+  })
+
+  // 余额文本（对齐 V1）：ok → 数值；loading → …；error → ⚠；idle → -
+  const balanceText = createMemo(() => {
+    const s = props.signals.balanceState()
+    if (s.status === "ok" && s.data) return formatBalanceText(s.data, props.signals.balanceCurrency(), props.signals.exchangeRate())
+    if (s.status === "loading") return "\u2026"
+    if (s.status === "error") return "\u26a0"
+    return "-"
+  })
+
+  const segs = createMemo<{ text: string; color: string | undefined }[]>(() => {
+    const s = stats()
+    const hr = s.hitRate >= 0 ? (Math.floor(s.hitRate * 10) / 10).toFixed(1) + "%" : "--"
+    const out: { text: string; color: string | undefined }[] = [
+      { text: t("barHit") + " ", color: pal().muted },
+      { text: hr, color: hitColor() },
+    ]
+    const tr = trend()
+    if (tr !== null) {
+      out.push({ text: " " + (tr > 0 ? "\u2191" : "\u2193") + Math.abs(tr).toFixed(1) + "%", color: tr > 0 ? pal().success : pal().error })
+    }
+    out.push({ text: " \u00b7 " + t("barTok") + " ", color: pal().muted })
+    out.push({ text: s ? fmtCompact(s.input + s.read + s.write) : "--", color: pal().text })
+    if (!props.signals.balanceUnsupported()) {
+      out.push({ text: " \u00b7 " + t("barBal") + " ", color: pal().muted })
+      out.push({ text: balanceText(), color: pal().text })
+    }
+    out.push({ text: " \u00b7 ", color: pal().muted })
+    return out
+  })
+  const segsW = createMemo(() => {
+    let w = 0
+    for (const sg of segs()) w += visualWidth(sg.text)
+    return w
+  })
+
+  return (
+    <Show when={segsW() > 0}>
+      <text>
+        <For each={segs()}>{(sg) => <span style={{ fg: sg.color }}>{sg.text}</span>}</For>
+      </text>
+    </Show>
+  )
+}

package/src/v2/theme.ts

@@ -1,19 +1,19 @@
-import type { TuiThemeCurrent } from "@opencode-ai/plugin/tui"
-import type { Context } from "./types"
-
-/** V2 theme → V1 形状映射（组件按 primary/text/textMuted/… 字段消费）。
- *  侧边栏与底部栏共用——保证命中率颜色等两处一致。
- *  - V1 primary → V2 interactive（v1-migrate.ts 官方映射：interactive = hues.byToken.primary）
- *  - step 取 300：更亮（对齐 V2 暗色强调惯例的亮端），500/400 在暗背景下偏深
- */
-export function mapTheme(theme: Context["theme"]): TuiThemeCurrent {
-  return {
-    primary: theme.hue.interactive[300],
-    text: theme.text.default,
-    textMuted: theme.text.subdued,
-    success: theme.text.feedback.success.default,
-    warning: theme.text.feedback.warning.default,
-    error: theme.text.feedback.error.default,
-    border: theme.text.subdued,
-  } as unknown as TuiThemeCurrent
-}
+import type { TuiThemeCurrent } from "@opencode-ai/plugin/tui"
+import type { Context } from "./types"
+
+/** V2 theme → V1 形状映射（组件按 primary/text/textMuted/… 字段消费）。
+ *  侧边栏与底部栏共用——保证命中率颜色等两处一致。
+ *  - V1 primary → V2 interactive（v1-migrate.ts 官方映射：interactive = hues.byToken.primary）
+ *  - step 取 300：更亮（对齐 V2 暗色强调惯例的亮端），500/400 在暗背景下偏深
+ */
+export function mapTheme(theme: Context["theme"]): TuiThemeCurrent {
+  return {
+    primary: theme.hue.interactive[300],
+    text: theme.text.default,
+    textMuted: theme.text.subdued,
+    success: theme.text.feedback.success.default,
+    warning: theme.text.feedback.warning.default,
+    error: theme.text.feedback.error.default,
+    border: theme.text.subdued,
+  } as unknown as TuiThemeCurrent
+}