Dashboard UI Improvements & Project Context - Changelog - LLM Gateway

🎯 Proper Project & Organization Context

The dashboard now properly reflects the database relationships between organizations, projects, API keys, and provider keys:

Organization switcher in the sidebar header for easy organization switching
Project switcher in the top bar for seamless project navigation
Context awareness
- all components now know which project/organization is selected

Scoped Resource Management

API Keys are now properly scoped to the selected project
Provider Keys are scoped to the selected organization
Activity & Usage data filtered by the selected project
Settings contextualized to the appropriate scope (project vs organization)

📊 Enhanced Data Filtering

Real-time Context Updates

All dashboard components now respond to project/organization changes:

Activity charts automatically filter by selected project
Usage analytics show project-specific metrics
Recent logs display only logs from the current project
Cost breakdowns reflect the selected project's usage

Smart State Management

Dashboard context provides centralized state management
Automatic cache invalidation when switching contexts
Conditional rendering based on selection state
Clear user feedback showing current project/organization names

🎨 Improved Log Display

Better Text Handling

Fixed layout issues with long prompts and responses:

Proper text wrapping for long AI responses and prompts
No more horizontal overflow
- content stays within screen bounds
Preserved formatting in code blocks while allowing text to wrap
Full prompt visibility
- no truncation of important content

Enhanced Layout

Responsive design that works on all screen sizes
Proper flex layouts that handle content overflow gracefully
Better spacing between elements for improved readability

🔧 Technical Improvements

Component Architecture

Centralized dashboard context using React Context API
Proper prop drilling elimination through context providers
TypeScript improvements with consolidated type definitions
Performance optimizations with memoized context values

API Integration

Consistent filtering across all API endpoints
Proper cache management with React Query
Error handling for missing context scenarios
Optimistic updates for better user experience

These improvements make the dashboard more intuitive and align the UI with the underlying database architecture, providing a clearer understanding of how your projects, API keys, and provider keys relate to each other.