log_server.py

from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse, JSONResponse
import os
import re
from pathlib import Path
from typing import List, Dict, Any, Optional, Set

app = FastAPI()

# Configuration class for dynamic path management
class LogHawkConfig:
    def __init__(self, backend_folder: str = "./logs", frontend_folder: str = "./logs"):
        self.backend_folder = backend_folder
        self.frontend_folder = frontend_folder
        # Ensure directories exist
        self._ensure_directories()
    
    def _ensure_directories(self):
        """Ensure both log directories exist"""
        os.makedirs(self.backend_folder, exist_ok=True)
        os.makedirs(self.frontend_folder, exist_ok=True)
    
    def update_backend_folder(self, folder: str):
        """Update backend folder path"""
        self.backend_folder = folder
        os.makedirs(self.backend_folder, exist_ok=True)
    
    def update_frontend_folder(self, folder: str):
        """Update frontend folder path"""
        self.frontend_folder = folder
        os.makedirs(self.frontend_folder, exist_ok=True)
    
    def update_folders(self, backend: str = None, frontend: str = None):
        """Update one or both folder paths"""
        if backend:
            self.update_backend_folder(backend)
        if frontend:
            self.update_frontend_folder(frontend)
    
    def get_folders(self) -> Dict[str, str]:
        """Get current folder configuration"""
        return {
            "backend": self.backend_folder,
            "frontend": self.frontend_folder
        }

# Global configuration instance
config = LogHawkConfig()

# Comprehensive filter categories
FILTER_CATEGORIES = {
    "core_levels": {
        "name": "Core Log Levels",
        "keywords": ["FATAL", "ERROR", "CRITICAL", "WARN", "WARNING", "INFO", "DEBUG", "TRACE", "EMERGENCY", "ALERT", "NOTICE"]
    },
    "user_interactions": {
        "name": "User Interactions & Events", 
        "keywords": [
            # Click Events & User Actions
            "click", "mousedown", "mouseup", "dblclick", "contextmenu", "button", "submit", "form", "input", "change",
            "focus", "blur", "keydown", "keyup", "keypress", "scroll", "resize", "load", "unload",
            # Navigation & Routing
            "popstate", "hashchange", "beforeunload", "pagehide", "pageshow", "navigation", "router", "route", 
            "navigate", "redirect", "history.push", "location.href", "window.location",
            # Form Interactions
            "form submission", "validation", "input change", "field focus", "required field", "invalid", "valid",
            "pattern mismatch", "autocomplete", "dropdown", "select", "checkbox", "radio",
            # DOM Events & Debugging
            "addEventListener", "removeEventListener", "dispatchEvent", "monitorEvents", "getEventListeners",
            "mutation observer", "intersection observer", "resize observer",
            # User Experience Tracking
            "breadcrumb", "user journey", "session", "page view", "rage click", "dead click", "bounce", 
            "engagement", "performance", "loading", "interactive", "complete"
        ]
    },
    "frontend_react": {
        "name": "Frontend - React/JS/TS",
        "keywords": [
            # React
            "componentDidCatch", "Error Boundary", "useEffect", "useState", "useCallback", "useMemo", "Hook", 
            "render", "componentDidMount", "componentWillUnmount", "setState", "props", "state",
            # JavaScript/TypeScript
            "TypeError", "ReferenceError", "SyntaxError", "Promise", "async", "await", "catch", "throw",
            "undefined", "null", "NaN", "Infinity",
            # Browser/Network
            "NetworkError", "CORS", "404", "500", "timeout", "fetch failed", "XMLHttpRequest", "AbortError",
            # Testing
            "userEvent", "fireEvent", "screen", "getByRole", "waitFor", "jest", "cypress", "playwright"
        ]
    },
    "backend_python": {
        "name": "Backend - Python",
        "keywords": [
            "Traceback", "Exception", "ImportError", "AttributeError", "KeyError", "ValueError", "TypeError",
            "IndexError", "NameError", "FileNotFoundError", "PermissionError", "ConnectionError", "TimeoutError",
            "django", "flask", "fastapi", "sqlalchemy", "pandas", "numpy"
        ]
    },
    "backend_java": {
        "name": "Backend - Java/Spring",
        "keywords": [
            "NullPointerException", "SQLException", "RuntimeException", "ClassNotFoundException", "IOException",
            "Bean", "Autowired", "Component", "Service", "Repository", "Controller", "SpringBoot", "Hibernate"
        ]
    },
    "backend_nodejs": {
        "name": "Backend - Node.js",
        "keywords": [
            "ECONNREFUSED", "ENOTFOUND", "EADDRINUSE", "EACCES", "UnhandledPromiseRejection", "process.exit",
            "express", "koa", "nest", "mongodb", "mysql", "redis", "npm", "yarn"
        ]
    },
    "backend_other": {
        "name": "Backend - Other Languages",
        "keywords": [
            # C#/.NET
            "ArgumentException", "InvalidOperationException", "HttpRequestException", "NullReferenceException",
            # PHP/Laravel
            "ParseError", "FatalError", "Notice", "Artisan", "Eloquent", "Blade",
            # Go
            "panic", "defer", "goroutine", "channel closed", "nil pointer"
        ]
    },
    "infrastructure": {
        "name": "Infrastructure & DevOps",
        "keywords": [
            # Database
            "slow query", "connection timeout", "deadlock", "constraint violation", "duplicate key", "index",
            "transaction", "rollback", "commit",
            # Docker/Kubernetes  
            "container", "image", "volume", "network", "exit code", "pod", "service", "deployment", "crash", 
            "OOMKilled", "ImagePullBackOff", "CrashLoopBackOff",
            # Redis/Cache
            "MISCONF", "connection refused", "memory usage", "cache miss", "cache hit",
            # General Infrastructure
            "load balancer", "proxy", "ssl", "certificate", "dns", "firewall"
        ]
    }
}

# Default filter set (backwards compatibility)
log_levels = FILTER_CATEGORIES["core_levels"]["keywords"] + ["Exception", "Traceback"]

# Quick filter presets
FILTER_PRESETS = {
    "debug_user_clicks": {
        "name": "Debug User Clicks",
        "categories": ["user_interactions"],
        "custom_keywords": ["click", "button", "form", "submit"]
    },
    "react_debugging": {
        "name": "React Debugging", 
        "categories": ["core_levels", "frontend_react"],
        "custom_keywords": ["Hook", "render", "state"]
    },
    "api_testing": {
        "name": "API Testing",
        "categories": ["core_levels", "backend_python", "backend_nodejs"],
        "custom_keywords": ["fetch", "axios", "request", "response"]
    },
    "full_stack_web": {
        "name": "Full Stack Web App",
        "categories": ["core_levels", "frontend_react", "backend_python", "user_interactions"],
        "custom_keywords": []
    },
    "infrastructure_monitoring": {
        "name": "Infrastructure Monitoring",
        "categories": ["core_levels", "infrastructure"],
        "custom_keywords": ["memory", "cpu", "disk", "network"]
    }
}

