feat: work in progress for exploration of how to show token usage

[Stijnus]

Token Usage Stats Feature

Overview

The Token Usage Stats component provides a detailed view of AI model usage and token consumption in your chat interface. It displays real-time statistics for all models used in the conversation.

Current Features

• Quick Overview: Shows total models used and token count at a glance
• Detailed Breakdown: Click "Details" to view comprehensive statistics
• Per Model Stats:
  • Model name and provider
  • Usage count
  • Token distribution (input/output)
  • Percentage of total tokens used
• Total Usage Summary:
  • Combined token count across all models
  • Input/Output token distribution
  • Visual progress bar for token distribution

UI/UX

• Clean, modern interface with light/dark mode support
• Collapsible view for space efficiency
• Scrollable content for multiple model entries
• Responsive tooltip with backdrop blur effect

Technical Details

• Built with React and TypeScript
• Uses Tailwind CSS for styling
• Implements @radix-ui/react-tooltip for tooltip functionality
• Real-time token calculation via useTokenUsage hook

Upcoming Features

Cost Analysis

• 💰 Cost calculation based on model pricing
• 📊 Estimated cost per conversation
• 🔄 Cost comparison between different models
• 💵 Monthly/daily cost tracking

Usage Analytics

• 📈 Interactive graphs for token usage trends
• 📅 Historical usage patterns over time
• ⚠️ Usage limits and warning notifications
• 📉 Usage optimization suggestions

Performance Optimizations

• ⚡ Caching of token calculations
• 🖼️ Lazy loading of provider icons
• 📜 Virtualization for large message histories
• 🚀 Optimized rendering for real-time updates

Enhanced UI Features

• 🎨 Custom themes for visualizations
• 📱 Responsive mobile-first design
• ⬇️ Export usage statistics to CSV/JSON
• 🔍 Advanced filtering and sorting options

Advanced Statistics

• ⚖️ Average tokens per message
• 📊 Token efficiency metrics
• 🎯 Context window utilization
• ⏱️ Response time analytics
• 🔄 Model performance comparisons

Integration Features

• 🔌 API for external usage tracking
• 📊 Dashboard integration
• 🔄 Real-time sync with other tools
• 📱 Mobile app support

Technical Roadmap

1. Q1: Cost analysis implementation
2. Q2: Usage analytics and visualization
3. Q3: Performance optimizations
4. Q4: Advanced statistics and integrations

[wonderwhy-er]

I think it should be closed by default.

I also think that it should not be in chat scrolling with messages.
Also that hover popup and accordion kinda duplicate each other.
Feels like I would remove one of them.

Maybe we should move just usage + details to header? So that its chat characteristic?

[Stijnus]

I have changed the position to the right wit an icon and an extra sidebar.

[Stijnus]

Add new feature :

[wonderwhy-er]

Hm, is in settings across all chats?
I think I only care about current chat.

I see you are showing price, its probably not gonna work across all providers?

[wonderwhy-er]

Also, it seems something is not working locally for me.
Looks like node code is being bundled for client.