opencode-tokenwatch 0.1.0 → 0.2.0

package/dist/commands.jsx

@@ -0,0 +1,313 @@
+import { getUsageReport, getPresetRange } from "./queries.js";
+import { formatUsageReport } from "./formatter.js";
+import { generateUsageHtml } from "./generate-usage-html.js";
+import { t, setLanguage } from "./i18n.js";
+import { readLogs } from "./perf-tracker.js";
+import { existsSync, mkdirSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { homedir } from "node:os";
+import { execSync } from "node:child_process";
+const DEFAULT_CONFIG = {
+    sidebar: { showPerformance: true, showPricing: true, showTokenDistribution: true, showTrend: true },
+    language: "auto",
+};
+export async function registerCommands(api) {
+    api.command?.register(() => [
+        {
+            value: "tokenwatch-usage",
+            title: "TokenWatch",
+            description: "Token usage reports, export, and settings",
+            category: "Stats",
+            slash: { name: "usage" },
+            onSelect: async (dialog) => {
+                if (dialog)
+                    showUsageMenu(api, dialog);
+            },
+        },
+    ]);
+}
+function ensureReportDir() {
+    const dir = join(homedir(), ".opencode", "reports");
+    if (!existsSync(dir))
+        mkdirSync(dir, { recursive: true });
+    return dir;
+}
+function openInBrowser(filePath) {
+    try {
+        const platform = process.platform;
+        if (platform === "win32")
+            execSync(`start "" "${filePath}"`, { windowsHide: true, timeout: 5000 });
+        else if (platform === "darwin")
+            execSync(`open "${filePath}"`, { timeout: 5000 });
+        else
+            execSync(`xdg-open "${filePath}"`, { timeout: 5000 });
+    }
+    catch { /* silently fail */ }
+}
+function aggregatePerfStats(logs) {
+    const map = new Map();
+    for (const entry of logs) {
+        const key = entry.model;
+        let s = map.get(key);
+        if (!s) {
+            s = {
+                model: key,
+                providerID: entry.providerID,
+                requestCount: 0,
+                totalInput: 0, totalOutput: 0, totalCacheRead: 0, totalCacheWrite: 0, totalCost: 0,
+                avgTTFT: null, maxTTFT: null, minTTFT: null,
+                avgTPS: null, maxTPS: null, minTPS: null,
+                avgLatency: null, maxLatency: null, minLatency: null,
+            };
+            map.set(key, s);
+        }
+        s.requestCount++;
+        s.totalInput += entry.inputTokens;
+        s.totalOutput += entry.outputTokens;
+        s.totalCacheRead += entry.cacheReadTokens;
+        s.totalCacheWrite += entry.cacheWriteTokens;
+        s.totalCost += entry.cost;
+        const c = s.requestCount;
+        if (entry.ttft_ms != null) {
+            s.avgTTFT = s.avgTTFT != null ? s.avgTTFT + (entry.ttft_ms - s.avgTTFT) / c : entry.ttft_ms;
+            s.maxTTFT = s.maxTTFT != null ? Math.max(s.maxTTFT, entry.ttft_ms) : entry.ttft_ms;
+            s.minTTFT = s.minTTFT != null ? Math.min(s.minTTFT, entry.ttft_ms) : entry.ttft_ms;
+        }
+        if (entry.tps != null) {
+            s.avgTPS = s.avgTPS != null ? s.avgTPS + (entry.tps - s.avgTPS) / c : entry.tps;
+            s.maxTPS = s.maxTPS != null ? Math.max(s.maxTPS, entry.tps) : entry.tps;
+            s.minTPS = s.minTPS != null ? Math.min(s.minTPS, entry.tps) : entry.tps;
+        }
+        if (entry.latency_ms != null) {
+            s.avgLatency = s.avgLatency != null ? s.avgLatency + (entry.latency_ms - s.avgLatency) / c : entry.latency_ms;
+            s.maxLatency = s.maxLatency != null ? Math.max(s.maxLatency, entry.latency_ms) : entry.latency_ms;
+            s.minLatency = s.minLatency != null ? Math.min(s.minLatency, entry.latency_ms) : entry.latency_ms;
+        }
+    }
+    return Array.from(map.values());
+}
+async function buildCombinedData(api, filters = {}) {
+    const report = await getUsageReport(filters);
+    const logs = readLogs(1000);
+    const now = new Date();
+    const pad = (n) => String(n).padStart(2, '0');
+    const meta = {
+        generatedAt: `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`,
+        dateRange: {
+            start: report.daily.length > 0 ? report.daily[report.daily.length - 1].day : "—",
+            end: report.daily.length > 0 ? report.daily[0].day : "—",
+        },
+    };
+    return {
+        ...report,
+        perfLogs: logs,
+        perfSummary: aggregatePerfStats(logs),
+        meta,
+    };
+}
+async function showHtmlReport(api, filters = {}) {
+    try {
+        const data = await buildCombinedData(api, filters);
+        const html = generateUsageHtml(data);
+        const dir = ensureReportDir();
+        const dateStr = new Date().toISOString().slice(0, 10);
+        const filePath = join(dir, `tokenwatch-${dateStr}.html`);
+        writeFileSync(filePath, html, "utf-8");
+        api.ui.toast?.({ message: `Report: ${filePath}`, variant: "info" });
+        openInBrowser(filePath);
+    }
+    catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        api.ui.toast?.({ message: `Error: ${msg}`, variant: "error" });
+    }
+}
+function showHtmlReportRangeMenu(api, dialog) {
+    dialog.replace(() => (<api.ui.DialogSelect title={t("cmdTitleHtml")} placeholder="Select date range..." options={[
+            {
+                title: t("menuToday"),
+                value: "today",
+                onSelect: () => {
+                    dialog.clear();
+                    const d = new Date();
+                    const pad = (n) => String(n).padStart(2, "0");
+                    const s = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+                    showHtmlReport(api, { startDate: s, endDate: s });
+                },
+            },
+            {
+                title: t("menu7d"),
+                value: "7d",
+                onSelect: () => { dialog.clear(); showHtmlReport(api, getPresetRange("7d")); },
+            },
+            {
+                title: t("menu30d"),
+                value: "30d",
+                onSelect: () => { dialog.clear(); showHtmlReport(api, getPresetRange("30d")); },
+            },
+            {
+                title: t("menuAll"),
+                value: "all",
+                onSelect: () => { dialog.clear(); showHtmlReport(api, getPresetRange("all")); },
+            },
+        ]} flat={true}/>));
+}
+function showUsageMenu(api, dialog) {
+    dialog.replace(() => (<api.ui.DialogSelect title={t("panelTitle")} placeholder="Select an action..." options={[
+            {
+                title: `${t("cmdTitleHtml")} ▸`,
+                value: "html",
+                description: t("cmdDescHtml"),
+                onSelect: () => showHtmlReportRangeMenu(api, dialog),
+            },
+            {
+                title: t("cmdTitleJson"),
+                value: "json",
+                description: t("cmdDescJson"),
+                onSelect: () => { dialog.clear(); showJsonExport(api); },
+            },
+            {
+                title: t("cmdTitleText"),
+                value: "text",
+                description: t("cmdDescText"),
+                onSelect: () => { dialog.clear(); showTextReport(api); },
+            },
+            {
+                title: `${t("cmdTitleSettings")} ▸`,
+                value: "settings",
+                description: t("cmdDescSettings"),
+                onSelect: () => showSettingsDialog(api, dialog),
+            },
+        ]} flat={true}/>));
+}
+async function showJsonExport(api) {
+    try {
+        const report = await getUsageReport({});
+        const dir = ensureReportDir();
+        const dateStr = new Date().toISOString().slice(0, 10);
+        const filePath = join(dir, `tokenwatch-${dateStr}.json`);
+        writeFileSync(filePath, JSON.stringify(report, null, 2), "utf-8");
+        api.ui.toast?.({ message: `JSON: ${filePath}`, variant: "info" });
+    }
+    catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        api.ui.toast?.({ message: `Error: ${msg}`, variant: "error" });
+    }
+}
+async function showTextReport(api) {
+    try {
+        const report = await getUsageReport({});
+        const formatted = formatUsageReport(report);
+        const dir = ensureReportDir();
+        const dateStr = new Date().toISOString().slice(0, 10);
+        const filePath = join(dir, `tokenwatch-${dateStr}.md`);
+        writeFileSync(filePath, formatted, "utf-8");
+        api.ui.toast?.({ message: `Report saved to ${filePath}`, variant: "info" });
+    }
+    catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        api.ui.toast?.({ message: `Error: ${msg}`, variant: "error" });
+    }
+}
+function saveConfigToStore(api, cfg) {
+    api.kv?.set?.("tokenwatch-config", cfg);
+}
+let lastSelectedSetting;
+function showSettingsDialog(api, dialog) {
+    if (!dialog)
+        return;
+    const reopen = (value) => {
+        lastSelectedSetting = value;
+        setTimeout(() => showSettingsDialog(api, dialog), 0);
+    };
+    const cfg = loadConfigFromStore(api).sidebar;
+    dialog.replace(() => (<api.ui.DialogSelect title={t("settingsTitle")} placeholder={t("settingsPlaceholder")} options={[
+            {
+                title: `${cfg.showPerformance ? "✓ " : "  "}${t("showPerformance")}`,
+                value: "showPerformance",
+                description: t("descShowPerformance"),
+                onSelect: () => { toggleSidebarSetting(api, "showPerformance"); reopen("showPerformance"); },
+            },
+            {
+                title: `${cfg.showPricing ? "✓ " : "  "}${t("showPricing")}`,
+                value: "showPricing",
+                description: t("descShowPricing"),
+                onSelect: () => { toggleSidebarSetting(api, "showPricing"); reopen("showPricing"); },
+            },
+            {
+                title: `${cfg.showTokenDistribution ? "✓ " : "  "}${t("showTokenDistribution")}`,
+                value: "showTokenDistribution",
+                description: t("descShowTokenDistribution"),
+                onSelect: () => { toggleSidebarSetting(api, "showTokenDistribution"); reopen("showTokenDistribution"); },
+            },
+            {
+                title: `${cfg.showTrend ? "✓ " : "  "}${t("showTrend")}`,
+                value: "showTrend",
+                description: t("descShowTrend"),
+                onSelect: () => { toggleSidebarSetting(api, "showTrend"); reopen("showTrend"); },
+            },
+            {
+                title: `${t("settingsLanguage")} ▸`,
+                value: "language",
+                description: t("descSettingsLanguage"),
+                onSelect: () => showLanguageMenu(api, dialog),
+            },
+            {
+                title: t("done"),
+                value: "done",
+                description: t("closeSettings"),
+                onSelect: () => { lastSelectedSetting = undefined; dialog.clear(); },
+            },
+        ]} flat={true} current={lastSelectedSetting}/>));
+}
+function showLanguageMenu(api, dialog) {
+    const current = api.kv?.get?.("tokenwatch-config")?.language ?? "auto";
+    dialog.replace(() => (<api.ui.DialogSelect title={t("settingsLanguage")} placeholder={t("settingsLanguage")} options={[
+            {
+                title: `${current === "auto" ? "✓ " : "  "}${t("langAuto")}`,
+                value: "auto",
+                description: "自动检测 / Auto-detect",
+                onSelect: () => { setLanguageSetting(api, "auto"); lastSelectedSetting = "language"; dialog.clear(); showSettingsDialog(api, dialog); },
+            },
+            {
+                title: `${current === "zh" ? "✓ " : "  "}中文`,
+                value: "zh",
+                description: "简体中文",
+                onSelect: () => { setLanguageSetting(api, "zh"); lastSelectedSetting = "language"; dialog.clear(); showSettingsDialog(api, dialog); },
+            },
+            {
+                title: `${current === "en" ? "✓ " : "  "}English`,
+                value: "en",
+                description: "English",
+                onSelect: () => { setLanguageSetting(api, "en"); lastSelectedSetting = "language"; dialog.clear(); showSettingsDialog(api, dialog); },
+            },
+        ]} flat={true}/>));
+}
+function setLanguageSetting(api, lang) {
+    setLanguage(lang);
+    const current = loadConfigFromStore(api);
+    current.language = lang;
+    saveConfigToStore(api, current);
+    const v = (api.kv?.get?.("tokenwatch-config-version") ?? 0) + 1;
+    api.kv?.set?.("tokenwatch-config-version", v);
+}
+function toggleSidebarSetting(api, key) {
+    const current = loadConfigFromStore(api);
+    current.sidebar[key] = !current.sidebar[key];
+    saveConfigToStore(api, current);
+    const v = (api.kv?.get?.("tokenwatch-config-version") ?? 0) + 1;
+    api.kv?.set?.("tokenwatch-config-version", v);
+}
+function loadConfigFromStore(api) {
+    const base = { sidebar: { ...DEFAULT_CONFIG.sidebar }, language: DEFAULT_CONFIG.language };
+    try {
+        const stored = api.kv?.get?.("tokenwatch-config");
+        if (stored) {
+            if (stored.sidebar)
+                Object.assign(base.sidebar, stored.sidebar);
+            if (stored.language)
+                base.language = stored.language;
+        }
+    }
+    catch { /* defaults */ }
+    return base;
+}