# HTML Template
HTML_TEMPLATE = """
<!DOCTYPE html>
<html>
<head>
    <title>LogHawk - Advanced Log Analysis Platform</title>
    <style>
        /* ===== CSS CUSTOM PROPERTIES (THEME SYSTEM) ===== */
        :root {{
            /* Dark Theme (Default) */
            --bg-primary: #0d1117;
            --bg-secondary: #161b22;
            --bg-tertiary: #21262d;
            --bg-accent: #1f2937;
            --border-primary: #30363d;
            --border-secondary: #21262d;
            --border-accent: #3d444d;
            --text-primary: #f0f6fc;
            --text-secondary: #8b949e;
            --text-muted: #656d76;
            --text-inverse: #0d1117;
            --accent-primary: #58a6ff;
            --accent-hover: #4495e6;
            --success: #3fb950;
            --success-hover: #2ea043;
            --warning: #f85149;
            --warning-hover: #da3633;
            --info: #79c0ff;
            --shadow-sm: rgba(0, 0, 0, 0.3);
            --shadow-md: rgba(0, 0, 0, 0.4);
            --shadow-lg: rgba(0, 0, 0, 0.5);
            --glow: rgba(88, 166, 255, 0.3);
        }}
        
        [data-theme="light"] {{
            --bg-primary: #ffffff;
            --bg-secondary: #f6f8fa;
            --bg-tertiary: #f1f3f4;
            --bg-accent: #e1e7ed;
            --border-primary: #d0d7de;
            --border-secondary: #e1e7ed;
            --border-accent: #d8dee4;
            --text-primary: #24292f;
            --text-secondary: #656d76;
            --text-muted: #8b949e;
            --text-inverse: #ffffff;
            --accent-primary: #0969da;
            --accent-hover: #0860ca;
            --success: #1a7f37;
            --success-hover: #197833;
            --warning: #cf222e;
            --warning-hover: #a40e26;
            --info: #218bff;
            --shadow-sm: rgba(31, 35, 40, 0.04);
            --shadow-md: rgba(31, 35, 40, 0.08);
            --shadow-lg: rgba(31, 35, 40, 0.12);
            --glow: rgba(9, 105, 218, 0.3);
        }}
        
        /* ===== BASE STYLES ===== */
        * {{
            box-sizing: border-box;
        }}
        
        body {{ 
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            padding: 20px;
            margin: 0;
            transition: background-color 0.3s ease, color 0.3s ease;
            line-height: 1.6;
        }}
        
        /* ===== HEADER STYLES ===== */
        .header {{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding: 20px;
            background: var(--bg-secondary);
            border-radius: 12px;
            border: 1px solid var(--border-primary);
            box-shadow: 0 2px 8px var(--shadow-sm);
        }}
        
        .header-brand {{
            display: flex;
            align-items: center;
            gap: 12px;
        }}
        
        .header-brand h1 {{
            color: var(--text-primary);
            margin: 0;
            font-size: 28px;
            font-weight: 700;
            background: linear-gradient(135deg, var(--accent-primary), var(--info));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }}
        
        .header-subtitle {{
            color: var(--text-secondary);
            font-size: 14px;
            margin-top: 4px;
        }}
        
        .header-controls {{
            display: flex;
            align-items: center;
            gap: 15px;
        }}
        
        .theme-toggle {{
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            color: var(--text-primary);
            padding: 8px 16px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }}
        
        .theme-toggle:hover {{
            background: var(--bg-accent);
            border-color: var(--border-accent);
            transform: translateY(-1px);
        }}
        
        .theme-icon {{
            font-size: 16px;
        }}
        
        /* ===== MAIN CONTAINER ===== */
        .container {{ 
            max-width: 1400px; 
            margin: 0 auto; 
        }}
        
        /* ===== CARD-BASED LAYOUT ===== */
        .card {{
            background: var(--bg-secondary);
            border: 1px solid var(--border-primary);
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px var(--shadow-sm);
            transition: all 0.3s ease;
        }}
        
        .card:hover {{
            box-shadow: 0 4px 16px var(--shadow-md);
        }}
        
        .card-header {{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border-secondary);
        }}
        
        .card-title {{
            color: var(--text-primary);
            font-size: 18px;
            font-weight: 600;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }}
        
        /* ===== FORM STYLES ===== */
        .folder-section {{ 
            margin-bottom: 24px; 
        }}
        
        label {{ 
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--text-primary);
            font-size: 14px;
        }}
        
        input[type=text], input[type=number], textarea {{ 
            width: 100%;
            padding: 12px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            color: var(--text-primary);
            font-size: 14px;
            transition: all 0.3s ease;
        }}
        
        input[type=text]:focus, input[type=number]:focus, textarea:focus {{ 
            border-color: var(--accent-primary);
            outline: none;
            box-shadow: 0 0 0 3px var(--glow);
            background: var(--bg-secondary);
        }}
        
        input[type=text]::placeholder, textarea::placeholder {{
            color: var(--text-muted);
        }}
        
        .folder-input-group {{ 
            display: flex;
            gap: 12px;
            align-items: center;
        }}
        
        .folder-input-group input {{ 
            flex: 1;
            margin-right: 0;
        }}
        
        /* ===== ENHANCED BUTTON SYSTEM ===== */
        button {{ 
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }}
        
        .btn-primary {{
            background: var(--success);
            color: var(--text-inverse);
        }}
        
        .btn-primary:hover {{
            background: var(--success-hover);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(63, 185, 80, 0.3);
        }}
        
        .btn-secondary {{
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border: 1px solid var(--border-primary);
        }}
        
        .btn-secondary:hover {{
            background: var(--bg-accent);
            border-color: var(--border-accent);
        }}
        
        .btn-accent {{
            background: var(--accent-primary);
            color: var(--text-inverse);
        }}
        
        .btn-accent:hover {{
            background: var(--accent-hover);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(88, 166, 255, 0.3);
        }}
        
        .btn-small {{
            padding: 6px 12px;
            font-size: 12px;
        }}
        
        .btn-large {{
            padding: 14px 28px;
            font-size: 16px;
        }}
        
        /* Legacy button classes for compatibility */
        .scan-btn {{ 
            background: var(--success);
            color: var(--text-inverse);
            font-size: 16px;
            padding: 12px 30px;
        }}
        .scan-btn:hover {{ 
            background: var(--success-hover);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(63, 185, 80, 0.3);
        }}
        
        .browse-btn {{ 
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border: 1px solid var(--border-primary);
            padding: 8px 15px;
            font-size: 12px;
        }}
        .browse-btn:hover {{ 
            background: var(--bg-accent);
            border-color: var(--border-accent);
        }}
        
        .preset-btn {{ 
            background: var(--accent-primary);
            color: var(--text-inverse);
            margin: 5px;
            padding: 8px 15px;
            font-size: 13px;
        }}
        .preset-btn:hover {{ 
            background: var(--accent-hover);
            transform: translateY(-1px);
        }}
        .preset-btn.active {{ 
            background: var(--warning);
            color: var(--text-inverse);
            box-shadow: 0 0 0 2px rgba(248, 81, 73, 0.3);
        }}
        
        /* ===== FILTER SYSTEM ===== */
        .filter-section {{ 
            margin: 25px 0; 
        }}
        
        .filter-accordion {{ 
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            margin-bottom: 12px;
            overflow: hidden;
        }}
        
        .filter-header {{ 
            background: var(--bg-tertiary);
            padding: 15px;
            cursor: pointer;
            border-bottom: 1px solid var(--border-secondary);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
            color: var(--text-primary);
            transition: all 0.3s ease;
        }}
        
        .filter-header:hover {{ 
            background: var(--bg-accent);
        }}
        
        .filter-header.active {{ 
            background: var(--accent-primary);
            color: var(--text-inverse);
        }}
        
        .filter-content {{ 
            padding: 15px;
            display: none;
            background: var(--bg-secondary);
        }}
        
        .filter-content.active {{ 
            display: block; 
        }}
        
        .filter-grid {{ 
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 12px;
        }}
        
        .filter-item {{ 
            display: flex;
            align-items: center;
            padding: 8px;
            border-radius: 6px;
            transition: background-color 0.2s ease;
        }}
        
        .filter-item:hover {{
            background: var(--bg-tertiary);
        }}
        
        .filter-item input[type=checkbox] {{ 
            margin-right: 10px;
            accent-color: var(--accent-primary);
        }}
        
        .filter-item label {{ 
            margin: 0;
            font-weight: normal;
            cursor: pointer;
            color: var(--text-primary);
        }}
        
        /* ===== ACTIVE FILTERS ===== */
        .active-filters-section {{
            margin: 20px 0;
            padding: 16px;
            background: var(--bg-accent);
            border-radius: 8px;
            border: 1px solid var(--border-accent);
        }}
        
        .active-filters-header {{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }}
        
        .active-filters-header h4 {{
            margin: 0;
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 600;
        }}
        
        .active-filters-container {{
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }}
        
        .filter-badge {{
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            background: var(--accent-primary);
            color: var(--text-inverse);
            border-radius: 16px;
            font-size: 12px;
            font-weight: 500;
            transition: all 0.2s ease;
        }}
        
        .filter-badge:hover {{
            background: var(--accent-hover);
            transform: translateY(-1px);
        }}
        
        .filter-badge-remove {{
            background: none;
            border: none;
            color: var(--text-inverse);
            cursor: pointer;
            padding: 0;
            margin-left: 4px;
            font-size: 14px;
            line-height: 1;
            opacity: 0.8;
            transition: opacity 0.2s ease;
        }}
        
        .filter-badge-remove:hover {{
            opacity: 1;
        }}
        
        .preset-badge {{
            background: var(--warning);
        }}
        
        .preset-badge:hover {{
            background: var(--warning-hover);
        }}
        
        .custom-badge {{
            background: var(--success);
        }}
        
        .custom-badge:hover {{
            background: var(--success-hover);
        }}

        /* ===== PRESET SECTION ===== */
        .preset-section {{ 
            margin: 20px 0;
            padding: 20px;
            background: var(--bg-tertiary);
            border-radius: 8px;
            border: 1px solid var(--border-secondary);
        }}
        
        .preset-section h3 {{ 
            margin-top: 0;
            color: var(--text-primary);
            font-size: 16px;
        }}
        
        /* ===== CUSTOM KEYWORDS ===== */
        .custom-section {{ 
            margin: 20px 0; 
        }}
        
        .custom-section textarea {{ 
            height: 100px;
            font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            color: var(--text-primary);
            resize: vertical;
        }}
        
        .regex-option {{ 
            margin-top: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }}
        
        .regex-option input[type=checkbox] {{
            accent-color: var(--accent-primary);
        }}
        
        .regex-option label {{
            color: var(--text-primary);
            font-weight: 500;
        }}
        
        /* ===== FOLDER BROWSER ===== */
        .folder-browser {{ 
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            padding: 15px;
            margin-top: 12px;
            max-height: 280px;
            overflow-y: auto;
            display: none;
        }}
        
        .folder-item {{ 
            cursor: pointer;
            padding: 10px;
            border-radius: 6px;
            margin: 2px 0;
            transition: all 0.2s ease;
            color: var(--text-primary);
        }}
        
        .folder-item:hover {{ 
            background: var(--bg-accent);
        }}
        
        .folder-item.selected {{ 
            background: var(--accent-primary);
            color: var(--text-inverse);
        }}
        
        .folder-up {{ 
            color: var(--text-secondary);
            font-weight: bold;
        }}
        
        .folder-dir {{ 
            color: var(--accent-primary);
        }}
        
        .folder-path {{ 
            background: var(--bg-accent);
            color: var(--text-primary);
            padding: 10px;
            border-radius: 6px;
            margin-bottom: 12px;
            font-weight: bold;
            font-size: 13px;
        }}
        
        /* ===== ENHANCED LOG DISPLAY ===== */
        .log-section {{
            margin-top: 30px;
        }}
        
        .log-header {{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }}
        
        .log-title {{
            color: var(--text-primary);
            font-size: 20px;
            font-weight: 600;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }}
        
        .log-display-container {{
            position: relative;
            border-radius: 8px;
            overflow: hidden;
        }}
        
        .log-display-header {{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 16px;
            background: var(--bg-accent);
            border-bottom: 1px solid var(--border-primary);
            font-size: 12px;
            color: var(--text-secondary);
        }}
        
        .log-stats {{
            display: flex;
            gap: 12px;
            align-items: center;
        }}
        
        .log-level-indicator {{
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
        }}
        
        .log-level-error {{
            background: rgba(248, 81, 73, 0.2);
            color: var(--warning);
        }}
        
        .log-level-warn {{
            background: rgba(251, 188, 4, 0.2);
            color: #fbbf04;
        }}
        
        .log-level-info {{
            background: rgba(88, 166, 255, 0.2);
            color: var(--accent-primary);
        }}
        
        .log-level-debug {{
            background: rgba(121, 192, 255, 0.2);
            color: var(--info);
        }}
        
        textarea.log-display {{ 
            width: 100%;
            height: 450px;
            background: var(--bg-tertiary);
            color: var(--info);
            padding: 20px;
            border: 1px solid var(--border-primary);
            font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
            border-radius: 0;
            resize: vertical;
            font-size: 13px;
            line-height: 1.5;
            transition: all 0.3s ease;
            border-top: none;
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }}
        
        textarea.log-display:focus {{
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px var(--glow);
            outline: none;
        }}
        
        /* Syntax highlighting styles (for future enhancement) */
        .log-entry-error {{
            color: var(--warning);
        }}
        
        .log-entry-warn {{
            color: #fbbf04;
        }}
        
        .log-entry-info {{
            color: var(--accent-primary);
        }}
        
        .log-entry-debug {{
            color: var(--info);
        }}
        
        .log-entry-timestamp {{
            color: var(--text-muted);
        }}
        
        .log-entry-filename {{
            color: var(--text-secondary);
            font-style: italic;
        }}
        
        /* ===== SETTINGS ROW ===== */
        .settings-row {{ 
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
            margin: 20px 0;
        }}
        
        .settings-item {{ 
            display: flex;
            flex-direction: column;
        }}
        
        /* ===== LOADING STATES ===== */
        .loading {{
            opacity: 0.6;
            pointer-events: none;
            position: relative;
        }}
        
        .loading::after {{
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 20px;
            height: 20px;
            margin: -10px 0 0 -10px;
            border: 2px solid var(--border-primary);
            border-top: 2px solid var(--accent-primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }}
        
        @keyframes spin {{
            0% {{ transform: rotate(0deg); }}
            100% {{ transform: rotate(360deg); }}
        }}
        
        /* ===== RESPONSIVE DESIGN ===== */
        @media (max-width: 768px) {{
            .header {{
                flex-direction: column;
                gap: 16px;
                text-align: center;
            }}
            
            .header-controls {{
                justify-content: center;
            }}
            
            .settings-row {{ 
                grid-template-columns: 1fr; 
            }}
            
            .filter-grid {{ 
                grid-template-columns: 1fr; 
            }}
            
            .folder-input-group {{ 
                flex-direction: column;
                align-items: stretch;
                gap: 8px;
            }}
            
            .card {{
                padding: 16px;
            }}
        }}
        
        @media (max-width: 480px) {{
            body {{
                padding: 10px;
            }}
            
            .header-brand h1 {{
                font-size: 24px;
            }}
        }}
        
        /* ===== ACCESSIBILITY ===== */
        @media (prefers-reduced-motion: reduce) {{
            * {{
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }}
        }}
        
        /* Focus indicators */
        button:focus-visible, input:focus-visible, textarea:focus-visible {{
            outline: 2px solid var(--accent-primary);
            outline-offset: 2px;
        }}
    </style>
</head>
<body>
    <div class="container">
        <!-- Enhanced Header -->
        <div class="header">
            <div class="header-brand">
                <div>
                    <h1>🦅 LogHawk</h1>
                    <div class="header-subtitle">Advanced Multi-Technology Log Analysis Platform</div>
                </div>
            </div>
            <div class="header-controls">
                <button type="button" class="theme-toggle" id="themeToggle" onclick="toggleTheme()">
                    <span class="theme-icon" id="themeIcon">🌙</span>
                    <span id="themeText">Dark</span>
                </button>
            </div>
        </div>
        
        <!-- Main Form Card -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">📁 Configuration & Filtering</h3>
            </div>
            <form method="post" action="/" id="logForm">
            <!-- Folder Selection -->
            <div class="folder-section">
                <label>Backend Log Folder:</label>
                <div class="folder-input-group">
                    <input type="text" name="backend" id="backend" value="{backend}" required>
                    <button type="button" class="browse-btn" onclick="toggleBrowser('backend')">Browse</button>
                </div>
                <div id="backend-browser" class="folder-browser"></div>
            </div>
            
            <div class="folder-section">
                <label>Frontend Log Folder:</label>
                <div class="folder-input-group">
                    <input type="text" name="frontend" id="frontend" value="{frontend}" required>
                    <button type="button" class="browse-btn" onclick="toggleBrowser('frontend')">Browse</button>
                </div>
                <div id="frontend-browser" class="folder-browser"></div>
            </div>

            <!-- Active Filters Display -->
            <div id="activeFiltersSection" class="active-filters-section" style="display: none;">
                <div class="active-filters-header">
                    <h4>🏷️ Active Filters</h4>
                    <button type="button" class="btn-secondary btn-small" onclick="clearAllFilters()">Clear All</button>
                </div>
                <div id="activeFilters" class="active-filters-container"></div>
            </div>

            <!-- Quick Presets -->
            <div class="preset-section">
                <h3>🚀 Quick Presets</h3>
                <button type="button" class="preset-btn" onclick="applyPreset('debug_user_clicks')">Debug User Clicks</button>
                <button type="button" class="preset-btn" onclick="applyPreset('react_debugging')">React Debugging</button>
                <button type="button" class="preset-btn" onclick="applyPreset('api_testing')">API Testing</button>
                <button type="button" class="preset-btn" onclick="applyPreset('full_stack_web')">Full Stack Web</button>
                <button type="button" class="preset-btn" onclick="applyPreset('infrastructure_monitoring')">Infrastructure</button>
                <button type="button" class="preset-btn" onclick="clearAllFilters()">Clear All</button>
                <input type="hidden" name="preset" id="preset" value="">
                <input type="hidden" name="selected_categories" id="selected_categories" value="">
            </div>

            <!-- Filter Categories -->
            <div class="filter-section">
                <h3>📂 Filter Categories</h3>
                
                <div class="filter-accordion">
                    <div class="filter-header" onclick="toggleAccordion('core_levels')">
                        <span>🔴 Core Log Levels</span><span>▼</span>
                    </div>
                    <div id="core_levels-content" class="filter-content">
                        <div class="filter-grid" id="core_levels-grid"></div>
                    </div>
                </div>
                
                <div class="filter-accordion">
                    <div class="filter-header" onclick="toggleAccordion('user_interactions')">
                        <span>👆 User Interactions & Events</span><span>▼</span>
                    </div>
                    <div id="user_interactions-content" class="filter-content">
                        <div class="filter-grid" id="user_interactions-grid"></div>
                    </div>
                </div>
                
                <div class="filter-accordion">
                    <div class="filter-header" onclick="toggleAccordion('frontend_react')">
                        <span>⚛️ Frontend - React/JS/TS</span><span>▼</span>
                    </div>
                    <div id="frontend_react-content" class="filter-content">
                        <div class="filter-grid" id="frontend_react-grid"></div>
                    </div>
                </div>
                
                <div class="filter-accordion">
                    <div class="filter-header" onclick="toggleAccordion('backend_python')">
                        <span>🐍 Backend - Python</span><span>▼</span>
                    </div>
                    <div id="backend_python-content" class="filter-content">
                        <div class="filter-grid" id="backend_python-grid"></div>
                    </div>
                </div>
                
                <div class="filter-accordion">
                    <div class="filter-header" onclick="toggleAccordion('backend_java')">
                        <span>☕ Backend - Java/Spring</span><span>▼</span>
                    </div>
                    <div id="backend_java-content" class="filter-content">
                        <div class="filter-grid" id="backend_java-grid"></div>
                    </div>
                </div>
                
                <div class="filter-accordion">
                    <div class="filter-header" onclick="toggleAccordion('backend_nodejs')">
                        <span>🟢 Backend - Node.js</span><span>▼</span>
                    </div>
                    <div id="backend_nodejs-content" class="filter-content">
                        <div class="filter-grid" id="backend_nodejs-grid"></div>
                    </div>
                </div>
                
                <div class="filter-accordion">
                    <div class="filter-header" onclick="toggleAccordion('backend_other')">
                        <span>⚙️ Backend - Other Languages</span><span>▼</span>
                    </div>
                    <div id="backend_other-content" class="filter-content">
                        <div class="filter-grid" id="backend_other-grid"></div>
                    </div>
                </div>
                
                <div class="filter-accordion">
                    <div class="filter-header" onclick="toggleAccordion('infrastructure')">
                        <span>🏗️ Infrastructure & DevOps</span><span>▼</span>
                    </div>
                    <div id="infrastructure-content" class="filter-content">
                        <div class="filter-grid" id="infrastructure-grid"></div>
                    </div>
                </div>
            </div>

            <!-- Custom Keywords -->
            <div class="custom-section">
                <label>🎯 Custom Keywords (comma-separated):</label>
                <textarea name="custom_keywords" id="custom_keywords" placeholder="Enter custom keywords or patterns, separated by commas..."></textarea>
                <div class="regex-option">
                    <input type="checkbox" name="use_regex" id="use_regex" value="1" checked>
                    <label for="use_regex">Enable Regex Pattern Matching</label>
                </div>
            </div>

            <!-- Settings -->
            <div class="settings-row">
                <div class="settings-item">
                    <label>Max Files per Folder (0 = unlimited):</label>
                    <input type="number" name="max_files" value="{max_files}" min="0" max="10000" placeholder="0 = unlimited">
                </div>
                <div class="settings-item">
                    <label>Max Lines (0 = unlimited):</label>
                    <input type="number" name="max_lines" value="{max_lines}" min="0" max="50000" placeholder="0 = unlimited">
                </div>
                <div class="settings-item">
                    <label>&nbsp;</label>
                    <button type="submit" class="scan-btn">🔍 Analyze Logs</button>
                </div>
            </div>
            </form>
        </div>

        <!-- Log Results -->
        <div class="log-section">
            <div class="card">
                <div class="log-header">
                    <h3 class="log-title">🖥️ Backend Logs</h3>
                </div>
                <div class="log-display-container">
                    <div class="log-display-header">
                        <div class="log-stats">
                            <span>Backend Analysis Results</span>
                        </div>
                        <div class="log-stats">
                            <div class="log-level-indicator log-level-error">● ERROR</div>
                            <div class="log-level-indicator log-level-warn">● WARN</div>
                            <div class="log-level-indicator log-level-info">● INFO</div>
                            <div class="log-level-indicator log-level-debug">● DEBUG</div>
                        </div>
                    </div>
                    <textarea readonly class="log-display">{backend_logs}</textarea>
                </div>
            </div>
        </div>

        <div class="log-section">
            <div class="card">
                <div class="log-header">
                    <h3 class="log-title">🌐 Frontend Logs</h3>
                </div>
                <div class="log-display-container">
                    <div class="log-display-header">
                        <div class="log-stats">
                            <span>Frontend Analysis Results</span>
                        </div>
                        <div class="log-stats">
                            <div class="log-level-indicator log-level-error">● ERROR</div>
                            <div class="log-level-indicator log-level-warn">● WARN</div>
                            <div class="log-level-indicator log-level-info">● INFO</div>
                            <div class="log-level-indicator log-level-debug">● DEBUG</div>
                        </div>
                    </div>
                    <textarea readonly class="log-display">{frontend_logs}</textarea>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // Filter categories data
        const FILTER_CATEGORIES = {filter_categories_json};
        const FILTER_PRESETS = {filter_presets_json};
        
        let currentBrowser = null;
        let currentPath = {{}};
        let currentPreset = '';
        
        // ===== THEME MANAGEMENT =====
        function initTheme() {{
            const savedTheme = localStorage.getItem('loghawk-theme');
            const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            const defaultTheme = savedTheme || (systemPrefersDark ? 'dark' : 'dark'); // Default to dark
            
            setTheme(defaultTheme);
            
            // Listen for system theme changes
            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {{
                if (!localStorage.getItem('loghawk-theme')) {{
                    setTheme(e.matches ? 'dark' : 'light');
                }}
            }});
        }}
        
        function setTheme(theme) {{
            const root = document.documentElement;
            const themeIcon = document.getElementById('themeIcon');
            const themeText = document.getElementById('themeText');
            
            if (theme === 'light') {{
                root.setAttribute('data-theme', 'light');
                themeIcon.textContent = '☀️';
                themeText.textContent = 'Light';
            }} else {{
                root.removeAttribute('data-theme');
                themeIcon.textContent = '🌙';
                themeText.textContent = 'Dark';
            }}
            
            localStorage.setItem('loghawk-theme', theme);
        }}
        
        function toggleTheme() {{
            const currentTheme = document.documentElement.getAttribute('data-theme');
            const newTheme = currentTheme === 'light' ? 'dark' : 'light';
            setTheme(newTheme);
        }}

        // Initialize filter categories on page load
        document.addEventListener('DOMContentLoaded', function() {{
            initTheme();
            initializeFilterCategories();
            
            // Add event listeners for custom keywords and regex
            document.getElementById('custom_keywords').addEventListener('input', updateActiveFilters);
            document.getElementById('use_regex').addEventListener('change', updateActiveFilters);
            
            // Initialize active filters
            updateActiveFilters();
        }});

        function initializeFilterCategories() {{
            Object.keys(FILTER_CATEGORIES).forEach(categoryId => {{
                const category = FILTER_CATEGORIES[categoryId];
                const grid = document.getElementById(categoryId + '-grid');
                if (grid) {{
                    grid.innerHTML = '';
                    category.keywords.forEach(keyword => {{
                        const item = document.createElement('div');
                        item.className = 'filter-item';
                        item.innerHTML = `
                            <input type="checkbox" id="filter_${{categoryId}}_${{keyword.replace(/[^a-zA-Z0-9]/g, '_')}}" 
                                   name="filter_keywords" value="${{keyword}}" onchange="updateSelectedCategories()">
                            <label for="filter_${{categoryId}}_${{keyword.replace(/[^a-zA-Z0-9]/g, '_')}}">${{keyword}}</label>
                        `;
                        grid.appendChild(item);
                    }});
                }}
            }});
        }}

        function toggleAccordion(categoryId) {{
            const content = document.getElementById(categoryId + '-content');
            const header = content.previousElementSibling;
            const arrow = header.querySelector('span:last-child');
            
            if (content.classList.contains('active')) {{
                content.classList.remove('active');
                header.classList.remove('active');
                arrow.textContent = '▼';
            }} else {{
                content.classList.add('active');
                header.classList.add('active');
                arrow.textContent = '▲';
            }}
        }}

        function applyPreset(presetId) {{
            // Clear all current selections
            clearAllFilters();
            
            if (presetId && FILTER_PRESETS[presetId]) {{
                const preset = FILTER_PRESETS[presetId];
                currentPreset = presetId;
                document.getElementById('preset').value = presetId;
                
                // Mark preset button as active
                document.querySelectorAll('.preset-btn').forEach(btn => btn.classList.remove('active'));
                event.target.classList.add('active');
                
                // Select categories
                preset.categories.forEach(categoryId => {{
                    if (FILTER_CATEGORIES[categoryId]) {{
                        // Open accordion
                        const content = document.getElementById(categoryId + '-content');
                        const header = content.previousElementSibling;
                        const arrow = header.querySelector('span:last-child');
                        content.classList.add('active');
                        header.classList.add('active');
                        arrow.textContent = '▲';
                        
                        // Check all checkboxes in category
                        const checkboxes = content.querySelectorAll('input[type=checkbox]');
                        checkboxes.forEach(cb => cb.checked = true);
                    }}
                }});
                
                // Add custom keywords
                if (preset.custom_keywords.length > 0) {{
                    document.getElementById('custom_keywords').value = preset.custom_keywords.join(', ');
                }}
                
                updateSelectedCategories();
            }}
            
            updateActiveFilters();
        }}

        function clearAllFilters() {{
            document.querySelectorAll('input[type=checkbox][name=filter_keywords]').forEach(cb => cb.checked = false);
            document.querySelectorAll('.preset-btn').forEach(btn => btn.classList.remove('active'));
            document.getElementById('custom_keywords').value = '';
            document.getElementById('use_regex').checked = true;
            document.getElementById('preset').value = '';
            currentPreset = '';
            updateSelectedCategories();
        }}

        function updateSelectedCategories() {{
            const selectedCategories = [];
            Object.keys(FILTER_CATEGORIES).forEach(categoryId => {{
                const checkboxes = document.querySelectorAll(`#${{categoryId}}-grid input[type=checkbox]:checked`);
                if (checkboxes.length > 0) {{
                    selectedCategories.push(categoryId);
                }}
            }});
            document.getElementById('selected_categories').value = selectedCategories.join(',');
            updateActiveFilters();
        }}
        
        // ===== ACTIVE FILTERS MANAGEMENT =====
        function updateActiveFilters() {{
            const activeFiltersSection = document.getElementById('activeFiltersSection');
            const activeFiltersContainer = document.getElementById('activeFilters');
            const badges = [];
            
            // Add preset badge
            const currentPreset = document.getElementById('preset').value;
            if (currentPreset && FILTER_PRESETS[currentPreset]) {{
                badges.push({{
                    type: 'preset',
                    text: FILTER_PRESETS[currentPreset].name,
                    value: currentPreset
                }});
            }}
            
            // Add category badges
            Object.keys(FILTER_CATEGORIES).forEach(categoryId => {{
                const checkboxes = document.querySelectorAll(`#${{categoryId}}-grid input[type=checkbox]:checked`);
                if (checkboxes.length > 0) {{
                    badges.push({{
                        type: 'category',
                        text: `${{FILTER_CATEGORIES[categoryId].name}} (${{checkboxes.length}})`,
                        value: categoryId
                    }});
                }}
            }});
            
            // Add custom keywords badge
            const customKeywords = document.getElementById('custom_keywords').value.trim();
            if (customKeywords) {{
                const keywordCount = customKeywords.split(',').filter(k => k.trim()).length;
                badges.push({{
                    type: 'custom',
                    text: `Custom Keywords (${{keywordCount}})`,
                    value: 'custom_keywords'
                }});
            }}
            
            // Add regex badge
            const useRegex = document.getElementById('use_regex').checked;
            if (useRegex) {{
                badges.push({{
                    type: 'regex',
                    text: 'Regex Enabled',
                    value: 'use_regex'
                }});
            }}
            
            // Show/hide section based on active filters
            if (badges.length > 0) {{
                activeFiltersSection.style.display = 'block';
                activeFiltersContainer.innerHTML = badges.map(badge => `
                    <div class="filter-badge ${{badge.type}}-badge">
                        <span>${{badge.text}}</span>
                        <button type="button" class="filter-badge-remove" onclick="removeFilter('${{badge.type}}', '${{badge.value}}')" title="Remove filter">
                            ×
                        </button>
                    </div>
                `).join('');
            }} else {{
                activeFiltersSection.style.display = 'none';
            }}
        }}
        
        function removeFilter(type, value) {{
            switch(type) {{
                case 'preset':
                    document.getElementById('preset').value = '';
                    document.querySelectorAll('.preset-btn').forEach(btn => btn.classList.remove('active'));
                    currentPreset = '';
                    break;
                    
                case 'category':
                    const checkboxes = document.querySelectorAll(`#${{value}}-grid input[type=checkbox]`);
                    checkboxes.forEach(cb => cb.checked = false);
                    break;
                    
                case 'custom':
                    document.getElementById('custom_keywords').value = '';
                    break;
                    
                case 'regex':
                    document.getElementById('use_regex').checked = false;
                    break;
            }}
            
            updateSelectedCategories();
        }}

        async function toggleBrowser(inputId) {{
            const browser = document.getElementById(inputId + '-browser');
            const input = document.getElementById(inputId);
            
            if (browser.style.display === 'block') {{
                browser.style.display = 'none';
                currentBrowser = null;
            }} else {{
                // Hide other browsers
                document.querySelectorAll('.folder-browser').forEach(b => b.style.display = 'none');
                
                browser.style.display = 'block';
                currentBrowser = inputId;
                
                // Initialize with current input value or current directory
                const startPath = input.value || '.';
                currentPath[inputId] = startPath;
                await loadFolder(inputId, startPath);
            }}
        }}

        async function loadFolder(browserId, path) {{
            try {{
                const response = await fetch('/api/browse?path=' + encodeURIComponent(path));
                const data = await response.json();
                
                const browser = document.getElementById(browserId + '-browser');
                browser.innerHTML = '';
                
                // Show current path
                const pathDiv = document.createElement('div');
                pathDiv.className = 'folder-path';
                pathDiv.textContent = 'Path: ' + data.current_path;
                browser.appendChild(pathDiv);
                
                // Add parent directory option (except for root)
                if (data.parent_path) {{
                    const parentItem = document.createElement('div');
                    parentItem.className = 'folder-item folder-up';
                    parentItem.textContent = '📁 .. (parent directory)';
                    parentItem.onclick = () => loadFolder(browserId, data.parent_path);
                    browser.appendChild(parentItem);
                }}
                
                // Add directories
                data.directories.forEach(dir => {{
                    const item = document.createElement('div');
                    item.className = 'folder-item folder-dir';
                    item.textContent = '📁 ' + dir;
                    item.onclick = () => {{
                        // Proper path joining - handle both root paths and subdirectories
                        let newPath;
                        if (data.current_path.endsWith('/') || data.current_path === '') {{
                            newPath = data.current_path + dir;
                        }} else {{
                            newPath = data.current_path + '/' + dir;
                        }}
                        console.log('Navigating to:', newPath);
                        loadFolder(browserId, newPath);
                    }};
                    browser.appendChild(item);
                }});
                
                // Add "Select this folder" button
                const selectBtn = document.createElement('button');
                selectBtn.type = 'button';
                selectBtn.className = 'scan-btn';
                selectBtn.textContent = 'Select This Folder';
                selectBtn.style.marginTop = '10px';
                selectBtn.onclick = () => {{
                    document.getElementById(browserId).value = data.current_path;
                    browser.style.display = 'none';
                }};
                browser.appendChild(selectBtn);
                
                currentPath[browserId] = data.current_path;
            }} catch (error) {{
                console.error('Error loading folder:', error);
                const browser = document.getElementById(browserId + '-browser');
                browser.innerHTML = '<div style="color: red;">Error loading folder: ' + error.message + '</div>';
            }}
        }}
    </script>
</body>
</html>
"""

