Add plot.js and d3

Author: myanvoos

report/parse_logs.py

@@ -190,7 +190,7 @@ def _parse_steps_by_chat_pairs(self, agent_logs: list[LogPart]) -> list[dict]:
     current_step_parts = []
 
     for log_part in logs_to_process:
-      if "agent-step" in log_part.content:
+      if "agent-step" in log_part.content or "Trial ID:" in log_part.content:
         continue
 
       # A chat_response marks the beginning of a new step.
@@ -210,52 +210,77 @@ def _parse_steps_by_chat_pairs(self, agent_logs: list[LogPart]) -> list[dict]:
 
     return steps
 
-  def _syntax_highlight_content(self, content: str) -> str:
-    """Syntax highlights the content."""
-
-    content = html.escape(content)
-
-    # Simple pre-formatted blocks
-    content = re.sub(r'<conclusion>(.*?)</conclusion>',
-                     r'<pre class="conclusion-block">\1</pre>',
-                     content,
-                     flags=re.DOTALL)
-    content = re.sub(r'<reason>(.*?)</reason>',
-                     r'<pre class="reason-block">\1</pre>',
-                     content,
-                     flags=re.DOTALL)
-
-    # Code blocks with language specification
-    content = re.sub(r'<bash>(.*?)</bash>',
-                     r'<pre><code class="language-bash">\1</code></pre>',
-                     content,
-                     flags=re.DOTALL)
-    content = re.sub(r'<build_script>(.*?)</build_script>',
-                     r'<pre><code class="language-c++">\1</code></pre>',
-                     content,
-                     flags=re.DOTALL)
-    content = re.sub(r'<fuzz_target>(.*?)</fuzz_target>',
-                     r'<pre><code class="language-c++">\1</code></pre>',
-                     content,
-                     flags=re.DOTALL)
-
-    # Standard output/error with return code
-    content = re.sub(
-        r'<stdout>(.*?)</stdout>',
-        r'<h4>Standard Output</h4><pre><code class="language-bash">\1</code></pre>',
-        content,
-        flags=re.DOTALL)
-    content = re.sub(
-        r'<stderr>(.*?)</stderr>',
-        r'<h4>Standard Error</h4><pre><code class="language-bash">\1</code></pre>',
-        content,
-        flags=re.DOTALL)
-    content = re.sub(r'<return_code>(.*?)</return_code>',
-                     r'<h4>Return Code</h4><pre><code>\1</code></pre>',
-                     content,
-                     flags=re.DOTALL)
-
-    return content
+  def _syntax_highlight_content(self, content: str, default_language: str = "") -> str:
+    """Syntax highlights content while preserving visible tags."""
+
+    # Escape everything first so raw logs are safe to render in HTML
+    escaped = html.escape(content)
+
+    # Helper to simplify substitutions
+    def _sub(pattern: str, repl: str, text: str) -> str:
+      return re.sub(pattern, repl, text, flags=re.DOTALL)
+
+    def _normalize_lang(lang: str) -> str:
+      if not lang:
+        return 'cpp'
+      lang = lang.strip().lower()
+      if lang in ['c++', 'cpp', 'cxx']:
+        return 'cpp'
+      if lang in ['c']:
+        return 'c'
+      if lang in ['python', 'py']:
+        return 'python'
+      if lang in ['java']:
+        return 'java'
+      if lang in ['rust', 'rs']:
+        return 'rust'
+      if lang in ['go', 'golang']:
+        return 'go'
+      return 'cpp'
+
+    lang_key = _normalize_lang(default_language)
+
+    escaped = _sub(r'&lt;conclusion&gt;(\s*[^\s].*?[^\s]\s*|(?:\s*[^\s].*?)?)&lt;/conclusion&gt;',
+                   r'<span class="log-tag">&lt;conclusion&gt;</span>'
+                   r'<pre class="whitespace-pre-wrap break-words overflow-x-auto reason-block">\1</pre>'
+                   r'<span class="log-tag">&lt;/conclusion&gt;</span>', escaped)
+    escaped = _sub(r'&lt;reason&gt;(\s*[^\s].*?[^\s]\s*|(?:\s*[^\s].*?)?)&lt;/reason&gt;',
+                   r'<span class="log-tag">&lt;reason&gt;</span>'
+                   r'<div class="markdown-block whitespace-pre-wrap break-words overflow-x-auto">\1</div>'
+                   r'<span class="log-tag">&lt;/reason&gt;</span>', escaped)
+
+    escaped = _sub(r'&lt;bash&gt;(\s*[^\s].*?[^\s]\s*|(?:\s*[^\s].*?)?)&lt;/bash&gt;',
+                   r'<span class="log-tag">&lt;bash&gt;</span>'
+                   r'<pre class="whitespace-pre-wrap break-words overflow-x-auto"><code class="language-bash">\1</code></pre>'
+                   r'<span class="log-tag">&lt;/bash&gt;</span>',
+                   escaped)
+    escaped = _sub(r'&lt;build_script&gt;(\s*[^\s].*?[^\s]\s*|(?:\s*[^\s].*?)?)&lt;/build_script&gt;',
+                   r'<span class="log-tag">&lt;build_script&gt;</span>'
+                   r'<pre class="whitespace-pre-wrap break-words overflow-x-auto"><code class="language-cpp">\1</code></pre>'
+                   r'<span class="log-tag">&lt;/build_script&gt;</span>',
+                   escaped)
+    escaped = _sub(r'&lt;fuzz target&gt;(\s*[^\s].*?[^\s]\s*|(?:\s*[^\s].*?)?)&lt;/fuzz target&gt;',
+                   rf'<span class="log-tag">&lt;fuzz target&gt;</span>'
+                   rf'<pre class="whitespace-pre-wrap break-words overflow-x-auto"><code class="language-{lang_key}">\1</code></pre>'
+                   rf'<span class="log-tag">&lt;/fuzz target&gt;</span>',
+                   escaped)
+
+    escaped = _sub(r'&lt;stdout&gt;(\s*[^\s].*?[^\s]\s*|(?:\s*[^\s].*?)?)&lt;/stdout&gt;',
+                   r'<span class="log-tag">&lt;stdout&gt;</span>'
+                   r'<pre class="whitespace-pre-wrap break-words overflow-x-auto"><code class="language-bash">\1</code></pre>'
+                   r'<span class="log-tag">&lt;/stdout&gt;</span>',
+                   escaped)
+    escaped = _sub(r'&lt;stderr&gt;(\s*[^\s].*?[^\s]\s*|(?:\s*[^\s].*?)?)&lt;/stderr&gt;',
+                   r'<span class="log-tag">&lt;stderr&gt;</span>'
+                   r'<pre class="whitespace-pre-wrap break-words overflow-x-auto"><code class="language-bash">\1</code></pre>'
+                   r'<span class="log-tag">&lt;/stderr&gt;</span>',
+                   escaped)
+    escaped = _sub(r'&lt;return_code&gt;(\s*[^\s].*?[^\s]\s*|(?:\s*[^\s].*?)?)&lt;/return_code&gt;',
+                   r'<span class="log-tag">&lt;return_code&gt;</span>'
+                   r'<pre class="whitespace-pre-wrap break-words overflow-x-auto"><code>\1</code></pre>'
+                   r'<span class="log-tag">&lt;/return_code&gt;</span>', escaped)
+
+    return escaped
 
   def _create_step_data(self, step_number: int,
                         log_parts: list[LogPart]) -> dict:
