@chrysb/alphaclaw 0.7.2-beta.0 → 0.7.2-beta.1

package/lib/public/js/components/cron-tab/cron-run-history-panel.js

@@ -87,11 +87,23 @@ const renderEntrySummaryRow = ({ runEntry = {}, variant = "overview" }) => {
     </div>
   `;
 };
+const getCollapsedGroupAggregates = (entries = []) =>
+  entries.reduce(
+    (accumulator, runEntry) => {
+      accumulator.totalTokens += getCronRunTotalTokens(runEntry);
+      const estimatedCost = getCronRunEstimatedCost(runEntry);
+      if (estimatedCost != null) {
+        accumulator.totalCost += estimatedCost;
+        accumulator.hasAnyCost = true;
+      }
+      return accumulator;
+    },
+    { totalTokens: 0, totalCost: 0, hasAnyCost: false },
+  );
 const renderCollapsedGroupRow = ({ row, rowIndex, onSelectJob = () => {} }) => {
-  const statusSummary = Object.entries(row.statusCounts || {})
-    .map(([status, count]) => `${status}: ${count}`)
-    .join(" • ");
-  const timeRangeLabel = `[${formatOverviewTimestamp(row.oldestTs)} - ${formatOverviewTimestamp(row.newestTs)}]`;
+  const entries = Array.isArray(row?.entries) ? row.entries : [];
+  const { totalTokens, totalCost, hasAnyCost } = getCollapsedGroupAggregates(entries);
+  const timeRangeLabel = `${formatOverviewTimestamp(row.oldestTs)} - ${formatOverviewTimestamp(row.newestTs)}`;
   return html`
     <details
       key=${`collapsed:${rowIndex}:${row.jobId}`}
@@ -101,30 +113,37 @@ const renderCollapsedGroupRow = ({ row, rowIndex, onSelectJob = () => {} }) => {
         <div class="ac-history-summary-row">
           <span class="inline-flex items-center gap-2 min-w-0">
             <span class="ac-history-toggle shrink-0" aria-hidden="true">▸</span>
-            <span class="truncate text-xs text-gray-300">
-              ${row.jobName} - ${formatTokenCount(row.count)} runs -
-              ${timeRangeLabel}
+            <span class="inline-flex items-center gap-2 min-w-0">
+              <span class="truncate text-xs text-gray-300">
+                ${row.jobName} - ${formatTokenCount(row.count)} runs
+              </span>
+              <span class="text-xs text-gray-500 shrink-0">${timeRangeLabel}</span>
+            </span>
+          </span>
+          <span class="inline-flex items-center gap-3 shrink-0 text-xs">
+            <span class="text-gray-400">${formatTokenCount(totalTokens)} tk</span>
+            <span class="text-gray-500">
+              ${hasAnyCost ? `~${formatCost(totalCost)}` : "—"}
             </span>
           </span>
         </div>
       </summary>
       <div class="ac-history-body space-y-2 text-xs">
-        <div class="text-gray-500">
-          ${formatTokenCount(row.count)} consecutive runs collapsed
-          (${timeRangeLabel})
-        </div>
-        <div class="text-gray-500">Statuses: ${statusSummary}</div>
-        ${Array.isArray(row?.entries) && row.entries.length > 0
+        ${entries.length > 0
           ? html`
-              <div class="ac-surface-inset rounded-lg px-2.5 py-1">
-                ${row.entries.map((runEntry, entryIndex) => html`
-                  <div
-                    key=${`collapsed-entry:${rowIndex}:${entryIndex}:${runEntry?.ts || 0}`}
-                    class=${entryIndex > 0 ? "border-t border-border py-1.5" : "py-1.5"}
-                  >
-                    ${renderEntrySummaryRow({ runEntry, variant: "overview" })}
-                  </div>
-                `)}
+              <div class="ac-history-list">
+                ${entries.map((runEntry, entryIndex) =>
+                  renderEntryRow({
+                    row: {
+                      type: "entry",
+                      entry: runEntry,
+                    },
+                    rowIndex: `${rowIndex}:${entryIndex}`,
+                    variant: "overview",
+                    onSelectJob,
+                    showOpenJobButton: false,
+                  }),
+                )}
               </div>
             `
           : null}

package/lib/public/js/components/usage-tab/constants.js

@@ -26,6 +26,14 @@ export const kRangeOptions = [
 
 export const kDefaultUsageDays = 30;
 export const kDefaultUsageMetric = "tokens";
+export const kDefaultUsageBreakdown = "model";
 export const kUsageDaysUiSettingKey = "usageDays";
 export const kUsageMetricUiSettingKey = "usageMetric";
+export const kUsageBreakdownUiSettingKey = "usageBreakdown";
 export const kUsageSourceOrder = ["chat", "hooks", "cron"];
+
+export const kUsageBreakdownOptions = [
+  { label: "Model breakdown", value: "model" },
+  { label: "Type breakdown", value: "source" },
+  { label: "Agent breakdown", value: "agent" },
+];

package/lib/public/js/components/usage-tab/formatters.js

@@ -22,3 +22,16 @@ export const renderSourceLabel = (source) => {
   if (source === "cron") return "Cron";
   return "Chat";
 };
+
+export const renderBreakdownLabel = (value, breakdown) => {
+  const normalizedBreakdown = String(breakdown || "model");
+  const raw = String(value || "").trim();
+  if (!raw) return "Unknown";
+  if (normalizedBreakdown === "source") {
+    return renderSourceLabel(raw);
+  }
+  if (normalizedBreakdown === "agent") {
+    return raw === "unknown" ? "Unknown agent" : raw;
+  }
+  return raw;
+};

package/lib/public/js/components/usage-tab/index.js

@@ -53,10 +53,12 @@ export const UsageTab = ({ sessionId = "" }) => {
               summary=${state.summary}
               periodSummary=${state.periodSummary}
               metric=${state.metric}
+              breakdown=${state.breakdown}
               days=${state.days}
               overviewCanvasRef=${state.overviewCanvasRef}
               onDaysChange=${actions.setDays}
               onMetricChange=${actions.setMetric}
+              onBreakdownChange=${actions.setBreakdown}
             />
           `}
       <${SessionsSection}

package/lib/public/js/components/usage-tab/overview-section.js

@@ -7,7 +7,11 @@ import {
   formatUsd,
 } from "../../lib/format.js";
 import { SegmentedControl } from "../segmented-control.js";
-import { kRangeOptions, kUsageSourceOrder } from "./constants.js";
+import {
+  kRangeOptions,
+  kUsageBreakdownOptions,
+  kUsageSourceOrder,
+} from "./constants.js";
 import { renderSourceLabel } from "./formatters.js";
 
 const html = htm.bind(h);
@@ -215,10 +219,12 @@ export const OverviewSection = ({
   summary = null,
   periodSummary,
   metric = "tokens",
+  breakdown = "model",
   days = 30,
   overviewCanvasRef,
   onDaysChange = () => {},
   onMetricChange = () => {},
+  onBreakdownChange = () => {},
 }) => {
   const overviewMetrics = getOverviewMetrics(summary);
 
@@ -264,9 +270,21 @@ export const OverviewSection = ({
         <div
           class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mb-3"
         >
-          <h2 class="card-label text-xs">
-            Daily ${metric === "tokens" ? "tokens" : "cost"} by model
-          </h2>
+          <label class="inline-flex items-center gap-2">
+            <select
+              class="bg-black/30 border border-border rounded-lg text-xs px-2.5 py-1.5 text-gray-200 focus:border-gray-500"
+              value=${breakdown}
+              onChange=${(event) =>
+                onBreakdownChange(String(event.currentTarget?.value || "model"))}
+              aria-label="Usage chart breakdown"
+            >
+              ${kUsageBreakdownOptions.map(
+                (option) => html`
+                  <option value=${option.value}>${option.label}</option>
+                `,
+              )}
+            </select>
+          </label>
           <div class="flex items-center gap-2">
             <${SegmentedControl}
               options=${kRangeOptions.map((option) => ({

package/lib/public/js/components/usage-tab/use-usage-tab.js

@@ -13,12 +13,14 @@ import {
 import { formatInteger, formatUsd } from "../../lib/format.js";
 import { readUiSettings, writeUiSettings } from "../../lib/ui-settings.js";
 import {
+  kDefaultUsageBreakdown,
   kDefaultUsageDays,
   kDefaultUsageMetric,
+  kUsageBreakdownUiSettingKey,
   kUsageDaysUiSettingKey,
   kUsageMetricUiSettingKey,
 } from "./constants.js";
-import { toChartColor, toLocalDayKey } from "./formatters.js";
+import { renderBreakdownLabel, toChartColor, toLocalDayKey } from "./formatters.js";
 
 export const useUsageTab = ({ sessionId = "" }) => {
   const [days, setDays] = useState(() => {
@@ -35,6 +37,13 @@ export const useUsageTab = ({ sessionId = "" }) => {
       ? "cost"
       : kDefaultUsageMetric;
   });
+  const [breakdown, setBreakdown] = useState(() => {
+    const settings = readUiSettings();
+    const configured = String(settings[kUsageBreakdownUiSettingKey] || "").trim();
+    return configured === "source" || configured === "agent"
+      ? configured
+      : kDefaultUsageBreakdown;
+  });
   const [summary, setSummary] = useState(null);
   const [sessions, setSessions] = useState([]);
   const [sessionDetailById, setSessionDetailById] = useState({});
@@ -104,8 +113,9 @@ export const useUsageTab = ({ sessionId = "" }) => {
     const settings = readUiSettings();
     settings[kUsageDaysUiSettingKey] = days;
     settings[kUsageMetricUiSettingKey] = metric;
+    settings[kUsageBreakdownUiSettingKey] = breakdown;
     writeUiSettings(settings);
-  }, [days, metric]);
+  }, [days, metric, breakdown]);
 
   useEffect(() => {
     loadSessions();
@@ -166,28 +176,52 @@ export const useUsageTab = ({ sessionId = "" }) => {
 
   const overviewDatasets = useMemo(() => {
     const rows = Array.isArray(summary?.daily) ? summary.daily : [];
-    const allModels = new Set();
+    const allBreakdownKeys = new Set();
+    const totalsByBreakdownKey = new Map();
+    const breakdownRowKey =
+      breakdown === "source" ? "sources" : breakdown === "agent" ? "agents" : "models";
+    const breakdownValueKey =
+      breakdown === "source" ? "source" : breakdown === "agent" ? "agent" : "model";
     for (const dayRow of rows) {
-      for (const modelRow of dayRow.models || []) {
-        allModels.add(String(modelRow.model || "unknown"));
+      for (const breakdownRow of dayRow[breakdownRowKey] || []) {
+        const bucketKey = String(breakdownRow[breakdownValueKey] || "unknown");
+        allBreakdownKeys.add(bucketKey);
+        totalsByBreakdownKey.set(
+          bucketKey,
+          Number(totalsByBreakdownKey.get(bucketKey) || 0) +
+            Number(
+              metric === "cost"
+                ? breakdownRow.totalCost || 0
+                : breakdownRow.totalTokens || 0,
+            ),
+        );
       }
     }
     const labels = rows.map((row) => String(row.date || ""));
-    const datasets = Array.from(allModels).map((model) => ({
-      label: model,
+    const orderedBreakdownKeys = Array.from(allBreakdownKeys).sort(
+      (leftValue, rightValue) => {
+        const leftTotal = Number(totalsByBreakdownKey.get(leftValue) || 0);
+        const rightTotal = Number(totalsByBreakdownKey.get(rightValue) || 0);
+        if (rightTotal !== leftTotal) return rightTotal - leftTotal;
+        return leftValue.localeCompare(rightValue);
+      },
+    );
+    const datasets = orderedBreakdownKeys.map((bucketKey) => ({
+      label: bucketKey,
       data: rows.map((row) => {
-        const found = (row.models || []).find(
-          (m) => String(m.model || "") === model,
+        const found = (row[breakdownRowKey] || []).find(
+          (breakdownRow) =>
+            String(breakdownRow[breakdownValueKey] || "") === bucketKey,
         );
         if (!found) return 0;
         return metric === "cost"
           ? Number(found.totalCost || 0)
           : Number(found.totalTokens || 0);
       }),
-      backgroundColor: toChartColor(model),
+      backgroundColor: toChartColor(`${breakdown}:${bucketKey}`),
     }));
     return { labels, datasets };
-  }, [summary, metric]);
+  }, [summary, metric, breakdown]);
 
   useEffect(() => {
     const canvas = overviewCanvasRef.current;
@@ -229,9 +263,10 @@ export const useUsageTab = ({ sessionId = "" }) => {
             callbacks: {
               label: (context) => {
                 const value = Number(context.parsed.y || 0);
+                const label = renderBreakdownLabel(context.dataset.label, breakdown);
                 return metric === "cost"
-                  ? `${context.dataset.label}: ${formatUsd(value)}`
-                  : `${context.dataset.label}: ${formatInteger(value)} tokens`;
+                  ? `${label}: ${formatUsd(value)}`
+                  : `${label}: ${formatInteger(value)} tokens`;
               },
             },
           },
@@ -244,12 +279,13 @@ export const useUsageTab = ({ sessionId = "" }) => {
         overviewChartRef.current = null;
       }
     };
-  }, [overviewDatasets, metric]);
+  }, [overviewDatasets, metric, breakdown]);
 
   return {
     state: {
       days,
       metric,
+      breakdown,
       summary,
       sessions,
       sessionDetailById,
@@ -264,6 +300,7 @@ export const useUsageTab = ({ sessionId = "" }) => {
     actions: {
       setDays,
       setMetric,
+      setBreakdown,
       loadSummary,
       loadSessionDetail,
       setExpandedSessionIds,

package/lib/server/db/usage/summary.js

@@ -153,12 +153,16 @@ const getDailySummary = ({
     `)
     .all({ $lookbackMs: lookbackMs });
   const byDateModel = new Map();
+  const byDateSource = new Map();
+  const byDateAgent = new Map();
   for (const eventRow of eventsRows) {
     const timestamp = coerceInt(eventRow.timestamp);
     const dayKey = normalizedTimeZone === kUtcTimeZone
       ? toDayKey(timestamp)
       : toTimeZoneDayKey(timestamp, normalizedTimeZone);
     if (dayKey < startDay) continue;
+    const sessionRef = String(eventRow.session_key || eventRow.session_id || "");
+    const { agent, source } = parseAgentAndSourceFromSessionRef(sessionRef);
     const model = String(eventRow.model || "unknown");
     const mapKey = `${dayKey}\u0000${model}`;
     if (!byDateModel.has(mapKey)) {
@@ -197,6 +201,52 @@ const getDailySummary = ({
     if (!aggregate.provider && eventRow.provider) {
       aggregate.provider = String(eventRow.provider || "unknown");
     }
+
+    const sourceMapKey = `${dayKey}\u0000${source}`;
+    if (!byDateSource.has(sourceMapKey)) {
+      byDateSource.set(sourceMapKey, {
+        source,
+        date: dayKey,
+        inputTokens: 0,
+        outputTokens: 0,
+        cacheReadTokens: 0,
+        cacheWriteTokens: 0,
+        totalTokens: 0,
+        turnCount: 0,
+        totalCost: 0,
+      });
+    }
+    const sourceAggregate = byDateSource.get(sourceMapKey);
+    sourceAggregate.inputTokens += metrics.inputTokens;
+    sourceAggregate.outputTokens += metrics.outputTokens;
+    sourceAggregate.cacheReadTokens += metrics.cacheReadTokens;
+    sourceAggregate.cacheWriteTokens += metrics.cacheWriteTokens;
+    sourceAggregate.totalTokens += metrics.totalTokens;
+    sourceAggregate.turnCount += 1;
+    sourceAggregate.totalCost += metrics.totalCost;
+
+    const agentMapKey = `${dayKey}\u0000${agent}`;
+    if (!byDateAgent.has(agentMapKey)) {
+      byDateAgent.set(agentMapKey, {
+        agent,
+        date: dayKey,
+        inputTokens: 0,
+        outputTokens: 0,
+        cacheReadTokens: 0,
+        cacheWriteTokens: 0,
+        totalTokens: 0,
+        turnCount: 0,
+        totalCost: 0,
+      });
+    }
+    const agentAggregate = byDateAgent.get(agentMapKey);
+    agentAggregate.inputTokens += metrics.inputTokens;
+    agentAggregate.outputTokens += metrics.outputTokens;
+    agentAggregate.cacheReadTokens += metrics.cacheReadTokens;
+    agentAggregate.cacheWriteTokens += metrics.cacheWriteTokens;
+    agentAggregate.totalTokens += metrics.totalTokens;
+    agentAggregate.turnCount += 1;
+    agentAggregate.totalCost += metrics.totalCost;
   }
   const enriched = Array.from(byDateModel.values()).sort((a, b) => {
     if (a.date === b.date) return b.totalTokens - a.totalTokens;
@@ -227,6 +277,50 @@ const getDailySummary = ({
       pricingFound: row.pricingFound,
     });
   }
+  const byDateSourceRows = new Map();
+  for (const row of byDateSource.values()) {
+    if (!byDateSourceRows.has(row.date)) byDateSourceRows.set(row.date, []);
+    byDateSourceRows.get(row.date).push({
+      source: row.source,
+      inputTokens: row.inputTokens,
+      outputTokens: row.outputTokens,
+      cacheReadTokens: row.cacheReadTokens,
+      cacheWriteTokens: row.cacheWriteTokens,
+      totalTokens: row.totalTokens,
+      turnCount: row.turnCount,
+      totalCost: row.totalCost,
+    });
+  }
+  for (const rows of byDateSourceRows.values()) {
+    rows.sort((left, right) => {
+      if (right.totalTokens !== left.totalTokens) {
+        return right.totalTokens - left.totalTokens;
+      }
+      return String(left.source || "").localeCompare(String(right.source || ""));
+    });
+  }
+  const byDateAgentRows = new Map();
+  for (const row of byDateAgent.values()) {
+    if (!byDateAgentRows.has(row.date)) byDateAgentRows.set(row.date, []);
+    byDateAgentRows.get(row.date).push({
+      agent: row.agent,
+      inputTokens: row.inputTokens,
+      outputTokens: row.outputTokens,
+      cacheReadTokens: row.cacheReadTokens,
+      cacheWriteTokens: row.cacheWriteTokens,
+      totalTokens: row.totalTokens,
+      turnCount: row.turnCount,
+      totalCost: row.totalCost,
+    });
+  }
+  for (const rows of byDateAgentRows.values()) {
+    rows.sort((left, right) => {
+      if (right.totalTokens !== left.totalTokens) {
+        return right.totalTokens - left.totalTokens;
+      }
+      return String(left.agent || "").localeCompare(String(right.agent || ""));
+    });
+  }
   const daily = [];
   const totals = {
     inputTokens: 0,
@@ -259,7 +353,13 @@ const getDailySummary = ({
         turnCount: 0,
       },
     );
-    daily.push({ date, ...aggregate, models: modelRows });
+    daily.push({
+      date,
+      ...aggregate,
+      models: modelRows,
+      sources: byDateSourceRows.get(date) || [],
+      agents: byDateAgentRows.get(date) || [],
+    });
     totals.inputTokens += aggregate.inputTokens;
     totals.outputTokens += aggregate.outputTokens;
     totals.cacheReadTokens += aggregate.cacheReadTokens;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chrysb/alphaclaw",
-  "version": "0.7.2-beta.0",
+  "version": "0.7.2-beta.1",
   "publishConfig": {
     "access": "public"
   },