@chrysb/alphaclaw 0.3.5-beta.1 → 0.4.1-beta.0

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

@@ -0,0 +1,147 @@
+import { h } from "https://esm.sh/preact";
+import { useEffect, useState } from "https://esm.sh/preact/hooks";
+import htm from "https://esm.sh/htm";
+import { formatInteger, formatUsd } from "../../lib/format.js";
+import { SegmentedControl } from "../segmented-control.js";
+import { kRangeOptions, kUsageSourceOrder } from "./constants.js";
+import { renderSourceLabel } from "./formatters.js";
+
+const html = htm.bind(h);
+
+const formatCountLabel = (value, singular, plural) => {
+  const count = Number(value || 0);
+  const label = count === 1 ? singular : plural;
+  return `${formatInteger(count)} ${label}`;
+};
+
+const SummaryCard = ({ title, tokens, cost }) => html`
+  <div class="bg-surface border border-border rounded-xl p-4">
+    <h3 class="card-label text-xs">${title}</h3>
+    <div class="text-lg font-semibold mt-1">
+      ${formatInteger(tokens)}
+      <span class="text-xs text-[var(--text-muted)] ml-1">tokens</span>
+    </div>
+    <div class="text-xs text-[var(--text-muted)] mt-1">${formatUsd(cost)}</div>
+  </div>
+`;
+
+const AgentCostDistribution = ({ summary }) => {
+  const agents = Array.isArray(summary?.costByAgent?.agents) ? summary.costByAgent.agents : [];
+  const [selectedAgent, setSelectedAgent] = useState(() => String(agents[0]?.agent || ""));
+  useEffect(() => {
+    if (agents.length === 0) {
+      if (selectedAgent) setSelectedAgent("");
+      return;
+    }
+    const hasSelectedAgent = agents.some((row) => String(row.agent || "") === selectedAgent);
+    if (!hasSelectedAgent) setSelectedAgent(String(agents[0]?.agent || ""));
+  }, [agents, selectedAgent]);
+  const selectedAgentRow =
+    agents.find((row) => String(row.agent || "") === selectedAgent) || agents[0] || null;
+
+  return html`
+    <div class="bg-surface border border-border rounded-xl p-4">
+      ${agents.length === 0
+        ? html`
+            <div class="flex flex-wrap items-start sm:items-center justify-between gap-3 mb-3">
+              <h2 class="card-label text-xs">Cost breakdown</h2>
+            </div>
+            <p class="text-xs text-gray-500">No agent usage recorded for this range.</p>
+          `
+        : html`
+            <div class="space-y-3">
+              <div class="flex flex-wrap items-start sm:items-center justify-between gap-3">
+                <h2 class="card-label text-xs">Cost breakdown</h2>
+                <div class="inline-flex flex-wrap items-center gap-3 text-xs text-gray-500">
+                  <span class="text-gray-300">${formatUsd(selectedAgentRow?.totalCost)}</span>
+                  <span>${formatInteger(selectedAgentRow?.totalTokens)} tok</span>
+                  <label class="inline-flex items-center gap-2 text-xs text-gray-500">
+                    <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=${String(selectedAgentRow?.agent || "")}
+                      onChange=${(e) => setSelectedAgent(String(e.currentTarget?.value || ""))}
+                    >
+                      ${agents.map(
+                        (agentRow) => html`
+                          <option value=${String(agentRow.agent || "")}>
+                            ${String(agentRow.agent || "unknown")}
+                          </option>
+                        `,
+                      )}
+                    </select>
+                  </label>
+                </div>
+              </div>
+              <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
+                ${kUsageSourceOrder.map((sourceName) => {
+                  const sourceRow = (selectedAgentRow?.sourceBreakdown || []).find(
+                    (row) => String(row.source || "") === sourceName,
+                  ) || { source: sourceName, totalCost: 0, totalTokens: 0, turnCount: 0 };
+                  return html`
+                    <div class="ac-surface-inset px-2.5 py-2">
+                      <p class="text-[11px] text-gray-500">${renderSourceLabel(sourceRow.source)}</p>
+                      <p class="text-xs text-gray-300 mt-0.5">${formatUsd(sourceRow.totalCost)}</p>
+                      <p class="text-[11px] text-gray-500 mt-0.5">
+                        ${formatInteger(sourceRow.totalTokens)} tok
+                        ·
+                        ${formatCountLabel(sourceRow.turnCount, "turn", "turns")}
+                      </p>
+                    </div>
+                  `;
+                })}
+              </div>
+            </div>
+          `}
+    </div>
+  `;
+};
+
+export const OverviewSection = ({
+  summary = null,
+  periodSummary,
+  metric = "tokens",
+  days = 30,
+  overviewCanvasRef,
+  onDaysChange = () => {},
+  onMetricChange = () => {},
+}) => html`
+  <div class="space-y-4">
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
+      <${SummaryCard} title="Today" tokens=${periodSummary.today.tokens} cost=${periodSummary.today.cost} />
+      <${SummaryCard}
+        title="Last 7 days"
+        tokens=${periodSummary.week.tokens}
+        cost=${periodSummary.week.cost}
+      />
+      <${SummaryCard}
+        title="Last 30 days"
+        tokens=${periodSummary.month.tokens}
+        cost=${periodSummary.month.cost}
+      />
+    </div>
+    <div class="bg-surface border border-border rounded-xl p-4">
+      <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>
+        <div class="flex items-center gap-2">
+          <${SegmentedControl}
+            options=${kRangeOptions.map((option) => ({ label: option.label, value: option.value }))}
+            value=${days}
+            onChange=${onDaysChange}
+          />
+          <${SegmentedControl}
+            options=${[
+              { label: "tokens", value: "tokens" },
+              { label: "cost", value: "cost" },
+            ]}
+            value=${metric}
+            onChange=${onMetricChange}
+          />
+        </div>
+      </div>
+      <div style=${{ height: "280px" }}>
+        <canvas ref=${overviewCanvasRef}></canvas>
+      </div>
+    </div>
+    <${AgentCostDistribution} summary=${summary} />
+  </div>
+`;

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