# Utility to extract log lines containing errors/warnings
def build_filter_keywords(selected_categories: List[str] = None, custom_keywords: List[str] = None, 
                         preset: Optional[str] = None) -> Set[str]:
    """Build comprehensive keyword set from selected categories, custom keywords, and presets"""
    keywords = set()
    
    # Apply preset first
    if preset and preset in FILTER_PRESETS:
        preset_config = FILTER_PRESETS[preset]
        for category in preset_config["categories"]:
            if category in FILTER_CATEGORIES:
                keywords.update(FILTER_CATEGORIES[category]["keywords"])
        keywords.update(preset_config["custom_keywords"])
    
    # Add selected categories
    if selected_categories:
        for category in selected_categories:
            if category in FILTER_CATEGORIES:
                keywords.update(FILTER_CATEGORIES[category]["keywords"])
    
    # Add custom keywords
    if custom_keywords:
        keywords.update(custom_keywords)
    
    # Default to core levels if no filters specified
    if not keywords:
        keywords.update(log_levels)
    
    return keywords

def matches_filter(line: str, keywords: Set[str], use_regex: bool = False) -> bool:
    """Check if line matches any of the filter keywords"""
    if use_regex:
        for keyword in keywords:
            try:
                if re.search(keyword, line, re.IGNORECASE):
                    return True
            except re.error:
                # Fallback to simple string matching for invalid regex
                if keyword.lower() in line.lower():
                    return True
    else:
        line_lower = line.lower()
        return any(keyword.lower() in line_lower for keyword in keywords)
    
    return False

