@chrysb/alphaclaw 0.7.1 → 0.7.2-beta.1

package/lib/public/css/explorer.css

@@ -1158,6 +1158,18 @@
   background: rgba(255, 255, 255, 0.04);
 }
 
+.release-notes-preview {
+  padding: 8px 12px 24px 14px;
+}
+
+.release-notes-preview > :first-child {
+  margin-top: 0;
+}
+
+.release-notes-preview > :last-child {
+  margin-bottom: 0;
+}
+
 .file-viewer-editor-highlight-line-content .hl-comment {
   color: var(--comment);
   font-style: italic;

package/lib/public/js/components/cron-tab/cron-overview.js

@@ -16,7 +16,7 @@ import { ErrorWarningLineIcon } from "../icons.js";
 const html = htm.bind(h);
 const kRecentRunFetchLimit = 100;
 const kRecentRunRowsLimit = 20;
-const kRecentRunCollapseThreshold = 5;
+const kRecentRunCollapseThreshold = 2;
 const kTrendRange24h = "24h";
 const kTrendRange7d = "7d";
 const kTrendRange30d = "30d";
@@ -107,6 +107,7 @@ const buildCollapsedRunRows = (recentRuns = []) => {
         newestTs: Number(streak[0]?.ts || 0),
         oldestTs: Number(streak[streak.length - 1]?.ts || 0),
         statusCounts,
+        entries: streak,
       });
       index = streakEnd;
       continue;

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

@@ -41,11 +41,69 @@ const formatRowTimestamp = (timestampMs, variant = "overview") =>
   variant === "detail"
     ? formatDetailTimestamp(timestampMs)
     : formatOverviewTimestamp(timestampMs);