package/dist/formatter.d.ts

@@ -77,6 +77,7 @@ export interface UsageReport {
 }
 export declare function formatTokens(n: number): string;
 export declare function formatCost(n: number): string;
+export declare function formatDuration(ms: number | null): string;
 export declare function formatFilters(filters: UsageFilters): string;
 export declare function formatSessionSummary(data: SessionTokenData, title?: string): string;
 export declare function formatStatusBar(data: SessionTokenData): string;
@@ -85,3 +86,75 @@ export declare function formatProviderBreakdown(items: ProviderBreakdownItem[]):
 export declare function formatDailyBreakdown(items: DailyBreakdownItem[]): string;
 export declare function formatSessionBreakdown(items: SessionBreakdownItem[]): string;
 export declare function formatUsageReport(report: UsageReport): string;
+export interface SessionPerfStats {
+    models: Record<string, ModelPerfStats>;
+    totals: {
+        totalInput: number;
+        totalOutput: number;
+        totalCacheRead: number;
+        totalCacheWrite: number;
+        totalRequests: number;
+        totalCost: number;
+    };
+}
+export interface ModelPerfStats {
+    model: string;
+    providerID: string;
+    requestCount: number;
+    totalInput: number;
+    totalOutput: number;
+    totalCacheRead: number;
+    totalCacheWrite: number;
+    totalCost: number;
+    avgTTFT: number | null;
+    maxTTFT: number | null;
+    minTTFT: number | null;
+    avgTPS: number | null;
+    maxTPS: number | null;
+    minTPS: number | null;
+    avgLatency: number | null;
+    maxLatency: number | null;
+    minLatency: number | null;
+}
+export interface TokenDistribution {
+    system: number;
+    user: number;
+    agent: number;
+    toolCall: number;
+    toolResult: number;
+    output: number;
+    total: number;
+}
+export interface LogEntry {
+    ts: string;
+    model: string;
+    providerID: string;
+    modelID: string;
+    sessionID: string;
+    ttft_ms: number | null;
+    tps: number | null;
+    latency_ms: number | null;
+    inputTokens: number;
+    outputTokens: number;
+    reasoningTokens: number;
+    cacheReadTokens: number;
+    cacheWriteTokens: number;
+    cost: number;
+}
+export interface HtmlReportMeta {
+    generatedAt: string;
+    dateRange: {
+        start: string;
+        end: string;
+    };
+}
+export interface CombinedReportData {
+    summary: SessionTokenData;
+    models: ModelBreakdownItem[];
+    providers: ProviderBreakdownItem[];
+    daily: DailyBreakdownItem[];
+    sessions: SessionBreakdownItem[];
+    perfLogs: LogEntry[];
+    perfSummary: ModelPerfStats[];
+    meta: HtmlReportMeta;
+}

