Log Viewer

A beautiful, interactive log viewer for structured JSON logs with filtering, search, and real-time capabilities.

• 📊 High-Density Table View: Ultra-compact table showing maximum logs with all data visible
• 🔄 Reverse Chronological Order: Most recent logs appear at the top
• 📋 Complete Data Display: Shows ALL log data in a compact format, not just method names
• 🔍 Advanced Filtering: Filter by log level, method, time range, and custom fields
• 🎨 Syntax Highlighting: Color-coded log levels and JSON formatting
• ⚡ Maximum Information Density: See 50+ logs at once in table view
• 📱 Responsive Design: Works on desktop and mobile devices
• 🔗 Deep Linking: Share specific log views with URL parameters

1. Visit the application at the deployed URL
2. Paste your logs in the input area or upload a log file
3. Click "Parse Logs" or use "Load Sample" to see example data
4. Use the filters to narrow down the logs you want to see:
   • Filter by log level (trace, debug, info, warn, error, fatal)
   • Search across all log content
   • Filter by specific methods or hostnames
   • Set time range filters
5. Switch between Table View (high-density) and List View (detailed)
6. Click on individual log entries to expand and see detailed JSON view
7. Use "Expand All" / "Collapse All" for bulk operations in List View

The viewer supports structured JSON logs with fields like:

• level: Log level (info, warn, error, debug)
• time: Timestamp
• method: Method name
• msg: Log message
• params: Additional parameters
• Custom fields

├── backend/
│   ├── index.ts          # Main Hono server
│   └── routes/
│       └── logs.ts       # Log processing endpoints
├── frontend/
│   ├── index.html        # Main HTML template
│   ├── components/
│   │   ├── App.tsx       # Main application component
│   │   ├── LogViewer.tsx # Log display component
│   │   └── LogFilters.tsx # Filter controls
│   └── utils/
│       └── logParser.ts  # Log parsing utilities
└── shared/
    └── types.ts          # Shared TypeScript types