+const renderEntrySummaryRow = ({ runEntry = {}, variant = "overview" }) => {
+  const runStatus = String(runEntry?.status || "unknown");
+  const runTokens = getCronRunTotalTokens(runEntry);
+  const runEstimatedCost = getCronRunEstimatedCost(runEntry);
+  const runTitle = String(runEntry?.jobName || "").trim();
+  const hasRunTitle = runTitle.length > 0;
+  const isDetail = variant === "detail";
+  return html`
+    <div class="ac-history-summary-row">
+      <span class="inline-flex items-center gap-2 min-w-0">
+        ${isDetail
+          ? html`
+              <span class="truncate text-xs text-gray-300">
+                ${formatRowTimestamp(runEntry.ts, variant)}
+              </span>
+            `
+          : hasRunTitle
+            ? html`
+                <span class="inline-flex items-center gap-2 min-w-0">
+                  <span class="truncate text-xs text-gray-300">${runTitle}</span>
+                  <span class="text-xs text-gray-500 shrink-0">
+                    ${formatRowTimestamp(runEntry.ts, variant)}
+                  </span>
+                </span>
+              `
+            : html`
+                <span class="truncate text-xs text-gray-300">
+                  ${runEntry.jobId} - ${formatRowTimestamp(runEntry.ts, variant)}
+                </span>
+              `}
+      </span>
+      <span class="inline-flex items-center gap-3 shrink-0 text-xs">
+        <span class=${runStatusClassName(runStatus)}>${runStatus}</span>
+        <span class="text-gray-400">${formatDurationCompactMs(runEntry.durationMs)}</span>
+        <span class="text-gray-400">${formatTokenCount(runTokens)} tk</span>
+        ${isDetail
+          ? html`<span class="text-gray-500">${runDeliveryLabel(runEntry)}</span>`
+          : html`
+              <span class="text-gray-500">
+                ${runEstimatedCost == null ? "—" : `~${formatCost(runEstimatedCost)}`}
+              </span>
+            `}
+      </span>
+    </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}`}
@@ -55,19 +113,40 @@ 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>
+        ${entries.length > 0
+          ? html`
+              <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}
         ${row?.jobId
           ? html`
               <div>
@@ -94,7 +173,6 @@ const renderEntryRow = ({
 }) => {
   const runEntry = row?.entry || row || {};
   const runUsage = runEntry?.usage || {};
-  const runStatus = String(runEntry?.status || "unknown");
   const runInputTokens = Number(
     runUsage?.input_tokens ?? runUsage?.inputTokens ?? 0,
   );
@@ -103,60 +181,17 @@ const renderEntryRow = ({
   );
   const runTokens = getCronRunTotalTokens(runEntry);
   const runEstimatedCost = getCronRunEstimatedCost(runEntry);
-  const runTitle = String(runEntry?.jobName || "").trim();
-  const hasRunTitle = runTitle.length > 0;
-  const isDetail = variant === "detail";
   return html`
     <details
       key=${`entry:${rowIndex}:${runEntry.ts}:${runEntry.jobId || ""}`}
       class="ac-history-item"
     >
       <summary class="ac-history-summary">
-        <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>
-            ${isDetail
-              ? html`
-                  <span class="truncate text-xs text-gray-300">
-                    ${formatRowTimestamp(runEntry.ts, variant)}
-                  </span>
-                `
-              : hasRunTitle
-                ? html`
-                    <span class="inline-flex items-center gap-2 min-w-0">
-                      <span class="truncate text-xs text-gray-300"
-                        >${runTitle}</span
-                      >
-                      <span class="text-xs text-gray-500 shrink-0">
-                        ${formatRowTimestamp(runEntry.ts, variant)}
-                      </span>
-                    </span>
-                  `
-                : html`
-                    <span class="truncate text-xs text-gray-300">
-                      ${runEntry.jobId} -
-                      ${formatRowTimestamp(runEntry.ts, variant)}
-                    </span>
-                  `}
-          </span>
-          <span class="inline-flex items-center gap-3 shrink-0 text-xs">
-            <span class=${runStatusClassName(runStatus)}>${runStatus}</span>
-            <span class="text-gray-400"
-              >${formatDurationCompactMs(runEntry.durationMs)}</span
-            >
-            <span class="text-gray-400">${formatTokenCount(runTokens)} tk</span>
-            ${isDetail
-              ? html`<span class="text-gray-500"
-                  >${runDeliveryLabel(runEntry)}</span
-                >`
-              : html`
-                  <span class="text-gray-500"
-                    >${runEstimatedCost == null
-                      ? "—"
-                      : `~${formatCost(runEstimatedCost)}`}</span
-                  >
-                `}
-          </span>
+        <div class="inline-flex items-center gap-2 min-w-0 w-full">
+          <span class="ac-history-toggle shrink-0" aria-hidden="true">▸</span>
+          <div class="min-w-0 flex-1">
+            ${renderEntrySummaryRow({ runEntry, variant })}
+          </div>
         </div>
       </summary>
       <div class="ac-history-body space-y-2 text-xs">

package/lib/public/js/components/sidebar.js

@@ -6,6 +6,7 @@ import { FileTree } from "./file-tree.js";
 import { OverflowMenu, OverflowMenuItem } from "./overflow-menu.js";
 import { UpdateActionButton } from "./update-action-button.js";
 import { SidebarGitPanel } from "./sidebar-git-panel.js";
+import { UpdateModal } from "./update-modal.js";
 import { readUiSettings, writeUiSettings } from "../lib/ui-settings.js";
 
 const html = htm.bind(h);
@@ -62,6 +63,7 @@ export const AppSidebar = ({
     readStoredBrowseBottomPanelHeight,
   );
   const [isResizingBrowsePanels, setIsResizingBrowsePanels] = useState(false);
+  const [updateModalOpen, setUpdateModalOpen] = useState(false);
 
   useEffect(() => {
     const settings = readUiSettings();
@@ -237,10 +239,10 @@ export const AppSidebar = ({
         `,
       )}
       <div class="sidebar-footer">
-        ${acHasUpdate && acLatest && selectedNavId === "general"
+        ${acHasUpdate && acLatest
           ? html`
               <${UpdateActionButton}
-                onClick=${onAcUpdate}
+                onClick=${() => setUpdateModalOpen(true)}
                 loading=${acUpdating}
                 warning=${true}
                 idleLabel=${`Update to v${acLatest}`}
@@ -292,6 +294,16 @@ export const AppSidebar = ({
         </div>
       </div>
     </div>
+    <${UpdateModal}
+      visible=${updateModalOpen}
+      onClose=${() => {
+        if (acUpdating) return;
+        setUpdateModalOpen(false);
+      }}
+      version=${acLatest}
+      onUpdate=${onAcUpdate}
+      updating=${acUpdating}
+    />
   </div>
 `;
 };

package/lib/public/js/components/update-modal.js

@@ -0,0 +1,173 @@
+import { h } from "https://esm.sh/preact";
+import { useEffect, useMemo, useState } from "https://esm.sh/preact/hooks";
+import htm from "https://esm.sh/htm";
+import { marked } from "https://esm.sh/marked";
+import { fetchAlphaclawReleaseNotes } from "../lib/api.js";
+import { ModalShell } from "./modal-shell.js";
+import { ActionButton } from "./action-button.js";
+import { LoadingSpinner } from "./loading-spinner.js";
+import { CloseIcon } from "./icons.js";
+
+const html = htm.bind(h);
+
+const getReleaseTagFromVersion = (version) => {
+  const rawVersion = String(version || "").trim();
+  if (!rawVersion) return "";
+  return rawVersion.startsWith("v") ? rawVersion : `v${rawVersion}`;
+};
+
+const formatPublishedAt = (value) => {
+  const dateMs = Date.parse(String(value || ""));
+  if (!Number.isFinite(dateMs)) return "";
+  try {
+    return new Intl.DateTimeFormat(undefined, {
+      dateStyle: "medium",
+      timeStyle: "short",
+    }).format(new Date(dateMs));
+  } catch {
+    return "";
+  }
+};
+
+const getReleaseUrl = (tag) =>
+  tag
+    ? `https://github.com/chrysb/alphaclaw/releases/tag/${encodeURIComponent(tag)}`
+    : "https://github.com/chrysb/alphaclaw/releases";
+
+export const UpdateModal = ({
+  visible = false,
+  onClose = () => {},
+  version = "",
+  onUpdate = () => {},
+  updating = false,
+}) => {
+  const requestedTag = useMemo(() => getReleaseTagFromVersion(version), [version]);
+  const [loadingNotes, setLoadingNotes] = useState(false);
+  const [notesError, setNotesError] = useState("");
+  const [notesData, setNotesData] = useState(null);
+
+  useEffect(() => {
+    if (!visible) return;
+    let isActive = true;
+    const loadNotes = async () => {
+      setLoadingNotes(true);
+      setNotesError("");
+      try {
+        const data = await fetchAlphaclawReleaseNotes(requestedTag);
+        if (!isActive) return;
+        if (!data?.ok) {
+          setNotesError(data?.error || "Could not load release notes");
+          setNotesData(null);
+          return;
+        }
+        setNotesData(data);
+      } catch (err) {
+        if (!isActive) return;
+        setNotesError(err?.message || "Could not load release notes");
+        setNotesData(null);
+      } finally {
+        if (!isActive) return;
+        setLoadingNotes(false);
+      }
+    };
+    loadNotes();
+    return () => {
+      isActive = false;
+    };
+  }, [visible, requestedTag]);
+
+  const effectiveTag = String(notesData?.tag || requestedTag || "").trim();
+  const effectiveReleaseUrl =
+    String(notesData?.htmlUrl || "").trim() || getReleaseUrl(effectiveTag);
+  const updateLabel = effectiveTag ? `Update to ${effectiveTag}` : "Update now";
+  const publishedAtLabel = formatPublishedAt(notesData?.publishedAt);
+  const releaseBody = String(notesData?.body || "").trim();
+  const releasePreviewHtml = useMemo(
+    () =>
+      marked.parse(releaseBody, {
+        gfm: true,
+        breaks: true,
+      }),
+    [releaseBody],
+  );
+
+  return html`
+    <${ModalShell}
+      visible=${visible}
+      onClose=${onClose}
+      panelClassName="relative bg-modal border border-border rounded-xl p-5 w-full max-w-3xl max-h-[92vh] overflow-hidden flex flex-col gap-4"
+    >
+      <button
+        type="button"
+        onclick=${onClose}
+        class="absolute top-5 right-5 h-8 w-8 inline-flex items-center justify-center rounded-lg ac-btn-secondary"
+        aria-label="Close modal"
+      >
+        <${CloseIcon} className="w-3.5 h-3.5 text-gray-300" />
+      </button>
+      <div class="space-y-1 pr-10">
+        <h3 class="text-sm font-semibold">AlphaClaw release notes</h3>
+        ${publishedAtLabel
+          ? html`<p class="text-xs text-gray-500">Published ${publishedAtLabel}</p>`
+          : null}
+      </div>
+      <div class="ac-surface-inset border border-border rounded-lg p-2 overflow-auto min-h-[220px] max-h-[66vh]">
+        ${loadingNotes
+          ? html`
+              <div class="min-h-[200px] flex items-center justify-center text-gray-400">
+                <span class="inline-flex items-center gap-2 text-sm">
+                  <${LoadingSpinner} className="h-4 w-4" />
+                  Loading release notes...
+                </span>
+              </div>
+            `
+          : notesError
+            ? html`
+                <div class="space-y-2">
+                  <p class="text-sm text-red-300">${notesError}</p>
+                  <a
+                    class="ac-tip-link text-xs"
+                    href=${effectiveReleaseUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                    >View release on GitHub</a
+                  >
+                </div>
+              `
+            : releaseBody
+              ? html`<div
+                  class="file-viewer-preview release-notes-preview"
+                  dangerouslySetInnerHTML=${{ __html: releasePreviewHtml }}
+                ></div>`
+              : html`
+                  <div class="space-y-2">
+                    <p class="text-sm text-gray-300">No release notes were published for this tag.</p>
+                    <a
+                      class="ac-tip-link text-xs"
+                      href=${effectiveReleaseUrl}
+                      target="_blank"
+                      rel="noreferrer"
+                      >Open release on GitHub</a
+                    >
+                  </div>
+                `}
+      </div>
+      <div class="flex items-center justify-end gap-2 pt-1">
+        <${ActionButton}
+          onClick=${onClose}
+          tone="ghost"
+          idleLabel="Later"
+          disabled=${updating}
+        />
+        <${ActionButton}
+          onClick=${onUpdate}
+          tone="warning"
+          idleLabel=${updateLabel}
+          loadingLabel="Updating..."
+          loading=${updating}
+          disabled=${loadingNotes}
+        />
+      </div>
+    </${ModalShell}>
+  `;
+};

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/public/js/lib/api.js

@@ -450,6 +450,42 @@ export async function fetchAlphaclawVersion(refresh = false) {
   return res.json();
 }
 
+export async function fetchAlphaclawReleaseNotes(tag = "") {
+  const normalizedTag = String(tag || "").trim();
+  const query = normalizedTag
+    ? `?${new URLSearchParams({ tag: normalizedTag }).toString()}`
+    : "";
+  try {
+    const res = await authFetch(`/api/alphaclaw/release-notes${query}`);
+    return await parseJsonOrThrow(res, "Could not load release notes");
+  } catch {
+    const endpoint = normalizedTag
+      ? `https://api.github.com/repos/chrysb/alphaclaw/releases/tags/${encodeURIComponent(normalizedTag)}`
+      : "https://api.github.com/repos/chrysb/alphaclaw/releases/latest";
+    const res = await fetch(endpoint, {
+      headers: { Accept: "application/vnd.github+json" },
+    });
+    const text = await res.text();
+    let data = null;
+    try {
+      data = text ? JSON.parse(text) : null;
+    } catch {
+      throw new Error(text || "Could not load release notes");
+    }
+    if (!res.ok) {
+      throw new Error(data?.message || text || "Could not load release notes");
+    }
+    return {
+      ok: true,
+      tag: String(data?.tag_name || normalizedTag || ""),
+      name: String(data?.name || ""),
+      body: String(data?.body || ""),
+      htmlUrl: String(data?.html_url || ""),
+      publishedAt: String(data?.published_at || ""),
+    };
+  }
+}
+
 export async function updateAlphaclaw() {
   const res = await authFetch("/api/alphaclaw/update", { method: "POST" });
   return res.json();

package/lib/server/constants.js

@@ -137,6 +137,8 @@ const kVersionCacheTtlMs = 60 * 1000;
 const kLatestVersionCacheTtlMs = 10 * 60 * 1000;
 const kOpenclawRegistryUrl = "https://registry.npmjs.org/openclaw";
 const kAlphaclawRegistryUrl = "https://registry.npmjs.org/@chrysb%2falphaclaw";
+const kAlphaclawGithubReleasesBaseUrl =
+  "https://api.github.com/repos/chrysb/alphaclaw/releases";
 const kAppDir = kNpmPackageRoot;
 const kMaxPayloadBytes = parsePositiveInt(process.env.WEBHOOK_LOG_MAX_BYTES, 50 * 1024);
 const kWebhookPruneDays = parsePositiveInt(process.env.WEBHOOK_LOG_RETENTION_DAYS, 30);
@@ -424,6 +426,7 @@ module.exports = {
   kLatestVersionCacheTtlMs,
   kOpenclawRegistryUrl,
   kAlphaclawRegistryUrl,
+  kAlphaclawGithubReleasesBaseUrl,
   kAppDir,
   kMaxPayloadBytes,
   kWebhookPruneDays,

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/lib/server/init/register-server-routes.js

@@ -124,6 +124,7 @@ const registerServerRoutes = ({
     getChannelStatus,
     openclawVersionService,
     alphaclawVersionService,
+    kAlphaclawGithubReleasesBaseUrl: constants.kAlphaclawGithubReleasesBaseUrl,
     clawCmd,
     restartGateway,
     OPENCLAW_DIR: constants.OPENCLAW_DIR,

package/lib/server/routes/system.js

@@ -1,6 +1,7 @@
 const { buildManagedPaths } = require("../internal-files-migration");
 const { readOpenclawConfig } = require("../openclaw-config");
 const { hasScopedBindingFields } = require("../utils/channels");
+const https = require("https");
 
 const registerSystemRoutes = ({
   app,
@@ -17,6 +18,7 @@ const registerSystemRoutes = ({
   getChannelStatus,
   openclawVersionService,
   alphaclawVersionService,
+  kAlphaclawGithubReleasesBaseUrl,
   clawCmd,
   restartGateway,
   OPENCLAW_DIR,
@@ -289,6 +291,71 @@ const registerSystemRoutes = ({
     return getSystemCronStatus();
   };
   const isVisibleInEnvars = (def) => def?.visibleInEnvars !== false;
+  const kReleaseNotesCacheTtlMs = 5 * 60 * 1000;
+  let kReleaseNotesCache = {
+    key: "",
+    fetchedAt: 0,
+    payload: null,
+  };
+  const isValidReleaseTag = (value) =>
+    /^[A-Za-z0-9][A-Za-z0-9._-]*$/.test(String(value || ""));
+  const fetchGitHubRelease = (tag = "") =>
+    new Promise((resolve, reject) => {
+      const normalizedTag = String(tag || "").trim();
+      const endpointPath = normalizedTag
+        ? `/tags/${encodeURIComponent(normalizedTag)}`
+        : "/latest";
+      const requestUrl = `${kAlphaclawGithubReleasesBaseUrl}${endpointPath}`;
+      const token = String(process.env.GITHUB_TOKEN || "").trim();
+      const headers = {
+        Accept: "application/vnd.github+json",
+        "User-Agent": "alphaclaw-release-notes",
+      };
+      if (token) headers.Authorization = `Bearer ${token}`;
+      const request = https.get(
+        requestUrl,
+        { headers, timeout: 7000 },
+        (response) => {
+          let raw = "";
+          response.setEncoding("utf8");
+          response.on("data", (chunk) => {
+            raw += chunk;
+          });
+          response.on("end", () => {
+            let parsed = null;
+            try {
+              parsed = raw ? JSON.parse(raw) : null;
+            } catch {
+              parsed = null;
+            }
+            const statusCode = Number(response.statusCode) || 500;
+            if (statusCode >= 400) {
+              const message =
+                parsed?.message ||
+                `GitHub release lookup failed with status ${statusCode}`;
+              return reject(
+                Object.assign(new Error(message), {
+                  statusCode,
+                }),
+              );
+            }
+            resolve({
+              tag: String(parsed?.tag_name || normalizedTag || ""),
+              name: String(parsed?.name || "").trim(),
+              body: String(parsed?.body || ""),
+              htmlUrl: String(parsed?.html_url || "").trim(),
+              publishedAt: String(parsed?.published_at || "").trim(),
+            });
+          });
+        },
+      );
+      request.on("timeout", () => {
+        request.destroy(new Error("GitHub release request timed out"));
+      });
+      request.on("error", (error) => {
+        reject(error);
+      });
+    });
 
   app.get("/api/env", (req, res) => {
     const fileVars = readEnvFile();
@@ -466,6 +533,37 @@ const registerSystemRoutes = ({
     res.json(status);
   });
 
+  app.get("/api/alphaclaw/release-notes", async (req, res) => {
+    const requestedTag = String(req.query.tag || "").trim();
+    if (requestedTag && !isValidReleaseTag(requestedTag)) {
+      return res.status(400).json({ ok: false, error: "Invalid release tag" });
+    }
+    const cacheKey = requestedTag || "latest";
+    const now = Date.now();
+    if (
+      kReleaseNotesCache.payload &&
+      kReleaseNotesCache.key === cacheKey &&
+      now - kReleaseNotesCache.fetchedAt < kReleaseNotesCacheTtlMs
+    ) {
+      return res.json({ ok: true, ...kReleaseNotesCache.payload });
+    }
+    try {
+      const payload = await fetchGitHubRelease(requestedTag);
+      kReleaseNotesCache = {
+        key: cacheKey,
+        fetchedAt: Date.now(),
+        payload,
+      };
+      return res.json({ ok: true, ...payload });
+    } catch (err) {
+      const statusCode = Number(err?.statusCode) || 502;
+      return res.status(statusCode).json({
+        ok: false,
+        error: err?.message || "Could not fetch release notes",
+      });
+    }
+  });
+
   app.post("/api/alphaclaw/update", async (req, res) => {
     console.log("[alphaclaw] /api/alphaclaw/update requested");
     const result = await alphaclawVersionService.updateAlphaclaw();

package/package.json

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