package/dist/formatter.js

@@ -14,6 +14,17 @@ export function formatCost(n) {
         return `$${n.toFixed(4)}`;
     return `$${n.toFixed(2)}`;
 }
+export function formatDuration(ms) {
+    if (ms === null)
+        return "—";
+    if (ms < 1000)
+        return `${ms.toFixed(0)}ms`;
+    if (ms < 60000)
+        return `${(ms / 1000).toFixed(1)}s`;
+    const m = Math.floor(ms / 60000);
+    const s = Math.floor((ms % 60000) / 1000);
+    return `${m}m ${s}s`;
+}
 export function formatFilters(filters) {
     const parts = [];
     if (filters.sessionId)
@@ -87,13 +98,13 @@ export function formatSessionSummary(data, title = "Current Session") {
         `═══ ${title} ═══`,
         `Models:        ${modelLabel}`,
         `Provider:      ${data.provider || "(mixed)"}`,
-        `Requests:      ${data.requestCount}`,
+        `Req:           ${data.requestCount}`,
         `Total Tokens:  ${formatTokens(data.totalTokens)}`,
         `  Input:       ${formatTokens(data.inputTokens)}`,
         `  Output:      ${formatTokens(data.outputTokens)}`,
         `  Reasoning:   ${formatTokens(data.reasoningTokens)}`,
-        `  Cache Read:  ${formatTokens(data.cacheRead)}`,
-        `  Cache Write: ${formatTokens(data.cacheWrite)}`,
+        `  C.Read:      ${formatTokens(data.cacheRead)}`,
+        `  C.Write:     ${formatTokens(data.cacheWrite)}`,
         `  Cost:        ${formatCost(data.totalCost)}`,
     ].join("\n");
 }

package/dist/generate-usage-html.d.ts

@@ -0,0 +1,2 @@
+import type { CombinedReportData } from "./formatter.js";
+export declare function generateUsageHtml(data: CombinedReportData): string;