feat: animated count-up for token usage displays

Author: skyline69

src/stats.rs

@@ -494,9 +494,21 @@ impl StatsSummary {
 mod tests {
     use super::*;
 
+    /// Create a fresh Stats without loading persistent data from disk.
+    fn fresh_stats() -> Stats {
+        Stats {
+            requests: RwLock::new(HashMap::new()),
+            start_time: Instant::now(),
+            endpoint_requests: RwLock::new(HashMap::new()),
+            rate_history: RwLock::new(RateHistory::new()),
+            token_counters: RwLock::new(HashMap::new()),
+            token_events: RwLock::new(VecDeque::with_capacity(MAX_TOKEN_EVENTS)),
+        }
+    }
+
     #[test]
     fn test_stats_record_request() {
-        let stats = Stats::new();
+        let stats = fresh_stats();
         stats.record_request("claude-sonnet-4-5", "/v1/messages");
         stats.record_request("claude-sonnet-4-5", "/v1/messages");
         stats.record_request("claude-opus-4-5", "/v1/chat/completions");
@@ -509,14 +521,14 @@ mod tests {
 
     #[test]
     fn test_stats_uptime() {
-        let stats = Stats::new();
+        let stats = fresh_stats();
         std::thread::sleep(std::time::Duration::from_millis(10));
         assert!(stats.uptime().as_millis() >= 10);
     }
 
     #[test]
     fn test_stats_to_json() {
-        let stats = Stats::new();
+        let stats = fresh_stats();
         stats.record_request("test-model", "/v1/messages");
 
         let summary = stats.summary();
@@ -528,7 +540,7 @@ mod tests {
 
     #[test]
     fn test_stats_token_usage() {
-        let stats = Stats::new();
+        let stats = fresh_stats();
         stats.record_request("claude-sonnet-4-5", "/v1/messages");
         stats.record_token_usage("claude-sonnet-4-5", 100, 200, 50);
         stats.record_token_usage("claude-sonnet-4-5", 150, 300, 0);
@@ -560,7 +572,7 @@ mod tests {
 
     #[test]
     fn test_stats_token_json() {
-        let stats = Stats::new();
+        let stats = fresh_stats();
         stats.record_request("test-model", "/v1/messages");
         stats.record_token_usage("test-model", 100, 200, 0);
 

src/tui/app.rs

@@ -24,6 +24,15 @@ const MIN_WIDTH: u16 = 60;
 /// Minimum terminal height for proper display
 const MIN_HEIGHT: u16 = 15;
 
+/// Linearly interpolate between two u64 values.
+fn lerp_u64(from: u64, to: u64, t: f64) -> u64 {
+    if to >= from {
+        from + ((to - from) as f64 * t) as u64
+    } else {
+        from - ((from - to) as f64 * t) as u64
+    }
+}
+
 /// Available tabs in the TUI
 #[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
 pub enum Tab {
@@ -271,6 +280,20 @@ pub struct App {
     pub cached_uptime: String,
     /// Cached token usage stats (fetched from /stats endpoint)
     pub cached_token_stats: Option<super::data::TokenStats>,
+    /// Animated token display values (interpolated for count-up effect)
+    pub animated_input_tokens: u64,
+    pub animated_output_tokens: u64,
+    pub animated_cache_read_tokens: u64,
+    /// Previous token values (start of animation)
+    token_anim_prev_input: u64,
+    token_anim_prev_output: u64,
+    token_anim_prev_cache_read: u64,
+    /// Target token values (end of animation)
+    token_anim_target_input: u64,
+    token_anim_target_output: u64,
+    token_anim_target_cache_read: u64,
+    /// When the current animation started (in animation_time_ms)
+    token_anim_start_ms: u64,
     /// Rolling time-series of token usage per model
     pub token_history: super::data::TokenHistory,
     /// Last time token stats were fetched
@@ -416,6 +439,16 @@ impl App {
             cached_requests_per_min: 0.0,
             cached_uptime: String::from("00:00:00"),
             cached_token_stats: None,
+            animated_input_tokens: 0,
+            animated_output_tokens: 0,
+            animated_cache_read_tokens: 0,
+            token_anim_prev_input: 0,
+            token_anim_prev_output: 0,
+            token_anim_prev_cache_read: 0,
+            token_anim_target_input: 0,
+            token_anim_target_output: 0,
+            token_anim_target_cache_read: 0,
+            token_anim_start_ms: 0,
             token_history: super::data::TokenHistory::load(),
             last_token_stats_refresh: Instant::now() - Duration::from_secs(10),
             last_token_history_save: Instant::now(),
@@ -517,7 +550,28 @@ impl App {
             return;
         }
         self.last_token_stats_refresh = Instant::now();
-        self.cached_token_stats = super::data::DataProvider::fetch_token_stats();
+        let new_stats = super::data::DataProvider::fetch_token_stats();
+
+        // Trigger count-up animation if values changed
+        if let Some(ref stats) = new_stats {
+            let changed = stats.total_input_tokens != self.token_anim_target_input
+                || stats.total_output_tokens != self.token_anim_target_output
+                || stats.total_cache_read_tokens != self.token_anim_target_cache_read;
+            if changed {
+                // Snapshot current displayed values as the animation start
+                self.token_anim_prev_input = self.animated_input_tokens;
+                self.token_anim_prev_output = self.animated_output_tokens;
+                self.token_anim_prev_cache_read = self.animated_cache_read_tokens;
+                // Set targets
+                self.token_anim_target_input = stats.total_input_tokens;
+                self.token_anim_target_output = stats.total_output_tokens;
+                self.token_anim_target_cache_read = stats.total_cache_read_tokens;
+                // Record animation start time
+                self.token_anim_start_ms = self.animation_time_ms;
+            }
+        }
+
+        self.cached_token_stats = new_stats;
 
         // Update quota period from quota data
         if self.token_history.period_start.is_none()
@@ -557,6 +611,42 @@ impl App {
             .cloned()
     }
 
+    /// Duration of the token count-up animation in milliseconds
+    const TOKEN_ANIM_DURATION_MS: u64 = 400;
+
+    /// Update animated token values (called every frame).
+    /// Interpolates from previous to target values with ease-out.
+    pub fn update_token_animation(&mut self) {
+        let elapsed = self
+            .animation_time_ms
+            .saturating_sub(self.token_anim_start_ms);
+        if elapsed >= Self::TOKEN_ANIM_DURATION_MS {
+            // Animation complete — snap to target
+            self.animated_input_tokens = self.token_anim_target_input;
+            self.animated_output_tokens = self.token_anim_target_output;
+            self.animated_cache_read_tokens = self.token_anim_target_cache_read;
+        } else {
+            // Ease-out: t * (2 - t)
+            let t = elapsed as f64 / Self::TOKEN_ANIM_DURATION_MS as f64;
+            let eased = t * (2.0 - t);
+            self.animated_input_tokens = lerp_u64(
+                self.token_anim_prev_input,
+                self.token_anim_target_input,
+                eased,
+            );
+            self.animated_output_tokens = lerp_u64(
+                self.token_anim_prev_output,
+                self.token_anim_target_output,
+                eased,
+            );
+            self.animated_cache_read_tokens = lerp_u64(
+                self.token_anim_prev_cache_read,
+                self.token_anim_target_cache_read,
+                eased,
+            );
+        }
+    }
+
     /// Rebuild the filtered log indices based on current filter/search state
     pub fn refilter_logs(&mut self) {
         self.log_filtered_indices.clear();
@@ -2549,6 +2639,9 @@ fn render(frame: &mut Frame, app: &mut App, elapsed: Duration) {
         .animation_time_ms
         .wrapping_add(elapsed.as_millis() as u64);
 
+    // Update token count-up animation
+    app.update_token_animation();
+
     // Main layout: Header | Tabs | Content | Footer
     let chunks = Layout::vertical([
         Constraint::Length(1), // Header

src/tui/views/overview.rs

@@ -62,11 +62,7 @@ pub fn render(frame: &mut Frame, area: Rect, app: &mut App) {
     frame.render_widget(status_panel, top_chunks[0]);
 
     // Stats panel - comprehensive stats
-    let (total_in, total_out) = app
-        .cached_token_stats
-        .as_ref()
-        .map(|t| (t.total_input_tokens, t.total_output_tokens))
-        .unwrap_or((0, 0));
+    let (total_in, total_out) = (app.animated_input_tokens, app.animated_output_tokens);
     let stats_panel = StatsPanel::new(
         log_request_count,
         requests_per_min,

src/tui/views/usage.rs

@@ -42,7 +42,7 @@ pub fn render(frame: &mut Frame, area: Rect, app: &mut App) {
     ])
     .split(area);
 
-    render_summary(frame, layout[0], stats);
+    render_summary(frame, layout[0], app);
     render_cumulative_chart(frame, layout[1], app);
 }
 
@@ -69,8 +69,8 @@ fn render_no_data(frame: &mut Frame, area: Rect) {
     frame.render_widget(msg, centered);
 }
 
-/// Render the summary panel with total token counts
-fn render_summary(frame: &mut Frame, area: Rect, stats: &crate::tui::data::TokenStats) {
+/// Render the summary panel with total token counts (using animated values)
+fn render_summary(frame: &mut Frame, area: Rect, app: &App) {
     let block = Block::default()
         .title(" Token Usage Summary ")
         .title_style(theme::primary())
@@ -82,7 +82,11 @@ fn render_summary(frame: &mut Frame, area: Rect, stats: &crate::tui::data::Token
     let inner = block.inner(area);
     frame.render_widget(block, area);
 
-    let total = stats.total_input_tokens + stats.total_output_tokens;
+    // Use animated values for the count-up effect
+    let input = app.animated_input_tokens;
+    let output = app.animated_output_tokens;
+    let cache_read = app.animated_cache_read_tokens;
+    let total = input + output;
 
     let mut spans = vec![
         Span::styled(
@@ -91,24 +95,18 @@ fn render_summary(frame: &mut Frame, area: Rect, stats: &crate::tui::data::Token
                 .fg(theme::TEXT)
                 .add_modifier(Modifier::BOLD),
         ),
-        Span::styled(
-            format_tokens(stats.total_input_tokens),
-            Style::default().fg(theme::SECONDARY),
-        ),
+        Span::styled(format_tokens(input), Style::default().fg(theme::SECONDARY)),
         Span::raw("    "),
         Span::styled(
             "Output: ",
             Style::default()
                 .fg(theme::TEXT)
                 .add_modifier(Modifier::BOLD),
         ),
-        Span::styled(
-            format_tokens(stats.total_output_tokens),
-            Style::default().fg(theme::PRIMARY),
-        ),
+        Span::styled(format_tokens(output), Style::default().fg(theme::PRIMARY)),
     ];
 
-    if stats.total_cache_read_tokens > 0 {
+    if cache_read > 0 {
         spans.push(Span::raw("    "));
         spans.push(Span::styled(
             "Cached: ",
@@ -117,7 +115,7 @@ fn render_summary(frame: &mut Frame, area: Rect, stats: &crate::tui::data::Token
                 .add_modifier(Modifier::BOLD),
         ));
         spans.push(Span::styled(
-            format_tokens(stats.total_cache_read_tokens),
+            format_tokens(cache_read),
             Style::default().fg(theme::SUCCESS),
         ));
     }
@@ -135,6 +133,7 @@ fn render_summary(frame: &mut Frame, area: Rect, stats: &crate::tui::data::Token
     ));
 
     // Second line: per-model totals with matching colors, sorted by usage
+    let stats = app.cached_token_stats.as_ref().unwrap();
     let mut sorted_models: Vec<_> = stats.models.iter().collect();
     sorted_models.sort_by(|a, b| {
         let a_total = a.input_tokens + a.output_tokens;