bingocode 1.1.164 → 1.1.166

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bingocode",
-  "version": "1.1.164",
+  "version": "1.1.166",
   "type": "module",
   "bin": {
     "claude": "bin/claude-win.cjs",

package/src/manager/CliMenuManager.tsx

@@ -876,8 +876,8 @@ export const CliMenuManager: React.FC = () => {
     // Settings interactions
     if (!showHelp && page === 'settings') {
       if (settingsStage === 'list') {
-        // +1 for the fixed Language row prepended before settingData entries
-        const totalRows = 3 + (settingData && typeof settingData === 'object' ? Object.keys(settingData).length : 0);
+        // Fixed rows: Language, Auto Mode, Bypass, Token Stats = 4 rows
+        const totalRows = 4 + (settingData && typeof settingData === 'object' ? Object.keys(settingData).length : 0);
         const visible = Math.max(1, MID_H - 2);
         if (key.downArrow || input === 'j') {
           setSettingsCursor(c => Math.min(totalRows - 1, c + 1));

package/src/manager/TokenStatsPanel.tsx

@@ -1,9 +1,72 @@
-import React, { useState, useEffect } from 'react';
-import { Box, Text } from 'ink';
+import React, { useState, useEffect, useMemo } from 'react';
+import { Box, Text, useInput } from 'ink';
 import { StateDisplay, ScrollBar, safePadEnd } from '../manager/CliMenuUi.tsx';
-import { aggregateClaudeCodeStats, type ClaudeCodeStats } from '../utils/stats.ts';
+import { aggregateClaudeCodeStats, type ClaudeCodeStats, type DailyModelTokens } from '../utils/stats.ts';
 import { formatNumber } from '../utils/format.js';
 
+// Get ISO week number (Monday-based)
+function getWeekNumber(dateStr: string): string {
+  const date = new Date(dateStr);
+  date.setHours(0, 0, 0, 0);
+  date.setDate(date.getDate() + 4 - (date.getDay() || 7));
+  const yearStart = new Date(date.getFullYear(), 0, 1);
+  const weekNo = Math.ceil((((date.getTime() - yearStart.getTime()) / 86400000) + 1) / 7);
+  return `${date.getFullYear()}-W${String(weekNo).padStart(2, '0')}`;
+}
+
+// Get month key (YYYY-MM)
+function getMonthKey(dateStr: string): string {
+  return dateStr.slice(0, 7);
+}
+
+// Aggregate daily tokens by week
+function aggregateByWeek(dailyTokens: DailyModelTokens[]): DailyModelTokens[] {
+  const weekMap = new Map<string, { [model: string]: number }>();
+
+  for (const day of dailyTokens) {
+    const weekKey = getWeekNumber(day.date);
+    const existing = weekMap.get(weekKey) || {};
+
+    for (const [model, tokens] of Object.entries(day.tokensByModel)) {
+      existing[model] = (existing[model] || 0) + tokens;
+    }
+
+    weekMap.set(weekKey, existing);
+  }
+
+  return Array.from(weekMap.entries())
+    .map(([date, tokensByModel]) => ({ date, tokensByModel }))
+    .sort((a, b) => a.date.localeCompare(b.date));
+}
+
+// Aggregate daily tokens by month
+function aggregateByMonth(dailyTokens: DailyModelTokens[]): DailyModelTokens[] {
+  const monthMap = new Map<string, { [model: string]: number }>();
+
+  for (const day of dailyTokens) {
+    const monthKey = getMonthKey(day.date);
+    const existing = monthMap.get(monthKey) || {};
+
+    for (const [model, tokens] of Object.entries(day.tokensByModel)) {
+      existing[model] = (existing[model] || 0) + tokens;
+    }
+
+    monthMap.set(monthKey, existing);
+  }
+
+  return Array.from(monthMap.entries())
+    .map(([date, tokensByModel]) => ({ date, tokensByModel }))
+    .sort((a, b) => a.date.localeCompare(b.date));
+}
+
+// Get last N days
+function getLastNDays(dailyTokens: DailyModelTokens[], n: number = 14): DailyModelTokens[] {
+  const sorted = [...dailyTokens].sort((a, b) => b.date.localeCompare(a.date));
+  return sorted.slice(0, n);
+}
+
+type TimeRange = 'day' | 'week' | 'month' | 'total';
+
 type Props = {
   width: number;
   height: number;
@@ -14,6 +77,8 @@ export const TokenStatsPanel: React.FC<Props> = ({ width, height, onBack }) => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [stats, setStats] = useState<ClaudeCodeStats | null>(null);
+  const [timeRange, setTimeRange] = useState<TimeRange>('total');
+  const [activeButton, setActiveButton] = useState(3); // 0=day, 1=week, 2=month, 3=total
 
   useEffect(() => {
     let cancelled = false;
@@ -35,6 +100,31 @@ export const TokenStatsPanel: React.FC<Props> = ({ width, height, onBack }) => {
     return () => { cancelled = true; };
   }, []);
 
+  // Handle keyboard input for time range switching
+  useInput((input, key) => {
+    if (input === '1') {
+      setTimeRange('day');
+      setActiveButton(0);
+    } else if (input === '2') {
+      setTimeRange('week');
+      setActiveButton(1);
+    } else if (input === '3') {
+      setTimeRange('month');
+      setActiveButton(2);
+    } else if (input === '4') {
+      setTimeRange('total');
+      setActiveButton(3);
+    } else if (key.leftArrow && activeButton > 0) {
+      const newButton = activeButton - 1;
+      setActiveButton(newButton);
+      setTimeRange(['day', 'week', 'month', 'total'][newButton] as TimeRange);
+    } else if (key.rightArrow && activeButton < 3) {
+      const newButton = activeButton + 1;
+      setActiveButton(newButton);
+      setTimeRange(['day', 'week', 'month', 'total'][newButton] as TimeRange);
+    }
+  });
+
   if (loading) {
     return <StateDisplay type="loading" message="Loading token stats..." />;
   }
@@ -45,49 +135,124 @@ export const TokenStatsPanel: React.FC<Props> = ({ width, height, onBack }) => {
     return <StateDisplay type="empty" message="No token data yet. Run some conversations first!" />;
   }
 
-  const modelEntries = Object.entries(stats.modelUsage).sort(
-    (a, b) => (b[1].inputTokens + b[1].outputTokens) - (a[1].inputTokens + a[1].outputTokens)
-  );
-
   // Calculate column widths
-  const MODEL_COL = 14;
+  const MODEL_COL = 28;
   const NUM_COL = 14;
-  const COST_COL = 10;
-  const visible = height - 2; // leave room for header row + bottom hint
-
-  // Header
-  const header = [
-    safePadEnd('Model', MODEL_COL),
-    safePadEnd('Input Tokens', NUM_COL),
-    safePadEnd('Output Tokens', NUM_COL),
-    safePadEnd('Cache Read', NUM_COL),
-    safePadEnd('Cache Create', NUM_COL),
-  ].join('');
+  const DATE_COL = 12;
+  const visible = height - 4; // leave room for header row + buttons + bottom hint
+
+  // Prepare data based on time range
+  let isDateView = timeRange !== 'total';
 
   const formatCount = (n: number) => formatNumber(n);
 
+  // Time range buttons
+  const timeButtons = [
+    { label: 'Day', key: '1' },
+    { label: 'Week', key: '2' },
+    { label: 'Month', key: '3' },
+    { label: 'Total', key: '4' },
+  ];
+
   return (
     <Box width={width} height={height} flexDirection="column">
+      {/* Time range buttons */}
+      <Box marginBottom={1}>
+        {timeButtons.map((btn, idx) => (
+          <Text key={btn.key} color={activeButton === idx ? 'cyan' : 'white'}>
+            [{btn.label}] {btn.key}
+            {idx < timeButtons.length - 1 ? '  ' : ''}
+          </Text>
+        ))}
+      </Box>
+
       <Box flexDirection="column" flexGrow={1}>
-        <Text bold>{header}</Text>
-        <Text dimColor>{'─'.repeat(width - 4)}</Text>
-        <Box flexDirection="row" flexGrow={1} position="relative">
-          <Box flexDirection="column" flexGrow={1}>
-            {modelEntries.map(([model, usage]) => {
-              const row = [
-                safePadEnd(model.length > MODEL_COL - 3 ? model.slice(0, MODEL_COL - 4) + '…' : model, MODEL_COL),
-                safePadEnd(formatCount(usage.inputTokens), NUM_COL),
-                safePadEnd(formatCount(usage.outputTokens), NUM_COL),
-                safePadEnd(formatCount(usage.cacheReadInputTokens), NUM_COL),
-                safePadEnd(formatCount(usage.cacheCreationInputTokens), NUM_COL),
-              ].join('');
-              return <Text key={model}>{row}</Text>;
-            })}
-          </Box>
-          <ScrollBar total={modelEntries.length} offset={0} height={visible - 2} />
-        </Box>
+        {isDateView ? (
+          <>
+            <Text bold>
+              {safePadEnd('Date', DATE_COL)}
+              {safePadEnd('Model', MODEL_COL)}
+              {safePadEnd('Total Tokens', NUM_COL)}
+            </Text>
+            <Text dimColor>{'─'.repeat(width - 4)}</Text>
+            <Box flexDirection="row" flexGrow={1} position="relative">
+              <Box flexDirection="column" flexGrow={1}>
+                {(() => {
+                  // Date-based views - aggregate dailyModelTokens
+                  let aggregated: DailyModelTokens[];
+                  if (timeRange === 'day') {
+                    aggregated = getLastNDays(stats.dailyModelTokens, 14);
+                  } else if (timeRange === 'week') {
+                    aggregated = aggregateByWeek(stats.dailyModelTokens);
+                  } else {
+                    // month
+                    aggregated = aggregateByMonth(stats.dailyModelTokens);
+                  }
+
+                  return aggregated.flatMap(day =>
+                    Object.entries(day.tokensByModel).map(([model, tokens]) => {
+                      const row = [
+                        safePadEnd(day.date, DATE_COL),
+                        safePadEnd(model.length > MODEL_COL - 3 ? model.slice(0, MODEL_COL - 4) + '…' : model, MODEL_COL),
+                        safePadEnd(formatCount(tokens), NUM_COL),
+                      ].join('');
+                      return <Text key={`${day.date}-${model}`}>{row}</Text>;
+                    })
+                  );
+                })()}
+              </Box>
+              <ScrollBar
+                total={(() => {
+                  let aggregated: DailyModelTokens[];
+                  if (timeRange === 'day') {
+                    aggregated = getLastNDays(stats.dailyModelTokens, 14);
+                  } else if (timeRange === 'week') {
+                    aggregated = aggregateByWeek(stats.dailyModelTokens);
+                  } else {
+                    aggregated = aggregateByMonth(stats.dailyModelTokens);
+                  }
+                  return aggregated.flatMap(day => Object.keys(day.tokensByModel)).length;
+                })()}
+                offset={0}
+                height={visible - 2}
+              />
+            </Box>
+          </>
+        ) : (
+          <>
+            <Text bold>
+              {safePadEnd('Model', MODEL_COL)}
+              {safePadEnd('Input Tokens', NUM_COL)}
+              {safePadEnd('Output Tokens', NUM_COL)}
+              {safePadEnd('Cache Read', NUM_COL)}
+              {safePadEnd('Cache Create', NUM_COL)}
+            </Text>
+            <Text dimColor>{'─'.repeat(width - 4)}</Text>
+            <Box flexDirection="row" flexGrow={1} position="relative">
+              <Box flexDirection="column" flexGrow={1}>
+                {Object.entries(stats.modelUsage).sort(
+                  (a, b) => (b[1].inputTokens + b[1].outputTokens) - (a[1].inputTokens + a[1].outputTokens)
+                ).map(([model, usage]) => {
+                  const row = [
+                    safePadEnd(model.length > MODEL_COL - 3 ? model.slice(0, MODEL_COL - 4) + '…' : model, MODEL_COL),
+                    safePadEnd(formatCount(usage.inputTokens), NUM_COL),
+                    safePadEnd(formatCount(usage.outputTokens), NUM_COL),
+                    safePadEnd(formatCount(usage.cacheReadInputTokens), NUM_COL),
+                    safePadEnd(formatCount(usage.cacheCreationInputTokens), NUM_COL),
+                  ].join('');
+                  return <Text key={model}>{row}</Text>;
+                })}
+              </Box>
+              <ScrollBar
+                total={Object.keys(stats.modelUsage).length}
+                offset={0}
+                height={visible - 2}
+              />
+            </Box>
+          </>
+        )}
       </Box>
-      <Text dimColor>ESC to go back to settings</Text>
+      <Text dimColor>ESC back · 1-4 or ←→ to switch view</Text>
     </Box>
   );
 };