openclaw-multi-auto 1.3.7 → 1.3.8

package/ui/src/ui/views/usage-query.ts

@@ -0,0 +1,277 @@
+import { extractQueryTerms } from "../usage-helpers.ts";
+import { CostDailyEntry, UsageAggregates, UsageSessionEntry } from "./usageTypes.ts";
+
+function downloadTextFile(filename: string, content: string, type = "text/plain") {
+  const blob = new Blob([content], { type: `${type};charset=utf-8` });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+function csvEscape(value: string): string {
+  if (/[",\n]/.test(value)) {
+    return `"${value.replaceAll('"', '""')}"`;
+  }
+  return value;
+}
+
+function toCsvRow(values: Array<string | number | undefined | null>): string {
+  return values
+    .map((value) => {
+      if (value === undefined || value === null) {
+        return "";
+      }
+      return csvEscape(String(value));
+    })
+    .join(",");
+}
+
+const buildSessionsCsv = (sessions: UsageSessionEntry[]): string => {
+  const rows = [
+    toCsvRow([
+      "key",
+      "label",
+      "agentId",
+      "channel",
+      "provider",
+      "model",
+      "updatedAt",
+      "durationMs",
+      "messages",
+      "errors",
+      "toolCalls",
+      "inputTokens",
+      "outputTokens",
+      "cacheReadTokens",
+      "cacheWriteTokens",
+      "totalTokens",
+      "totalCost",
+    ]),
+  ];
+
+  for (const session of sessions) {
+    const usage = session.usage;
+    rows.push(
+      toCsvRow([
+        session.key,
+        session.label ?? "",
+        session.agentId ?? "",
+        session.channel ?? "",
+        session.modelProvider ?? session.providerOverride ?? "",
+        session.model ?? session.modelOverride ?? "",
+        session.updatedAt ? new Date(session.updatedAt).toISOString() : "",
+        usage?.durationMs ?? "",
+        usage?.messageCounts?.total ?? "",
+        usage?.messageCounts?.errors ?? "",
+        usage?.messageCounts?.toolCalls ?? "",
+        usage?.input ?? "",
+        usage?.output ?? "",
+        usage?.cacheRead ?? "",
+        usage?.cacheWrite ?? "",
+        usage?.totalTokens ?? "",
+        usage?.totalCost ?? "",
+      ]),
+    );
+  }
+
+  return rows.join("\n");
+};
+
+const buildDailyCsv = (daily: CostDailyEntry[]): string => {
+  const rows = [
+    toCsvRow([
+      "date",
+      "inputTokens",
+      "outputTokens",
+      "cacheReadTokens",
+      "cacheWriteTokens",
+      "totalTokens",
+      "inputCost",
+      "outputCost",
+      "cacheReadCost",
+      "cacheWriteCost",
+      "totalCost",
+    ]),
+  ];
+
+  for (const day of daily) {
+    rows.push(
+      toCsvRow([
+        day.date,
+        day.input,
+        day.output,
+        day.cacheRead,
+        day.cacheWrite,
+        day.totalTokens,
+        day.inputCost ?? "",
+        day.outputCost ?? "",
+        day.cacheReadCost ?? "",
+        day.cacheWriteCost ?? "",
+        day.totalCost,
+      ]),
+    );
+  }
+
+  return rows.join("\n");
+};
+
+type QuerySuggestion = {
+  label: string;
+  value: string;
+};
+
+const buildQuerySuggestions = (
+  query: string,
+  sessions: UsageSessionEntry[],
+  aggregates?: UsageAggregates | null,
+): QuerySuggestion[] => {
+  const trimmed = query.trim();
+  if (!trimmed) {
+    return [];
+  }
+  const tokens = trimmed.length ? trimmed.split(/\s+/) : [];
+  const lastToken = tokens.length ? tokens[tokens.length - 1] : "";
+  const [rawKey, rawValue] = lastToken.includes(":")
+    ? [lastToken.slice(0, lastToken.indexOf(":")), lastToken.slice(lastToken.indexOf(":") + 1)]
+    : ["", ""];
+
+  const key = rawKey.toLowerCase();
+  const value = rawValue.toLowerCase();
+
+  const unique = (items: Array<string | undefined>): string[] => {
+    const set = new Set<string>();
+    for (const item of items) {
+      if (item) {
+        set.add(item);
+      }
+    }
+    return Array.from(set);
+  };
+
+  const agents = unique(sessions.map((s) => s.agentId)).slice(0, 6);
+  const channels = unique(sessions.map((s) => s.channel)).slice(0, 6);
+  const providers = unique([
+    ...sessions.map((s) => s.modelProvider),
+    ...sessions.map((s) => s.providerOverride),
+    ...(aggregates?.byProvider.map((p) => p.provider) ?? []),
+  ]).slice(0, 6);
+  const models = unique([
+    ...sessions.map((s) => s.model),
+    ...(aggregates?.byModel.map((m) => m.model) ?? []),
+  ]).slice(0, 6);
+  const tools = unique(aggregates?.tools.tools.map((t) => t.name) ?? []).slice(0, 6);
+
+  if (!key) {
+    return [
+      { label: "agent:", value: "agent:" },
+      { label: "channel:", value: "channel:" },
+      { label: "provider:", value: "provider:" },
+      { label: "model:", value: "model:" },
+      { label: "tool:", value: "tool:" },
+      { label: "has:errors", value: "has:errors" },
+      { label: "has:tools", value: "has:tools" },
+      { label: "minTokens:", value: "minTokens:" },
+      { label: "maxCost:", value: "maxCost:" },
+    ];
+  }
+
+  const suggestions: QuerySuggestion[] = [];
+  const addValues = (prefix: string, values: string[]) => {
+    for (const val of values) {
+      if (!value || val.toLowerCase().includes(value)) {
+        suggestions.push({ label: `${prefix}:${val}`, value: `${prefix}:${val}` });
+      }
+    }
+  };
+
+  switch (key) {
+    case "agent":
+      addValues("agent", agents);
+      break;
+    case "channel":
+      addValues("channel", channels);
+      break;
+    case "provider":
+      addValues("provider", providers);
+      break;
+    case "model":
+      addValues("model", models);
+      break;
+    case "tool":
+      addValues("tool", tools);
+      break;
+    case "has":
+      ["errors", "tools", "context", "usage", "model", "provider"].forEach((entry) => {
+        if (!value || entry.includes(value)) {
+          suggestions.push({ label: `has:${entry}`, value: `has:${entry}` });
+        }
+      });
+      break;
+    default:
+      break;
+  }
+
+  return suggestions;
+};
+
+const applySuggestionToQuery = (query: string, suggestion: string): string => {
+  const trimmed = query.trim();
+  if (!trimmed) {
+    return `${suggestion} `;
+  }
+  const tokens = trimmed.split(/\s+/);
+  tokens[tokens.length - 1] = suggestion;
+  return `${tokens.join(" ")} `;
+};
+
+const normalizeQueryText = (value: string): string => value.trim().toLowerCase();
+
+const addQueryToken = (query: string, token: string): string => {
+  const trimmed = query.trim();
+  if (!trimmed) {
+    return `${token} `;
+  }
+  const tokens = trimmed.split(/\s+/);
+  const last = tokens[tokens.length - 1] ?? "";
+  const tokenKey = token.includes(":") ? token.split(":")[0] : null;
+  const lastKey = last.includes(":") ? last.split(":")[0] : null;
+  if (last.endsWith(":") && tokenKey && lastKey === tokenKey) {
+    tokens[tokens.length - 1] = token;
+    return `${tokens.join(" ")} `;
+  }
+  if (tokens.includes(token)) {
+    return `${tokens.join(" ")} `;
+  }
+  return `${tokens.join(" ")} ${token} `;
+};
+
+const removeQueryToken = (query: string, token: string): string => {
+  const tokens = query.trim().split(/\s+/).filter(Boolean);
+  const next = tokens.filter((entry) => entry !== token);
+  return next.length ? `${next.join(" ")} ` : "";
+};
+
+const setQueryTokensForKey = (query: string, key: string, values: string[]): string => {
+  const normalizedKey = normalizeQueryText(key);
+  const tokens = extractQueryTerms(query)
+    .filter((term) => normalizeQueryText(term.key ?? "") !== normalizedKey)
+    .map((term) => term.raw);
+  const next = [...tokens, ...values.map((value) => `${key}:${value}`)];
+  return next.length ? `${next.join(" ")} ` : "";
+};
+
+export type { QuerySuggestion };
+export {
+  addQueryToken,
+  applySuggestionToQuery,
+  buildDailyCsv,
+  buildQuerySuggestions,
+  buildSessionsCsv,
+  downloadTextFile,
+  normalizeQueryText,
+  removeQueryToken,
+  setQueryTokensForKey,
+};

package/ui/src/ui/views/usage-render-details.test.ts

@@ -0,0 +1,136 @@
+import { describe, it, expect } from "vitest";
+import {
+  computeFilteredUsage,
+  CHART_BAR_WIDTH_RATIO,
+  CHART_MAX_BAR_WIDTH,
+} from "./usage-render-details.ts";
+import type { TimeSeriesPoint, UsageSessionEntry } from "./usageTypes.ts";
+
+function makePoint(overrides: Partial<TimeSeriesPoint> = {}): TimeSeriesPoint {
+  return {
+    timestamp: 1000,
+    totalTokens: 100,
+    cost: 0.01,
+    input: 30,
+    output: 40,
+    cacheRead: 20,
+    cacheWrite: 10,
+    cumulativeTokens: 0,
+    cumulativeCost: 0,
+    ...overrides,
+  };
+}
+
+const baseUsage = {
+  totalTokens: 1000,
+  totalCost: 1.0,
+  input: 300,
+  output: 400,
+  cacheRead: 200,
+  cacheWrite: 100,
+  inputCost: 0.3,
+  outputCost: 0.4,
+  cacheReadCost: 0.2,
+  cacheWriteCost: 0.1,
+  durationMs: 60000,
+  firstActivity: 0,
+  lastActivity: 60000,
+  missingCostEntries: 0,
+  messageCounts: {
+    total: 10,
+    user: 5,
+    assistant: 5,
+    toolCalls: 0,
+    toolResults: 0,
+    errors: 0,
+  },
+} satisfies NonNullable<UsageSessionEntry["usage"]>;
+
+describe("computeFilteredUsage", () => {
+  it("returns undefined when no points match the range", () => {
+    const points = [makePoint({ timestamp: 1000 }), makePoint({ timestamp: 2000 })];
+    const result = computeFilteredUsage(baseUsage, points, 3000, 4000);
+    expect(result).toBeUndefined();
+  });
+
+  it("aggregates tokens and cost for points within range", () => {
+    const points = [
+      makePoint({ timestamp: 1000, totalTokens: 100, cost: 0.1 }),
+      makePoint({ timestamp: 2000, totalTokens: 200, cost: 0.2 }),
+      makePoint({ timestamp: 3000, totalTokens: 300, cost: 0.3 }),
+    ];
+    const result = computeFilteredUsage(baseUsage, points, 1000, 2000);
+    expect(result).toBeDefined();
+    expect(result!.totalTokens).toBe(300); // 100 + 200
+    expect(result!.totalCost).toBeCloseTo(0.3); // 0.1 + 0.2
+  });
+
+  it("handles reversed range (end < start)", () => {
+    const points = [
+      makePoint({ timestamp: 1000, totalTokens: 50 }),
+      makePoint({ timestamp: 2000, totalTokens: 75 }),
+    ];
+    const result = computeFilteredUsage(baseUsage, points, 2000, 1000);
+    expect(result).toBeDefined();
+    expect(result!.totalTokens).toBe(125);
+  });
+
+  it("counts message types based on input/output presence", () => {
+    const points = [
+      makePoint({ timestamp: 1000, input: 10, output: 0 }),
+      makePoint({ timestamp: 2000, input: 0, output: 20 }),
+      makePoint({ timestamp: 3000, input: 5, output: 15 }),
+    ];
+    const result = computeFilteredUsage(baseUsage, points, 1000, 3000);
+    expect(result!.messageCounts!.user).toBe(2); // points with input > 0
+    expect(result!.messageCounts!.assistant).toBe(2); // points with output > 0
+    expect(result!.messageCounts!.total).toBe(3);
+  });
+
+  it("computes duration from first to last filtered point", () => {
+    const points = [makePoint({ timestamp: 1000 }), makePoint({ timestamp: 5000 })];
+    const result = computeFilteredUsage(baseUsage, points, 1000, 5000);
+    expect(result!.durationMs).toBe(4000);
+    expect(result!.firstActivity).toBe(1000);
+    expect(result!.lastActivity).toBe(5000);
+  });
+
+  it("aggregates token types (input, output, cacheRead, cacheWrite)", () => {
+    const points = [
+      makePoint({ timestamp: 1000, input: 10, output: 20, cacheRead: 30, cacheWrite: 40 }),
+      makePoint({ timestamp: 2000, input: 5, output: 15, cacheRead: 25, cacheWrite: 35 }),
+    ];
+    const result = computeFilteredUsage(baseUsage, points, 1000, 2000);
+    expect(result!.input).toBe(15);
+    expect(result!.output).toBe(35);
+    expect(result!.cacheRead).toBe(55);
+    expect(result!.cacheWrite).toBe(75);
+  });
+});
+
+describe("chart bar sizing", () => {
+  it("bar width ratio and max are reasonable", () => {
+    expect(CHART_BAR_WIDTH_RATIO).toBeGreaterThan(0);
+    expect(CHART_BAR_WIDTH_RATIO).toBeLessThan(1);
+    expect(CHART_MAX_BAR_WIDTH).toBeGreaterThan(0);
+  });
+
+  it("bars fit within chart width for typical point counts", () => {
+    const chartWidth = 366; // typical: 400 - padding.left(30) - padding.right(4)
+    // For reasonable point counts (up to ~300), bars should fit
+    for (const n of [1, 2, 10, 50, 100, 200]) {
+      const slotWidth = chartWidth / n;
+      const barWidth = Math.min(
+        CHART_MAX_BAR_WIDTH,
+        Math.max(1, slotWidth * CHART_BAR_WIDTH_RATIO),
+      );
+      const barGap = slotWidth - barWidth;
+      // Slot-based sizing guarantees total = n * slotWidth = chartWidth
+      expect(n * slotWidth).toBeCloseTo(chartWidth);
+      // Bar gap is non-negative when slotWidth >= 1 / CHART_BAR_WIDTH_RATIO
+      if (slotWidth >= 1 / CHART_BAR_WIDTH_RATIO) {
+        expect(barGap).toBeGreaterThanOrEqual(0);
+      }
+    }
+  });
+});