@@ -285,20 +310,6 @@ def get_agent_sections(self) -> dict[str, list[LogPart]]:
     current_agent = None
     agent_counters = {}
 
-    # NUMBER OF BASH TOOLS REQUESTED BY LLMS
-    # system prompt is itself
-    # subsequent ones will be LLM request tool -> tool execution
-
-    # NO REASON IF THERE'S BASH
-    # JUST NEED CONCLUSION
-    # SO INSTEAD STEP 4 - BASH REASON CONCLUSION FUZZ TARGET BUILDSCRIPT -> STEP 4 - BASH, CONCLUSION
-
-    # bash syntax highlight - shell
-    # build script - c or c++
-    # stdout/stderror - console/shell/bash - BASH
-
-    # moving to html
-
     for log_part in self._logs:
       lines = log_part.content.split('\n')
       agent_headers = []

report/templates/base.html

@@ -87,12 +87,14 @@
     background-color: #333333;
 }
 .chat_prompt {
-    background-color: #fff7f2;
+    background-color: #e2e8f0;
+    border: 1px solid #a0aec0;
     max-width: 50%;
     overflow: scroll;
 }
 .chat_response {
-    background-color: #fcfff2;
+    background-color: #ececec;
+    border: 1px solid #718096;
     max-width: 50%;
     overflow: scroll;
     margin-left: auto;
@@ -507,6 +509,8 @@ <h2 class="text-lg font-bold">Search Results</h2>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.10.3/cdn.min.js" defer></script>
 <script src="https://cdn.jsdelivr.net/npm/chart.js" defer></script>
+<script src="d3.min.js" defer></script>
+<script src="plot.min.js" defer></script>
 
 {% if unified_data %}
 <script type="application/json" id="unified-data">{{ unified_data|tojson|safe }}</script>
@@ -909,16 +913,51 @@ <h2 class="signature">
 });
 
 </script>
