tokens-metric 0.4.8 → 0.4.9

package/dist/tui/index.js

@@ -49,6 +49,7 @@ function App() {
     // openTab: which panel is expanded (null = all collapsed)
     const [focusedTab, setFocusedTab] = useState(1);
     const [openTab, setOpenTab] = useState(null);
+    const [sessionCursor, setSessionCursor] = useState(0);
     const startedAtRef = useRef(Date.now());
     // useInput requires raw mode (interactive TTY). Skip it when stdin is piped
     // or otherwise non-interactive, so `node dist/tui/index.js | cat` still
@@ -63,7 +64,18 @@ function App() {
                 setOpenTab(null);
                 return;
             }
-            // Arrow keys move the cursor
+            // ↑↓ navigate sessions when Sessions tab is open
+            if (openTab === 3) {
+                if (key.upArrow) {
+                    setSessionCursor((c) => Math.max(0, c - 1));
+                    return;
+                }
+                if (key.downArrow) {
+                    setSessionCursor((c) => c + 1);
+                    return;
+                }
+            }
+            // Arrow keys move the tab cursor
             if (key.leftArrow) {
                 setFocusedTab((t) => (t > 1 ? (t - 1) : t));
                 return;
@@ -238,7 +250,7 @@ function App() {
         : claudeLastTailAt ?? codexLastTailAt;
     return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Header, { auth: auth, codexDetected: codexDetected, sessionsToday: today.sessions, projectsToday: today.projects, lastTailAt: lastTailAt, startedAt: startedAtRef.current, now: now, updateAvailable: updateAvailable }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [claudeStats
                         ? _jsx(SessionStatusBar, { stats: claudeStats, ratePerSec: claudeRate, now: now, series: claudeSeries })
-                        : !codexStats && _jsx(SessionStatusBar, { stats: null, ratePerSec: 0, now: now, series: claudeSeries }), codexStats && (_jsx(Box, { marginTop: claudeStats ? 1 : 0, children: _jsx(SessionStatusBar, { stats: codexStats, ratePerSec: codexRate, now: now, series: codexSeries }) }))] }), _jsx(Box, { marginTop: 1, children: _jsx(TabBar, { focusedTab: focusedTab, openTab: openTab }) }), openTab !== null && (_jsxs(Box, { marginTop: 1, children: [openTab === 1 && (_jsx(BreakdownPanel, { stats: primaryStats, series: primarySeries, ratePerSec: primaryRate })), openTab === 2 && _jsx(HistoryPanel, { history: history }), openTab === 3 && _jsx(TodaySessionsPanel, { sessions: todaySessions, now: now }), openTab === 4 && (_jsx(TranscriptsPanel, { transcripts: transcripts, activePath: claudePath, now: now }))] })), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: [_jsx(Text, { color: "magenta", children: "q" }), " quit \u00B7", ' ', _jsx(Text, { color: "magenta", children: "\u2190\u2192" }), " move \u00B7", ' ', _jsx(Text, { color: "magenta", children: "enter" }), " open/close \u00B7", ' ', _jsx(Text, { color: "magenta", children: "1\u20134" }), " jump \u00B7 pricing is", ' ', _jsx(Text, { italic: true, children: "API-equivalent" }), ", not your real bill on a subscription"] }) })] }));
+                        : !codexStats && _jsx(SessionStatusBar, { stats: null, ratePerSec: 0, now: now, series: claudeSeries }), codexStats && (_jsx(Box, { marginTop: claudeStats ? 1 : 0, children: _jsx(SessionStatusBar, { stats: codexStats, ratePerSec: codexRate, now: now, series: codexSeries }) }))] }), _jsx(Box, { marginTop: 1, children: _jsx(TabBar, { focusedTab: focusedTab, openTab: openTab }) }), openTab !== null && (_jsxs(Box, { marginTop: 1, children: [openTab === 1 && (_jsx(BreakdownPanel, { stats: primaryStats, series: primarySeries, ratePerSec: primaryRate })), openTab === 2 && _jsx(HistoryPanel, { history: history }), openTab === 3 && _jsx(TodaySessionsPanel, { sessions: todaySessions, now: now, cursor: Math.min(sessionCursor, Math.max(0, todaySessions.length - 1)) }), openTab === 4 && (_jsx(TranscriptsPanel, { transcripts: transcripts, activePath: claudePath, now: now }))] })), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: [_jsx(Text, { color: "magenta", children: "q" }), " quit \u00B7", ' ', _jsx(Text, { color: "magenta", children: "\u2190\u2192" }), " move \u00B7", ' ', _jsx(Text, { color: "magenta", children: "enter" }), " open/close \u00B7", ' ', _jsx(Text, { color: "magenta", children: "1\u20134" }), " jump", openTab === 3 && (_jsxs(Text, { dimColor: true, children: [' · ', _jsx(Text, { color: "magenta", children: "\u2191\u2193" }), " select session"] })), _jsx(Text, { dimColor: true, children: " \u00B7 pricing is " }), _jsx(Text, { italic: true, dimColor: true, children: "API-equivalent" }), _jsx(Text, { dimColor: true, children: ", not your real bill on a subscription" })] }) })] }));
 }
 // ── Header ───────────────────────────────────────────────────────────────────
 function Header({ auth, codexDetected, sessionsToday, projectsToday, lastTailAt, startedAt, now, updateAvailable, }) {
@@ -399,8 +411,9 @@ function fmtTopModel(b) {
     return m ? shortModel(m) : '—';
 }
 // ── Today's sessions panel ───────────────────────────────────────────────────
-function TodaySessionsPanel({ sessions, now }) {
-    return (_jsxs(Box, { borderStyle: "round", borderColor: "blue", paddingX: 1, flexDirection: "column", width: "100%", children: [_jsxs(Text, { bold: true, color: "blue", children: ["Today's sessions", _jsx(Text, { bold: false, color: "blue", children: ` · ${sessions.length} ${plural(sessions.length, 'session', 'sessions')} today` })] }), sessions.map((s) => {
+function TodaySessionsPanel({ sessions, now, cursor, }) {
+    return (_jsxs(Box, { borderStyle: "round", borderColor: "blue", paddingX: 1, flexDirection: "column", width: "100%", children: [_jsxs(Text, { bold: true, color: "blue", children: ["Today's sessions", _jsx(Text, { bold: false, color: "blue", children: ` · ${sessions.length} ${plural(sessions.length, 'session', 'sessions')} today` })] }), sessions.map((s, idx) => {
+                const isSelected = idx === cursor;
                 const tokens = Object.values(s.byModel).reduce((acc, u) => acc + totalTokens(u), 0);
                 const cost = Object.entries(s.byModel).reduce((acc, [m, u]) => {
                     const c = estimateCostUSD(m, u);
@@ -414,9 +427,35 @@ function TodaySessionsPanel({ sessions, now }) {
                 const duration = s.startedAt !== null && s.endedAt !== null
                     ? fmtDuration(s.endedAt - s.startedAt)
                     : null;
-                return (_jsxs(Text, { children: [_jsx(Text, { color: s.isActive ? 'green' : 'gray', children: s.isActive ? '▶ ' : '  ' }), _jsx(Text, { bold: s.isActive, children: s.startedAt ? fmtTime(s.startedAt) : '??:??' }), _jsx(Text, { dimColor: true, children: '  ' }), _jsx(Text, { wrap: "truncate-middle", dimColor: !s.isActive, children: OPTS.reveal ? (s.cwd ?? '—') : displayCwd(s.cwd) }), _jsx(Text, { dimColor: true, children: '  ' }), _jsx(Text, { color: "cyan", children: topModel ? shortModel(topModel) : '—' }), _jsx(Text, { dimColor: true, children: '  ' }), _jsx(Text, { children: fmtNumber(tokens) }), cost !== null && _jsx(Text, { dimColor: true, children: `  ~${fmtUSD(cost)}` }), duration && _jsx(Text, { dimColor: true, children: `  ${duration}` }), s.isActive && _jsx(Text, { color: "green", children: " active" })] }, s.sessionId));
+                return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { color: isSelected ? 'cyan' : s.isActive ? 'green' : 'gray', children: isSelected ? '› ' : s.isActive ? '▶ ' : '  ' }), _jsx(Text, { bold: isSelected || s.isActive, color: isSelected ? 'cyan' : undefined, children: s.startedAt ? fmtTime(s.startedAt) : '??:??' }), _jsx(Text, { dimColor: true, children: '  ' }), _jsx(Text, { wrap: "truncate-middle", dimColor: !isSelected && !s.isActive, color: isSelected ? 'cyan' : undefined, children: OPTS.reveal ? (s.cwd ?? '—') : displayCwd(s.cwd) }), _jsx(Text, { dimColor: true, children: '  ' }), _jsx(Text, { color: "cyan", children: topModel ? shortModel(topModel) : '—' }), _jsx(Text, { dimColor: true, children: '  ' }), _jsx(Text, { bold: isSelected, children: fmtNumber(tokens) }), cost !== null && _jsx(Text, { dimColor: true, children: `  ~${fmtUSD(cost)}` }), duration && _jsx(Text, { dimColor: true, children: `  ${duration}` }), s.isActive && _jsx(Text, { color: "green", children: " active" })] }), isSelected && _jsx(SessionDetail, { session: s })] }, s.sessionId));
             })] }));
 }
+function SessionDetail({ session: s }) {
+    const DETAIL_BAR = 16;
+    // Aggregate all models into one Usage for the bar chart
+    const totals = { input_tokens: 0, output_tokens: 0, cache_creation_input_tokens: 0, cache_read_input_tokens: 0 };
+    for (const u of Object.values(s.byModel)) {
+        totals.input_tokens += u.input_tokens;
+        totals.output_tokens += u.output_tokens;
+        totals.cache_creation_input_tokens += u.cache_creation_input_tokens;
+        totals.cache_read_input_tokens += u.cache_read_input_tokens;
+    }
+    const total = totalTokens(totals);
+    const max = Math.max(1, totals.input_tokens, totals.output_tokens, totals.cache_creation_input_tokens, totals.cache_read_input_tokens);
+    const allModels = Object.keys(s.byModel);
+    const primaryModel = allModels.reduce((best, m) => best === null || totalTokens(s.byModel[m]) > totalTokens(s.byModel[best]) ? m : best, null) ?? '';
+    const totalCost = Object.entries(s.byModel).reduce((acc, [m, u]) => {
+        const c = estimateCostUSD(m, u);
+        if (c === null)
+            return acc;
+        return (acc ?? 0) + c;
+    }, null);
+    return (_jsx(Box, { flexDirection: "column", marginLeft: 2, marginBottom: 1, children: _jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", paddingX: 1, children: [_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Input    " }), _jsx(Text, { color: "cyan", children: bar(totals.input_tokens / max, DETAIL_BAR) }), _jsxs(Text, { children: ["  ", fmtNumber(totals.input_tokens).padStart(7)] }), _jsx(Text, { dimColor: true, children: `  ${total > 0 ? ((totals.input_tokens / total) * 100).toFixed(1).padStart(5) : '  0.0'}%` }), (() => { const c = categoryCostUSD(primaryModel, 'input', totals.input_tokens); return c !== null ? _jsx(Text, { dimColor: true, children: `  ~${fmtUSD(c)}` }) : null; })()] }), _jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Output   " }), _jsx(Text, { color: "green", children: bar(totals.output_tokens / max, DETAIL_BAR) }), _jsxs(Text, { children: ["  ", fmtNumber(totals.output_tokens).padStart(7)] }), _jsx(Text, { dimColor: true, children: `  ${total > 0 ? ((totals.output_tokens / total) * 100).toFixed(1).padStart(5) : '  0.0'}%` }), (() => { const c = categoryCostUSD(primaryModel, 'output', totals.output_tokens); return c !== null ? _jsx(Text, { dimColor: true, children: `  ~${fmtUSD(c)}` }) : null; })()] }), totals.cache_creation_input_tokens > 0 && (_jsxs(Text, { children: [_jsx(Text, { bold: true, children: "C.write  " }), _jsx(Text, { color: "yellow", children: bar(totals.cache_creation_input_tokens / max, DETAIL_BAR) }), _jsxs(Text, { children: ["  ", fmtNumber(totals.cache_creation_input_tokens).padStart(7)] }), _jsx(Text, { dimColor: true, children: `  ${total > 0 ? ((totals.cache_creation_input_tokens / total) * 100).toFixed(1).padStart(5) : '  0.0'}%` }), (() => { const c = categoryCostUSD(primaryModel, 'cacheWrite', totals.cache_creation_input_tokens); return c !== null ? _jsx(Text, { dimColor: true, children: `  ~${fmtUSD(c)}` }) : null; })()] })), totals.cache_read_input_tokens > 0 && (_jsxs(Text, { children: [_jsx(Text, { bold: true, children: "C.read   " }), _jsx(Text, { color: "magenta", children: bar(totals.cache_read_input_tokens / max, DETAIL_BAR) }), _jsxs(Text, { children: ["  ", fmtNumber(totals.cache_read_input_tokens).padStart(7)] }), _jsx(Text, { dimColor: true, children: `  ${total > 0 ? ((totals.cache_read_input_tokens / total) * 100).toFixed(1).padStart(5) : '  0.0'}%` }), (() => { const c = categoryCostUSD(primaryModel, 'cacheRead', totals.cache_read_input_tokens); return c !== null ? _jsx(Text, { dimColor: true, children: `  ~${fmtUSD(c)}` }) : null; })()] }))] }), _jsx(Text, { dimColor: true, children: '─'.repeat(DETAIL_BAR + 32) }), _jsxs(Text, { children: [_jsx(Text, { bold: true, children: 'Total    ' }), _jsx(Text, { bold: true, children: fmtNumber(total).padStart(DETAIL_BAR + 2 + 7) }), totalCost !== null && _jsx(Text, { dimColor: true, children: `         ~${fmtUSD(totalCost)}` })] }), allModels.length > 1 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "by model" }), allModels.map((m) => {
+                            const mu = s.byModel[m];
+                            const mc = estimateCostUSD(m, mu);
+                            return (_jsxs(Text, { children: [_jsxs(Text, { color: "cyan", children: ["  ", shortModel(m)] }), _jsx(Text, { dimColor: true, children: "  \u03A3 " }), _jsx(Text, { children: fmtNumber(totalTokens(mu)) }), mc !== null && _jsx(Text, { dimColor: true, children: `  ~${fmtUSD(mc)}` })] }, m));
+                        })] }))] }) }));
+}
 function fmtDuration(ms) {
     const totalSec = Math.floor(ms / 1000);
     const h = Math.floor(totalSec / 3600);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tokens-metric",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "description": "Real-time token usage meter for Claude Code — statusline + Ink TUI.",
   "type": "module",
   "bin": {