fix: resolve all eslint errors (set-state-in-effect, nested components, no-explicit-any)

- Wrap synchronous setState calls in useEffect with startTransition to avoid cascading renders
- Convert nested SortIcon components to renderSortIcon helper functions
- Replace all `any` types with proper interfaces (OverviewData, TrendPoint, RankItem)
- Remove unused formatTokens import in logs page
- Add no-any rule to CLAUDE.md

CLAUDE.md

@@ -19,6 +19,8 @@ Docker deployment: port 8019, `docker-compose up` with `.env.production`, extern
 
 Next.js 16 App Router analytics dashboard for an API gateway. React 19, TypeScript strict mode, Tailwind CSS 4, Recharts 3, PostgreSQL.
 
+**TypeScript: Never use `any` type.** Always define proper interfaces/types for all data structures. Use `unknown` with type narrowing if the type is truly unknown.
+
 ### Three Global Contexts (wrapped in `components/ClientProviders.tsx`)
 
 1. **ThemeProvider** (`lib/theme.tsx`) — light/dark/system, localStorage `theme`, supports iframe embedding via `?theme=` query param and postMessage sync

app/aggregation/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState, useCallback, useRef } from "react";
+import { useEffect, useState, useCallback, useRef, startTransition } from "react";
 import { createPortal } from "react-dom";
 import { motion } from "motion/react";
 import { Users, Calendar, Hash, Zap, ArrowUpDown, ArrowDown, ArrowUp, HelpCircle } from "lucide-react";