-
-</body>
-<!-- added highlight.js for syntax highlighting -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css">
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
-<!-- some additional language -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/bash.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/c.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/cpp.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/java.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/python.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/rust.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/go.min.js"></script>
+  <!-- added highlight.js for syntax highlighting -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
+  <!-- additional languages -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/bash.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/c.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/cpp.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/java.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/python.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/rust.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/go.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.2/marked.min.js"></script>
+  <script>
+    window.addEventListener('DOMContentLoaded', function() {
+      if (window.hljs && typeof window.hljs.highlightAll === 'function') {
+        window.hljs.highlightAll();
+      }
+
+      function renderMarkdownBlocks(root) {
+        if (!window.marked) return;
+        const blocks = (root || document).querySelectorAll('.markdown-block');
+        blocks.forEach((el) => {
+          try {
+            el.innerHTML = window.marked.parse(el.textContent || '');
+          } catch (_) {}
+        });
+      }
+
+      renderMarkdownBlocks(document);
+      if (window.hljs) {
+        const observer = new MutationObserver((mutations) => {
+          for (const mutation of mutations) {
+            for (const node of mutation.addedNodes) {
+              if (!(node instanceof HTMLElement)) continue;
+              renderMarkdownBlocks(node);
+              node.querySelectorAll('pre code:not(.hljs)').forEach((el) => {
+                try { window.hljs.highlightElement(el); } catch (_) {}
+              });
+            }
+          }
+        });
+        try {
+          observer.observe(document.body, { childList: true, subtree: true });
+        } catch (_) {}
+      }
+    });
+  </script>
+</body>

report/templates/index/index.html

@@ -35,6 +35,7 @@
     languageOpen: true,
     crashesFoundOpen: true,
     ofgMetricsOpen: true,
+    chartsOpen: true,
 }" class="space-y-2">
 
     <div class="border rounded-lg toc-section">
@@ -489,6 +490,27 @@
         </div>
     </div>
 
+    <div class="container mx-auto mt-8">
+        <div class="border rounded-lg toc-section">
+            <button @click="chartsOpen = !chartsOpen"
+                    class="w-full p-4 flex justify-between items-center">
+                <span class="text-lg font-bold">
+                    Charts
+                </span>
+                <svg class="w-5 h-5 transform transition-transform duration-200"
+                     :class="{'rotate-180': chartsOpen}"
+                     fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+                </svg>
+            </button>
+            <div x-show="chartsOpen" class="p-4 border-t">
+                <div class="chart-row">
+                    <div id="coverage-chart" class="chart-box"></div>
+                    <div id="bugs-chart" class="chart-box"></div>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 
 <button class="toc-toggle" id="tocToggle">

