log4lab 0.0.2__py3-none-any.whl

log4lab/export.py

@@ -0,0 +1,744 @@
+"""Export logs to a self-contained HTML file."""
+import json
+import base64
+from pathlib import Path
+from typing import Optional
+import mimetypes
+
+
+def read_and_encode_image(file_path: Path) -> Optional[str]:
+    """Read an image file and encode it as a base64 data URL.
+
+    Args:
+        file_path: Path to the image file
+
+    Returns:
+        Base64 data URL string, or None if file cannot be read
+    """
+    if not file_path.exists() or not file_path.is_file():
+        return None
+
+    try:
+        # Determine MIME type
+        mime_type, _ = mimetypes.guess_type(str(file_path))
+        if mime_type is None:
+            mime_type = "application/octet-stream"
+
+        # Read and encode file
+        with file_path.open("rb") as f:
+            file_data = f.read()
+            encoded = base64.b64encode(file_data).decode('utf-8')
+            return f"data:{mime_type};base64,{encoded}"
+    except Exception:
+        return None
+
+
+def is_text_file(file_path: Path) -> bool:
+    """Check if a file is a text file that can be syntax highlighted or rendered as markdown.
+
+    Args:
+        file_path: Path to the file
+
+    Returns:
+        True if the file should be treated as text content
+    """
+    if not file_path.exists() or not file_path.is_file():
+        return False
+
+    ext = file_path.suffix.lower().lstrip('.')
+    text_extensions = {
+        'js', 'jsx', 'ts', 'tsx', 'py', 'rb', 'java', 'cpp', 'c', 'cs', 'go', 'rs',
+        'php', 'sh', 'bash', 'zsh', 'sql', 'json', 'yaml', 'yml', 'xml', 'html',
+        'css', 'scss', 'sass', 'less', 'md', 'txt', 'log'
+    }
+    return ext in text_extensions
+
+
+def read_text_content(file_path: Path) -> Optional[str]:
+    """Read text content from a file.
+
+    Args:
+        file_path: Path to the text file
+
+    Returns:
+        Text content or None if file cannot be read
+    """
+    if not file_path.exists() or not file_path.is_file():
+        return None
+
+    try:
+        with file_path.open('r', encoding='utf-8', errors='ignore') as f:
+            return f.read()
+    except Exception:
+        return None
+
+
+def load_logs(log_path: Path) -> list:
+    """Load all logs from the JSONL file.
+
+    Args:
+        log_path: Path to the JSONL log file
+
+    Returns:
+        List of log entry dictionaries
+    """
+    logs = []
+    if not log_path.exists():
+        return logs
+
+    with log_path.open() as f:
+        for line in f:
+            line = line.strip()
+            if not line:
+                continue
+            try:
+                obj = json.loads(line)
+                logs.append(obj)
+            except json.JSONDecodeError:
+                continue
+
+    return logs
+
+
+def embed_cache_files(logs: list, log_dir: Path) -> list:
+    """Embed cache files (images, code, markdown, etc.) as base64 data URLs and text content.
+
+    Args:
+        logs: List of log entries
+        log_dir: Directory containing the log file (base for cache paths)
+
+    Returns:
+        List of log entries with embedded cache files
+    """
+    embedded_logs = []
+
+    for entry in logs:
+        # Make a copy to avoid modifying original
+        entry_copy = entry.copy()
+
+        if 'cache_path' in entry_copy and entry_copy['cache_path']:
+            cache_path = log_dir / entry_copy['cache_path']
+
+            # Try to read as binary file first (for images, PDFs, etc.)
+            data_url = read_and_encode_image(cache_path)
+            if data_url:
+                entry_copy['_embedded_cache'] = data_url
+
+            # Also try to read as text if it's a text file
+            if is_text_file(cache_path):
+                text_content = read_text_content(cache_path)
+                if text_content:
+                    entry_copy['_embedded_cache_text'] = text_content
+
+        embedded_logs.append(entry_copy)
+
+    return embedded_logs
+
+
+def generate_standalone_html(logs: list, output_path: Path, title: str = "Log4Lab Export"):
+    """Generate a self-contained HTML file with all logs and embedded images.
+
+    Args:
+        logs: List of log entries (with embedded cache files)
+        output_path: Path where the HTML file should be written
+        title: Title for the HTML page
+    """
+
+    # Inline Tailwind CSS - using the Play CDN version embedded
+    tailwind_config = """
+    tailwind.config = {
+      darkMode: 'class'
+    };
+    """
+
+    html_content = f"""<!DOCTYPE html>
+<html lang="en" class="dark:bg-gray-900 dark:text-gray-100">
+<head>
+  <meta charset="UTF-8">
+  <title>{title}</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Syntax highlighting -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-dark.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
+  <!-- Markdown rendering -->
+  <script src="https://cdn.jsdelivr.net/npm/marked@9.1.6/marked.min.js"></script>
+  <script>
+    {tailwind_config}
+    if (localStorage.theme === 'dark' ||
+        (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {{
+      document.documentElement.classList.add('dark');
+    }} else {{
+      document.documentElement.classList.remove('dark');
+    }}
+  </script>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors">
+  <div class="max-w-6xl mx-auto p-6">
+    <div class="flex justify-between items-center mb-4">
+      <h1 class="text-3xl font-bold">{title} <span class="text-sm font-light">(Exported)</span></h1>
+      <div class="flex space-x-2">
+        <button id="themeToggle"
+          class="px-3 py-1 rounded border text-sm bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700">
+          Toggle Theme
+        </button>
+      </div>
+    </div>
+
+    <div class="flex space-x-4 mb-4 items-center flex-wrap">
+      <div>
+        <label class="block text-sm font-medium">Level</label>
+        <select id="levelFilter" class="border rounded px-2 py-1 dark:bg-gray-800 dark:border-gray-700">
+          <option value="">All</option>
+        </select>
+      </div>
+
+      <div>
+        <label class="block text-sm font-medium">Section</label>
+        <input id="sectionFilter" type="text"
+               class="border rounded px-2 py-1 dark:bg-gray-800 dark:border-gray-700"
+               placeholder="e.g. train" />
+      </div>
+
+      <div>
+        <label class="block text-sm font-medium">Group</label>
+        <input id="groupFilter" type="text"
+               class="border rounded px-2 py-1 dark:bg-gray-800 dark:border-gray-700"
+               placeholder="e.g. experiment1" />
+      </div>
+
+      <div>
+        <label class="block text-sm font-medium">Run Name</label>
+        <input id="runNameFilter" type="text"
+               class="border rounded px-2 py-1 dark:bg-gray-800 dark:border-gray-700"
+               placeholder="e.g. my_experiment" />
+      </div>
+
+      <div>
+        <label class="block text-sm font-medium">Run ID</label>
+        <input id="runIdFilter" type="text"
+               class="border rounded px-2 py-1 dark:bg-gray-800 dark:border-gray-700"
+               placeholder="e.g. abc123" />
+      </div>
+
+      <div>
+        <label class="block text-sm font-medium">Time Range</label>
+        <select id="timeFilter" class="border rounded px-2 py-1 dark:bg-gray-800 dark:border-gray-700">
+          <option value="">All Time</option>
+          <option value="60">Last 1 minute</option>
+          <option value="300">Last 5 minutes</option>
+          <option value="600">Last 10 minutes</option>
+          <option value="1800">Last 30 minutes</option>
+          <option value="3600">Last 1 hour</option>
+          <option value="21600">Last 6 hours</option>
+          <option value="86400">Last 24 hours</option>
+        </select>
+      </div>
+
+      <button id="clearFilters"
+        class="bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 px-3 py-1 rounded mt-5">
+        Clear
+      </button>
+
+      <button id="sortToggle"
+        class="bg-blue-100 dark:bg-blue-900 hover:bg-blue-200 dark:hover:bg-blue-800 px-3 py-1 rounded mt-5 text-sm">
+        ⬆️ Oldest First
+      </button>
+    </div>
+
+    <div id="log-container" class="space-y-2"></div>
+
+    <div id="pagination" class="mt-6 flex items-center justify-between border-t border-gray-300 dark:border-gray-700 pt-4">
+      <div class="text-sm text-gray-600 dark:text-gray-400">
+        Showing <span id="showing-start">0</span>-<span id="showing-end">0</span> of <span id="total-count">0</span> logs
+      </div>
+      <div class="flex items-center space-x-2">
+        <label class="text-sm text-gray-600 dark:text-gray-400">Per page:</label>
+        <select id="perPageSelect" class="border rounded px-2 py-1 text-sm dark:bg-gray-800 dark:border-gray-700">
+          <option value="20">20</option>
+          <option value="50" selected>50</option>
+          <option value="100">100</option>
+          <option value="200">200</option>
+        </select>
+      </div>
+      <div class="flex space-x-2">
+        <button id="prevPage" class="px-3 py-1 border rounded text-sm bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
+          Previous
+        </button>
+        <span class="px-3 py-1 text-sm text-gray-600 dark:text-gray-400">
+          Page <span id="currentPage">1</span> of <span id="totalPages">1</span>
+        </span>
+        <button id="nextPage" class="px-3 py-1 border rounded text-sm bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
+          Next
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <script>
+  // Embedded log data
+  const allLogs = {json.dumps(logs, ensure_ascii=False)};
+
+  const container = document.getElementById("log-container");
+  const levelFilter = document.getElementById("levelFilter");
+  const sectionFilter = document.getElementById("sectionFilter");
+  const groupFilter = document.getElementById("groupFilter");
+  const runNameFilter = document.getElementById("runNameFilter");
+  const runIdFilter = document.getElementById("runIdFilter");
+  const timeFilter = document.getElementById("timeFilter");
+  const clearBtn = document.getElementById("clearFilters");
+  const themeToggle = document.getElementById("themeToggle");
+  const sortToggle = document.getElementById("sortToggle");
+
+  // Pagination elements
+  const perPageSelect = document.getElementById("perPageSelect");
+  const prevPageBtn = document.getElementById("prevPage");
+  const nextPageBtn = document.getElementById("nextPage");
+  const currentPageSpan = document.getElementById("currentPage");
+  const totalPagesSpan = document.getElementById("totalPages");
+  const showingStartSpan = document.getElementById("showing-start");
+  const showingEndSpan = document.getElementById("showing-end");
+  const totalCountSpan = document.getElementById("total-count");
+
+  let knownLevels = new Set();
+  let currentPage = 1;
+  let perPage = 50;
+  let sortOldestFirst = false;
+
+  // Initialize known levels from all logs
+  allLogs.forEach(entry => {{
+    if (entry.level) knownLevels.add(entry.level);
+  }});
+
+  themeToggle.onclick = () => {{
+    const html = document.documentElement;
+    if (html.classList.contains('dark')) {{
+      html.classList.remove('dark');
+      localStorage.theme = 'light';
+    }} else {{
+      html.classList.add('dark');
+      localStorage.theme = 'dark';
+    }}
+  }};
+
+  function matchesFilters(entry) {{
+    const level = levelFilter.value.toLowerCase();
+    const section = sectionFilter.value.toLowerCase();
+    const group = groupFilter.value.toLowerCase();
+    const runName = runNameFilter.value.toLowerCase();
+    const runId = runIdFilter.value.toLowerCase();
+    const timeRange = parseInt(timeFilter.value);
+
+    if (level && (!entry.level || entry.level.toLowerCase() !== level)) return false;
+    if (section && (!entry.section || !entry.section.toLowerCase().includes(section))) return false;
+    if (group && (!entry.group || !entry.group.toLowerCase().includes(group))) return false;
+    if (runName && (!entry.run_name || !entry.run_name.toLowerCase().includes(runName))) return false;
+    if (runId && (!entry.run_id || !entry.run_id.toLowerCase().includes(runId))) return false;
+
+    // Time range filter
+    if (timeRange && entry.time) {{
+      const logTime = new Date(entry.time);
+      const now = new Date();
+      const diffSeconds = (now - logTime) / 1000;
+      if (diffSeconds > timeRange) return false;
+    }}
+
+    return true;
+  }}
+
+  function updateLevelFilter() {{
+    const currentSelection = levelFilter.value;
+    const sortedLevels = Array.from(knownLevels).sort();
+
+    levelFilter.innerHTML = '<option value="">All</option>';
+    sortedLevels.forEach(level => {{
+      const option = document.createElement('option');
+      option.value = level.toLowerCase();
+      option.textContent = level;
+      levelFilter.appendChild(option);
+    }});
+
+    if (currentSelection) {{
+      levelFilter.value = currentSelection;
+    }}
+  }}
+
+  function updatePaginationInfo(filteredLogs) {{
+    const totalLogs = filteredLogs.length;
+    const totalPages = Math.max(1, Math.ceil(totalLogs / perPage));
+
+    if (currentPage > totalPages) {{
+      currentPage = totalPages;
+    }}
+    if (currentPage < 1) {{
+      currentPage = 1;
+    }}
+
+    const startIdx = (currentPage - 1) * perPage;
+    const endIdx = Math.min(startIdx + perPage, totalLogs);
+
+    currentPageSpan.textContent = currentPage;
+    totalPagesSpan.textContent = totalPages;
+    showingStartSpan.textContent = totalLogs > 0 ? startIdx + 1 : 0;
+    showingEndSpan.textContent = endIdx;
+    totalCountSpan.textContent = totalLogs;
+
+    prevPageBtn.disabled = currentPage <= 1;
+    nextPageBtn.disabled = currentPage >= totalPages;
+  }}
+
+  function renderLogs() {{
+    container.innerHTML = "";
+
+    const filteredLogs = allLogs.filter(matchesFilters);
+    const sortedLogs = sortOldestFirst ? filteredLogs.slice() : filteredLogs.slice().reverse();
+
+    const startIdx = (currentPage - 1) * perPage;
+    const endIdx = startIdx + perPage;
+    const pageLog = sortedLogs.slice(startIdx, endIdx);
+
+    pageLog.forEach(renderLog);
+    updatePaginationInfo(filteredLogs);
+  }}
+
+  function getTimeAgo(timestamp) {{
+    if (!timestamp) return '';
+
+    let ts = timestamp;
+    if (!ts.endsWith('Z') && !ts.includes('+') && !ts.includes('-', 10)) {{
+      ts = ts + 'Z';
+    }}
+
+    const logTime = new Date(ts);
+    const now = new Date();
+    const diffMs = now - logTime;
+    const diffSec = Math.floor(diffMs / 1000);
+    const diffMin = Math.floor(diffSec / 60);
+    const diffHour = Math.floor(diffMin / 60);
+    const diffDay = Math.floor(diffHour / 24);
+
+    if (diffSec < 0) {{
+      const absSec = Math.abs(diffSec);
+      if (absSec < 60) return `in ${{absSec}}s`;
+      const absMin = Math.floor(absSec / 60);
+      if (absMin < 60) return `in ${{absMin}}m`;
+      const absHour = Math.floor(absMin / 60);
+      return `in ${{absHour}}h`;
+    }}
+
+    if (diffSec < 10) return 'just now';
+    if (diffSec < 60) return `${{diffSec}}s ago`;
+    if (diffMin < 60) return `${{diffMin}}m ago`;
+    if (diffHour < 24) return `${{diffHour}}h ago`;
+    return `${{diffDay}}d ago`;
+  }}
+
+  function getFileLanguage(ext) {{
+    const languageMap = {{
+      'js': 'javascript',
+      'jsx': 'jsx',
+      'ts': 'typescript',
+      'tsx': 'tsx',
+      'py': 'python',
+      'rb': 'ruby',
+      'java': 'java',
+      'cpp': 'cpp',
+      'c': 'c',
+      'cs': 'csharp',
+      'go': 'go',
+      'rs': 'rust',
+      'php': 'php',
+      'sh': 'bash',
+      'bash': 'bash',
+      'zsh': 'bash',
+      'sql': 'sql',
+      'json': 'json',
+      'yaml': 'yaml',
+      'yml': 'yaml',
+      'xml': 'xml',
+      'html': 'html',
+      'css': 'css',
+      'scss': 'scss',
+      'sass': 'sass',
+      'less': 'less',
+      'md': 'markdown',
+      'txt': 'text',
+      'log': 'text'
+    }};
+    return languageMap[ext] || 'text';
+  }}
+
+  function renderCachePath(entry) {{
+    // Use embedded cache data if available
+    if (entry._embedded_cache) {{
+      const ext = (entry.cache_path || '').split('.').pop().toLowerCase();
+      const uniqueId = `file-${{Date.now()}}-${{Math.random().toString(36).substr(2, 9)}}`;
+
+      // Images
+      if (['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'bmp'].includes(ext)) {{
+        return `<div class="mt-2">
+          <div class="text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Cached Artifact:</div>
+          <img src="${{entry._embedded_cache}}" alt="Cached artifact" class="max-w-full h-auto rounded border border-gray-300 dark:border-gray-600"
+               style="max-height: 400px; object-fit: contain;" />
+        </div>`;
+      }}
+
+      // PDFs
+      if (ext === 'pdf') {{
+        return `<div class="mt-2">
+          <div class="text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Cached Artifact (PDF):</div>
+          <embed src="${{entry._embedded_cache}}" type="application/pdf" class="w-full rounded border border-gray-300 dark:border-gray-600" style="height: 400px;" />
+        </div>`;
+      }}
+
+      // Markdown files
+      if (ext === 'md' && entry._embedded_cache_text) {{
+        return `<div class="mt-2">
+          <div class="text-xs font-medium text-gray-600 dark:text-gray-400 mb-1 flex items-center justify-between">
+            <span>Cached Artifact (Markdown):</span>
+            <button onclick="toggleFileContent('${{uniqueId}}')" class="text-xs bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 px-2 py-1 rounded flex items-center gap-1">
+              <span class="arrow transform transition-transform" id="arrow-${{uniqueId}}">▼</span>
+              <span class="btn-text" id="btn-${{uniqueId}}">Hide</span>
+            </button>
+          </div>
+          <div id="content-${{uniqueId}}" class="markdown-content bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded p-3 max-h-96 overflow-y-auto">
+            ${{marked.parse(entry._embedded_cache_text)}}
+          </div>
+        </div>`;
+      }}
+
+      // Code files
+      const language = getFileLanguage(ext);
+      if (['javascript', 'jsx', 'typescript', 'tsx', 'python', 'ruby', 'java', 'cpp', 'c', 'csharp', 'go', 'rust', 'php', 'bash', 'sql', 'json', 'yaml', 'xml', 'html', 'css', 'scss', 'sass', 'less'].includes(language) && entry._embedded_cache_text) {{
+        return `<div class="mt-2">
+          <div class="text-xs font-medium text-gray-600 dark:text-gray-400 mb-1 flex items-center justify-between">
+            <span>Cached Artifact (${{language.toUpperCase()}}):</span>
+            <button onclick="toggleFileContent('${{uniqueId}}')" class="text-xs bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 px-2 py-1 rounded flex items-center gap-1">
+              <span class="arrow transform transition-transform" id="arrow-${{uniqueId}}">▶</span>
+              <span class="btn-text" id="btn-${{uniqueId}}">Show</span>
+            </button>
+          </div>
+          <div id="content-${{uniqueId}}" class="hidden code-content bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded max-h-96 overflow-y-auto">
+            <pre class="text-sm"><code class="language-${{language}}">${{entry._embedded_cache_text.replace(/[<>&"']/g, function(m) {{ return {{ '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;', "'": '&#39;' }}[m]; }})}}</code></pre>
+          </div>
+        </div>`;
+      }}
+
+      // Other files
+      return `<div class="mt-2">
+        <div class="text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Cached Artifact:</div>
+        <a href="${{entry._embedded_cache}}" download="${{entry.cache_path}}" class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 underline">
+          📎 ${{entry.cache_path}}
+        </a>
+      </div>`;
+    }}
+
+    // Fallback if no embedded cache
+    if (entry.cache_path) {{
+      return `<div class="mt-2">
+        <div class="text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Cached Artifact:</div>
+        <span class="text-sm text-gray-500">📎 ${{entry.cache_path}} (not embedded)</span>
+      </div>`;
+    }}
+
+    return '';
+  }}
+
+  function renderLog(entry) {{
+    const div = document.createElement("div");
+    const levelLower = (entry.level || '').toLowerCase();
+    const border =
+      levelLower === "error" ? "border-red-500" :
+      levelLower === "warn" || levelLower === "warning" ? "border-yellow-400" :
+      levelLower === "debug" ? "border-gray-400" :
+      "border-blue-400";
+    div.className = `p-3 bg-white dark:bg-gray-800 border-l-4 ${{border}} rounded shadow-sm transition`;
+
+    const timeAgo = getTimeAgo(entry.time);
+    const timeDisplay = entry.time ? `<span class="time-ago font-medium text-gray-700 dark:text-gray-200" data-timestamp="${{entry.time}}">${{timeAgo}}</span>` : '';
+
+    const cachePathHtml = renderCachePath(entry);
+    const mainContent = entry.message || entry.msg || entry.event || '';
+
+    const runInfo = [];
+    if (entry.run_name) runInfo.push(`run: <span class="font-semibold">${{entry.run_name}}</span>`);
+    if (entry.run_id) runInfo.push(`id: <span class="font-semibold">${{entry.run_id}}</span>`);
+    const runInfoHtml = runInfo.length > 0 ? `<span class="text-xs text-blue-600 dark:text-blue-400 ml-2">🔗 ${{runInfo.join(', ')}}</span>` : '';
+
+    div.innerHTML = `
+      <div class="flex justify-between text-sm text-gray-600 dark:text-gray-300">
+        <div class="flex items-center space-x-2">
+          ${{timeDisplay}}
+          <span class="text-xs">${{entry.time || ''}}</span>
+        </div>
+        <div class="flex items-center space-x-2">
+          <span class="font-semibold">${{entry.level || ''}}</span>
+          <span>${{entry.section || ''}}</span>
+          ${{runInfoHtml}}
+        </div>
+      </div>
+      <div class="mt-2 text-gray-900 dark:text-gray-100 font-mono text-sm whitespace-pre-wrap">${{mainContent}}</div>
+      ${{cachePathHtml}}
+      <div class="mt-2">
+        <button onclick="this.nextElementSibling.classList.toggle('hidden'); this.querySelector('.arrow').style.transform = this.nextElementSibling.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(90deg)'; this.querySelector('.btn-text').textContent = this.nextElementSibling.classList.contains('hidden') ? 'Show JSON' : 'Hide JSON';"
+                class="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 flex items-center gap-1">
+          <span class="arrow transform transition-transform" style="transform: rotate(0deg)">▶</span>
+          <span class="btn-text">Show JSON</span>
+        </button>
+        <pre class="hidden mt-1 text-xs bg-gray-100 dark:bg-gray-900 p-2 rounded overflow-x-auto">${{JSON.stringify(entry, null, 2)}}</pre>
+      </div>
+    `;
+
+    container.appendChild(div);
+  }}
+
+  // Initialize
+  updateLevelFilter();
+  renderLogs();
+
+  // Update time displays periodically
+  function updateTimeDisplays() {{
+    document.querySelectorAll('.time-ago').forEach(element => {{
+      const timestamp = element.getAttribute('data-timestamp');
+      if (timestamp) {{
+        element.textContent = getTimeAgo(timestamp);
+      }}
+    }});
+  }}
+  setInterval(updateTimeDisplays, 5000);
+
+  // Filter change handlers
+  levelFilter.onchange = () => {{
+    currentPage = 1;
+    renderLogs();
+  }};
+  sectionFilter.oninput = () => {{
+    currentPage = 1;
+    renderLogs();
+  }};
+  groupFilter.oninput = () => {{
+    currentPage = 1;
+    renderLogs();
+  }};
+  runNameFilter.oninput = () => {{
+    currentPage = 1;
+    renderLogs();
+  }};
+  runIdFilter.oninput = () => {{
+    currentPage = 1;
+    renderLogs();
+  }};
+  timeFilter.onchange = () => {{
+    currentPage = 1;
+    renderLogs();
+  }};
+  clearBtn.onclick = () => {{
+    levelFilter.value = "";
+    sectionFilter.value = "";
+    groupFilter.value = "";
+    runNameFilter.value = "";
+    runIdFilter.value = "";
+    timeFilter.value = "";
+    currentPage = 1;
+    renderLogs();
+  }};
+
+  // Pagination controls
+  prevPageBtn.onclick = () => {{
+    if (currentPage > 1) {{
+      currentPage--;
+      renderLogs();
+      window.scrollTo({{ top: 0, behavior: 'smooth' }});
+    }}
+  }};
+
+  nextPageBtn.onclick = () => {{
+    const totalPages = Math.ceil(allLogs.filter(matchesFilters).length / perPage);
+    if (currentPage < totalPages) {{
+      currentPage++;
+      renderLogs();
+      window.scrollTo({{ top: 0, behavior: 'smooth' }});
+    }}
+  }};
+
+  perPageSelect.onchange = () => {{
+    perPage = parseInt(perPageSelect.value);
+    currentPage = 1;
+    renderLogs();
+  }};
+
+  // Sort toggle
+  sortToggle.onclick = () => {{
+    sortOldestFirst = !sortOldestFirst;
+    sortToggle.textContent = sortOldestFirst ? '⬇️ Newest First' : '⬆️ Oldest First';
+    currentPage = 1;
+    renderLogs();
+  }};
+
+  // File content toggle function
+  window.toggleFileContent = function(uniqueId) {{
+    const content = document.getElementById(`content-${{uniqueId}}`);
+    const arrow = document.getElementById(`arrow-${{uniqueId}}`);
+    const btn = document.getElementById(`btn-${{uniqueId}}`);
+
+    if (content.classList.contains('hidden')) {{
+      // Show content
+      content.classList.remove('hidden');
+      arrow.style.transform = 'rotate(90deg)';
+      btn.textContent = 'Hide';
+
+      // Apply syntax highlighting for code blocks
+      const codeElement = content.querySelector('code[class*="language-"]');
+      if (codeElement) {{
+        Prism.highlightElement(codeElement);
+      }}
+    }} else {{
+      // Hide content
+      content.classList.add('hidden');
+      arrow.style.transform = 'rotate(0deg)';
+      btn.textContent = 'Show';
+    }}
+  }};
+
+  // Apply syntax highlighting to initially visible markdown code blocks
+  setTimeout(function() {{
+    document.querySelectorAll('.markdown-content pre code').forEach(function(block) {{
+      Prism.highlightElement(block);
+    }});
+  }}, 100);
+  </script>
+</body>
+</html>
+"""
+
+    # Write the HTML file
+    output_path.parent.mkdir(parents=True, exist_ok=True)
+    with output_path.open('w', encoding='utf-8') as f:
+        f.write(html_content)
+
+
+def export_logs_to_html(
+    log_path: Path,
+    output_path: Path,
+    title: str = "Log4Lab Export",
+    embed_images: bool = True
+) -> None:
+    """Export logs to a self-contained HTML file.
+
+    Args:
+        log_path: Path to the JSONL log file
+        output_path: Path where the HTML file should be written
+        title: Title for the HTML page
+        embed_images: Whether to embed images as base64 data URLs
+    """
+    # Load logs
+    logs = load_logs(log_path)
+
+    # Embed cache files if requested
+    if embed_images:
+        log_dir = log_path.parent
+        logs = embed_cache_files(logs, log_dir)
+
+    # Generate HTML
+    generate_standalone_html(logs, output_path, title)