Function OverviewTab

src/components/Stats.tsx:267–476

({
  stats,
  allTimeStats,
  dateRange,
  isLoading,
}: {
  stats: ClaudeCodeStats;
  allTimeStats: ClaudeCodeStats;
  dateRange: StatsDateRange;
  isLoading: boolean;
})

}

function OverviewTab({
  stats,
  allTimeStats,
  dateRange,
  isLoading,
}: {
  stats: ClaudeCodeStats;
  allTimeStats: ClaudeCodeStats;
  dateRange: StatsDateRange;
  isLoading: boolean;
}): React.ReactNode {
  const { columns: terminalWidth } = useTerminalSize();

  // Calculate favorite model and total tokens
  const modelEntries = Object.entries(stats.modelUsage).sort(
    ([, a], [, b]) => b.inputTokens + b.outputTokens - (a.inputTokens + a.outputTokens),
  );
  const favoriteModel = modelEntries[0];
  const totalTokens = modelEntries.reduce((sum, [, usage]) => sum + usage.inputTokens + usage.outputTokens, 0);

  // Memoize the factoid so it doesn't change when switching tabs
  const factoid = useMemo(() => generateFunFactoid(stats, totalTokens), [stats, totalTokens]);

  // Calculate range days based on selected date range
  const rangeDays = dateRange === '7d' ? 7 : dateRange === '30d' ? 30 : stats.totalDays;

  // Compute shot stats data (ant-only, gated by feature flag)
  let shotStatsData: {
    avgShots: string;
    buckets: { label: string; count: number; pct: number }[];
  } | null = null;
  if (feature('SHOT_STATS') && stats.shotDistribution) {
    const dist = stats.shotDistribution;
    const total = Object.values(dist).reduce((s, n) => s + n, 0);
    if (total > 0) {
      const totalShots = Object.entries(dist).reduce((s, [count, sessions]) => s + parseInt(count, 10) * sessions, 0);
      const bucket = (min: number, max?: number) =>
        Object.entries(dist)
          .filter(([k]) => {
            const n = parseInt(k, 10);
            return n >= min && (max === undefined || n <= max);
          })
          .reduce((s, [, v]) => s + v, 0);
      const pct = (n: number) => Math.round((n / total) * 100);
      const b1 = bucket(1, 1);
      const b2_5 = bucket(2, 5);
      const b6_10 = bucket(6, 10);
      const b11 = bucket(11);
      shotStatsData = {
        avgShots: (totalShots / total).toFixed(1),
        buckets: [
          { label: '1-shot', count: b1, pct: pct(b1) },
          { label: '2\u20135 shot', count: b2_5, pct: pct(b2_5) },
          { label: '6\u201310 shot', count: b6_10, pct: pct(b6_10) },
          { label: '11+ shot', count: b11, pct: pct(b11) },
        ],
      };
    }