def filter_logs_from_folder(
    folder_path: str, 
    max_files: int = 0, 
    max_lines: int = 0,
    selected_categories: List[str] = None,
    custom_keywords: List[str] = None,
    preset: Optional[str] = None,
    use_regex: bool = False
) -> str:
    """Enhanced log filtering with multiple categories and regex support"""
    if not os.path.exists(folder_path):
        return f"[Folder not found: {folder_path}]"
    if not os.path.isdir(folder_path):
        return f"[Not a directory: {folder_path}]"

    # Build filter keywords
    filter_keywords = build_filter_keywords(selected_categories, custom_keywords, preset)
    
    log_entries: List[str] = []
    line_count = 0
    match_count = 0
    unlimited = max_lines <= 0
    
    files = [
        f for f in os.listdir(folder_path)
        if f.endswith(".log") or f.endswith(".txt") or f.endswith(".json")
    ]

    # Sort by last modified time, descending
    files = sorted(
        files,
        key=lambda f: os.path.getmtime(os.path.join(folder_path, f)),
        reverse=True
    )
    
    # Apply file limit only if max_files > 0 (0 = unlimited)
    if max_files > 0:
        files = files[:max_files]

    for filename in files:
        if not unlimited and line_count >= max_lines:
            break
            
        full_path = os.path.join(folder_path, filename)
        try:
            log_entries.append(f"\n==== {filename} ====")
            line_count += 1
            
            with open(full_path, "r", encoding="utf-8", errors="ignore") as f:
                if unlimited:
                    # For unlimited lines, use original logic (collect and reverse)
                    file_lines = []
                    for line in f:
                        if matches_filter(line, filter_keywords, use_regex):
                            file_lines.append(line.rstrip())
                    
                    # Reverse lines so newest entries appear first, then append to log_entries
                    for line in reversed(file_lines):
                        log_entries.append(line)
                        line_count += 1
                        match_count += 1
                else:
                    # For limited lines, collect ALL matching lines first, then take the newest ones
                    all_matching_lines = []
                    for line in f:
                        if matches_filter(line, filter_keywords, use_regex):
                            all_matching_lines.append(line.rstrip())
                    
                    # Calculate how many lines we can still add before hitting max_lines
                    remaining_capacity = max_lines - line_count
                    if remaining_capacity > 0:
                        # Take the LAST N matching lines (newest ones) and reverse for display
                        lines_to_take = min(len(all_matching_lines), remaining_capacity)
                        newest_lines = all_matching_lines[-lines_to_take:] if lines_to_take > 0 else []
                        
                        # Reverse lines so newest entries appear first, then append to log_entries
                        for line in reversed(newest_lines):
                            log_entries.append(line)
                            line_count += 1
                            match_count += 1
                            if line_count >= max_lines:
                                break
                        
        except Exception as e:
            log_entries.append(f"[{filename}] Error reading file: {e}")
            line_count += 1

    # Add summary information
    summary_lines = []
    if not unlimited and line_count >= max_lines:
        summary_lines.append(f"[Limited to {max_lines} lines. Use max_lines=0 for unlimited.]")
    
    # File processing summary
    if max_files > 0:
        summary_lines.append(f"[Processed {len(files)} of max {max_files} files]")
    else:
        summary_lines.append(f"[Processed all {len(files)} files found]")
    
    summary_lines.append(f"[Matched {match_count} entries using {len(filter_keywords)} filter keywords]")
    
    if preset:
        summary_lines.append(f"[Preset: {FILTER_PRESETS[preset]['name']}]")
    
    if summary_lines:
        log_entries.extend([""] + summary_lines)
    
    return "\n".join(log_entries) or f"[No matches found for {len(filter_keywords)} filter keywords]"

