tokens-metric 0.4.3 → 0.4.4

package/dist/tui/index.js

@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from 'react';
 import { render, Box, Text, useApp, useInput } from 'ink';
 import { createInterface } from 'node:readline';
 import { spawnSync } from 'node:child_process';
-import { findMostRecentActiveTranscript, listTranscripts } from '../core/parser.js';
+import { findActiveTranscript, findActiveCodexTranscript, listTranscripts } from '../core/parser.js';
 import { tailTranscript } from '../core/tailer.js';
 import { detectAuth } from '../core/detect.js';
 import { categoryCostUSD, contextWindowSize, estimateCostUSD, fmtNumber, fmtUSD } from '../core/format.js';
@@ -29,11 +29,19 @@ const BAR_WIDTH = 20;
 function App() {
     const { exit } = useApp();
     const [auth] = useState(() => detectAuth());
-    const [stats, setStats] = useState(null);
-    const [transcriptPath, setTranscriptPath] = useState(null);
-    const [series, setSeries] = useState(() => Array(SPARK_WIDTH).fill(0));
+    // Claude source
+    const [claudeStats, setClaudeStats] = useState(null);
+    const [claudePath, setClaudePath] = useState(null);
+    const [claudeSeries, setClaudeSeries] = useState(() => Array(SPARK_WIDTH).fill(0));
+    const [claudeLastTailAt, setClaudeLastTailAt] = useState(null);
+    const claudeLastTotalRef = useRef(0);
+    // Codex source
+    const [codexStats, setCodexStats] = useState(null);
+    const [codexPath, setCodexPath] = useState(null);
+    const [codexSeries, setCodexSeries] = useState(() => Array(SPARK_WIDTH).fill(0));
+    const [codexLastTailAt, setCodexLastTailAt] = useState(null);
+    const codexLastTotalRef = useRef(0);
     const [now, setNow] = useState(Date.now());
-    const [lastTailAt, setLastTailAt] = useState(null);
     const [history, setHistory] = useState(null);
     const [updateAvailable, setUpdateAvailable] = useState(null);
     // focusedTab: where the cursor sits (arrow navigation)
@@ -41,7 +49,6 @@ function App() {
     const [focusedTab, setFocusedTab] = useState(1);
     const [openTab, setOpenTab] = useState(null);
     const startedAtRef = useRef(Date.now());
-    const lastTotalRef = useRef(0);
     // useInput requires raw mode (interactive TTY). Skip it when stdin is piped
     // or otherwise non-interactive, so `node dist/tui/index.js | cat` still
     // renders instead of crashing.
@@ -120,45 +127,88 @@ function App() {
     useEffect(() => {
         const t = setInterval(() => {
             setNow(Date.now());
-            setSeries((s) => [...s.slice(1), 0]);
+            setClaudeSeries((s) => [...s.slice(1), 0]);
+            setCodexSeries((s) => [...s.slice(1), 0]);
         }, 1000);
         return () => clearInterval(t);
     }, []);
+    // Claude tailing
     useEffect(() => {
         let handle = null;
         let cancelled = false;
         async function attach(path) {
             handle?.stop().catch(() => undefined);
-            setTranscriptPath(path);
+            setClaudePath(path);
             handle = await tailTranscript(path);
             if (cancelled) {
                 handle.stop();
                 return;
             }
-            // Seed initial state — tailTranscript already drained the file once
-            // before returning, but its first notify() fires before any listener
-            // is attached, so we'd otherwise wait for the next appended line.
-            lastTotalRef.current = totalTokens(handle.stats.totals);
-            setLastTailAt(Date.now());
-            setStats({ ...handle.stats });
+            claudeLastTotalRef.current = totalTokens(handle.stats.totals);
+            setClaudeLastTailAt(Date.now());
+            setClaudeStats({ ...handle.stats });
             handle.onUpdate((s) => {
-                setLastTailAt(Date.now());
+                setClaudeLastTailAt(Date.now());
                 const tot = totalTokens(s.totals);
-                const delta = Math.max(0, tot - lastTotalRef.current);
+                const delta = Math.max(0, tot - claudeLastTotalRef.current);
                 if (delta > 0) {
-                    setSeries((arr) => {
+                    setClaudeSeries((arr) => {
                         const next = arr.slice();
                         next[next.length - 1] = (next[next.length - 1] ?? 0) + delta;
                         return next;
                     });
                 }
-                lastTotalRef.current = tot;
-                setStats({ ...s });
+                claudeLastTotalRef.current = tot;
+                setClaudeStats({ ...s });
             });
         }
         async function rescan() {
-            const active = findMostRecentActiveTranscript();
-            if (active && active.path !== transcriptPath)
+            const active = findActiveTranscript();
+            if (active && active.path !== claudePath)
+                await attach(active.path);
+        }
+        rescan();
+        const interval = setInterval(rescan, RESCAN_MS);
+        return () => {
+            cancelled = true;
+            clearInterval(interval);
+            handle?.stop().catch(() => undefined);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Codex tailing
+    useEffect(() => {
+        let handle = null;
+        let cancelled = false;
+        async function attach(path) {
+            handle?.stop().catch(() => undefined);
+            setCodexPath(path);
+            handle = await tailTranscript(path);
+            if (cancelled) {
+                handle.stop();
+                return;
+            }
+            codexLastTotalRef.current = totalTokens(handle.stats.totals);
+            setCodexLastTailAt(Date.now());
+            setCodexStats({ ...handle.stats });
+            handle.onUpdate((s) => {
+                setCodexLastTailAt(Date.now());
+                const tot = totalTokens(s.totals);
+                const delta = Math.max(0, tot - codexLastTotalRef.current);
+                if (delta > 0) {
+                    setCodexSeries((arr) => {
+                        const next = arr.slice();
+                        next[next.length - 1] = (next[next.length - 1] ?? 0) + delta;
+                        return next;
+                    });
+                }
+                codexLastTotalRef.current = tot;
+                setCodexStats({ ...s });
+            });
+        }
+        async function rescan() {
+            const active = findActiveCodexTranscript();
+            if (active && active.path !== codexPath)
                 await attach(active.path);
         }
         rescan();
@@ -173,9 +223,21 @@ function App() {
     const allTranscripts = listTranscripts();
     const transcripts = allTranscripts.slice(0, 5);
     const today = countToday(allTranscripts, now);
-    const ratePerSec = series.reduce((a, b) => a + b, 0) / SPARK_WIDTH;
-    const todaySessions = getTodaySessions(now, transcriptPath);
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Header, { auth: auth, sessionsToday: today.sessions, projectsToday: today.projects, lastTailAt: lastTailAt, startedAt: startedAtRef.current, now: now, updateAvailable: updateAvailable }), _jsx(Box, { marginTop: 1, children: _jsx(SessionStatusBar, { stats: stats, ratePerSec: ratePerSec, now: now, series: series }) }), _jsx(Box, { marginTop: 1, children: _jsx(TabBar, { focusedTab: focusedTab, openTab: openTab }) }), openTab !== null && (_jsxs(Box, { marginTop: 1, children: [openTab === 1 && (_jsx(BreakdownPanel, { stats: stats, series: series, ratePerSec: ratePerSec })), openTab === 2 && _jsx(HistoryPanel, { history: history }), openTab === 3 && _jsx(TodaySessionsPanel, { sessions: todaySessions, now: now }), openTab === 4 && (_jsx(TranscriptsPanel, { transcripts: transcripts, activePath: transcriptPath, 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"] }) })] }));
+    const claudeRate = claudeSeries.reduce((a, b) => a + b, 0) / SPARK_WIDTH;
+    const codexRate = codexSeries.reduce((a, b) => a + b, 0) / SPARK_WIDTH;
+    const todaySessions = getTodaySessions(now, claudePath);
+    // BreakdownPanel follows the most recently active source
+    const claudeAt = claudeStats?.lastEventAt ?? 0;
+    const codexAt = codexStats?.lastEventAt ?? 0;
+    const primaryStats = codexAt > claudeAt ? codexStats : claudeStats;
+    const primarySeries = codexAt > claudeAt ? codexSeries : claudeSeries;
+    const primaryRate = codexAt > claudeAt ? codexRate : claudeRate;
+    const lastTailAt = claudeLastTailAt && codexLastTailAt
+        ? Math.max(claudeLastTailAt, codexLastTailAt)
+        : claudeLastTailAt ?? codexLastTailAt;
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Header, { auth: auth, 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"] }) })] }));
 }
 // ── Header ───────────────────────────────────────────────────────────────────
 function Header({ auth, sessionsToday, projectsToday, lastTailAt, startedAt, now, updateAvailable, }) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tokens-metric",
-  "version": "0.4.3",
-  "description": "Real-time token usage meter for Claude Code \u2014 statusline + Ink TUI.",
+  "version": "0.4.4",
+  "description": "Real-time token usage meter for Claude Code — statusline + Ink TUI.",
   "type": "module",
   "bin": {
     "tokens-metric": "dist/tui/index.js",