opencode-tokenwatch 0.1.0 → 0.2.0

package/dist/sidebar.jsx

@@ -0,0 +1,362 @@
+import { createSignal, createMemo, createEffect, For, Show, onMount, onCleanup } from "solid-js";
+import { RGBA } from "@opentui/core";
+import { formatTokens, formatCost, formatDuration } from "./formatter.js";
+import { t, setLanguage } from "./i18n.js";
+const DEFAULT_CONFIG = {
+    sidebar: { showPerformance: true, showPricing: true, showTokenDistribution: true, showTrend: true },
+    language: "auto",
+};
+function progressBarWidth(percent, width) {
+    if (percent >= 100)
+        return width;
+    return Math.floor((percent / 100) * width);
+}
+function progressFilled(percent, width) {
+    return "█".repeat(Math.max(0, progressBarWidth(percent, width)));
+}
+function progressRemaining(percent, width) {
+    return "░".repeat(Math.max(0, width - progressBarWidth(percent, width)));
+}
+function hitRateColor(rate) {
+    if (rate >= 85)
+        return RGBA.fromInts(76, 175, 80, 255);
+    if (rate >= 70)
+        return RGBA.fromInts(255, 193, 7, 255);
+    return RGBA.fromInts(244, 67, 54, 255);
+}
+function estimateTokens(text) {
+    if (!text || text.length === 0)
+        return 0;
+    let ascii = 0, cjk = 0;
+    for (const c of text) {
+        const code = c.codePointAt(0) ?? 0;
+        if ((code >= 0x4E00 && code <= 0x9FFF) || (code >= 0x3040 && code <= 0x30FF) ||
+            (code >= 0xAC00 && code <= 0xD7A3) || (code >= 0x1100 && code <= 0x11FF) ||
+            (code >= 0x2E80 && code <= 0x2EFF))
+            cjk++;
+        else
+            ascii++;
+    }
+    const trimmed = text.trimStart();
+    const jsonLike = (trimmed.startsWith("{") || trimmed.startsWith("[")) && /"[^"]+"\s*:/.test(text);
+    const codeLike = !jsonLike && /```|^import |^export |^function |^const |^let |^var |^class |^interface |^type |^def |^fn |^pub |^use |^mod |^package /m.test(text);
+    const asciiPerToken = jsonLike ? 2 : codeLike ? 2.5 : 4;
+    return Math.max(1, Math.ceil(ascii / asciiPerToken + cjk / 1.5));
+}
+function loadCollapseState(api) {
+    try {
+        return api.kv?.get?.("tokenwatch-collapse") ?? { global: false, models: {}, subBlocks: {} };
+    }
+    catch {
+        return { global: false, models: {}, subBlocks: {} };
+    }
+}
+function saveCollapseState(api, state) {
+    try {
+        api.kv?.set?.("tokenwatch-collapse", state);
+    }
+    catch { /* non-critical */ }
+}
+export function loadConfig(api) {
+    const base = { sidebar: { ...DEFAULT_CONFIG.sidebar }, language: DEFAULT_CONFIG.language };
+    try {
+        const pluginCfg = api.config?.pluginConfig?.["opencode-tokenwatch"];
+        if (pluginCfg?.sidebar)
+            Object.assign(base.sidebar, pluginCfg.sidebar);
+        if (pluginCfg?.language)
+            base.language = pluginCfg.language;
+        const overrides = api.kv?.get?.("tokenwatch-config");
+        if (overrides?.sidebar)
+            Object.assign(base.sidebar, overrides.sidebar);
+        if (overrides?.language)
+            base.language = overrides.language;
+    }
+    catch { /* defaults */ }
+    return base;
+}
+export function TokenWatchPanel(props) {
+    const { api, theme, perfTracker } = props;
+    const getMessages = () => props.messages;
+    const [config, setConfig] = createSignal(loadConfig(api));
+    let knownCfgVer = api.kv?.get?.("tokenwatch-config-version");
+    createEffect(() => {
+        const timer = setInterval(() => {
+            const v = api.kv?.get?.("tokenwatch-config-version");
+            if (v != null && v !== knownCfgVer) {
+                knownCfgVer = v;
+                setConfig(loadConfig(api));
+            }
+        }, 500);
+        onCleanup(() => clearInterval(timer));
+    });
+    const [collapse, setCollapse] = createSignal(loadCollapseState(api));
+    const [panelWidth, setPanelWidth] = createSignal(40);
+    createEffect(() => setLanguage(config().language));
+    const primaryColor = () => theme.current.primary;
+    const mutedColor = () => theme.current.textMuted;
+    const textColor = () => theme.current.text;
+    const modelStats = createMemo(() => {
+        const map = new Map();
+        for (const msg of props.allTokenMessages) {
+            const key = `${msg.providerID}/${msg.modelID}`;
+            let e = map.get(key);
+            if (!e) {
+                e = { providerID: msg.providerID, modelID: msg.modelID, totalInput: 0, totalOutput: 0, cacheRead: 0, cacheWrite: 0, totalCost: 0, requestCount: 0 };
+                map.set(key, e);
+            }
+            e.totalInput += msg.inputTokens;
+            e.totalOutput += msg.outputTokens;
+            e.cacheRead += msg.cacheRead;
+            e.cacheWrite += msg.cacheWrite;
+            e.totalCost += msg.cost;
+            e.requestCount++;
+        }
+        return Array.from(map.entries()).sort((a, b) => (b[1].totalInput + b[1].totalOutput) - (a[1].totalInput + a[1].totalOutput));
+    });
+    const sessionTotals = createMemo(() => {
+        let i = 0, o = 0, cr = 0, cw = 0, r = 0, c = 0;
+        for (const [, s] of modelStats()) {
+            i += s.totalInput;
+            o += s.totalOutput;
+            cr += s.cacheRead;
+            cw += s.cacheWrite;
+            r += s.requestCount;
+            c += s.totalCost;
+        }
+        return { totalInput: i, totalOutput: o, totalCacheRead: cr, totalCacheWrite: cw, totalRequests: r, totalCost: c, totalTokens: i + o + cr + cw };
+    });
+    const modelHitRate = createMemo(() => {
+        return modelStats().map(([key, stat]) => {
+            const denom = stat.totalInput + stat.cacheRead;
+            if (denom === 0)
+                return { key, rate: 0, msgs: [] };
+            const msgs = [];
+            for (const msg of props.allTokenMessages) {
+                const pk = `${msg.providerID}/${msg.modelID}`;
+                if (pk !== key)
+                    continue;
+                msgs.push(msg);
+            }
+            return { key, rate: (stat.cacheRead / denom) * 100, msgs };
+        });
+    });
+    const modelTrend = createMemo(() => {
+        return modelHitRate().map(({ key, msgs }) => {
+            if (msgs.length < 6)
+                return { key, trend: null };
+            const sumSlice = (start, end) => {
+                let sumCache = 0, sumTotal = 0;
+                for (let i = start; i < end && i < msgs.length; i++) {
+                    const input = msgs[i].inputTokens;
+                    const cache = msgs[i].cacheRead;
+                    sumCache += cache;
+                    sumTotal += input + cache;
+                }
+                return { sumCache, sumTotal };
+            };
+            const n = msgs.length;
+            const recent = sumSlice(n - 3, n);
+            const prev = sumSlice(n - 6, n - 3);
+            const rateRecent = recent.sumTotal > 0 ? (recent.sumCache / recent.sumTotal) * 100 : 0;
+            const ratePrev = prev.sumTotal > 0 ? (prev.sumCache / prev.sumTotal) * 100 : 0;
+            return { key, trend: rateRecent - ratePrev };
+        });
+    });
+    const [partVersion, setPartVersion] = createSignal(0);
+    const tokenDistribution = createMemo(() => {
+        void partVersion();
+        const dist = {};
+        try {
+            const cfg = api.state.config;
+            const agents = cfg?.agent;
+            if (agents) {
+                for (const ac of Object.values(agents)) {
+                    const a = ac;
+                    if (typeof a?.prompt === "string" && a.prompt) {
+                        dist.system = estimateTokens(a.prompt);
+                        break;
+                    }
+                }
+            }
+        }
+        catch { }
+        for (const msg of getMessages()) {
+            const role = msg.role;
+            if (role === "user") {
+                if (msg.system)
+                    dist.system = (dist.system ?? 0) + estimateTokens(msg.system);
+                let parts = [];
+                try {
+                    parts = api.state.part(msg.id);
+                }
+                catch {
+                    continue;
+                }
+                for (const p of parts) {
+                    if (p.type === "text" && !p.synthetic && !p.ignored) {
+                        dist.user = (dist.user ?? 0) + estimateTokens(p.text ?? "");
+                    }
+                    else if (p.type === "file" && p.source?.text?.value) {
+                        dist.user = (dist.user ?? 0) + estimateTokens(p.source.text.value);
+                    }
+                }
+            }
+            else if (role === "assistant") {
+                let parts = [];
+                try {
+                    parts = api.state.part(msg.id);
+                }
+                catch {
+                    continue;
+                }
+                for (const p of parts) {
+                    if (p.type === "tool") {
+                        let rawInput = "";
+                        try {
+                            rawInput = p.state?.raw ?? JSON.stringify(p.state?.input);
+                        }
+                        catch {
+                            try {
+                                rawInput = JSON.stringify(p.state);
+                            }
+                            catch { }
+                        }
+                        if (rawInput)
+                            dist.toolCall = (dist.toolCall ?? 0) + estimateTokens(rawInput);
+                        if (p.state?.status === "completed" && p.state?.output) {
+                            dist.toolResult = (dist.toolResult ?? 0) + estimateTokens(p.state.output);
+                        }
+                        else if (p.state?.status === "error" && p.state?.error) {
+                            dist.toolResult = (dist.toolResult ?? 0) + estimateTokens(p.state.error);
+                        }
+                    }
+                    else if (p.type === "reasoning") {
+                        dist.agent = (dist.agent ?? 0) + estimateTokens(p.text ?? "");
+                    }
+                    else if (p.type === "subtask") {
+                        dist.agent = (dist.agent ?? 0) + estimateTokens(p.prompt || p.description || "");
+                    }
+                }
+                const tokens = msg.tokens;
+                if (tokens?.output)
+                    dist.output = (dist.output ?? 0) + tokens.output;
+            }
+        }
+        return dist;
+    });
+    const toggle = {
+        global: () => setCollapse(p => { const n = { ...p, global: !p.global }; saveCollapseState(api, n); return n; }),
+        model: (k) => setCollapse(p => { const n = { ...p, models: { ...p.models, [k]: !p.models[k] } }; saveCollapseState(api, n); return n; }),
+        sub: (k) => setCollapse(p => { const n = { ...p, subBlocks: { ...p.subBlocks, [k]: !p.subBlocks[k] } }; saveCollapseState(api, n); return n; }),
+    };
+    onMount(() => {
+        const unsubPart = api.event?.on?.("message.part.updated", () => setPartVersion(v => v + 1));
+        const unsubMsg = api.event?.on?.("message.updated", () => setPartVersion(v => v + 1));
+        onCleanup(() => { try {
+            unsubPart?.();
+            unsubMsg?.();
+        }
+        catch { } });
+    });
+    return (<box flexDirection="column" width={panelWidth()}>
+      <box onMouseDown={toggle.global}>
+        <text fg={primaryColor()}>
+          {collapse().global ? "▶" : "▼"} {t("panelTitle")}
+          {collapse().global ? `  ${t("cacheRead")}:${formatTokens(sessionTotals().totalCacheRead)}  ${t("requests")}:${sessionTotals().totalRequests}` : ""}
+        </text>
+      </box>
+
+      <Show when={!collapse().global}>
+        <text fg={mutedColor()}>
+          {t("total")}:{formatTokens(sessionTotals().totalTokens)}  {t("requests")}:{sessionTotals().totalRequests}
+        </text>
+        <text fg={mutedColor()}>
+          {t("input")}:{formatTokens(sessionTotals().totalInput)}  {t("output")}:{formatTokens(sessionTotals().totalOutput)}  {t("cacheRead")}:{formatTokens(sessionTotals().totalCacheRead)}
+        </text>
+        <Show when={sessionTotals().totalCost > 0}>
+          <text fg={mutedColor()}>
+            {t("cost")}:{formatCost(sessionTotals().totalCost)}
+          </text>
+        </Show>
+
+        <For each={modelStats()}>
+          {([key, stat]) => {
+            const modelCollapsed = () => collapse().models[key] !== true;
+            const totalInput = stat.totalInput + stat.cacheRead;
+            const hitRate = totalInput > 0 ? (stat.cacheRead / totalInput) * 100 : 0;
+            const trendData = modelTrend().find(h => h.key === key);
+            const trendStr = trendData?.trend !== null && trendData?.trend !== undefined && trendData.trend !== 0
+                ? (trendData.trend >= 0 ? `${t("trendUp")}${trendData.trend.toFixed(1)}%` : `${t("trendDown")}${Math.abs(trendData.trend).toFixed(1)}%`)
+                : "";
+            const title = `${stat.providerID}/${stat.modelID}`;
+            const shortTitle = title.length > 32 ? title.slice(0, 30) + "…" : title;
+            return (<box flexDirection="column">
+                <box onMouseDown={() => toggle.model(key)}>
+                  <text fg={primaryColor()}>{modelCollapsed() ? "▼" : "▶"} {shortTitle}</text>
+                </box>
+                <text fg={mutedColor()}>
+                  {t("total")}:{formatTokens(stat.totalInput + stat.totalOutput + stat.cacheRead + stat.cacheWrite)}  {t("requests")}:{stat.requestCount}
+                </text>
+                <text fg={mutedColor()}>
+                  {t("input")}:{formatTokens(stat.totalInput)}  {t("output")}:{formatTokens(stat.totalOutput)}
+                </text>
+                <text fg={mutedColor()}>
+                    {t("cache")}:{formatTokens(stat.cacheRead + stat.cacheWrite)}(
+                    <span style={{ fg: hitRateColor(hitRate) }}>
+                      {progressFilled(hitRate, Math.max(3, Math.floor(panelWidth() / 3)))}
+                      {progressRemaining(hitRate, Math.max(3, Math.floor(panelWidth() / 3)))}
+                      {" "}{hitRate.toFixed(0)}%
+                    </span>
+                    {trendStr ? ` ${trendStr}` : ""})
+                </text>
+                <Show when={stat.totalCost > 0}>
+                  <text fg={mutedColor()}>
+                    {t("cost")}:{formatCost(stat.totalCost)}
+                  </text>
+                </Show>
+
+                <Show when={modelCollapsed()}>
+                  <Show when={config().sidebar.showPerformance}>
+                    <box flexDirection="column">
+                      <box onMouseDown={() => toggle.sub(`perf-${key}`)}>
+                        <text fg={textColor()}>{!collapse().subBlocks[`perf-${key}`] ? "▼" : "▶"}  ── {t("performance")} ──</text>
+                      </box>
+                      <Show when={!collapse().subBlocks[`perf-${key}`]}>
+                        <text fg={mutedColor()}>
+                          {t("ttft")}:{formatDuration(perfTracker.getSessionStats().models[key]?.avgTTFT ?? null)}  {t("tps")}:{perfTracker.getSessionStats().models[key]?.avgTPS?.toFixed(1) ?? "—"}  {t("latency")}:{formatDuration(perfTracker.getSessionStats().models[key]?.avgLatency ?? null)}
+                        </text>
+                      </Show>
+                    </box>
+                  </Show>
+
+                  <Show when={config().sidebar.showPricing && stat.totalCost > 0}>
+                    <box flexDirection="column">
+                      <box onMouseDown={() => toggle.sub(`pricing-${key}`)}>
+                        <text fg={textColor()}>{!collapse().subBlocks[`pricing-${key}`] ? "▼" : "▶"}  ── {t("pricing")} ──</text>
+                      </box>
+                      <Show when={!collapse().subBlocks[`pricing-${key}`]}>
+                        <text fg={mutedColor()}>    {t("cost")}:{formatCost(stat.totalCost)}</text>
+                        <text fg={mutedColor()}>    {t("modelLabel")}:{stat.providerID}/{stat.modelID}</text>
+                      </Show>
+                    </box>
+                  </Show>
+                </Show>
+              </box>);
+        }}
+        </For>
+
+        <Show when={config().sidebar.showTokenDistribution}>
+          <box flexDirection="column">
+            <box onMouseDown={() => toggle.sub("token-dist")}>
+              <text fg={primaryColor()}>{!collapse().subBlocks["token-dist"] ? "▼" : "▶"}  ── {t("tokenDistribution")} ──</text>
+            </box>
+            <Show when={!collapse().subBlocks["token-dist"]}>
+              <For each={Object.entries(tokenDistribution())}>
+                {([role, tokens]) => (<text fg={mutedColor()}>    {t(role)}:{formatTokens(tokens)}</text>)}
+              </For>
+            </Show>
+          </box>
+        </Show>
+      </Show>
+    </box>);
+}

package/dist/tui.d.ts

@@ -1,3 +1,17 @@
 import type { TuiPluginModule } from "@opencode-ai/plugin/tui";
-declare const plugin: TuiPluginModule;
+export interface TokenMessage {
+    id: string;
+    sessionID: string;
+    providerID: string;
+    modelID: string;
+    inputTokens: number;
+    outputTokens: number;
+    reasoningTokens: number;
+    cacheRead: number;
+    cacheWrite: number;
+    cost: number;
+}
+declare const plugin: TuiPluginModule & {
+    id: string;
+};
 export default plugin;

package/dist/tui.jsx

@@ -0,0 +1,120 @@
+import { createSignal } from "solid-js";
+import { registerCommands } from "./commands.jsx";
+import { createPerfTracker } from "./perf-tracker.js";
+import { TokenWatchPanel } from "./sidebar.jsx";
+function kvKey(sessionID) {
+    return "tokenwatch-msgs-" + sessionID;
+}
+const tui = async (api) => {
+    const perfTracker = createPerfTracker();
+    const [sidebarRevision, setSidebarRevision] = createSignal(0);
+    const [allTokenMessages, setAllTokenMessages] = createSignal([]);
+    let currentSlotSessionID = "";
+    const cleanups = [];
+    registerCommands(api);
+    function persistToKv(sessionID, msgs) {
+        try {
+            api.kv?.set?.(kvKey(sessionID), msgs);
+        }
+        catch { /* non-critical */ }
+    }
+    const unsubMsgUpdated = api.event.on("message.updated", (event) => {
+        const info = event.properties?.info;
+        perfTracker.handleMessageUpdated(event);
+        if (info?.role === "assistant" && info?.tokens?.total > 0) {
+            setAllTokenMessages(prev => {
+                const msg = {
+                    id: info.id,
+                    sessionID: info.sessionID ?? "",
+                    providerID: info.providerID ?? "unknown",
+                    modelID: info.modelID ?? "unknown",
+                    inputTokens: info.tokens?.input ?? 0,
+                    outputTokens: info.tokens?.output ?? 0,
+                    reasoningTokens: info.tokens?.reasoning ?? 0,
+                    cacheRead: info.tokens?.cache?.read ?? 0,
+                    cacheWrite: info.tokens?.cache?.write ?? 0,
+                    cost: info.cost ?? 0,
+                };
+                const idx = prev.findIndex(m => m.id === msg.id);
+                let next;
+                if (idx >= 0) {
+                    next = [...prev];
+                    next[idx] = msg;
+                }
+                else {
+                    next = [...prev, msg];
+                }
+                persistToKv(currentSlotSessionID, next);
+                return next;
+            });
+        }
+        setSidebarRevision((v) => v + 1);
+    });
+    cleanups.push(unsubMsgUpdated);
+    const unsubPartUpdated = api.event.on("message.part.updated", (event) => {
+        perfTracker.handlePartUpdated({
+            message_id: event.properties?.part?.messageID,
+            type: event.properties?.part?.type,
+            text: event.properties?.part?.type === "text" ? event.properties?.part?.text : undefined,
+            time: { start: event.properties?.part?.time?.start },
+        });
+    });
+    cleanups.push(unsubPartUpdated);
+    const unsubRemoved = api.event.on("message.removed", () => {
+        setSidebarRevision((v) => v + 1);
+    });
+    cleanups.push(unsubRemoved);
+    api.lifecycle?.onDispose?.(() => {
+        for (const cleanup of cleanups)
+            cleanup();
+    });
+    api.slots.register({
+        order: 50,
+        slots: {
+            sidebar_content: (_ctx, { session_id }) => {
+                sidebarRevision();
+                if (session_id && session_id !== currentSlotSessionID) {
+                    currentSlotSessionID = session_id;
+                    perfTracker.reset();
+                    let loaded = [];
+                    try {
+                        const saved = api.kv?.get?.(kvKey(session_id));
+                        if (saved && saved.length > 0)
+                            loaded = saved;
+                    }
+                    catch { }
+                    if (loaded.length === 0) {
+                        const existing = api.state.session.messages(session_id);
+                        for (const msg of existing) {
+                            if (msg.role !== "assistant")
+                                continue;
+                            const tokens = msg.tokens;
+                            if (!tokens)
+                                continue;
+                            loaded.push({
+                                id: msg.id,
+                                sessionID: session_id,
+                                providerID: msg.providerID ?? "unknown",
+                                modelID: msg.modelID ?? "unknown",
+                                inputTokens: tokens?.input ?? 0,
+                                outputTokens: tokens?.output ?? 0,
+                                reasoningTokens: tokens?.reasoning ?? 0,
+                                cacheRead: tokens?.cache?.read ?? 0,
+                                cacheWrite: tokens?.cache?.write ?? 0,
+                                cost: msg.cost ?? 0,
+                            });
+                        }
+                    }
+                    setAllTokenMessages(loaded);
+                }
+                const messages = api.state.session.messages(session_id);
+                return <TokenWatchPanel api={api} theme={api.theme} perfTracker={perfTracker} messages={messages} allTokenMessages={allTokenMessages()}/>;
+            },
+        },
+    });
+};
+const plugin = {
+    id: "opencode-tokenwatch",
+    tui,
+};
+export default plugin;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "opencode-tokenwatch",
-  "version": "0.1.0",
-  "description": "Token usage analytics plugin for OpenCode with live sidebar stats and /usage reports",
+  "version": "0.2.0",
+  "description": "Real-time token usage, cache analytics & performance dashboard plugin for OpenCode CLI",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -12,7 +12,7 @@
     },
     "./tui": {
       "types": "./dist/tui.d.ts",
-      "import": "./dist/tui.js"
+      "import": "./dist/tui.jsx"
     },
     "./package.json": "./package.json"
   },