feat: add token tracking for local and cloud requests; update UI to display token usage

Author: gitcoder89431

crates/agentic-tui/src/ui/app.rs

@@ -125,6 +125,8 @@ pub struct App {
     cloud_response: Option<AtomicNote>,
     synthesis_scroll: u16,
     coaching_tip: (String, String),
+    local_tokens_used: u32,  // Token count for current local request
+    cloud_tokens_used: u32,  // Token count for current cloud request
 }
 
 impl App {
@@ -154,6 +156,8 @@ impl App {
             cloud_response: None,
             synthesis_scroll: 0,
             coaching_tip: (String::new(), String::new()),
+            local_tokens_used: 0,
+            cloud_tokens_used: 0,
         }
     }
 
@@ -345,6 +349,8 @@ impl App {
                 &self.theme,
                 self.agent_status,
                 &self.settings,
+                self.local_tokens_used,
+                self.cloud_tokens_used,
             );
             render_footer(
                 frame,
@@ -473,10 +479,10 @@ impl App {
                         .alignment(ratatui::prelude::Alignment::Center)
                 };
 
-                // Create a centered area for the synthesis (70% width, centered vertically)
+                // Create a compact area for the synthesis (60% width, ~12 lines height, centered)
                 let main_area = app_chunks[1];
-                let synthesis_width = (main_area.width * 70 / 100).max(40).min(main_area.width);
-                let synthesis_height = 10; // Fixed height for the synthesis box
+                let synthesis_width = (main_area.width * 60 / 100).max(40).min(80);
+                let synthesis_height = 12.min(main_area.height - 6);
 
                 let synthesis_area = Rect::new(
                     main_area.x + (main_area.width.saturating_sub(synthesis_width)) / 2,
@@ -655,6 +661,9 @@ impl App {
         if self.agent_status == AgentStatus::ValidatingCloud {
             self.agent_status = AgentStatus::Ready;
             self.start_agent_services();
+            // Automatically enter chat mode after successful validation
+            self.mode = AppMode::Chat;
+            self.edit_buffer.clear();
         }
     }
 
@@ -904,6 +913,8 @@ impl App {
                                 self.proposals.clear();
                                 self.current_proposal_index = 0;
                                 self.original_user_query.clear();
+                                self.local_tokens_used = 0;
+                                self.cloud_tokens_used = 0;
                             }
                             _ => {}
                         },
@@ -919,6 +930,8 @@ impl App {
                                 self.cloud_response = None;
                                 self.synthesis_scroll = 0;
                                 self.agent_status = AgentStatus::Ready;
+                                self.local_tokens_used = 0;
+                                self.cloud_tokens_used = 0;
                             }
                             KeyCode::Down => {
                                 // Discard synthesis (negative action)
@@ -931,10 +944,18 @@ impl App {
                                 self.synthesis_scroll = 0;
                                 self.agent_status = AgentStatus::Ready;
                                 self.edit_buffer.clear();
+                                self.local_tokens_used = 0;
+                                self.cloud_tokens_used = 0;
                             }
-                            KeyCode::Left | KeyCode::Right => {
-                                // Keep horizontal scrolling for long content
-                                // Currently no horizontal scroll implemented
+                            KeyCode::Left => {
+                                // Scroll up through synthesis content
+                                if self.synthesis_scroll > 0 {
+                                    self.synthesis_scroll -= 1;
+                                }
+                            }
+                            KeyCode::Right => {
+                                // Scroll down through synthesis content
+                                self.synthesis_scroll += 1;
                             }
                             KeyCode::Enter | KeyCode::Esc => {
                                 // Fallback: return to normal without saving
@@ -973,6 +994,10 @@ impl App {
             // Store the original user query for metadata
             self.original_user_query = message.clone();
 
+            // Estimate tokens for local request (rough: chars/4 + prompt overhead)
+            self.local_tokens_used = (message.len() / 4) as u32 + 500; // ~500 tokens for prompt template
+            self.cloud_tokens_used = 0; // Reset cloud tokens for new session
+            
             self.agent_status = AgentStatus::Orchestrating;
             let settings = self.settings.clone();
             let tx = self.agent_tx.clone();
@@ -1016,17 +1041,37 @@ impl App {
             // Use proposal text directly since the new prompt ensures proper format
             let clean_proposal = proposal_text;
 
+            // Get model names for usage metadata
+            let local_model = if self.settings.local_model.is_empty() || self.settings.local_model == "[SELECT]" {
+                "unknown"
+            } else {
+                &self.settings.local_model
+            };
+
+            let cloud_model = if self.settings.cloud_model.is_empty() || self.settings.cloud_model == "[SELECT]" {
+                "anthropic/claude-3.5-sonnet"
+            } else {
+                &self.settings.cloud_model
+            };
+
+            // Estimate token breakdown (rough estimates)
+            let local_prompt_tokens = (self.original_user_query.len() / 4) as u32 + 200; // Query + template
+            let local_completion_tokens = self.local_tokens_used.saturating_sub(local_prompt_tokens);
+            let cloud_prompt_tokens = (self.final_prompt.len() / 4) as u32 + 150; // Proposal + synthesis template  
+            let cloud_completion_tokens = self.cloud_tokens_used.saturating_sub(cloud_prompt_tokens);
+
             let markdown_content = format!(
-                "---\ndate: {}\nprovider: \"OPENROUTER\"\nmodel: \"{}\"\nquery: \"{}\"\nproposal: \"{}\"\ntags: [{}]\n---\n\n# {}\n\n{}\n",
+                "---\ndate: {}\nprovider: \"OPENROUTER\"\nquery: \"{}\"\nproposal: \"{}\"\ntags: [{}]\n\nusage:\n  local_model: \"{}\"\n  local_prompt_tokens: {}\n  local_completion_tokens: {}\n  cloud_model: \"{}\"\n  cloud_prompt_tokens: {}\n  cloud_completion_tokens: {}\n---\n\n# {}\n\n{}\n",
                 chrono::Utc::now().format("%Y-%m-%d %H:%M:%S UTC"),
-                if self.settings.cloud_model.is_empty() || self.settings.cloud_model == "[SELECT]" {
-                    "anthropic/claude-3.5-sonnet"
-                } else {
-                    &self.settings.cloud_model
-                },
                 self.original_user_query.replace("\"", "\\\""),
                 clean_proposal.replace("\"", "\\\""),
                 note.header_tags.iter().map(|tag| format!("\"{}\"", tag)).collect::<Vec<_>>().join(", "),
+                local_model,
+                local_prompt_tokens,
+                local_completion_tokens,
+                cloud_model,
+                cloud_prompt_tokens,
+                cloud_completion_tokens,
                 note.header_tags.join(" • "),
                 note.body_text
             );
@@ -1048,6 +1093,9 @@ impl App {
     fn handle_cloud_synthesis(&mut self) {
         // Set status to searching and trigger cloud API call
         self.agent_status = AgentStatus::Searching;
+        
+        // Estimate tokens for cloud request (prompt + synthesis template)
+        self.cloud_tokens_used = (self.final_prompt.len() / 4) as u32 + 300; // ~300 tokens for synthesis template
 
         let prompt = self.final_prompt.clone();
         let api_key = self.settings.api_key.clone();

crates/agentic-tui/src/ui/footer.rs

@@ -21,16 +21,16 @@ pub fn render_footer(
 
     let content = match mode {
         AppMode::Complete => {
-            // Save/Discard navigation for synthesis results
+            // Save/Discard navigation for synthesis results with scroll controls
             Line::from(vec![
                 Span::raw("[↑] "),
-                Span::styled("Save Synthesis", theme.ratatui_style(Element::Accent)),
+                Span::styled("Save", theme.ratatui_style(Element::Accent)),
                 Span::raw("  |  "),
                 Span::raw("[↓] "),
-                Span::styled(
-                    "Discard & New Query",
-                    theme.ratatui_style(Element::Inactive),
-                ),
+                Span::styled("Discard", theme.ratatui_style(Element::Inactive)),
+                Span::raw("  |  "),
+                Span::raw("[←→] "),
+                Span::styled("Scroll", theme.ratatui_style(Element::Text)),
             ])
             .alignment(Alignment::Center)
         }

crates/agentic-tui/src/ui/header.rs

@@ -16,11 +16,13 @@ pub fn render_header(
     theme: &Theme,
     status: AgentStatus,
     settings: &Settings,
+    local_tokens: u32,
+    cloud_tokens: u32,
 ) {
     // Dynamic title based on what's actually configured - much smarter!
     let title = Title::from(" Agentic v0.1.0 ").alignment(Alignment::Left);
 
-    let (status_text, status_color) = build_smart_status_with_color(status, settings);
+    let (status_text, status_color) = build_smart_status_with_color(status, settings, local_tokens, cloud_tokens);
 
     let status_span = Span::styled(status_text, Style::default().fg(status_color));
 
@@ -37,8 +39,8 @@ pub fn render_header(
     frame.render_widget(header_paragraph, area);
 }
 
-fn build_smart_status_with_color(status: AgentStatus, settings: &Settings) -> (String, Color) {
-    // Show actual configuration state - much smarter than generic messages!
+fn build_smart_status_with_color(status: AgentStatus, settings: &Settings, local_tokens: u32, cloud_tokens: u32) -> (String, Color) {
+    // Show actual configuration state with model names always visible
     let local_configured = settings.local_model != "[SELECT]";
     let cloud_configured =
         settings.cloud_model != "[SELECT]" && settings.api_key != "sk-or-v1-982...b52";
@@ -55,59 +57,74 @@ fn build_smart_status_with_color(status: AgentStatus, settings: &Settings) -> (S
         "NOT-READY"
     };
 
+    // Helper function to format token count for display
+    let format_single_tokens = |tokens: u32| -> String {
+        if tokens < 1000 {
+            format!("{}", tokens)
+        } else {
+            format!("{:.1}k", tokens as f32 / 1000.0)
+        }
+    };
+
+    let format_token_display = |local: u32, cloud: u32, status: AgentStatus| -> String {
+        match status {
+            AgentStatus::Orchestrating if local > 0 => {
+                format!(" | ({})", format_single_tokens(local))
+            }
+            AgentStatus::Searching if local > 0 && cloud > 0 => {
+                format!(" | ({}) + ({})", format_single_tokens(local), format_single_tokens(cloud))
+            }
+            AgentStatus::Complete if local > 0 => {
+                let total = local + cloud;
+                if cloud > 0 {
+                    format!(" | ({})", format_single_tokens(total))
+                } else {
+                    format!(" | ({})", format_single_tokens(local))
+                }
+            }
+            _ => String::new()
+        }
+    };
+
     let text = match status {
         AgentStatus::Ready => {
-            // Both configured - show actual model names
             format!("Ruixen :: {} :: {}", local_display, cloud_display)
         }
         AgentStatus::NotReady => {
-            // Default state - show what we have so far
             format!("Ruixen :: {} :: {}", local_display, cloud_display)
         }
         AgentStatus::CheckLocalModel => {
-            // Highlight the local model issue
             format!("Ruixen :: [CONFIGURE LOCAL] :: {}", cloud_display)
         }
         AgentStatus::CheckCloudModel => {
-            // Highlight the cloud model issue
             format!("Ruixen :: {} :: [CONFIGURE CLOUD]", local_display)
         }
         AgentStatus::CheckApiKey => {
-            // Highlight the API key issue
             format!("Ruixen :: {} :: [CONFIGURE API KEY]", local_display)
         }
         AgentStatus::ValidatingLocal => {
-            format!(
-                "Ruixen :: [CHECKING {}] :: {}",
-                local_display, cloud_display
-            )
+            format!("Ruixen :: [CHECKING {}] :: {}", local_display, cloud_display)
         }
         AgentStatus::ValidatingCloud => {
-            format!(
-                "Ruixen :: {} :: [CHECKING {}]",
-                local_display, cloud_display
-            )
+            format!("Ruixen :: {} :: [CHECKING {}]", local_display, cloud_display)
         }
         AgentStatus::LocalEndpointError => {
-            format!(
-                "Ruixen :: [ERROR: {} UNREACHABLE] :: {}",
-                local_display, cloud_display
-            )
+            format!("Ruixen :: [ERROR: {} UNREACHABLE] :: {}", local_display, cloud_display)
         }
         AgentStatus::CloudEndpointError => {
-            format!(
-                "Ruixen :: {} :: [ERROR: {} UNREACHABLE]",
-                local_display, cloud_display
-            )
+            format!("Ruixen :: {} :: [ERROR: {} UNREACHABLE]", local_display, cloud_display)
         }
         AgentStatus::Orchestrating => {
-            format!("Ruixen :: [ORCHESTRATING] :: {}", cloud_display)
+            // Show local tokens during orchestration
+            format!("Ruixen :: {} :: {}{}", local_display, cloud_display, format_token_display(local_tokens, cloud_tokens, status))
         }
         AgentStatus::Searching => {
-            format!("Ruixen :: ☁️🔍 :: [SEARCHING] :: {}", cloud_display)
+            // Show local + cloud tokens during synthesis
+            format!("Ruixen :: {} :: {}{}", local_display, cloud_display, format_token_display(local_tokens, cloud_tokens, status))
         }
         AgentStatus::Complete => {
-            format!("Ruixen :: ✨ :: [SYNTHESIS COMPLETE] :: {}", cloud_display)
+            // Show total bill (red color applied later)
+            format!("Ruixen :: {} :: {}{}", local_display, cloud_display, format_token_display(local_tokens, cloud_tokens, status))
         }
     };
 
@@ -124,7 +141,7 @@ fn build_smart_status_with_color(status: AgentStatus, settings: &Settings) -> (S
         AgentStatus::ValidatingLocal | AgentStatus::ValidatingCloud => Color::Yellow, // Testing in progress
         AgentStatus::Orchestrating => Color::Cyan,
         AgentStatus::Searching => Color::Blue, // Cloud synthesis in progress
-        AgentStatus::Complete => Color::Green, // Success!
+        AgentStatus::Complete => Color::Green, // Success! (token styling handled separately)
         AgentStatus::LocalEndpointError | AgentStatus::CloudEndpointError => Color::Red, // Connection failed
         _ => Color::Red, // Other validation failed
     };