@@ -0,0 +1,175 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import {
+  formatDurationCompactMs,
+  formatInteger,
+  formatLocaleDateTimeWithTodayTime,
+  formatUsd,
+} from "../../lib/format.js";
+import { kBadgeToneClass } from "./constants.js";
+
+const html = htm.bind(h);
+
+const formatCountLabel = (value, singular, plural) => {
+  const count = Number(value || 0);
+  const label = count === 1 ? singular : plural;
+  return `${formatInteger(count)} ${label}`;
+};
+
+const SessionBadges = ({ session }) => {
+  const labels = session?.labels;
+  if (!Array.isArray(labels) || labels.length === 0) {
+    const fallback = String(session?.sessionKey || session?.sessionId || "");
+    return html`<span class="truncate">${fallback}</span>`;
+  }
+  return html`
+    <span class="inline-flex items-center gap-1.5 flex-wrap">
+      ${labels.map(
+        (badge) => html`
+          <span
+            class=${`inline-flex items-center px-1.5 py-0.5 rounded border text-[11px] leading-tight ${kBadgeToneClass[badge.tone] || kBadgeToneClass.gray}`}
+          >
+            ${badge.label}
+          </span>
+        `,
+      )}
+    </span>
+  `;
+};
+
+const SessionInlineDetail = ({
+  item,
+  expandedSessionIds,
+  loadingDetailById,
+  sessionDetailById,
+}) => {
+  const itemSessionId = String(item.sessionId || "");
+  const isExpanded = expandedSessionIds.includes(itemSessionId);
+  if (!isExpanded) return null;
+  const detail = sessionDetailById[itemSessionId];
+  const loadingDetail = !!loadingDetailById[itemSessionId];
+  if (loadingDetail) {
+    return html`
+      <div class="ac-history-body">
+        <p class="text-xs text-gray-500">Loading session detail...</p>
+      </div>
+    `;
+  }
+  if (!detail) {
+    return html`
+      <div class="ac-history-body">
+        <p class="text-xs text-gray-500">Session detail not available.</p>
+      </div>
+    `;
+  }
+  const sessionKeyValue = String(
+    detail.sessionKey || item.sessionKey || detail.sessionId || item.sessionId || "",
+  ).trim();
+  return html`
+    <div class="ac-history-body space-y-3 border-0 pt-0 mt-0">
+      <div>
+        <p class="text-[11px] text-gray-500 mb-1">Session key</p>
+        <p class="text-xs text-gray-300 font-mono break-all">${sessionKeyValue || "n/a"}</p>
+      </div>
+      <div class="mt-1.5">
+        <p class="text-[11px] text-gray-500 mb-1">Model breakdown</p>
+        ${(detail.modelBreakdown || []).length === 0
+          ? html`<p class="text-xs text-gray-500">No model usage recorded.</p>`
+          : html`
+              <div class="space-y-1.5">
+                ${(detail.modelBreakdown || []).map(
+                  (row) => html`
+                    <div class="flex items-center justify-between gap-3 text-xs px-1 py-0.5 rounded hover:bg-white/5 transition-colors">
+                      <span class="text-gray-300 truncate">${row.model || "unknown"}</span>
+                      <span class="inline-flex items-center gap-3 text-gray-500 shrink-0">
+                        <span>${formatInteger(row.totalTokens)} tok</span>
+                        <span>${formatUsd(row.totalCost)}</span>
+                        <span>${formatCountLabel(row.turnCount, "turn", "turns")}</span>
+                      </span>
+                    </div>
+                  `,
+                )}
+              </div>
+            `}
+      </div>
+      <div>
+        <p class="text-[11px] text-gray-500 mb-1">Tool usage</p>
+        ${(detail.toolUsage || []).length === 0
+          ? html`<p class="text-xs text-gray-500">No tool calls recorded.</p>`
+          : html`
+              <div class="space-y-1.5">
+                ${(detail.toolUsage || []).map(
+                  (row) => html`
+                    <div class="flex items-center justify-between gap-3 text-xs px-1 py-0.5 rounded hover:bg-white/5 transition-colors">
+                      <span class="text-gray-300 truncate">${row.toolName}</span>
+                      <span class="inline-flex items-center gap-3 text-gray-500 shrink-0">
+                        <span>${formatCountLabel(row.callCount, "call", "calls")}</span>
+                        <span>${(Number(row.errorRate || 0) * 100).toFixed(1)}% err</span>
+                        <span>${formatDurationCompactMs(row.avgDurationMs)}</span>
+                      </span>
+                    </div>
+                  `,
+                )}
+              </div>
+            `}
+      </div>
+    </div>
+  `;
+};
+
+export const SessionsSection = ({
+  sessions = [],
+  loadingSessions = false,
+  expandedSessionIds = [],
+  loadingDetailById = {},
+  sessionDetailById = {},
+  onToggleSession = () => {},
+}) => html`
+  <div class="bg-surface border border-border rounded-xl p-4">
+    <h2 class="card-label text-xs mb-3">Sessions</h2>
+    <div class="ac-history-list">
+      ${sessions.length === 0
+        ? html`<p class="text-xs text-gray-500">
+            ${loadingSessions ? "Loading sessions..." : "No sessions recorded yet."}
+          </p>`
+        : sessions.map(
+            (item) => html`
+              <details
+                class="ac-history-item"
+                open=${expandedSessionIds.includes(String(item.sessionId || ""))}
+                ontoggle=${(e) => {
+                  const itemSessionId = String(item.sessionId || "");
+                  const isOpen = !!e.currentTarget?.open;
+                  onToggleSession(itemSessionId, isOpen);
+                }}
+              >
+                <summary class="ac-history-summary hover:bg-white/5 transition-colors">
+                  <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>
+                      <${SessionBadges} session=${item} />
+                    </span>
+                    <span class="inline-flex items-center gap-3 shrink-0 text-xs text-gray-500">
+                      <span>${formatInteger(item.totalTokens)} tok</span>
+                      <span>${formatUsd(item.totalCost)}</span>
+                      <span>
+                        ${formatLocaleDateTimeWithTodayTime(item.lastActivityMs, {
+                          fallback: "n/a",
+                          valueIsEpochMs: true,
+                        })}
+                      </span>
+                    </span>
+                  </div>
+                </summary>
+                <${SessionInlineDetail}
+                  item=${item}
+                  expandedSessionIds=${expandedSessionIds}
+                  loadingDetailById=${loadingDetailById}
+                  sessionDetailById=${sessionDetailById}
+                />
+              </details>
+            `,
+          )}
+    </div>
+  </div>
+`;

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