@@ -22,7 +22,7 @@ function RatioTooltip({ text }: { text: string }) {
   const iconRef = useRef<HTMLSpanElement>(null);
   const [mounted, setMounted] = useState(false);
 
-  useEffect(() => { setMounted(true); }, []);
+  useEffect(() => { startTransition(() => setMounted(true)); }, []);
 
   function handleEnter() {
     if (iconRef.current) {
@@ -84,11 +84,11 @@ export default function AggregationPage() {
   const [sortAsc, setSortAsc] = useState(false);
 
   const fetchData = useCallback(async () => {
-    setLoading(true);
+    startTransition(() => setLoading(true));
     const { start, end } = getEffectiveRange();
     const res = await fetch(buildQuery("/api/aggregation", { start, end }));
-    setData(await res.json());
+    const json = await res.json();
-    setLoading(false);
+    startTransition(() => { setData(json); setLoading(false); });
   }, [getEffectiveRange]);
 
   useEffect(() => { fetchData(); }, [fetchData]);
@@ -112,12 +112,12 @@ export default function AggregationPage() {
     else { setSortKey(key); setSortAsc(false); }
   }
 
-  function SortIcon({ col }: { col: SortKey }) {
+  const renderSortIcon = (col: SortKey) => {
     if (sortKey !== col) return <ArrowUpDown className="h-3 w-3" style={{ color: "var(--text-muted)", opacity: 0.5 }} />;
     return sortAsc
       ? <ArrowUp className="h-3 w-3" style={{ color: "var(--accent)" }} />
       : <ArrowDown className="h-3 w-3" style={{ color: "var(--accent)" }} />;
-  }
+  };
 
   const sortHeaders: { key: SortKey; label: string }[] = [
     { key: "calls", label: t("th.calls") },
@@ -165,14 +165,14 @@ export default function AggregationPage() {
               {sortHeaders.map(h => (
                 <th key={h.key} className="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider cursor-pointer select-none transition-colors"
                   style={{ color: "var(--text-muted)" }} onClick={() => handleSort(h.key)}>
-                  <span className="inline-flex items-center gap-1">{h.label} <SortIcon col={h.key} /></span>
+                  <span className="inline-flex items-center gap-1">{h.label} {renderSortIcon(h.key)}</span>
                 </th>
               ))}
               <th className="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider cursor-pointer select-none transition-colors"
                 style={{ color: "var(--text-muted)" }} onClick={() => handleSort("ratio")}>
                 <span className="inline-flex items-center gap-1">
                   {t("agg.ratio")}
-                  <SortIcon col="ratio" />
+                  {renderSortIcon("ratio")}
                   <RatioTooltip text={t("agg.ratioTip")} />
                 </span>
               </th>

app/detail/[...slug]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, startTransition } from "react";
 import { useParams } from "next/navigation";
 import { motion } from "motion/react";
 import { ArrowLeft, Hash, Zap, MessageSquare } from "lucide-react";
@@ -30,11 +30,11 @@ export default function DetailPage() {
 
   const { getEffectiveRange } = useTimeRange();
   const [data, setData] = useState<DetailData | null>(null);
-  const [trends, setTrends] = useState<any[]>([]);
+  const [trends, setTrends] = useState<{ date: string; calls: number; total_tokens: number; prompt_tokens: number; completion_tokens: number }[]>([]);
   const [loading, setLoading] = useState(true);
 
   const fetchData = useCallback(async () => {
-    setLoading(true);
+    startTransition(() => setLoading(true));
     const { start, end } = getEffectiveRange();
     const tp = { start, end };
     const [detail, tr] = await Promise.all([
@@ -45,7 +45,7 @@ export default function DetailPage() {
         ...(type === "channel" ? { channel_id: decodedId } : {}),
       })).then(r => r.json()),
     ]);
-    setData(detail); setTrends(tr); setLoading(false);
+    startTransition(() => { setData(detail); setTrends(tr); setLoading(false); });
   }, [type, decodedId, getEffectiveRange]);
 
   useEffect(() => { fetchData(); }, [fetchData]);

app/logs/page.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, startTransition } from "react";
 import { motion } from "motion/react";
 import { ScrollText, Search, ChevronLeft, ChevronRight, Zap } from "lucide-react";
 import { TimeRangeSelector } from "@/components/TimeRangeSelector";
-import { buildQuery, formatNumber, formatTokens, formatDate } from "@/lib/utils";
+import { buildQuery, formatNumber, formatDate } from "@/lib/utils";
 import { useTimeRange } from "@/lib/time-range-context";
 import { useI18n } from "@/lib/i18n";
 
@@ -26,15 +26,15 @@ export default function LogsPage() {
   const pageSize = 100;
 
   const fetchData = useCallback(async () => {
-    setLoading(true);
+    startTransition(() => setLoading(true));
     const { start, end } = getEffectiveRange();
     const res = await fetch(buildQuery("/api/logs", { start, end, page, page_size: pageSize, ...filters }));
     const data = await res.json();
-    setLogs(data.logs); setTotal(data.total); setLoading(false);
+    startTransition(() => { setLogs(data.logs); setTotal(data.total); setLoading(false); });
   }, [page, filters, getEffectiveRange]);
 
   useEffect(() => { fetchData(); }, [fetchData]);
-  useEffect(() => { setPage(1); }, [getEffectiveRange, filters]);
+  useEffect(() => { startTransition(() => setPage(1)); }, [getEffectiveRange, filters]);
   const totalPages = Math.ceil(total / pageSize);
 
   const headers = [t("th.time"), t("th.user"), t("th.realModel"), t("th.channel"), t("th.input"), t("th.output"), t("th.totalToken"), t("th.latency"), ""];

app/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, startTransition } from "react";
 import { motion } from "motion/react";
 import { Zap, Hash, Users, Cpu, TrendingUp, BarChart3 } from "lucide-react";
 import { StatsCard } from "@/components/StatsCard";
@@ -11,19 +11,40 @@ import { buildQuery } from "@/lib/utils";
 import { useTimeRange } from "@/lib/time-range-context";
 import { useI18n } from "@/lib/i18n";
 
+interface OverviewData {
+  total_calls: number;
+  total_tokens: number;
+  active_users: number;
+  active_models: number;
+}
+
+interface TrendPoint {
+  date: string;
+  calls: number;
+  total_tokens: number;
+  prompt_tokens: number;
+  completion_tokens: number;
+}
+
+interface RankItem {
+  name: string;
+  total_tokens: number;
+  calls: number;
+}
+
 export default function DashboardPage() {
   const { t } = useI18n();
   const { getEffectiveRange } = useTimeRange();
   const [granularity, setGranularity] = useState<"day" | "week" | "month">("day");
   const [trendMetric, setTrendMetric] = useState<"total_tokens" | "calls">("total_tokens");
-  const [overview, setOverview] = useState<any>(null);
+  const [overview, setOverview] = useState<OverviewData | null>(null);
-  const [trends, setTrends] = useState<any[]>([]);
+  const [trends, setTrends] = useState<TrendPoint[]>([]);
-  const [userRank, setUserRank] = useState<any[]>([]);
+  const [userRank, setUserRank] = useState<RankItem[]>([]);
-  const [modelRank, setModelRank] = useState<any[]>([]);
+  const [modelRank, setModelRank] = useState<RankItem[]>([]);
   const [loading, setLoading] = useState(true);
 
   const fetchData = useCallback(async () => {
-    setLoading(true);
+    startTransition(() => setLoading(true));
     const { start, end } = getEffectiveRange();
     const tp = { start, end };
     const [ov, tr, ur, mr] = await Promise.all([
@@ -32,7 +53,9 @@ export default function DashboardPage() {
       fetch(buildQuery("/api/rankings", { ...tp, type: "user", limit: 10 })).then(r => r.json()),
       fetch(buildQuery("/api/rankings", { ...tp, type: "model", limit: 10 })).then(r => r.json()),
     ]);
+    startTransition(() => {
       setOverview(ov); setTrends(tr); setUserRank(ur); setModelRank(mr); setLoading(false);
+    });
   }, [granularity, getEffectiveRange]);
 
   useEffect(() => { fetchData(); }, [fetchData]);
@@ -82,7 +105,7 @@ export default function DashboardPage() {
             </div>
             <div className="flex gap-1 rounded-md p-0.5" style={{ background: "var(--row-hover)", border: "1px solid var(--surface-border)" }}>
               {([["total_tokens", t("metric.token")], ["calls", t("metric.calls")]] as const).map(([k, l]) => (
-                <button key={k} onClick={() => setTrendMetric(k as any)}
+                <button key={k} onClick={() => setTrendMetric(k)}
                   className="px-2.5 py-1 text-xs rounded transition-colors"
                   style={{
                     background: trendMetric === k ? "var(--btn-active-bg)" : "transparent",

app/rankings/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, startTransition } from "react";
 import Link from "next/link";
 import { motion } from "motion/react";
 import { Trophy, Users, Cpu, Radio, ArrowUpDown, ArrowDown, ArrowUp } from "lucide-react";
@@ -33,11 +33,11 @@ export default function RankingsPage() {
   };
 
   const fetchData = useCallback(async () => {
-    setLoading(true);
+    startTransition(() => setLoading(true));
     const { start, end } = getEffectiveRange();
     const res = await fetch(buildQuery("/api/rankings", { start, end, type: tab, limit: 100 }));
-    setData(await res.json());
+    const json = await res.json();
-    setLoading(false);
+    startTransition(() => { setData(json); setLoading(false); });
   }, [tab, getEffectiveRange]);
 
   useEffect(() => { fetchData(); }, [fetchData]);
@@ -58,12 +58,12 @@ export default function RankingsPage() {
     return sortAsc ? diff : -diff;
   });
 
-  function SortIcon({ col }: { col: SortKey }) {
+  const renderSortIcon = (col: SortKey) => {
     if (sortKey !== col) return <ArrowUpDown className="h-3 w-3" style={{ color: "var(--text-muted)", opacity: 0.4 }} />;
     return sortAsc
       ? <ArrowUp className="h-3 w-3" style={{ color: "var(--accent)" }} />
       : <ArrowDown className="h-3 w-3" style={{ color: "var(--accent)" }} />;
-  }
+  };
 
   const columns: { key: SortKey | null; label: string; align: "left" | "right" }[] = [
     { key: null, label: t("th.rank"), align: "left" },
@@ -116,7 +116,7 @@ export default function RankingsPage() {
                 >
                   {col.key ? (
                     <span className={`inline-flex items-center gap-1 ${col.align === "right" ? "justify-end" : ""}`}>
-                      {col.label} <SortIcon col={col.key} />
+                      {col.label} {renderSortIcon(col.key)}
                     </span>
                   ) : col.label}
                 </th>

lib/i18n.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { createContext, useContext, useState, useEffect, type ReactNode } from "react";
+import { createContext, useContext, useState, useEffect, startTransition, type ReactNode } from "react";
 
 export type Locale = "zh" | "en";
 
@@ -195,7 +195,9 @@ export function I18nProvider({ children }: { children: ReactNode }) {
 
   useEffect(() => {
     const saved = localStorage.getItem("locale") as Locale | null;
-    if (saved && (saved === "zh" || saved === "en")) setLocale(saved);
+    if (saved && (saved === "zh" || saved === "en")) {
+      startTransition(() => setLocale(saved));
+    }
   }, []);
 
   const handleSetLocale = (l: Locale) => {