bingocode 1.1.162 → 1.1.164

package/package.json

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

package/src/manager/CliMenuManager.tsx

@@ -14,6 +14,7 @@ import { ensureSingletonLocalServer } from '../server/ensureSingletonLocalServer
 import { TopBar, BottomBar, Panel, Hint, Kbd, SecondaryMenu, StateDisplay, ScrollBar, truncate, safePadEnd } from '../manager/CliMenuUi.tsx';
 import { WelcomeV2 } from '../components/LogoV2/WelcomeV2.tsx';
 import { TopToolbar } from '../manager/TopToolbar.tsx';
+import { TokenStatsPanel } from '../manager/TokenStatsPanel.tsx';
 
 // Theme switching (Hook)
 import { useTheme } from '../components/design-system/ThemeProvider.js';
@@ -484,7 +485,7 @@ export const CliMenuManager: React.FC = () => {
   const [settingData, setSettingData] = useState<any>(null);
   const [loadingSetting, setLoadingSetting] = useState(false);
   const [setErr, setSetErr] = useState<string | null>(null);
-  const [settingsStage, setSettingsStage] = useState<'list' | 'langPicker'>('list');
+  const [settingsStage, setSettingsStage] = useState<'list' | 'langPicker' | 'tokenStats'>('list');
   const [settingsCursor, setSettingsCursor] = useState(0);
   const [autoModeEnabled, setAutoModeEnabled] = useState(false);
   const [bypassPermsEnabled, setBypassPermsEnabled] = useState(false);
@@ -763,6 +764,7 @@ export const CliMenuManager: React.FC = () => {
       // Settings: langPicker → back to list; list → back to main menu
       if (page === 'settings') {
         if (settingsStage === 'langPicker') { setSettingsStage('list'); return; }
+        if (settingsStage === 'tokenStats') { setSettingsStage('list'); return; }
       }
       setPage(null);
       setHistoryMenuStage('list');
@@ -923,6 +925,9 @@ export const CliMenuManager: React.FC = () => {
               }
               return next;
             });
+          } else if (settingsCursor === 3) {
+            // Row 3: open Token Stats
+            setSettingsStage('tokenStats');
           }
         }
       }
@@ -1406,12 +1411,24 @@ export const CliMenuManager: React.FC = () => {
         );
       }
 
+      // --- tokenStats sub-menu ---
+      if (settingsStage === 'tokenStats') {
+        return (
+          <TokenStatsPanel
+            width={VIEW_W}
+            height={MID_H}
+            onBack={() => setSettingsStage('list')}
+          />
+        );
+      }
+
       // --- settings list ---
       type SettingRow = { key: string; label: string; value: string; interactive: boolean };
       const fixedRows: SettingRow[] = [
         { key: '__lang', label: tS.langLabel, value: currentLangLabel, interactive: true },
         { key: '__autoMode', label: tS.autoModeLabel, value: autoModeEnabled ? tS.autoModeOn : tS.autoModeOff, interactive: true },
         { key: '__bypassPerms', label: tS.bypassPermsLabel, value: bypassPermsEnabled ? tS.bypassPermsOn : tS.bypassPermsOff, interactive: true },
+        { key: '__tokenStats', label: 'Token Stats', value: '>', interactive: true },
       ];
       const dataEntries = settingData && typeof settingData === 'object' ? Object.entries(settingData) : [];
       const dataRows: SettingRow[] = dataEntries.map(([k, v]) => ({

package/src/manager/TokenStatsPanel.tsx

@@ -0,0 +1,95 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { StateDisplay, ScrollBar, safePadEnd } from '../manager/CliMenuUi.tsx';
+import { aggregateClaudeCodeStats, type ClaudeCodeStats } from '../utils/stats.ts';
+import { formatNumber } from '../utils/format.js';
+
+type Props = {
+  width: number;
+  height: number;
+  onBack: () => void;
+};
+
+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);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    aggregateClaudeCodeStats()
+      .then(data => {
+        if (!cancelled) {
+          setStats(data);
+          setLoading(false);
+        }
+      })
+      .catch(err => {
+        if (!cancelled) {
+          setError(err.message || String(err));
+          setLoading(false);
+        }
+      });
+    return () => { cancelled = true; };
+  }, []);
+
+  if (loading) {
+    return <StateDisplay type="loading" message="Loading token stats..." />;
+  }
+  if (error) {
+    return <StateDisplay type="error" message={`Failed to load: ${error}`} />;
+  }
+  if (!stats || !stats.modelUsage || Object.keys(stats.modelUsage).length === 0) {
+    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 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 formatCount = (n: number) => formatNumber(n);
+
+  return (
+    <Box width={width} height={height} flexDirection="column">
+      <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>
+      </Box>
+      <Text dimColor>ESC to go back to settings</Text>
+    </Box>
+  );
+};
+
+export default TokenStatsPanel;