@@ -0,0 +1,241 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "https://esm.sh/preact/hooks";
+import {
+  fetchUsageSessionDetail,
+  fetchUsageSessions,
+  fetchUsageSummary,
+} from "../../lib/api.js";
+import { formatInteger, formatUsd } from "../../lib/format.js";
+import { readUiSettings, writeUiSettings } from "../../lib/ui-settings.js";
+import {
+  kDefaultUsageDays,
+  kDefaultUsageMetric,
+  kUsageDaysUiSettingKey,
+  kUsageMetricUiSettingKey,
+} from "./constants.js";
+import { toChartColor, toLocalDayKey } from "./formatters.js";
+
+export const useUsageTab = ({ sessionId = "" }) => {
+  const [days, setDays] = useState(() => {
+    const settings = readUiSettings();
+    const parsedDays = Number.parseInt(String(settings[kUsageDaysUiSettingKey] ?? ""), 10);
+    return [7, 30, 90].includes(parsedDays) ? parsedDays : kDefaultUsageDays;
+  });
+  const [metric, setMetric] = useState(() => {
+    const settings = readUiSettings();
+    return settings[kUsageMetricUiSettingKey] === "cost" ? "cost" : kDefaultUsageMetric;
+  });
+  const [summary, setSummary] = useState(null);
+  const [sessions, setSessions] = useState([]);
+  const [sessionDetailById, setSessionDetailById] = useState({});
+  const [loadingSummary, setLoadingSummary] = useState(false);
+  const [loadingSessions, setLoadingSessions] = useState(false);
+  const [loadingDetailById, setLoadingDetailById] = useState({});
+  const [expandedSessionIds, setExpandedSessionIds] = useState(() =>
+    sessionId ? [String(sessionId)] : [],
+  );
+  const [error, setError] = useState("");
+  const overviewCanvasRef = useRef(null);
+  const overviewChartRef = useRef(null);
+
+  const loadSummary = useCallback(async () => {
+    setLoadingSummary(true);
+    setError("");
+    try {
+      const data = await fetchUsageSummary(days);
+      setSummary(data.summary || null);
+    } catch (err) {
+      setError(err.message || "Could not load usage summary");
+    } finally {
+      setLoadingSummary(false);
+    }
+  }, [days]);
+
+  const loadSessions = useCallback(async () => {
+    setLoadingSessions(true);
+    try {
+      const data = await fetchUsageSessions(100);
+      setSessions(Array.isArray(data.sessions) ? data.sessions : []);
+    } catch (err) {
+      setError(err.message || "Could not load sessions");
+    } finally {
+      setLoadingSessions(false);
+    }
+  }, []);
+
+  const loadSessionDetail = useCallback(async (selectedSessionId) => {
+    const safeSessionId = String(selectedSessionId || "").trim();
+    if (!safeSessionId) return;
+    setLoadingDetailById((currentValue) => ({
+      ...currentValue,
+      [safeSessionId]: true,
+    }));
+    try {
+      const detailPayload = await fetchUsageSessionDetail(safeSessionId);
+      setSessionDetailById((currentValue) => ({
+        ...currentValue,
+        [safeSessionId]: detailPayload.detail || null,
+      }));
+    } catch (err) {
+      setError(err.message || "Could not load session detail");
+    } finally {
+      setLoadingDetailById((currentValue) => ({
+        ...currentValue,
+        [safeSessionId]: false,
+      }));
+    }
+  }, []);
+
+  useEffect(() => {
+    loadSummary();
+  }, [loadSummary]);
+
+  useEffect(() => {
+    const settings = readUiSettings();
+    settings[kUsageDaysUiSettingKey] = days;
+    settings[kUsageMetricUiSettingKey] = metric;
+    writeUiSettings(settings);
+  }, [days, metric]);
+
+  useEffect(() => {
+    loadSessions();
+  }, [loadSessions]);
+
+  useEffect(() => {
+    const safeSessionId = String(sessionId || "").trim();
+    if (!safeSessionId) return;
+    setExpandedSessionIds((currentValue) =>
+      currentValue.includes(safeSessionId) ? currentValue : [...currentValue, safeSessionId],
+    );
+    if (!sessionDetailById[safeSessionId] && !loadingDetailById[safeSessionId]) {
+      loadSessionDetail(safeSessionId);
+    }
+  }, [sessionId, sessionDetailById, loadingDetailById, loadSessionDetail]);
+
+  const periodSummary = useMemo(() => {
+    const rows = Array.isArray(summary?.daily) ? summary.daily : [];
+    const now = new Date();
+    const dayKey = toLocalDayKey(now);
+    const weekStart = toLocalDayKey(new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000));
+    const monthStart = toLocalDayKey(new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000));
+    const zero = { tokens: 0, cost: 0 };
+    return rows.reduce(
+      (acc, row) => {
+        const tokens = Number(row.totalTokens || 0);
+        const cost = Number(row.totalCost || 0);
+        if (String(row.date) === dayKey) {
+          acc.today.tokens += tokens;
+          acc.today.cost += cost;
+        }
+        if (String(row.date) >= weekStart) {
+          acc.week.tokens += tokens;
+          acc.week.cost += cost;
+        }
+        if (String(row.date) >= monthStart) {
+          acc.month.tokens += tokens;
+          acc.month.cost += cost;
+        }
+        return acc;
+      },
+      {
+        today: { ...zero },
+        week: { ...zero },
+        month: { ...zero },
+      },
+    );
+  }, [summary]);
+
+  const overviewDatasets = useMemo(() => {
+    const rows = Array.isArray(summary?.daily) ? summary.daily : [];
+    const allModels = new Set();
+    for (const dayRow of rows) {
+      for (const modelRow of dayRow.models || []) {
+        allModels.add(String(modelRow.model || "unknown"));
+      }
+    }
+    const labels = rows.map((row) => String(row.date || ""));
+    const datasets = Array.from(allModels).map((model) => ({
+      label: model,
+      data: rows.map((row) => {
+        const found = (row.models || []).find((m) => String(m.model || "") === model);
+        if (!found) return 0;
+        return metric === "cost" ? Number(found.totalCost || 0) : Number(found.totalTokens || 0);
+      }),
+      backgroundColor: toChartColor(model),
+    }));
+    return { labels, datasets };
+  }, [summary, metric]);
+
+  useEffect(() => {
+    const canvas = overviewCanvasRef.current;
+    const Chart = window.Chart;
+    if (!canvas || !Chart) return;
+    if (overviewChartRef.current) {
+      overviewChartRef.current.destroy();
+      overviewChartRef.current = null;
+    }
+    overviewChartRef.current = new Chart(canvas, {
+      type: "bar",
+      data: overviewDatasets,
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        interaction: { mode: "index", intersect: false },
+        scales: {
+          x: { stacked: true, ticks: { color: "rgba(156,163,175,1)" } },
+          y: {
+            stacked: true,
+            ticks: {
+              color: "rgba(156,163,175,1)",
+              callback: (v) => (metric === "cost" ? `$${Number(v).toFixed(2)}` : formatInteger(v)),
+            },
+          },
+        },
+        plugins: {
+          legend: {
+            labels: { color: "rgba(209,213,219,1)", boxWidth: 10, boxHeight: 10 },
+          },
+          tooltip: {
+            callbacks: {
+              label: (context) => {
+                const value = Number(context.parsed.y || 0);
+                return metric === "cost"
+                  ? `${context.dataset.label}: ${formatUsd(value)}`
+                  : `${context.dataset.label}: ${formatInteger(value)} tokens`;
+              },
+            },
+          },
+        },
+      },
+    });
+    return () => {
+      if (overviewChartRef.current) {
+        overviewChartRef.current.destroy();
+        overviewChartRef.current = null;
+      }
+    };
+  }, [overviewDatasets, metric]);
+
+  return {
+    state: {
+      days,
+      metric,
+      summary,
+      sessions,
+      sessionDetailById,
+      loadingSummary,
+      loadingSessions,
+      loadingDetailById,
+      expandedSessionIds,
+      error,
+      periodSummary,
+      overviewCanvasRef,
+    },
+    actions: {
+      setDays,
+      setMetric,
+      loadSummary,
+      loadSessionDetail,
+      setExpandedSessionIds,
+    },
+  };
+};