# GET: initial load
@app.get("/", response_class=HTMLResponse)
async def index():
    import json
    backend_logs = filter_logs_from_folder(config.backend_folder, max_lines=0)
    frontend_logs = filter_logs_from_folder(config.frontend_folder, max_lines=0)
    
    html = HTML_TEMPLATE.format(
        backend=config.backend_folder,
        frontend=config.frontend_folder,
        max_files=0,
        max_lines=0,
        backend_logs=backend_logs,
        frontend_logs=frontend_logs,
        filter_categories_json=json.dumps(FILTER_CATEGORIES),
        filter_presets_json=json.dumps(FILTER_PRESETS)
    )
    return HTMLResponse(content=html)

# POST: handle form submission
@app.post("/", response_class=HTMLResponse)
async def scan_logs(request: Request):
    import json
    form = await request.form()
    backend = form.get("backend", config.backend_folder)
    frontend = form.get("frontend", config.frontend_folder)
    
    # Persist path selections if they differ from current config
    if backend != config.backend_folder or frontend != config.frontend_folder:
        config.update_folders(backend=backend, frontend=frontend)
    
    # Parse form parameters
    try:
        max_files = int(form.get("max_files", 0))
    except ValueError:
        max_files = 0
    try:
        max_lines = int(form.get("max_lines", 0))
    except ValueError:
        max_lines = 0
    
    # Parse filter parameters
    preset = form.get("preset", "")
    selected_categories = form.get("selected_categories", "")
    custom_keywords_raw = form.get("custom_keywords", "")
    use_regex = bool(form.get("use_regex"))
    
    # Process filter data
    selected_categories_list = [cat.strip() for cat in selected_categories.split(",") if cat.strip()] if selected_categories else None
    custom_keywords_list = [kw.strip() for kw in custom_keywords_raw.split(",") if kw.strip()] if custom_keywords_raw else None
    
    # Apply filtering
    backend_logs = filter_logs_from_folder(
        backend, max_files, max_lines, selected_categories_list, custom_keywords_list, preset, use_regex
    )
    frontend_logs = filter_logs_from_folder(
        frontend, max_files, max_lines, selected_categories_list, custom_keywords_list, preset, use_regex
    )

    # Send user's custom paths back to the form template
    
    html = HTML_TEMPLATE.format(
        backend=backend,
        frontend=frontend,
        max_files=max_files,
        max_lines=max_lines,
        backend_logs=backend_logs,
        frontend_logs=frontend_logs,
        filter_categories_json=json.dumps(FILTER_CATEGORIES),
        filter_presets_json=json.dumps(FILTER_PRESETS)
    )
    return HTMLResponse(content=html)

