Function StatsContent

src/components/Stats.tsx:111–237

* Inner component that uses React 19's use() to read the stats promise. * Suspends while loading all-time stats, then handles date range changes without suspending.

({ allTimePromise, onClose }: StatsContentProps)

 * Suspends while loading all-time stats, then handles date range changes without suspending.
 */
function StatsContent({ allTimePromise, onClose }: StatsContentProps): React.ReactNode {
  const allTimeResult = use(allTimePromise);
  const [dateRange, setDateRange] = useState<StatsDateRange>('all');
  const [statsCache, setStatsCache] = useState<Partial<Record<StatsDateRange, ClaudeCodeStats>>>({});
  const [isLoadingFiltered, setIsLoadingFiltered] = useState(false);
  const [activeTab, setActiveTab] = useState<'Overview' | 'Models'>('Overview');
  const [copyStatus, setCopyStatus] = useState<string | null>(null);

  // Load filtered stats when date range changes (with caching)
  useEffect(() => {
    if (dateRange === 'all') {
      return;
    }

    // Already cached
    if (statsCache[dateRange]) {
      return;
    }

    let cancelled = false;
    setIsLoadingFiltered(true);

    aggregateClaudeCodeStatsForRange(dateRange)
      .then(data => {
        if (!cancelled) {
          setStatsCache(prev => ({ ...prev, [dateRange]: data }));
          setIsLoadingFiltered(false);
        }
      })
      .catch(() => {
        if (!cancelled) {
          setIsLoadingFiltered(false);
        }
      });

    return () => {
      cancelled = true;
    };
  }, [dateRange, statsCache]);

  // Use cached stats for current range
  const displayStats =
    dateRange === 'all'
      ? allTimeResult.type === 'success'
        ? allTimeResult.data
        : null
      : (statsCache[dateRange] ?? (allTimeResult.type === 'success' ? allTimeResult.data : null));

  // All-time stats for the heatmap (always use all-time)
  const allTimeStats = allTimeResult.type === 'success' ? allTimeResult.data : null;

  const handleClose = useCallback(() => {
    onClose('Stats dialog dismissed', { display: 'system' });
  }, [onClose]);

  useKeybinding('confirm:no', handleClose, { context: 'Confirmation' });

  useInput((input, key) => {