feat: add ErrorCountBadgeComponent for displaying error counts with SignalR integration

feat: implement FilterPresetsModalComponent for managing filter presets with UI

style: add styles for FilterPresetsModalComponent

test: add unit tests for FilterPresetsModalComponent

feat: create LogDetailsModalComponent for displaying detailed log information

style: add styles for LogDetailsModalComponent

feat: implement TimestampFormatPipe for formatting timestamps based on user preference

feat: create FilterPresetsService for managing filter presets in local storage

feat: implement TimestampService for handling timestamp formatting preferences

feat: create ViewModeService for managing user view mode preferences

Author: Timothy Dodd

.claude/settings.local.json

@@ -5,7 +5,8 @@
       "Bash(dotnet test:*)",
       "Bash(timeout 30 dotnet test src/RoboDodd.OrmLite.Tests/RoboDodd.OrmLite.Tests.csproj --filter \"FullyQualifiedName=RoboDodd.OrmLite.Tests.ServiceStackMigrationIntegrationTests.ErrorHandling_WithInvalidOperations_HandlesGracefully\" --verbosity normal)",
       "Bash(timeout:*)",
-      "Bash(npm run build:*)"
+      "Bash(npm run build:*)",
+      "Bash(npx ng build:*)"
     ],
     "deny": []
   }

CLAUDE.md

@@ -404,4 +404,149 @@ Use provided mixins for consistent styling:
 - Validate responsive behavior on mobile devices
 - Ensure proper contrast ratios with accessibility tools
 
-This styling system ensures a consistent, maintainable, and accessible dark theme throughout the LogMk application while supporting full-width layouts optimized for log monitoring workflows.
+This styling system ensures a consistent, maintainable, and accessible dark theme throughout the LogMk application while supporting full-width layouts optimized for log monitoring workflows.
+
+## Advanced Features & Services
+
+### **Real-time Log Processing**
+The application implements comprehensive real-time log processing with multiple enhancement layers:
+
+**Core Services:**
+- `SignalrService` - Real-time WebSocket connection for live log streaming
+- `LogApiService` - RESTful API integration for historical log retrieval
+- `LogFilterState` - Centralized filter state management with signals
+- `ViewModeService` - User preference management for display density
+- `TimestampService` - Flexible timestamp formatting (relative/absolute)
+
+### **Enhanced Log Display System**
+
+**Syntax Highlighting (HighlightLogPipe):**
+```typescript
+// Comprehensive content highlighting includes:
+- JSON syntax (keys, strings, numbers, booleans, null)
+- Network content (URLs, IP addresses, HTTP methods/status codes)
+- Stack traces (class names, methods, line numbers)
+- Technical identifiers (UUIDs, file paths, email addresses)
+- Search term highlighting with dynamic backgrounds
+- SQL keywords and exception types
+```
+
+**View Mode System:**
+```typescript
+// Dual density modes for user preference
+- Compact Mode: 12px font, 2px padding, dense layout for maximum information
+- Expanded Mode: 14px font, 8px padding, spacious layout for readability
+- Persistent localStorage preference
+- Real-time switching with smooth CSS transitions
+```
+
+### **Advanced Filtering & Search**
+
+**Multi-dimensional Filtering:**
+- Log level filtering with multi-select dropdown
+- Pod-based filtering with search and select-all
+- Time range filtering (predefined + custom ranges)
+- Full-text search with real-time highlighting
+- Interactive chart-based time selection (drag to select)
+
+**Filter Presets System:**
+```typescript
+// FilterPresetsService features:
+- Save current filter combinations with custom names
+- localStorage persistence across sessions
+- Full CRUD operations (create, read, update, delete)
+- One-click preset application
+- Export-friendly filter state management
+```
+
+### **User Experience Enhancements**
+
+**Context Menu System:**
+- Right-click actions on individual log entries
+- Dynamic action generation based on log content
+- Smart positioning to stay within viewport bounds
+- Integrated filtering (show only/hide specific levels/pods)
+- Copy and detail actions
+
+**Modal System Architecture:**
+```typescript
+// Template-based modal system:
+- ModalService with signal-based state management
+- Support for custom headers, bodies, and footers
+- Multiple size variants (small, medium, large, extra-large)
+- Smooth animations and keyboard accessibility
+- Used by: Log Details, Filter Presets, and future modals
+```
+
+**Keyboard Shortcuts:**
+- `Ctrl/Cmd+F` - Focus search input
+- `Ctrl/Cmd+Shift+C` - Clear all filters
+- `E` - Show only errors
+- `W` - Show only warnings
+- Arrow keys - Navigate log entries
+- Enter - Open log details
+
+### **Export & Data Management**
+
+**Export System (ExportService):**
+```typescript
+// Multi-format export with intelligent naming:
+- CSV format for spreadsheet analysis
+- JSON format with metadata inclusion
+- Smart filename generation based on active filters
+- Respects current filter state
+- Date range and count metadata
+```
+
+**Memory Management:**
+- Virtual scrolling with configurable buffer amounts
+- Automatic log rotation (5000+ entries)
+- Efficient DOM recycling for performance
+- Parent scroll element detection for smooth scrolling
+
+### **Component Architecture Patterns**
+
+**Modern Angular Patterns (17+):**
+```typescript
+// Signal-based architecture throughout:
+- input<T>() for component inputs
+- output<T>() for component outputs
+- viewChild<T>() for element/component references
+- inject() for dependency injection
+- computed() for derived state
+- New @if/@for control flow syntax
+```
+
+**State Management:**
+```typescript
+// Centralized state with signals:
+- LogFilterState - All filter-related state
+- ViewModeService - Display preferences
+- TimestampService - Time format preferences
+- FilterPresetsService - Saved filter combinations
+- ModalService - Global modal state
+```
+
+### **Performance Optimizations**
+
+**Virtual Scrolling:**
+- `@iharbeck/ngx-virtual-scroller` for large datasets
+- Configurable buffer amounts and throttling
+- Parent scroll element integration
+- Unequal children size support for dynamic content
+
+**Efficient Rendering:**
+```typescript
+// Optimized rendering patterns:
+- OnPush change detection strategy
+- TrackBy functions for *ngFor loops
+- Computed signals for expensive operations
+- Debounced search input (300ms)
+- Lazy loading with pagination
+```
+
+**CSS Performance:**
+- CSS custom properties for runtime theming
+- Efficient selectors with minimal specificity
+- CSS containment for large lists
+- Hardware-accelerated animations

