openclaw-multi-auto 1.3.7 → 1.3.8

package/ui/src/ui/app-render-usage-tab.ts

@@ -0,0 +1,273 @@
+import { nothing } from "lit";
+import type { AppViewState } from "./app-view-state.ts";
+import type { UsageState } from "./controllers/usage.ts";
+import { loadUsage, loadSessionTimeSeries, loadSessionLogs } from "./controllers/usage.ts";
+import { renderUsage } from "./views/usage.ts";
+
+// Module-scope debounce for usage date changes (avoids type-unsafe hacks on state object)
+let usageDateDebounceTimeout: number | null = null;
+const debouncedLoadUsage = (state: UsageState) => {
+  if (usageDateDebounceTimeout) {
+    clearTimeout(usageDateDebounceTimeout);
+  }
+  usageDateDebounceTimeout = window.setTimeout(() => void loadUsage(state), 400);
+};
+
+export function renderUsageTab(state: AppViewState) {
+  if (state.tab !== "usage") {
+    return nothing;
+  }
+
+  return renderUsage({
+    loading: state.usageLoading,
+    error: state.usageError,
+    startDate: state.usageStartDate,
+    endDate: state.usageEndDate,
+    sessions: state.usageResult?.sessions ?? [],
+    sessionsLimitReached: (state.usageResult?.sessions?.length ?? 0) >= 1000,
+    totals: state.usageResult?.totals ?? null,
+    aggregates: state.usageResult?.aggregates ?? null,
+    costDaily: state.usageCostSummary?.daily ?? [],
+    selectedSessions: state.usageSelectedSessions,
+    selectedDays: state.usageSelectedDays,
+    selectedHours: state.usageSelectedHours,
+    chartMode: state.usageChartMode,
+    dailyChartMode: state.usageDailyChartMode,
+    timeSeriesMode: state.usageTimeSeriesMode,
+    timeSeriesBreakdownMode: state.usageTimeSeriesBreakdownMode,
+    timeSeries: state.usageTimeSeries,
+    timeSeriesLoading: state.usageTimeSeriesLoading,
+    timeSeriesCursorStart: state.usageTimeSeriesCursorStart,
+    timeSeriesCursorEnd: state.usageTimeSeriesCursorEnd,
+    sessionLogs: state.usageSessionLogs,
+    sessionLogsLoading: state.usageSessionLogsLoading,
+    sessionLogsExpanded: state.usageSessionLogsExpanded,
+    logFilterRoles: state.usageLogFilterRoles,
+    logFilterTools: state.usageLogFilterTools,
+    logFilterHasTools: state.usageLogFilterHasTools,
+    logFilterQuery: state.usageLogFilterQuery,
+    query: state.usageQuery,
+    queryDraft: state.usageQueryDraft,
+    sessionSort: state.usageSessionSort,
+    sessionSortDir: state.usageSessionSortDir,
+    recentSessions: state.usageRecentSessions,
+    sessionsTab: state.usageSessionsTab,
+    visibleColumns: state.usageVisibleColumns as import("./views/usage.ts").UsageColumnId[],
+    timeZone: state.usageTimeZone,
+    contextExpanded: state.usageContextExpanded,
+    headerPinned: state.usageHeaderPinned,
+    onStartDateChange: (date) => {
+      state.usageStartDate = date;
+      state.usageSelectedDays = [];
+      state.usageSelectedHours = [];
+      state.usageSelectedSessions = [];
+      debouncedLoadUsage(state);
+    },
+    onEndDateChange: (date) => {
+      state.usageEndDate = date;
+      state.usageSelectedDays = [];
+      state.usageSelectedHours = [];
+      state.usageSelectedSessions = [];
+      debouncedLoadUsage(state);
+    },
+    onRefresh: () => loadUsage(state),
+    onTimeZoneChange: (zone) => {
+      state.usageTimeZone = zone;
+      state.usageSelectedDays = [];
+      state.usageSelectedHours = [];
+      state.usageSelectedSessions = [];
+      void loadUsage(state);
+    },
+    onToggleContextExpanded: () => {
+      state.usageContextExpanded = !state.usageContextExpanded;
+    },
+    onToggleSessionLogsExpanded: () => {
+      state.usageSessionLogsExpanded = !state.usageSessionLogsExpanded;
+    },
+    onLogFilterRolesChange: (next) => {
+      state.usageLogFilterRoles = next;
+    },
+    onLogFilterToolsChange: (next) => {
+      state.usageLogFilterTools = next;
+    },
+    onLogFilterHasToolsChange: (next) => {
+      state.usageLogFilterHasTools = next;
+    },
+    onLogFilterQueryChange: (next) => {
+      state.usageLogFilterQuery = next;
+    },
+    onLogFilterClear: () => {
+      state.usageLogFilterRoles = [];
+      state.usageLogFilterTools = [];
+      state.usageLogFilterHasTools = false;
+      state.usageLogFilterQuery = "";
+    },
+    onToggleHeaderPinned: () => {
+      state.usageHeaderPinned = !state.usageHeaderPinned;
+    },
+    onSelectHour: (hour, shiftKey) => {
+      if (shiftKey && state.usageSelectedHours.length > 0) {
+        const allHours = Array.from({ length: 24 }, (_, i) => i);
+        const lastSelected = state.usageSelectedHours[state.usageSelectedHours.length - 1];
+        const lastIdx = allHours.indexOf(lastSelected);
+        const thisIdx = allHours.indexOf(hour);
+        if (lastIdx !== -1 && thisIdx !== -1) {
+          const [start, end] = lastIdx < thisIdx ? [lastIdx, thisIdx] : [thisIdx, lastIdx];
+          const range = allHours.slice(start, end + 1);
+          state.usageSelectedHours = [...new Set([...state.usageSelectedHours, ...range])];
+        }
+      } else {
+        if (state.usageSelectedHours.includes(hour)) {
+          state.usageSelectedHours = state.usageSelectedHours.filter((h) => h !== hour);
+        } else {
+          state.usageSelectedHours = [...state.usageSelectedHours, hour];
+        }
+      }
+    },
+    onQueryDraftChange: (query) => {
+      state.usageQueryDraft = query;
+      if (state.usageQueryDebounceTimer) {
+        window.clearTimeout(state.usageQueryDebounceTimer);
+      }
+      state.usageQueryDebounceTimer = window.setTimeout(() => {
+        state.usageQuery = state.usageQueryDraft;
+        state.usageQueryDebounceTimer = null;
+      }, 250);
+    },
+    onApplyQuery: () => {
+      if (state.usageQueryDebounceTimer) {
+        window.clearTimeout(state.usageQueryDebounceTimer);
+        state.usageQueryDebounceTimer = null;
+      }
+      state.usageQuery = state.usageQueryDraft;
+    },
+    onClearQuery: () => {
+      if (state.usageQueryDebounceTimer) {
+        window.clearTimeout(state.usageQueryDebounceTimer);
+        state.usageQueryDebounceTimer = null;
+      }
+      state.usageQueryDraft = "";
+      state.usageQuery = "";
+    },
+    onSessionSortChange: (sort) => {
+      state.usageSessionSort = sort;
+    },
+    onSessionSortDirChange: (dir) => {
+      state.usageSessionSortDir = dir;
+    },
+    onSessionsTabChange: (tab) => {
+      state.usageSessionsTab = tab;
+    },
+    onToggleColumn: (column) => {
+      if (state.usageVisibleColumns.includes(column)) {
+        state.usageVisibleColumns = state.usageVisibleColumns.filter((entry) => entry !== column);
+      } else {
+        state.usageVisibleColumns = [...state.usageVisibleColumns, column];
+      }
+    },
+    onSelectSession: (key, shiftKey) => {
+      state.usageTimeSeries = null;
+      state.usageSessionLogs = null;
+      state.usageRecentSessions = [
+        key,
+        ...state.usageRecentSessions.filter((entry) => entry !== key),
+      ].slice(0, 8);
+
+      if (shiftKey && state.usageSelectedSessions.length > 0) {
+        // Shift-click: select range from last selected to this session
+        // Sort sessions same way as displayed (by tokens or cost descending)
+        const isTokenMode = state.usageChartMode === "tokens";
+        const sortedSessions = [...(state.usageResult?.sessions ?? [])].toSorted((a, b) => {
+          const valA = isTokenMode ? (a.usage?.totalTokens ?? 0) : (a.usage?.totalCost ?? 0);
+          const valB = isTokenMode ? (b.usage?.totalTokens ?? 0) : (b.usage?.totalCost ?? 0);
+          return valB - valA;
+        });
+        const allKeys = sortedSessions.map((s) => s.key);
+        const lastSelected = state.usageSelectedSessions[state.usageSelectedSessions.length - 1];
+        const lastIdx = allKeys.indexOf(lastSelected);
+        const thisIdx = allKeys.indexOf(key);
+        if (lastIdx !== -1 && thisIdx !== -1) {
+          const [start, end] = lastIdx < thisIdx ? [lastIdx, thisIdx] : [thisIdx, lastIdx];
+          const range = allKeys.slice(start, end + 1);
+          const newSelection = [...new Set([...state.usageSelectedSessions, ...range])];
+          state.usageSelectedSessions = newSelection;
+        }
+      } else {
+        // Regular click: focus a single session (so details always open).
+        // Click the focused session again to clear selection.
+        if (state.usageSelectedSessions.length === 1 && state.usageSelectedSessions[0] === key) {
+          state.usageSelectedSessions = [];
+        } else {
+          state.usageSelectedSessions = [key];
+        }
+      }
+
+      // Reset range selection when switching sessions
+      state.usageTimeSeriesCursorStart = null;
+      state.usageTimeSeriesCursorEnd = null;
+
+      // Load timeseries/logs only if exactly one session selected
+      if (state.usageSelectedSessions.length === 1) {
+        void loadSessionTimeSeries(state, state.usageSelectedSessions[0]);
+        void loadSessionLogs(state, state.usageSelectedSessions[0]);
+      }
+    },
+    onSelectDay: (day, shiftKey) => {
+      if (shiftKey && state.usageSelectedDays.length > 0) {
+        // Shift-click: select range from last selected to this day
+        const allDays = (state.usageCostSummary?.daily ?? []).map((d) => d.date);
+        const lastSelected = state.usageSelectedDays[state.usageSelectedDays.length - 1];
+        const lastIdx = allDays.indexOf(lastSelected);
+        const thisIdx = allDays.indexOf(day);
+        if (lastIdx !== -1 && thisIdx !== -1) {
+          const [start, end] = lastIdx < thisIdx ? [lastIdx, thisIdx] : [thisIdx, lastIdx];
+          const range = allDays.slice(start, end + 1);
+          // Merge with existing selection
+          const newSelection = [...new Set([...state.usageSelectedDays, ...range])];
+          state.usageSelectedDays = newSelection;
+        }
+      } else {
+        // Regular click: toggle single day
+        if (state.usageSelectedDays.includes(day)) {
+          state.usageSelectedDays = state.usageSelectedDays.filter((d) => d !== day);
+        } else {
+          state.usageSelectedDays = [day];
+        }
+      }
+    },
+    onChartModeChange: (mode) => {
+      state.usageChartMode = mode;
+    },
+    onDailyChartModeChange: (mode) => {
+      state.usageDailyChartMode = mode;
+    },
+    onTimeSeriesModeChange: (mode) => {
+      state.usageTimeSeriesMode = mode;
+    },
+    onTimeSeriesBreakdownChange: (mode) => {
+      state.usageTimeSeriesBreakdownMode = mode;
+    },
+    onTimeSeriesCursorRangeChange: (start, end) => {
+      state.usageTimeSeriesCursorStart = start;
+      state.usageTimeSeriesCursorEnd = end;
+    },
+    onClearDays: () => {
+      state.usageSelectedDays = [];
+    },
+    onClearHours: () => {
+      state.usageSelectedHours = [];
+    },
+    onClearSessions: () => {
+      state.usageSelectedSessions = [];
+      state.usageTimeSeries = null;
+      state.usageSessionLogs = null;
+    },
+    onClearFilters: () => {
+      state.usageSelectedDays = [];
+      state.usageSelectedHours = [];
+      state.usageSelectedSessions = [];
+      state.usageTimeSeries = null;
+      state.usageSessionLogs = null;
+    },
+  });
+}

