@nastechai/agent 0.16.0 → 0.17.0

package/src/pages/AnalyticsPage.tsx

@@ -0,0 +1,601 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react";
+import {
+  ArrowDown,
+  ArrowUp,
+  ArrowUpDown,
+  BarChart3,
+  Brain,
+  Cpu,
+  RefreshCw,
+  TrendingUp,
+} from "lucide-react";
+import { api } from "@/lib/api";
+import type {
+  AnalyticsResponse,
+  AnalyticsDailyEntry,
+  AnalyticsModelEntry,
+  AnalyticsSkillEntry,
+} from "@/lib/api";
+import { timeAgo } from "@/lib/utils";
+import { Button } from "@nastechai/ui/ui/components/button";
+import { Spinner } from "@nastechai/ui/ui/components/spinner";
+import { Stats } from "@nastechai/ui/ui/components/stats";
+import { Card, CardContent, CardHeader, CardTitle } from "@nastechai/ui/ui/components/card";
+import { Badge } from "@nastechai/ui/ui/components/badge";
+import { usePageHeader } from "@/contexts/usePageHeader";
+import { useI18n } from "@/i18n";
+import { PluginSlot } from "@/plugins";
+
+const PERIODS = [
+  { label: "7d", days: 7 },
+  { label: "30d", days: 30 },
+  { label: "90d", days: 90 },
+] as const;
+
+const CHART_HEIGHT_PX = 160;
+
+function formatTokens(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+  return String(n);
+}
+
+function formatDate(day: string): string {
+  try {
+    const d = new Date(day + "T00:00:00");
+    return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+  } catch {
+    return day;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Sorting
+// ---------------------------------------------------------------------------
+
+function useTableSort<T>(
+  data: T[],
+  defaultKey: keyof T & string,
+  defaultDir: "asc" | "desc" = "desc",
+) {
+  const [sortKey, setSortKey] = useState<string>(defaultKey);
+  const [sortDir, setSortDir] = useState<"asc" | "desc">(defaultDir);
+
+  const sorted = useMemo(() => {
+    return [...data].sort((a, b) => {
+      const aVal = a[sortKey as keyof T];
+      const bVal = b[sortKey as keyof T];
+      // Nulls always last regardless of direction
+      if (aVal === null || aVal === undefined) return 1;
+      if (bVal === null || bVal === undefined) return -1;
+      if (aVal === bVal) return 0;
+      const cmp = aVal > bVal ? 1 : -1;
+      return sortDir === "asc" ? cmp : -cmp;
+    });
+  }, [data, sortKey, sortDir]);
+
+  const toggle = useCallback(
+    (key: string) => {
+      if (key === sortKey) {
+        setSortDir((d) => (d === "asc" ? "desc" : "asc"));
+      } else {
+        setSortKey(key);
+        setSortDir("desc");
+      }
+    },
+    [sortKey],
+  );
+
+  return { sorted, sortKey, sortDir, toggle };
+}
+
+function SortHeader({
+  label,
+  col,
+  sortKey,
+  sortDir,
+  toggle,
+  className,
+}: {
+  label: string;
+  col: string;
+  sortKey: string;
+  sortDir: "asc" | "desc";
+  toggle: (key: string) => void;
+  className?: string;
+}) {
+  const active = col === sortKey;
+  return (
+    <th
+      onClick={() => toggle(col)}
+      className={`cursor-pointer select-none ${className ?? ""}`}
+    >
+      <span className="inline-flex items-center gap-1.5 rounded px-1 -mx-1 py-0.5 hover:bg-muted/40 transition-colors">
+        {label}
+        {active ? (
+          sortDir === "asc" ? (
+            <ArrowUp className="h-3.5 w-3.5 text-foreground/80 shrink-0" />
+          ) : (
+            <ArrowDown className="h-3.5 w-3.5 text-foreground/80 shrink-0" />
+          )
+        ) : (
+          <ArrowUpDown className="h-3 w-3 text-text-tertiary shrink-0" />
+        )}
+      </span>
+    </th>
+  );
+}
+
+
+
+function TokenBarChart({ daily }: { daily: AnalyticsDailyEntry[] }) {
+  const { t } = useI18n();
+  if (daily.length === 0) return null;
+
+  const maxTokens = Math.max(
+    ...daily.map((d) => d.input_tokens + d.output_tokens),
+    1,
+  );
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          <BarChart3 className="h-5 w-5 text-muted-foreground" />
+          <CardTitle className="text-base">
+            {t.analytics.dailyTokenUsage}
+          </CardTitle>
+        </div>
+        <div className="flex items-center gap-4 font-mondwest normal-case text-xs text-muted-foreground">
+          <div className="flex items-center gap-1.5">
+            <div className="h-2.5 w-2.5 bg-[#ffe6cb]" />
+            {t.analytics.input}
+          </div>
+          <div className="flex items-center gap-1.5">
+            <div className="h-2.5 w-2.5 bg-emerald-500" />
+            {t.analytics.output}
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div
+          className="flex items-end gap-[2px]"
+          style={{ height: CHART_HEIGHT_PX }}
+        >
+          {daily.map((d) => {
+            const total = d.input_tokens + d.output_tokens;
+            const inputH = Math.round(
+              (d.input_tokens / maxTokens) * CHART_HEIGHT_PX,
+            );
+            const outputH = Math.round(
+              (d.output_tokens / maxTokens) * CHART_HEIGHT_PX,
+            );
+            return (
+              <div
+                key={d.day}
+                className="flex-1 min-w-0 group relative flex flex-col justify-end"
+                style={{ height: CHART_HEIGHT_PX }}
+              >
+                <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block z-10 pointer-events-none">
+                  <div className="font-mondwest normal-case bg-card border border-border px-2.5 py-1.5 text-xs text-foreground shadow-lg whitespace-nowrap">
+                    <div className="font-medium">{formatDate(d.day)}</div>
+                    <div>
+                      {t.analytics.input}: {formatTokens(d.input_tokens)}
+                    </div>
+                    <div>
+                      {t.analytics.output}: {formatTokens(d.output_tokens)}
+                    </div>
+                    <div>
+                      {t.analytics.total}: {formatTokens(total)}
+                    </div>
+                  </div>
+                </div>
+
+                <div
+                  className="w-full bg-[#ffe6cb]/70"
+                  style={{ height: Math.max(inputH, total > 0 ? 1 : 0) }}
+                />
+
+                <div
+                  className="w-full bg-emerald-500/70"
+                  style={{
+                    height: Math.max(outputH, d.output_tokens > 0 ? 1 : 0),
+                  }}
+                />
+              </div>
+            );
+          })}
+        </div>
+
+        <div className="flex justify-between mt-2 font-mondwest normal-case text-xs text-text-tertiary">
+          <span>{daily.length > 0 ? formatDate(daily[0].day) : ""}</span>
+          {daily.length > 2 && (
+            <span>{formatDate(daily[Math.floor(daily.length / 2)].day)}</span>
+          )}
+          <span>
+            {daily.length > 1 ? formatDate(daily[daily.length - 1].day) : ""}
+          </span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function DailyTable({ daily }: { daily: AnalyticsDailyEntry[] }) {
+  const { t } = useI18n();
+  const { sorted, sortKey, sortDir, toggle } = useTableSort(daily, "day", "desc");
+
+  if (daily.length === 0) return null;
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          <TrendingUp className="h-5 w-5 text-muted-foreground" />
+          <CardTitle className="text-base">
+            {t.analytics.dailyBreakdown}
+          </CardTitle>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="overflow-x-auto">
+          <table className="w-full font-mondwest normal-case text-sm">
+            <thead>
+              <tr className="border-b border-border text-muted-foreground text-xs">
+                <SortHeader label={t.analytics.date} col="day" sortKey={sortKey} sortDir={sortDir} toggle={toggle} className="text-left py-2 pr-4 font-medium" />
+                <SortHeader label={t.sessions.title} col="sessions" sortKey={sortKey} sortDir={sortDir} toggle={toggle} className="text-right py-2 px-4 font-medium" />
+                <SortHeader label={t.analytics.input} col="input_tokens" sortKey={sortKey} sortDir={sortDir} toggle={toggle} className="text-right py-2 px-4 font-medium" />
+                <SortHeader label={t.analytics.output} col="output_tokens" sortKey={sortKey} sortDir={sortDir} toggle={toggle} className="text-right py-2 pl-4 font-medium" />
+              </tr>
+            </thead>
+            <tbody>
+              {sorted.map((d) => (
+                <tr
+                    key={d.day}
+                    className="border-b border-border/50 hover:bg-secondary/20 transition-colors"
+                  >
+                  <td className="py-2 pr-4 font-medium">
+                      {formatDate(d.day)}
+                    </td>
+                  <td className="text-right py-2 px-4 text-muted-foreground">
+                      {d.sessions}
+                    </td>
+                  <td className="text-right py-2 px-4">
+                    <span className="text-[#ffe6cb]">
+                        {formatTokens(d.input_tokens)}
+                      </span>
+                  </td>
+                  <td className="text-right py-2 pl-4">
+                    <span className="text-emerald-400">
+                        {formatTokens(d.output_tokens)}
+                      </span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function ModelTable({ models }: { models: AnalyticsModelEntry[] }) {
+  const { t } = useI18n();
+  const { sorted, sortKey, sortDir, toggle } = useTableSort(models, "input_tokens", "desc");
+
+  if (models.length === 0) return null;
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          <Cpu className="h-5 w-5 text-muted-foreground" />
+          <CardTitle className="text-base">
+            {t.analytics.perModelBreakdown}
+          </CardTitle>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="overflow-x-auto">
+          <table className="w-full font-mondwest normal-case text-sm">
+            <thead>
+              <tr className="border-b border-border text-muted-foreground text-xs">
+                <SortHeader label={t.analytics.model} col="model" sortKey={sortKey} sortDir={sortDir} toggle={toggle} className="text-left py-2 pr-4 font-medium" />
+                <SortHeader label={t.sessions.title} col="sessions" sortKey={sortKey} sortDir={sortDir} toggle={toggle} className="text-right py-2 px-4 font-medium" />
+                <SortHeader label={t.analytics.tokens} col="input_tokens" sortKey={sortKey} sortDir={sortDir} toggle={toggle} className="text-right py-2 pl-4 font-medium" />
+              </tr>
+            </thead>
+            <tbody>
+              {sorted.map((m) => (
+                <tr
+                  key={m.model}
+                  className="border-b border-border/50 hover:bg-secondary/20 transition-colors"
+                >
+                  <td className="py-2 pr-4">
+                    <span className="font-mono-ui text-xs">{m.model}</span>
+                  </td>
+                  <td className="text-right py-2 px-4 text-muted-foreground">
+                    {m.sessions}
+                  </td>
+                  <td className="text-right py-2 pl-4">
+                    <span className="text-[#ffe6cb]">
+                      {formatTokens(m.input_tokens)}
+                    </span>
+                    {" / "}
+                    <span className="text-emerald-400">
+                      {formatTokens(m.output_tokens)}
+                    </span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function SkillTable({ skills }: { skills: AnalyticsSkillEntry[] }) {
+  const { t } = useI18n();
+  const { sorted, sortKey, sortDir, toggle } = useTableSort(skills, "total_count", "desc");
+
+  if (skills.length === 0) return null;
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          <Brain className="h-5 w-5 text-muted-foreground" />
+          <CardTitle className="text-base">{t.analytics.topSkills}</CardTitle>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="overflow-x-auto">
+          <table className="w-full font-mondwest normal-case text-sm">
+            <thead>
+              <tr className="border-b border-border text-muted-foreground text-xs">
+                <SortHeader label={t.analytics.skill} col="skill" sortKey={sortKey} sortDir={sortDir} toggle={toggle} className="text-left py-2 pr-4 font-medium" />
+                <SortHeader label={t.analytics.loads} col="view_count" sortKey={sortKey} sortDir={sortDir} toggle={toggle} className="text-right py-2 px-4 font-medium" />
+                <SortHeader label={t.analytics.edits} col="manage_count" sortKey={sortKey} sortDir={sortDir} toggle={toggle} className="text-right py-2 px-4 font-medium" />
+                <SortHeader label={t.analytics.total} col="total_count" sortKey={sortKey} sortDir={sortDir} toggle={toggle} className="text-right py-2 px-4 font-medium" />
+                <SortHeader label={t.analytics.lastUsed} col="last_used_at" sortKey={sortKey} sortDir={sortDir} toggle={toggle} className="text-right py-2 pl-4 font-medium" />
+              </tr>
+            </thead>
+            <tbody>
+              {sorted.map((skill) => (
+                <tr
+                  key={skill.skill}
+                  className="border-b border-border/50 hover:bg-secondary/20 transition-colors"
+                >
+                  <td className="py-2 pr-4">
+                    <span className="font-mono-ui text-xs">{skill.skill}</span>
+                  </td>
+                  <td className="text-right py-2 px-4 text-muted-foreground">
+                    {skill.view_count}
+                  </td>
+                  <td className="text-right py-2 px-4 text-muted-foreground">
+                    {skill.manage_count}
+                  </td>
+                  <td className="text-right py-2 px-4">{skill.total_count}</td>
+                  <td className="text-right py-2 pl-4 text-muted-foreground">
+                    {skill.last_used_at ? timeAgo(skill.last_used_at) : "—"}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function AnalyticsPage() {
+  const [days, setDays] = useState(30);
+  const [data, setData] = useState<AnalyticsResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  // Gated on `dashboard.show_token_analytics` (default off).  When off the
+  // page renders an explanation card instead of fetching analytics — the
+  // local token counts exclude auxiliary calls and provider retries, so
+  // they diverge from provider billing in ways that mislead users.
+  const [showTokens, setShowTokens] = useState<boolean | null>(null);
+  const { t } = useI18n();
+  const { setAfterTitle, setEnd } = usePageHeader();
+
+  useEffect(() => {
+    api
+      .getConfig()
+      .then((cfg) => {
+        const dash = (cfg?.dashboard ?? {}) as { show_token_analytics?: unknown };
+        setShowTokens(dash.show_token_analytics === true);
+      })
+      .catch(() => setShowTokens(false));
+  }, []);
+
+  const load = useCallback(() => {
+    if (!showTokens) return;
+    setLoading(true);
+    setError(null);
+    api
+      .getAnalytics(days)
+      .then(setData)
+      .catch((err) => setError(String(err)))
+      .finally(() => setLoading(false));
+  }, [days, showTokens]);
+
+  useLayoutEffect(() => {
+    const periodLabel =
+      PERIODS.find((p) => p.days === days)?.label ?? `${days}d`;
+    setAfterTitle(
+      <span className="flex items-center gap-1.5">
+        <Badge tone="secondary" className="text-xs">
+          {periodLabel}
+        </Badge>
+        {showTokens !== false && (
+          <Button
+            type="button"
+            ghost
+            size="icon"
+            className="text-muted-foreground hover:text-foreground"
+            onClick={load}
+            disabled={loading}
+            aria-label={t.common.refresh}
+          >
+            {loading ? <Spinner /> : <RefreshCw />}
+          </Button>
+        )}
+      </span>,
+    );
+    setEnd(
+      showTokens === false ? null : (
+        <div className="flex w-full min-w-0 flex-wrap items-center justify-start gap-2 sm:justify-end sm:gap-2">
+          <div className="flex flex-wrap items-center gap-1.5">
+            {PERIODS.map((p) => (
+              <Button
+                key={p.label}
+                type="button"
+                size="sm"
+                outlined={days !== p.days}
+                onClick={() => setDays(p.days)}
+              >
+                {p.label}
+              </Button>
+            ))}
+          </div>
+        </div>
+      ),
+    );
+    return () => {
+      setAfterTitle(null);
+      setEnd(null);
+    };
+  }, [days, loading, load, setAfterTitle, setEnd, t.common.refresh, showTokens]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PluginSlot name="analytics:top" />
+
+      {showTokens === false && (
+        <Card>
+          <CardContent className="py-12">
+            <div className="mx-auto flex max-w-2xl flex-col gap-3 text-sm text-muted-foreground">
+              <h2 className="font-mondwest text-display text-base tracking-wider text-foreground">
+                Token analytics hidden
+              </h2>
+              <p>
+                The token, cost, and per-day analytics on this page are a
+                local debug estimate. They only count successful main-agent
+                responses with a usable <span className="font-mono">usage</span>{" "}
+                block, and silently exclude auxiliary calls (context
+                compression, title generation, vision, session search, web
+                extract, smart approvals, MCP routing, plugin LLM access)
+                plus provider-side retries and fallback attempts. Cache
+                writes are missing entirely.
+              </p>
+              <p>
+                On models with heavy auxiliary traffic (Kimi K2.6, MiniMax
+                M2.7) the local total can be 10x–100x lower than what your
+                provider bills. Hiding these numbers is safer than letting
+                them look authoritative.
+              </p>
+              <p>
+                Check your provider dashboard (OpenRouter, Anthropic, etc.)
+                for actual usage and billing. To re-enable the local debug
+                estimate anyway, set{" "}
+                <span className="font-mono">
+                  dashboard.show_token_analytics: true
+                </span>{" "}
+                in <a href="/config" className="underline">Config</a>.
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {showTokens && loading && !data && (
+        <div className="flex items-center justify-center py-24">
+          <Spinner className="text-2xl text-primary" />
+        </div>
+      )}
+
+      {showTokens && error && (
+        <Card>
+          <CardContent className="py-6">
+            <p className="text-sm text-destructive text-center">{error}</p>
+          </CardContent>
+        </Card>
+      )}
+
+      {showTokens && data && (
+        <>
+          <div className="grid gap-6 lg:grid-cols-2">
+            <Card>
+              <CardContent className="py-6">
+                <Stats
+                  items={[
+                    {
+                      label: t.analytics.totalTokens,
+                      value: formatTokens(
+                        data.totals.total_input + data.totals.total_output,
+                      ),
+                    },
+                    {
+                      label: t.analytics.input,
+                      value: formatTokens(data.totals.total_input),
+                    },
+                    {
+                      label: t.analytics.output,
+                      value: formatTokens(data.totals.total_output),
+                    },
+                    {
+                      label: t.analytics.totalSessions,
+                      value: `${data.totals.total_sessions} (~${(data.totals.total_sessions / days).toFixed(1)}${t.analytics.perDayAvg})`,
+                    },
+                    {
+                      label: t.analytics.apiCalls,
+                      value: String(
+                        data.totals.total_api_calls ??
+                          data.daily.reduce((sum, d) => sum + d.sessions, 0),
+                      ),
+                    },
+                  ]}
+                />
+              </CardContent>
+            </Card>
+
+            <TokenBarChart daily={data.daily} />
+          </div>
+
+          <DailyTable daily={data.daily} />
+          <ModelTable models={data.by_model} />
+          <SkillTable skills={data.skills.top_skills} />
+        </>
+      )}
+
+      {data &&
+        data.daily.length === 0 &&
+        data.by_model.length === 0 &&
+        data.skills.top_skills.length === 0 && (
+          <Card>
+            <CardContent className="py-12">
+              <div className="flex flex-col items-center text-muted-foreground">
+                <BarChart3 className="h-8 w-8 mb-3 opacity-40" />
+                <p className="text-sm font-medium">{t.analytics.noUsageData}</p>
+                <p className="text-xs mt-1 text-text-tertiary">
+                  {t.analytics.startSession}
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+      <PluginSlot name="analytics:bottom" />
+    </div>
+  );
+}