README.md

@@ -7,13 +7,32 @@ LogMk is a lightweight log monitoring solution for Kubernetes environments. It c
 
 ## ✨ Features
 
-- **Real-time Log Streaming**: View logs in real-time with SignalR WebSocket integration
-- **Centralized Storage**: All logs stored in MySQL with configurable retention policies
-- **Advanced Filtering**: Filter by namespace, pod, container, log level, and time ranges
-- **Modern Web Interface**: Angular 20 SPA with dark theme and responsive design
-- **Kubernetes Native**: DaemonSet deployment for automatic log collection across all nodes
-- **JWT Authentication**: Secure access with token-based authentication and refresh tokens
-- **Docker Ready**: Containerized components for easy deployment
+### **Core Functionality**
+- **Real-time Log Streaming**: Live log monitoring with SignalR WebSocket integration
+- **Centralized Storage**: MySQL database with configurable retention policies (default 30 days)
+- **Advanced Filtering**: Multi-dimensional filtering by pod, log level, time ranges, and full-text search
+- **Interactive Chart Selection**: Click and drag on charts to select custom time ranges
+- **Export Capabilities**: Export filtered logs to CSV or JSON with intelligent naming
+
+### **User Experience**
+- **Modern Dark Theme**: Dracula-inspired color scheme optimized for extended viewing
+- **Mobile Responsive**: Full mobile and tablet support with adaptive layouts
+- **Keyboard Shortcuts**: Power user navigation (Ctrl+F for search, E for errors, W for warnings)
+- **Context Menus**: Right-click actions for filtering and copying log entries
+- **View Modes**: Toggle between compact (dense) and expanded (spacious) layouts
+
+### **Advanced Features**
+- **Syntax Highlighting**: Comprehensive highlighting for JSON, URLs, IPs, stack traces, HTTP codes
+- **Filter Presets**: Save and manage filter combinations for quick reuse
+- **Copy Functionality**: One-click log copying with visual feedback
+- **Error Count Badge**: Real-time error counter in navigation with click-to-filter
+- **Timestamp Formats**: Toggle between relative ("5 min ago") and absolute timestamps
+
+### **Performance & Accessibility**
+- **Virtual Scrolling**: Handle thousands of logs with smooth performance
+- **Memory Management**: Automatic cleanup and efficient DOM recycling
+- **WCAG Compliance**: Accessible design with proper contrast ratios and keyboard navigation
+- **Progressive Enhancement**: Graceful degradation for older browsers
 
 ![image](https://github.com/user-attachments/assets/a7f87068-4019-456a-b438-410ef5aad22a)
 
@@ -35,10 +54,18 @@ LogMk consists of three main components:
 - **Features**: JWT authentication, automatic schema migration, log retention management
 
 ### 3. **LogMkWeb** (Web Interface)
-- **Purpose**: User interface for log viewing and filtering
-- **Technology**: Angular 20 with TypeScript and Bootstrap 5
-- **Function**: Real-time log visualization with advanced filtering capabilities
-- **Features**: Dark theme, responsive design, SignalR integration, date range picker
+- **Purpose**: Advanced user interface for log monitoring and analysis
+- **Technology**: Angular 20 with TypeScript, modern signal-based architecture
+- **Function**: Real-time log visualization with comprehensive filtering and analysis tools
+- **Features**:
+  - Dracula dark theme with comprehensive syntax highlighting
+  - Mobile-responsive design with adaptive layouts
+  - Real-time SignalR integration with error count badges
+  - Advanced filtering with presets and interactive chart selection
+  - Export capabilities (CSV/JSON) with intelligent naming
+  - Keyboard shortcuts and accessibility features
+  - Context menus and copy functionality
+  - Compact/expanded view modes for user preference
 
 ## 🚀 Quick Start
 
@@ -120,16 +147,36 @@ kubectl apply -f k8s/
 
 ## 🎯 Usage
 
+### **Getting Started**
 1. **Access the Web Interface**: Navigate to `http://localhost:6200` (development) or your deployed URL
 2. **Authentication**: Log in with your configured credentials
 3. **Real-time Monitoring**: Logs stream automatically via SignalR connection
-4. **Filtering**: Use the sidebar filters to narrow down logs by:
-   - Namespace
-   - Pod name
-   - Container
-   - Log level
-   - Time range
-5. **Search**: Use the search bar for full-text log content searching
+
+### **Advanced Filtering**
+- **Multi-select Dropdowns**: Filter by log levels and pods with search and select-all options
+- **Time Range Selection**: Use predefined ranges or select custom ranges by dragging on charts
+- **Full-text Search**: Search log content with real-time highlighting of matching terms
+- **Filter Presets**: Save frequently used filter combinations for quick access
+
+### **Keyboard Shortcuts**
+- `Ctrl/Cmd+F` - Focus search input
+- `Ctrl/Cmd+Shift+C` - Clear all active filters
+- `E` - Show only error logs
+- `W` - Show only warning logs
+- Arrow keys - Navigate through log entries
+- Enter - Open detailed log view
+
+### **Context Actions**
+- **Right-click any log entry** for context menu with:
+  - Filter by specific pod or log level
+  - Hide logs from specific sources
+  - Copy log content
+  - View detailed log information
+
+### **View Customization**
+- **View Modes**: Toggle between compact (dense) and expanded (spacious) layouts
+- **Timestamp Formats**: Switch between relative ("5 min ago") and absolute timestamps
+- **Export Options**: Download filtered logs as CSV or JSON with metadata
 
 ## 📋 Configuration
 
@@ -193,12 +240,32 @@ dotnet run --project src/LogMkAgent
 
 ## 📝 Tech Stack
 
-- **Backend**: .NET 9, C#, ServiceStack.OrmLite, SignalR
-- **Frontend**: Angular 20, TypeScript, Bootstrap 5, ng2-charts
-- **Database**: MySQL 8.0+
-- **Authentication**: JWT with refresh tokens
-- **Real-time**: SignalR WebSockets
-- **Infrastructure**: Docker, Kubernetes, GitHub Actions
+### **Backend**
+- **.NET 9**: Modern C# with high-performance runtime
+- **ServiceStack.OrmLite**: Lightweight ORM for MySQL integration
+- **SignalR**: Real-time WebSocket communication
+- **JWT Authentication**: Secure token-based auth with refresh tokens
+
+### **Frontend**
+- **Angular 20**: Latest Angular with signal-based architecture
+- **TypeScript**: Type-safe development with modern ES features
+- **CSS Variables**: Dynamic theming with Dracula color scheme
+- **Virtual Scrolling**: High-performance rendering for large datasets
+- **PWA Ready**: Progressive Web App capabilities
+
+### **Libraries & Tools**
+- **Lucide Angular**: Modern icon library with 1000+ icons
+- **ng2-charts**: Chart.js integration for interactive visualizations
+- **ngx-toastr**: Toast notifications for user feedback
+- **date-fns**: Comprehensive date manipulation utilities
+- **@iharbeck/ngx-virtual-scroller**: Optimized virtual scrolling
+
+### **Development & Deployment**
+- **Angular CLI**: Modern build system with Vite bundler
+- **ESLint & Prettier**: Code quality and formatting
+- **Docker Multi-stage**: Optimized container builds
+- **Kubernetes**: Cloud-native deployment with DaemonSets
+- **GitHub Actions**: CI/CD pipeline automation
 
 ## 🤝 Contributing