# LogHawk API Endpoints for Claude Code Integration
@app.get("/api/logs")
async def get_all_logs(
    max_files: int = 0, 
    max_lines: int = 0,
    categories: Optional[str] = None,
    custom_keywords: Optional[str] = None,
    preset: Optional[str] = None,
    use_regex: bool = False
) -> Dict[str, Any]:
    """Get all logs in JSON format from LogHawk with advanced filtering for Claude Code integration"""
    
    # Parse parameters
    selected_categories = [cat.strip() for cat in categories.split(",") if cat.strip()] if categories else None
    custom_keywords_list = [kw.strip() for kw in custom_keywords.split(",") if kw.strip()] if custom_keywords else None
    
    backend_logs = filter_logs_from_folder(
        config.backend_folder, max_files, max_lines, selected_categories, custom_keywords_list, preset, use_regex
    )
    frontend_logs = filter_logs_from_folder(
        config.frontend_folder, max_files, max_lines, selected_categories, custom_keywords_list, preset, use_regex
    )
    
    return {
        "backend_logs": backend_logs,
        "frontend_logs": frontend_logs,
        "folders": {
            "backend": config.backend_folder,
            "frontend": config.frontend_folder
        },
        "filters": {
            "categories": selected_categories,
            "custom_keywords": custom_keywords_list,
            "preset": preset,
            "use_regex": use_regex
        },
        "limits": {
            "max_files": max_files,
            "max_lines": max_lines
        }
    }