package/ui/src/ui/app-render.helpers.node.test.ts

@@ -0,0 +1,286 @@
+import { describe, expect, it } from "vitest";
+import {
+  isCronSessionKey,
+  parseSessionKey,
+  resolveSessionDisplayName,
+} from "./app-render.helpers.ts";
+import type { SessionsListResult } from "./types.ts";
+
+type SessionRow = SessionsListResult["sessions"][number];
+
+function row(overrides: Partial<SessionRow> & { key: string }): SessionRow {
+  return { kind: "direct", updatedAt: 0, ...overrides };
+}
+
+/* ================================================================
+ *  parseSessionKey – low-level key → type / fallback mapping
+ * ================================================================ */
+
+describe("parseSessionKey", () => {
+  it("identifies main session (bare 'main')", () => {
+    expect(parseSessionKey("main")).toEqual({ prefix: "", fallbackName: "Main Session" });
+  });
+
+  it("identifies main session (agent:main:main)", () => {
+    expect(parseSessionKey("agent:main:main")).toEqual({
+      prefix: "",
+      fallbackName: "Main Session",
+    });
+  });
+
+  it("identifies subagent sessions", () => {
+    expect(parseSessionKey("agent:main:subagent:18abfefe-1fa6-43cb-8ba8-ebdc9b43e253")).toEqual({
+      prefix: "Subagent:",
+      fallbackName: "Subagent:",
+    });
+  });
+
+  it("identifies cron sessions", () => {
+    expect(parseSessionKey("agent:main:cron:daily-briefing-uuid")).toEqual({
+      prefix: "Cron:",
+      fallbackName: "Cron Job:",
+    });
+    expect(parseSessionKey("cron:daily-briefing-uuid")).toEqual({
+      prefix: "Cron:",
+      fallbackName: "Cron Job:",
+    });
+  });
+
+  it("identifies direct chat with known channel", () => {
+    expect(parseSessionKey("agent:main:bluebubbles:direct:+19257864429")).toEqual({
+      prefix: "",
+      fallbackName: "iMessage · +19257864429",
+    });
+  });
+
+  it("identifies direct chat with telegram", () => {
+    expect(parseSessionKey("agent:main:telegram:direct:user123")).toEqual({
+      prefix: "",
+      fallbackName: "Telegram · user123",
+    });
+  });
+
+  it("identifies group chat with known channel", () => {
+    expect(parseSessionKey("agent:main:discord:group:guild-chan")).toEqual({
+      prefix: "",
+      fallbackName: "Discord Group",
+    });
+  });
+
+  it("capitalises unknown channels in direct/group patterns", () => {
+    expect(parseSessionKey("agent:main:mychannel:direct:user1")).toEqual({
+      prefix: "",
+      fallbackName: "Mychannel · user1",
+    });
+  });
+
+  it("identifies channel-prefixed legacy keys", () => {
+    expect(parseSessionKey("bluebubbles:g-agent-main-bluebubbles-direct-+19257864429")).toEqual({
+      prefix: "",
+      fallbackName: "iMessage Session",
+    });
+    expect(parseSessionKey("discord:123:456")).toEqual({
+      prefix: "",
+      fallbackName: "Discord Session",
+    });
+  });
+
+  it("handles bare channel name as key", () => {
+    expect(parseSessionKey("telegram")).toEqual({
+      prefix: "",
+      fallbackName: "Telegram Session",
+    });
+  });
+
+  it("returns raw key for unknown patterns", () => {
+    expect(parseSessionKey("something-unknown")).toEqual({
+      prefix: "",
+      fallbackName: "something-unknown",
+    });
+  });
+});
+
+/* ================================================================
+ *  resolveSessionDisplayName – full resolution with row data
+ * ================================================================ */
+
+describe("resolveSessionDisplayName", () => {
+  // ── Key-only fallbacks (no row) ──────────────────
+
+  it("returns 'Main Session' for agent:main:main key", () => {
+    expect(resolveSessionDisplayName("agent:main:main")).toBe("Main Session");
+  });
+
+  it("returns 'Main Session' for bare 'main' key", () => {
+    expect(resolveSessionDisplayName("main")).toBe("Main Session");
+  });
+
+  it("returns 'Subagent:' for subagent key without row", () => {
+    expect(resolveSessionDisplayName("agent:main:subagent:abc-123")).toBe("Subagent:");
+  });
+
+  it("returns 'Cron Job:' for cron key without row", () => {
+    expect(resolveSessionDisplayName("agent:main:cron:abc-123")).toBe("Cron Job:");
+  });
+
+  it("parses direct chat key with channel", () => {
+    expect(resolveSessionDisplayName("agent:main:bluebubbles:direct:+19257864429")).toBe(
+      "iMessage · +19257864429",
+    );
+  });
+
+  it("parses channel-prefixed legacy key", () => {
+    expect(resolveSessionDisplayName("discord:123:456")).toBe("Discord Session");
+  });
+
+  it("returns raw key for unknown patterns", () => {
+    expect(resolveSessionDisplayName("something-custom")).toBe("something-custom");
+  });
+
+  // ── With row data (label / displayName) ──────────
+
+  it("returns parsed fallback when row has no label or displayName", () => {
+    expect(resolveSessionDisplayName("agent:main:main", row({ key: "agent:main:main" }))).toBe(
+      "Main Session",
+    );
+  });
+
+  it("returns parsed fallback when displayName matches key", () => {
+    expect(resolveSessionDisplayName("mykey", row({ key: "mykey", displayName: "mykey" }))).toBe(
+      "mykey",
+    );
+  });
+
+  it("returns parsed fallback when label matches key", () => {
+    expect(resolveSessionDisplayName("mykey", row({ key: "mykey", label: "mykey" }))).toBe("mykey");
+  });
+
+  it("uses label alone when available", () => {
+    expect(
+      resolveSessionDisplayName(
+        "discord:123:456",
+        row({ key: "discord:123:456", label: "General" }),
+      ),
+    ).toBe("General");
+  });
+
+  it("falls back to displayName when label is absent", () => {
+    expect(
+      resolveSessionDisplayName(
+        "discord:123:456",
+        row({ key: "discord:123:456", displayName: "My Chat" }),
+      ),
+    ).toBe("My Chat");
+  });
+
+  it("prefers label over displayName when both are present", () => {
+    expect(
+      resolveSessionDisplayName(
+        "discord:123:456",
+        row({ key: "discord:123:456", displayName: "My Chat", label: "General" }),
+      ),
+    ).toBe("General");
+  });
+
+  it("ignores whitespace-only label and falls back to displayName", () => {
+    expect(
+      resolveSessionDisplayName(
+        "discord:123:456",
+        row({ key: "discord:123:456", displayName: "My Chat", label: "   " }),
+      ),
+    ).toBe("My Chat");
+  });
+
+  it("uses parsed fallback when whitespace-only label and no displayName", () => {
+    expect(
+      resolveSessionDisplayName("discord:123:456", row({ key: "discord:123:456", label: "   " })),
+    ).toBe("Discord Session");
+  });
+
+  it("trims label and displayName", () => {
+    expect(resolveSessionDisplayName("k", row({ key: "k", label: "  General  " }))).toBe("General");
+    expect(resolveSessionDisplayName("k", row({ key: "k", displayName: "  My Chat  " }))).toBe(
+      "My Chat",
+    );
+  });
+
+  // ── Type prefixes applied to labels / displayNames ──
+
+  it("prefixes subagent label with Subagent:", () => {
+    expect(
+      resolveSessionDisplayName(
+        "agent:main:subagent:abc-123",
+        row({ key: "agent:main:subagent:abc-123", label: "maintainer-v2" }),
+      ),
+    ).toBe("Subagent: maintainer-v2");
+  });
+
+  it("prefixes subagent displayName with Subagent:", () => {
+    expect(
+      resolveSessionDisplayName(
+        "agent:main:subagent:abc-123",
+        row({ key: "agent:main:subagent:abc-123", displayName: "Task Runner" }),
+      ),
+    ).toBe("Subagent: Task Runner");
+  });
+
+  it("prefixes cron label with Cron:", () => {
+    expect(
+      resolveSessionDisplayName(
+        "agent:main:cron:abc-123",
+        row({ key: "agent:main:cron:abc-123", label: "daily-briefing" }),
+      ),
+    ).toBe("Cron: daily-briefing");
+  });
+
+  it("prefixes cron displayName with Cron:", () => {
+    expect(
+      resolveSessionDisplayName(
+        "agent:main:cron:abc-123",
+        row({ key: "agent:main:cron:abc-123", displayName: "Nightly Sync" }),
+      ),
+    ).toBe("Cron: Nightly Sync");
+  });
+
+  it("does not double-prefix cron labels that already include Cron:", () => {
+    expect(
+      resolveSessionDisplayName(
+        "agent:main:cron:abc-123",
+        row({ key: "agent:main:cron:abc-123", label: "Cron: Nightly Sync" }),
+      ),
+    ).toBe("Cron: Nightly Sync");
+  });
+
+  it("does not double-prefix subagent display names that already include Subagent:", () => {
+    expect(
+      resolveSessionDisplayName(
+        "agent:main:subagent:abc-123",
+        row({ key: "agent:main:subagent:abc-123", displayName: "Subagent: Runner" }),
+      ),
+    ).toBe("Subagent: Runner");
+  });
+
+  it("does not prefix non-typed sessions with labels", () => {
+    expect(
+      resolveSessionDisplayName(
+        "agent:main:bluebubbles:direct:+19257864429",
+        row({ key: "agent:main:bluebubbles:direct:+19257864429", label: "Tyler" }),
+      ),
+    ).toBe("Tyler");
+  });
+});
+
+describe("isCronSessionKey", () => {
+  it("returns true for cron: prefixed keys", () => {
+    expect(isCronSessionKey("cron:abc-123")).toBe(true);
+    expect(isCronSessionKey("cron:weekly-agent-roundtable")).toBe(true);
+    expect(isCronSessionKey("agent:main:cron:abc-123")).toBe(true);
+    expect(isCronSessionKey("agent:main:cron:abc-123:run:run-1")).toBe(true);
+  });
+
+  it("returns false for non-cron keys", () => {
+    expect(isCronSessionKey("main")).toBe(false);
+    expect(isCronSessionKey("discord:group:eng")).toBe(false);
+    expect(isCronSessionKey("agent:main:slack:cron:job:run:uuid")).toBe(false);
+  });
+});