Stats history with year filter, folding and XLSX/CSV export; snippets, read-only links, commit suggestions, weekly review, offline copies, server speech-to-text, planning model, job reports; fal.ai health fix

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

web/src/components/Stats.tsx

@@ -1,5 +1,5 @@
 import { Icon } from "./Icon";
-import { useMemo, useState } from "react";
+import { Fragment, useEffect, useMemo, useState } from "react";
 import { useFetch } from "../hooks";
 import { fmtCompact, fmtCost, fmtDate, fmtNumber, fmtPercent, getLang, useT, type Key } from "../i18n";
 import { navigate } from "../router";
@@ -15,6 +15,9 @@ interface StatsData {
   total: Aggregate;
   by_day: Row<"day">[];
   by_day_model: { day: string; model: string; cost: number; input_tokens: number; output_tokens: number }[];
+  by_month: Row<"month">[];
+  /** First recorded request (any range): the years to choose from. */
+  first_ts: number | null;
   by_model: Row<"model">[];
   by_provider: Row<"provider">[];
   by_agent: Row<"agent">[];
@@ -37,6 +40,16 @@ const RANGES: { key: string; days: number; label: Key }[] = [
 
 type HeatMetric = "requests" | "tokens" | "cost";
 
+/** All months (YYYY-MM, local time) from the month of `fromMs` to the month of `toMs`. */
+function monthRange(fromMs: number, toMs: number): string[] {
+  const out: string[] = [];
+  const d = new Date(fromMs);
+  d.setDate(1);
+  d.setHours(0, 0, 0, 0);
+  for (; d.getTime() <= toMs && out.length < 600; d.setMonth(d.getMonth() + 1)) out.push(`${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`);
+  return out;
+}
+
 function dayKey(ms: number) {
   const d = new Date(ms);
   return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
@@ -51,6 +64,44 @@ function dayRange(fromMs: number, toMs: number, firstDataDay?: string): string[]
   return out;
 }
 
+const FOLD_KEY = "codecraft.statsFolded";
+
+function foldedSet(): Set<string> {
+  try {
+    return new Set(JSON.parse(localStorage.getItem(FOLD_KEY) ?? "[]"));
+  } catch {
+    return new Set();
+  }
+}
+
+/** Panel with a title that folds the content; the state is remembered per device. */
+function Fold({ id, title, children }: { id: string; title: React.ReactNode; children: React.ReactNode }) {
+  const [closed, setClosed] = useState(() => foldedSet().has(id));
+  const toggle = () => {
+    const next = !closed;
+    setClosed(next);
+    try {
+      const set = foldedSet();
+      if (next) set.add(id);
+      else set.delete(id);
+      localStorage.setItem(FOLD_KEY, JSON.stringify([...set]));
+    } catch {
+      /* storage unavailable */
+    }
+  };
+  return (
+    <div className={`panel fold${closed ? " closed" : ""}`}>
+      <h3>
+        <button className="fold-toggle" aria-expanded={!closed} onClick={toggle}>
+          <span className="fold-caret" aria-hidden="true" />
+          {title}
+        </button>
+      </h3>
+      {!closed && children}
+    </div>
+  );
+}
+
 function Kpi({ label, value, sub }: { label: string; value: string; sub?: string }) {
   return (
     <div className="kpi">
@@ -67,8 +118,39 @@ function perMillion(r: Aggregate, currency: string) {
   return tokens > 0 && r.cost > 0 ? fmtCost((r.cost / tokens) * 1_000_000, currency) : "–";
 }
 
-function AggTable({ rows, keyName, label, currency, link }: { rows: (Aggregate & Record<string, any>)[]; keyName: string; label: string; currency: string; link?: (r: any) => void }) {
+function AggTable({
+  rows,
+  keyName,
+  label,
+  currency,
+  link,
+  group,
+}: {
+  rows: (Aggregate & Record<string, any>)[];
+  keyName: string;
+  label: string;
+  currency: string;
+  link?: (r: any) => void;
+  /** Group key of a row (e.g. the provider of a model): groups fold. */
+  group?: (r: any) => string;
+}) {
   const t = useT();
+  const [shut, setShut] = useState<Set<string>>(new Set());
+  const groups = group ? [...new Set(rows.map(group))] : [];
+  const row = (r: (typeof rows)[number]) => (
+    <tr key={r[keyName]}>
+      <td className={group ? "fold-indent" : undefined}>{link ? <a href="#" onClick={(e) => (e.preventDefault(), link(r))}>{r[keyName]}</a> : r[keyName]}</td>
+      <td className="num">{fmtNumber(r.requests)}</td>
+      <td className="num">{fmtCompact(r.input_tokens + r.cache_write_tokens)}</td>
+      <td className="num">{fmtCompact(r.cache_read_tokens)}</td>
+      <td className="num">{fmtCompact(r.output_tokens)}</td>
+      <td className="num">{fmtNumber(r.avg_ttft_ms)} ms</td>
+      <td className="num">{fmtNumber(r.output_tps, 1)}</td>
+      <td className="num">{fmtNumber(r.prefill_tps)}</td>
+      <td className="num">{fmtCost(r.cost, currency)}</td>
+      <td className="num">{perMillion(r, currency)}</td>
+    </tr>
+  );
   return (
     <div style={{ overflowX: "auto" }}>
       <table className="grid">
@@ -87,20 +169,33 @@ function AggTable({ rows, keyName, label, currency, link }: { rows: (Aggregate &
           </tr>
         </thead>
         <tbody>
-          {rows.map((r) => (
-            <tr key={r[keyName]}>
-              <td>{link ? <a href="#" onClick={(e) => (e.preventDefault(), link(r))}>{r[keyName]}</a> : r[keyName]}</td>
-              <td className="num">{fmtNumber(r.requests)}</td>
-              <td className="num">{fmtCompact(r.input_tokens + r.cache_write_tokens)}</td>
-              <td className="num">{fmtCompact(r.cache_read_tokens)}</td>
-              <td className="num">{fmtCompact(r.output_tokens)}</td>
-              <td className="num">{fmtNumber(r.avg_ttft_ms)} ms</td>
-              <td className="num">{fmtNumber(r.output_tps, 1)}</td>
-              <td className="num">{fmtNumber(r.prefill_tps)}</td>
-              <td className="num">{fmtCost(r.cost, currency)}</td>
-              <td className="num">{perMillion(r, currency)}</td>
-            </tr>
-          ))}
+          {group
+            ? groups.map((g) => {
+                const members = rows.filter((r) => group(r) === g);
+                const open = !shut.has(g);
+                return (
+                  <Fragment key={g}>
+                    <tr className="fold-group">
+                      <td>
+                        <button
+                          className="fold-toggle"
+                          aria-expanded={open}
+                          onClick={() => setShut((x) => (x.has(g) ? new Set([...x].filter((k) => k !== g)) : new Set(x).add(g)))}
+                        >
+                          <span className="fold-caret" aria-hidden="true" />
+                          {g} <span className="hint">({members.length})</span>
+                        </button>
+                      </td>
+                      <td className="num">{fmtNumber(members.reduce((a, r) => a + r.requests, 0))}</td>
+                      <td colSpan={6} />
+                      <td className="num">{fmtCost(members.reduce((a, r) => a + r.cost, 0), currency)}</td>
+                      <td />
+                    </tr>
+                    {open && members.map(row)}
+                  </Fragment>
+                );
+              })
+            : rows.map(row)}
         </tbody>
       </table>
     </div>
@@ -117,16 +212,40 @@ export function Stats({ onMenu }: { onMenu: () => void }) {
   const isAdmin = useStore((s) => s.me?.role === "admin");
   const users = useFetch<User[]>(isAdmin ? "/users" : null).data ?? [];
   const [userFilter, setUserFilter] = useState("");
-  const days = RANGES.find((r) => r.key === range)!.days;
   const tz = -new Date().getTimezoneOffset();
   // Stable per range: rounded to the minute so the URL doesn't change on every render.
   const now = Math.floor(Date.now() / 60000) * 60000 + 60000;
-  const from = days ? now - days * 86400000 : 0;
-  const { data, error } = useFetch<StatsData>(`/stats?from=${from}&to=${now}&tz=${tz}${userFilter ? `&user=${userFilter}` : ""}`);
+  // "y2025": that calendar year (local time); otherwise a rolling window.
+  const year = /^y(\d{4})$/.test(range) ? Number(range.slice(1)) : 0;
+  const days = RANGES.find((r) => r.key === range)?.days ?? 0;
+  const from = year ? new Date(year, 0, 1).getTime() : days ? now - days * 86400000 : 0;
+  const to = year ? Math.min(now, new Date(year + 1, 0, 1).getTime()) : now;
+  const { data, error } = useFetch<StatsData>(`/stats?from=${from}&to=${to}&tz=${tz}${userFilter ? `&user=${userFilter}` : ""}`);
+  /** Download of what is shown: all tables as XLSX, or one table as CSV. */
+  const exportAs = (what: string) => {
+    if (!what) return;
+    const q = `from=${from}&to=${to}&tz=${tz}&lang=${getLang()}${userFilter ? `&user=${userFilter}` : ""}`;
+    const a = document.createElement("a");
+    a.href = `/api/stats/export?${q}&format=${what === "xlsx" ? "xlsx" : "csv&table=" + what.slice(4)}`;
+    a.download = "";
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+  };
+  // Years since the first recorded request (the data survives indefinitely).
+  const [firstYear, setFirstYear] = useState(new Date().getFullYear());
+  useEffect(() => {
+    if (data?.first_ts) setFirstYear(new Date(data.first_ts).getFullYear());
+  }, [data?.first_ts]);
+  const years = Array.from({ length: new Date().getFullYear() - firstYear + 1 }, (_, i) => new Date().getFullYear() - i);
+  const spanDays = ((data?.to ?? now) - (data?.from || data?.first_ts || now)) / 86400000;
+  // Long ranges: one bar per month instead of one per day.
+  const monthly = spanDays > 120;
 
   const view = useMemo(() => {
     if (!data) return undefined;
-    const cats = dayRange(data.from, data.to, data.by_day[0]?.day);
+    const bucket = (day: string) => (monthly ? day.slice(0, 7) : day);
+    const cats = monthly ? monthRange(data.from || data.first_ts || data.to, data.to) : dayRange(data.from, data.to, data.by_day[0]?.day);
     // Up to 7 models by cost get their own color; the rest fold into "Other".
     const ranked = [...data.by_model].sort((a, b) => b.cost - a.cost || b.requests - a.requests);
     const named = ranked.slice(0, ranked.length > 8 ? 7 : 8).map((m) => m.model);
@@ -135,7 +254,7 @@ export function Stats({ onMenu }: { onMenu: () => void }) {
     const costByDay = cats.map(() => ({}) as Record<string, number>);
     const idx = new Map(cats.map((c, i) => [c, i]));
     for (const r of data.by_day_model) {
-      const i = idx.get(r.day);
+      const i = idx.get(bucket(r.day));
       if (i === undefined) continue;
       const key = named.includes(r.model) ? r.model : other;
       costByDay[i][key] = (costByDay[i][key] ?? 0) + r.cost;
@@ -146,7 +265,7 @@ export function Stats({ onMenu }: { onMenu: () => void }) {
       { key: "output", label: t("stats.output"), color: SERIES[2] },
     ];
     const tokensByDay = cats.map((c): Record<string, number> => {
-      const d = data.by_day.find((x) => x.day === c);
+      const d = monthly ? data.by_month.find((x) => x.month === c) : data.by_day.find((x) => x.day === c);
       return d ? { input: d.input_tokens + d.cache_write_tokens, cache: d.cache_read_tokens, output: d.output_tokens } : {};
     });
     // Rolling window: the last 14 days, today at the bottom.
@@ -174,10 +293,12 @@ export function Stats({ onMenu }: { onMenu: () => void }) {
       return { label: `${wd.format(date)} ${dm.format(date)}`, title: full.format(date) };
     });
     return { cats, modelSeries, costByDay, tokenSeries, tokensByDay, cells, heatRows };
-  }, [data, heat, t]);
+  }, [data, heat, t, monthly]);
 
   const dayLabel = (d: string) =>
-    new Intl.DateTimeFormat(getLang(), { day: "numeric", month: "short" }).format(new Date(`${d}T00:00:00`));
+    monthly
+      ? new Intl.DateTimeFormat(getLang(), { month: "short", year: "2-digit" }).format(new Date(`${d}-01T00:00:00`))
+      : new Intl.DateTimeFormat(getLang(), { day: "numeric", month: "short" }).format(new Date(`${d}T00:00:00`));
   const cur = data?.currency ?? "USD";
   const tot = data?.total;
   const heatFormat = (v: number) => (heat === "cost" ? fmtCost(v, cur) : fmtCompact(v));
@@ -203,6 +324,16 @@ export function Stats({ onMenu }: { onMenu: () => void }) {
             </button>
           ))}
         </div>
+        {years.length > 1 && (
+          <select value={year ? range : ""} onChange={(e) => e.target.value && setRange(e.target.value)} aria-label={t("stats.year")} className={year ? "active" : ""}>
+            <option value="">{t("stats.year")}</option>
+            {years.map((y) => (
+              <option key={y} value={`y${y}`}>
+                {y}
+              </option>
+            ))}
+          </select>
+        )}
         {isAdmin && (
           <select value={userFilter} onChange={(e) => setUserFilter(e.target.value)} aria-label={t("stats.user")}>
             <option value="">{t("stats.allUsers")}</option>
@@ -213,6 +344,15 @@ export function Stats({ onMenu }: { onMenu: () => void }) {
             ))}
           </select>
         )}
+        <select value="" onChange={(e) => exportAs(e.target.value)} aria-label={t("stats.export")} title={t("stats.exportHint")}>
+          <option value="">{t("stats.export")}</option>
+          <option value="xlsx">{t("stats.exportXlsx")}</option>
+          {(["day", "month", "model", "provider", "agent", "user", "session"] as const).map((k) => (
+            <option key={k} value={`csv:${k}`}>
+              {t("stats.exportCsv", { table: t(`stats.table.${k}` as Key) })}
+            </option>
+          ))}
+        </select>
         <button className="small" onClick={() => setTableView(!tableView)}>
           {tableView ? t("stats.chartView") : t("stats.tableView")}
         </button>
@@ -238,61 +378,51 @@ export function Stats({ onMenu }: { onMenu: () => void }) {
               {tot.requests === 0 ? (
                 <div className="empty">{t("stats.noData")}</div>
               ) : tableView ? (
-                <div className="panel">
-                  <h3>{t("stats.perDay")}</h3>
+                <Fold id="perDay" title={t("stats.perDay")}>
                   <AggTable rows={data.by_day} keyName="day" label={t("stats.day")} currency={cur} />
-                </div>
+                </Fold>
               ) : (
                 <>
-                  <div className="panel">
-                    <h3>{t("stats.costPerDay")}</h3>
+                  <Fold id="costPerDay" title={t(monthly ? "stats.costPerMonth" : "stats.costPerDay")}>
                     <Legend series={view.modelSeries} />
                     <StackedBars categories={view.cats} categoryLabel={dayLabel} series={view.modelSeries} values={view.costByDay} format={(v) => fmtCost(v, cur)} />
-                  </div>
-                  <div className="panel">
-                    <h3>{t("stats.tokensPerDay")}</h3>
+                  </Fold>
+                  <Fold id="tokensPerDay" title={t(monthly ? "stats.tokensPerMonth" : "stats.tokensPerDay")}>
                     <Legend series={view.tokenSeries} />
                     <StackedBars categories={view.cats} categoryLabel={dayLabel} series={view.tokenSeries} values={view.tokensByDay} format={fmtCompact} />
-                  </div>
-                  <div className="panel">
-                    <h3>
-                      {t("stats.heatmap")}
-                      <span className="spacer" />
-                      <select value={heat} onChange={(e) => setHeat(e.target.value as HeatMetric)}>
+                  </Fold>
+                  <Fold id="heatmap" title={t("stats.heatmap")}>
+                    <div className="row" style={{ justifyContent: "flex-end", marginBottom: 6 }}>
+                      <select value={heat} onChange={(e) => setHeat(e.target.value as HeatMetric)} aria-label={t("stats.heatmap")}>
                         <option value="requests">{t("stats.requests")}</option>
                         <option value="tokens">{t("stats.tokens")}</option>
                         <option value="cost">{t("stats.cost")}</option>
                       </select>
-                    </h3>
+                    </div>
                     <Heatmap cells={view.cells} rows={view.heatRows} format={heatFormat} />
-                  </div>
+                  </Fold>
                 </>
               )}
 
               {tot.requests > 0 && (
                 <>
-                  <div className="panel">
-                    <h3>{t("stats.byModel")}</h3>
-                    <AggTable rows={data.by_model} keyName="model" label={t("stats.model")} currency={cur} />
-                  </div>
-                  <div className="panel">
-                    <h3>{t("stats.byProvider")}</h3>
+                  <Fold id="byModel" title={t("stats.byModel")}>
+                    <AggTable rows={data.by_model} keyName="model" label={t("stats.model")} currency={cur} group={(r) => String(r.model).split("/")[0]} />
+                  </Fold>
+                  <Fold id="byProvider" title={t("stats.byProvider")}>
                     <AggTable rows={data.by_provider} keyName="provider" label={t("stats.provider")} currency={cur} />
-                  </div>
-                  <div className="panel">
-                    <h3>{t("stats.byAgent")}</h3>
+                  </Fold>
+                  <Fold id="byAgent" title={t("stats.byAgent")}>
                     <AggTable rows={data.by_agent} keyName="agent" label={t("stats.agent")} currency={cur} />
-                  </div>
+                  </Fold>
                   {isAdmin && !userFilter && data.by_user.length > 1 && (
-                    <div className="panel">
-                      <h3>{t("stats.byUser")}</h3>
+                    <Fold id="byUser" title={t("stats.byUser")}>
                       <AggTable rows={data.by_user} keyName="user" label={t("stats.user")} currency={cur} />
-                    </div>
+                    </Fold>
                   )}
-                  <div className="panel">
-                    <h3>{t("stats.topSessions")}</h3>
+                  <Fold id="topSessions" title={t("stats.topSessions")}>
                     <AggTable rows={data.top_sessions} keyName="title" label={t("stats.session")} currency={cur} link={(r) => !r.session_id.startsWith("cli:") && navigate(`/s/${r.session_id}`)} />
-                  </div>
+                  </Fold>
                 </>
               )}
             </>