@app.get("/api/logs/backend")
async def get_backend_logs(
    max_files: int = 0, 
    max_lines: int = 0,
    categories: Optional[str] = None,
    custom_keywords: Optional[str] = None,
    preset: Optional[str] = None,
    use_regex: bool = False
) -> Dict[str, Any]:
    """Get only backend logs in JSON format from LogHawk with advanced filtering"""
    selected_categories = [cat.strip() for cat in categories.split(",") if cat.strip()] if categories else None
    custom_keywords_list = [kw.strip() for kw in custom_keywords.split(",") if kw.strip()] if custom_keywords else None
    
    logs = filter_logs_from_folder(
        config.backend_folder, max_files, max_lines, selected_categories, custom_keywords_list, preset, use_regex
    )
    return {
        "logs": logs,
        "folder": config.backend_folder,
        "filters": {
            "categories": selected_categories,
            "custom_keywords": custom_keywords_list,
            "preset": preset,
            "use_regex": use_regex
        },
        "limits": {
            "max_files": max_files,
            "max_lines": max_lines
        }
    }

@app.get("/api/logs/frontend") 
async def get_frontend_logs(
    max_files: int = 0, 
    max_lines: int = 0,
    categories: Optional[str] = None,
    custom_keywords: Optional[str] = None,
    preset: Optional[str] = None,
    use_regex: bool = False
) -> Dict[str, Any]:
    """Get only frontend logs in JSON format from LogHawk with advanced filtering"""
    selected_categories = [cat.strip() for cat in categories.split(",") if cat.strip()] if categories else None
    custom_keywords_list = [kw.strip() for kw in custom_keywords.split(",") if kw.strip()] if custom_keywords else None
    
    logs = filter_logs_from_folder(
        config.frontend_folder, max_files, max_lines, selected_categories, custom_keywords_list, preset, use_regex
    )
    return {
        "logs": logs,
        "folder": config.frontend_folder,
        "filters": {
            "categories": selected_categories,
            "custom_keywords": custom_keywords_list,
            "preset": preset,
            "use_regex": use_regex
        },
        "limits": {
            "max_files": max_files,
            "max_lines": max_lines
        }
    }

