Files
openclaw/src/gateway/server-methods/usage.test.ts
Tak Hoffman 8a352c8f9d Web UI: add token usage dashboard (#10072)
* feat(ui): Token Usage dashboard with session analytics

Adds a comprehensive Token Usage view to the dashboard:

Backend:
- Extended session-cost-usage.ts with per-session daily breakdown
- Added date range filtering (startMs/endMs) to API endpoints
- New sessions.usage, sessions.usage.timeseries, sessions.usage.logs endpoints
- Cost breakdown by token type (input/output/cache read/write)

Frontend:
- Two-column layout: Daily chart + breakdown | Sessions list
- Interactive daily bar chart with click-to-filter and shift-click range select
- Session detail panel with usage timeline, conversation logs, context weight
- Filter chips for active day/session selections
- Toggle between tokens/cost view modes (default: cost)
- Responsive design for smaller screens

UX improvements:
- 21-day default date range
- Debounced date input (400ms)
- Session list shows filtered totals when days selected
- Context weight breakdown shows skills, tools, files contribution

* fix(ui): restore gatewayUrl validation and syncUrlWithSessionKey signature

- Restore normalizeGatewayUrl() to validate ws:/wss: protocol
- Restore isTopLevelWindow() guard for iframe security
- Revert syncUrlWithSessionKey signature (host param was unused)

* feat(ui): Token Usage dashboard with session analytics

Adds a comprehensive Token Usage view to the dashboard:

Backend:
- Extended session-cost-usage.ts with per-session daily breakdown
- Added date range filtering (startMs/endMs) to API endpoints
- New sessions.usage, sessions.usage.timeseries, sessions.usage.logs endpoints
- Cost breakdown by token type (input/output/cache read/write)

Frontend:
- Two-column layout: Daily chart + breakdown | Sessions list
- Interactive daily bar chart with click-to-filter and shift-click range select
- Session detail panel with usage timeline, conversation logs, context weight
- Filter chips for active day/session selections
- Toggle between tokens/cost view modes (default: cost)
- Responsive design for smaller screens

UX improvements:
- 21-day default date range
- Debounced date input (400ms)
- Session list shows filtered totals when days selected
- Context weight breakdown shows skills, tools, files contribution

* fix: usage dashboard data + cost handling (#8462) (thanks @mcinteerj)

* Usage: enrich metrics dashboard

* Usage: add latency + model trends

* Gateway: improve usage log parsing

* UI: add usage query helpers

* UI: client-side usage filter + debounce

* Build: harden write-cli-compat timing

* UI: add conversation log filters

* UI: fix usage dashboard lint + state

* Web UI: default usage dates to local day

* Protocol: sync session usage params (#8462) (thanks @mcinteerj, @TakHoffman)

---------

Co-authored-by: Jake McInteer <mcinteerj@gmail.com>
2026-02-05 22:35:46 -06:00

83 lines
2.9 KiB
TypeScript

import { beforeEach, describe, expect, it, vi } from "vitest";
vi.mock("../../infra/session-cost-usage.js", async () => {
const actual = await vi.importActual<typeof import("../../infra/session-cost-usage.js")>(
"../../infra/session-cost-usage.js",
);
return {
...actual,
loadCostUsageSummary: vi.fn(async () => ({
updatedAt: Date.now(),
startDate: "2026-02-01",
endDate: "2026-02-02",
daily: [],
totals: { totalTokens: 1, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, totalCost: 0 },
})),
};
});
import { loadCostUsageSummary } from "../../infra/session-cost-usage.js";
import { __test } from "./usage.js";
describe("gateway usage helpers", () => {
beforeEach(() => {
__test.costUsageCache.clear();
vi.useRealTimers();
vi.clearAllMocks();
});
it("parseDateToMs accepts YYYY-MM-DD and rejects invalid input", () => {
expect(__test.parseDateToMs("2026-02-05")).toBe(Date.UTC(2026, 1, 5));
expect(__test.parseDateToMs(" 2026-02-05 ")).toBe(Date.UTC(2026, 1, 5));
expect(__test.parseDateToMs("2026-2-5")).toBeUndefined();
expect(__test.parseDateToMs("nope")).toBeUndefined();
expect(__test.parseDateToMs(undefined)).toBeUndefined();
});
it("parseDays coerces strings/numbers to integers", () => {
expect(__test.parseDays(7.9)).toBe(7);
expect(__test.parseDays("30")).toBe(30);
expect(__test.parseDays("")).toBeUndefined();
expect(__test.parseDays("nope")).toBeUndefined();
});
it("parseDateRange uses explicit start/end (inclusive end of day)", () => {
const range = __test.parseDateRange({ startDate: "2026-02-01", endDate: "2026-02-02" });
expect(range.startMs).toBe(Date.UTC(2026, 1, 1));
expect(range.endMs).toBe(Date.UTC(2026, 1, 2) + 24 * 60 * 60 * 1000 - 1);
});
it("parseDateRange clamps days to at least 1 and defaults to 30 days", () => {
vi.useFakeTimers();
vi.setSystemTime(new Date("2026-02-05T12:34:56.000Z"));
const oneDay = __test.parseDateRange({ days: 0 });
expect(oneDay.endMs).toBe(Date.UTC(2026, 1, 5) + 24 * 60 * 60 * 1000 - 1);
expect(oneDay.startMs).toBe(Date.UTC(2026, 1, 5));
const def = __test.parseDateRange({});
expect(def.endMs).toBe(Date.UTC(2026, 1, 5) + 24 * 60 * 60 * 1000 - 1);
expect(def.startMs).toBe(Date.UTC(2026, 1, 5) - 29 * 24 * 60 * 60 * 1000);
});
it("loadCostUsageSummaryCached caches within TTL", async () => {
vi.useFakeTimers();
vi.setSystemTime(new Date("2026-02-05T00:00:00.000Z"));
const config = {} as unknown as ReturnType<import("../../config/config.js").loadConfig>;
const a = await __test.loadCostUsageSummaryCached({
startMs: 1,
endMs: 2,
config,
});
const b = await __test.loadCostUsageSummaryCached({
startMs: 1,
endMs: 2,
config,
});
expect(a.totals.totalTokens).toBe(1);
expect(b.totals.totalTokens).toBe(1);
expect(vi.mocked(loadCostUsageSummary)).toHaveBeenCalledTimes(1);
});
});