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
|
|
|
import { beforeEach, describe, expect, it, vi } from "vitest";
|
2026-02-17 15:47:23 +09:00
|
|
|
import type { OpenClawConfig } from "../../config/config.js";
|
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
|
|
|
|
|
|
|
|
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"));
|
|
|
|
|
|
2026-02-17 15:47:23 +09:00
|
|
|
const config = {} as OpenClawConfig;
|
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
|
|
|
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);
|
|
|
|
|
});
|
|
|
|
|
});
|