# Folder browsing endpoint
@app.get("/api/browse")
async def browse_folders(path: str = ".") -> Dict[str, Any]:
    """Browse filesystem for LogHawk folder selection"""
    try:
        # Normalize and resolve path
        path = os.path.abspath(path)
        
        # Security check - prevent directory traversal beyond reasonable bounds
        if not os.path.exists(path) or not os.path.isdir(path):
            path = os.path.abspath(".")
        
        # Get directory contents
        directories = []
        try:
            for item in sorted(os.listdir(path)):
                item_path = os.path.join(path, item)
                if os.path.isdir(item_path) and not item.startswith('.'):
                    directories.append(item)
        except PermissionError:
            return {
                "error": "Permission denied accessing this directory",
                "current_path": path,
                "parent_path": None,
                "directories": []
            }
        
        # Get parent directory
        parent_path = None
        if path != os.path.dirname(path):  # Not at filesystem root
            parent_path = os.path.dirname(path)
        
        return {
            "current_path": path.replace("\\", "/"),  # Normalize path separators for frontend
            "parent_path": parent_path.replace("\\", "/") if parent_path else None,
            "directories": directories
        }
        
    except Exception as e:
        return {
            "error": f"Error browsing directory: {str(e)}",
            "current_path": os.path.abspath(".").replace("\\", "/"),
            "parent_path": None,
            "directories": []
        }

# Path management endpoints
@app.get("/api/paths")
async def get_current_paths() -> Dict[str, str]:
    """Get current configured log folder paths"""
    return config.get_folders()

@app.post("/api/paths")
async def update_paths(request: Request) -> Dict[str, Any]:
    """Update log folder paths"""
    try:
        # Handle both JSON and form data
        content_type = request.headers.get("content-type", "")
        
        if "application/json" in content_type:
            data = await request.json()
            backend = data.get("backend")
            frontend = data.get("frontend")
        else:
            # Handle form data
            form = await request.form()
            backend = form.get("backend")
            frontend = form.get("frontend")
        
        # Update configuration
        config.update_folders(backend=backend, frontend=frontend)
        
        return {
            "success": True,
            "message": "Paths updated successfully",
            "folders": config.get_folders()
        }
        
    except Exception as e:
        return {
            "success": False,
            "message": f"Error updating paths: {str(e)}",
            "folders": config.get_folders()
        }