report/templates/index/index.js

@@ -1,4 +1,97 @@
 document.addEventListener('DOMContentLoaded', function() {
+    function waitForPlot() {
+        if (typeof Plot !== 'undefined') {
+            setTimeout(initializeCharts, 100);
+        } else {
+            setTimeout(waitForPlot, 100);
+        }
+    }
+
+    function getBarY() {
+        if (Plot.barY) return Plot.barY;
+        if (Plot.BarY) return Plot.BarY;
+        if (Plot.rectY) {
+            return (data, opts) => {
+                const { x, y, fill, title } = opts || {};
+                return Plot.rectY(data, { x, y2: y, y1: 0, fill, title });
+            };
+        }
+        return null;
+    }
+
+    function initializeCharts() {
+        const BarY = getBarY();
+        if (!BarY) return;
+
+        const projectData = Array.from(document.querySelectorAll('#project-summary-table tbody tr.project-data-row')).map(row => {
+            const cells = row.querySelectorAll('td');
+            if (cells.length >= 9) {
+                return {
+                    project: cells[1].dataset.sortValue,
+                    new_lines: parseInt(cells[7].dataset.sortValue) || 0,
+                    existing_lines: parseInt(cells[8].dataset.sortValue) || 0
+                };
+            }
+            return null;
+        }).filter(Boolean);
+
+        if (projectData.length > 0) {
+            try {
+                const coveragePlot = Plot.plot({
+                    title: "New vs. Existing Code Coverage by Project",
+                    x: { label: "Project", domain: projectData.map(d => d.project) },
+                    y: { label: "Lines of Code" },
+                    marks: [
+                        BarY(projectData, { x: "project", y: "existing_lines", fill: "#94a3b8", title: "Existing Coverage" }),
+                        BarY(projectData, { x: "project", y: "new_lines", fill: "#3b82f6", title: "New Coverage" })
+                    ],
+                    width: 800,
+                    height: 400
+                });
+                const el = document.getElementById('coverage-chart');
+                if (el) { el.innerHTML = ''; el.appendChild(coveragePlot); }
+            } catch (error) {
+                const el = document.getElementById('coverage-chart');
+                if (el) el.innerHTML = '<p class="text-red-500">' + error.message + '</p>';
+            }
+        }
+
+        const bugsData = {};
+        projectData.forEach(project => { bugsData[project.project] = 0; });
+        const bugRows = document.querySelectorAll('#project-summary-table tbody tr.project-data-row');
+        bugRows.forEach(row => {
+            const cells = row.querySelectorAll('td');
+            if (cells.length >= 6) {
+                const project = cells[1].dataset.sortValue;
+                const bugs = parseInt(cells[5].dataset.sortValue) || 0;
+                if (project in bugsData) bugsData[project] += bugs;
+            }
+        });
+
+        const bugsChartData = Object.entries(bugsData).map(([project, bugs]) => ({ project, bugs }));
+        if (bugsChartData.length > 0) {
+            try {
+                const bugsPlot = Plot.plot({
+                    title: "Bugs Found by Project",
+                    x: { label: "Project", domain: bugsChartData.map(d => d.project) },
+                    y: { label: "Number of Bugs" },
+                    marks: [
+                        BarY(bugsChartData, { x: "project", y: "bugs", fill: "#ef4444", title: "Bugs Found" })
+                    ],
+                    width: 800,
+                    height: 400
+                });
+                const el = document.getElementById('bugs-chart');
+                if (el) { el.innerHTML = ''; el.appendChild(bugsPlot); }
+            } catch (error) {
+                const el = document.getElementById('bugs-chart');
+                if (el) el.innerHTML = '<p class="text-red-500">' + error.message + '</p>';
+            }
+        }
+    }
+
+    waitForPlot();
+
     // Project summary table expand/collapse buttons
     const projectSummaryExpandAllButton = document.getElementById('project-summary-expand-all');
     if (projectSummaryExpandAllButton) {