diff --git a/report/parse_logs.py b/report/parse_logs.py
index 60104bca1..ba0f55c8f 100644
--- a/report/parse_logs.py
+++ b/report/parse_logs.py
@@ -15,6 +15,7 @@
 information such as the crash details, crash symptoms,
 stack traces, etc. to be rendered in the report."""
 
+import html
 import re
 
 from report.common import LogPart
@@ -35,6 +36,277 @@ class LogsParser:
   def __init__(self, logs: list[LogPart]):
     self._logs = logs
 
+  def _extract_bash_commands(self, content: str) -> list[str]:
+    """Extract and parse bash commands from content."""
+    commands = []
+    lines = content.split('\n')
+
+    for i, line in enumerate(lines):
+      line = line.strip()
+      if line == '<bash>':
+        for j in range(i + 1, len(lines)):
+          if lines[j].strip() == '</bash>':
+            bash_content = '\n'.join(lines[i + 1:j]).strip()
+            if bash_content:
+              first_line = bash_content.split('\n')[0].strip()
+              if first_line:
+                # skip comments and placeholder text
+                if (first_line.startswith('#') or
+                    first_line.startswith('[The command') or
+                    first_line.startswith('No bash') or
+                    'No bash' in first_line or len(first_line) < 3):
+                  continue
+
+                parts = first_line.split()
+                if parts:
+                  cmd = parts[0]
+
+                  if cmd == 'grep':
+                    # Extract the search term (usually the first quoted argument)
+                    import re
+                    quoted_match = re.search(r"'([^']+)'", first_line)
+                    if quoted_match:
+                      search_term = quoted_match.group(1)
+                      command_summary = f"grep '{search_term}'"
+                    else:
+                      key_args = []
+                      for part in parts[1:]:
+                        if not part.startswith('-') and len(part) > 1:
+                          if len(part) > 20:
+                            part = part[:17] + '...'
+                          key_args.append(part)
+                          if len(key_args) >= 1:  # Limit to 1 arg for grep
+                            break
+                      command_summary = f"{cmd} {' '.join(key_args)}".strip()
+                  else:
+                    key_args = []
+                    for part in parts[1:]:
+                      if not part.startswith('-') and len(part) > 1:
+                        if len(part) > 20:
+                          part = part[:17] + '...'
+                        key_args.append(part)
+                        if len(key_args) >= 2:  # Limit to 2 key args
+                          break
+
+                    command_summary = f"{cmd} {' '.join(key_args)}".strip()
+
+                  if len(command_summary) > 40:
+                    command_summary = command_summary[:37] + '...'
+
+                  if command_summary not in commands:
+                    commands.append(command_summary)
+            break
+
+    return commands
+
+  def _extract_tool_names(self, content: str) -> list[str]:
+    """Extract tool names from content."""
+    tool_counts = {}
+    lines = content.split('\n')
+
+    for i, line in enumerate(lines):
+      line = line.strip()
+      if (line in ['<bash>', '<conclusion>'] and not line.startswith('</')):
+        tool_name = line[1:-1].title()
+        tool_counts[tool_name] = tool_counts.get(tool_name, 0) + 1
+      elif line == '<stderr>':
+        if i + 1 < len(lines) and lines[i + 1].strip():
+          tool_counts['Stderr'] = tool_counts.get('Stderr', 0) + 1
+
+    tool_names = []
+    for tool_name, count in tool_counts.items():
+      tool_names.append(tool_name)
+
+    return tool_names
+
+  def _parse_steps_from_logs(self, agent_logs: list[LogPart]) -> list[dict]:
+    """Parse steps from agent logs, grouping by chat prompt/response pairs."""
+    step_pattern = re.compile(r"Step #(\d+) - \"(.+?)\":")
+    simple_step_pattern = re.compile(r"Step #(\d+)")
+
+    steps_dict = {}
+    current_step_number = None
+    current_step_name = None
+
+    for log_part in agent_logs:
+      content = log_part.content.strip()
+      if not content:
+        continue
+
+      lines = content.split('\n')
+
+      step_header_found = False
+      for line in lines:
+        step_match = step_pattern.search(line)
+        if not step_match:
+          simple_match = simple_step_pattern.search(line)
+          if simple_match:
+            step_match = simple_match
+
+        if step_match:
+          step_header_found = True
+          current_step_number = step_match.group(1)
+
+          if current_step_number not in steps_dict:
+            steps_dict[current_step_number] = {
+                'number': current_step_number,
+                'type': 'Step',
+                'log_parts': []
+            }
+          break
+
+      if not step_header_found and current_step_number:
+        steps_dict[current_step_number]['log_parts'].append(log_part)
+      elif not step_header_found and not current_step_number and not steps_dict:
+        steps_dict['0'] = {
+            'number': None,
+            'type': 'Content',
+            'log_parts': [log_part]
+        }
+
+    return self._parse_steps_by_chat_pairs(agent_logs)
+
+  def _parse_steps_by_chat_pairs(self, agent_logs: list[LogPart]) -> list[dict]:
+    steps = []
+
+    first_prompt_idx = -1
+    for i, log_part in enumerate(agent_logs):
+      if log_part.chat_prompt:
+        first_prompt_idx = i
+        break
+
+    if first_prompt_idx == -1:
+      return []
+
+    steps.append({
+        'number': '0 - System Instructions',
+        'type': 'System Instructions',
+        'log_parts': [agent_logs[first_prompt_idx]]
+    })
+
+    # Process logs after the system prompt to group into steps.
+    logs_to_process = agent_logs[first_prompt_idx + 1:]
+    step_counter = 1
+    current_step_parts = []
+
+    for log_part in logs_to_process:
+      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.
+      if log_part.chat_response:
+        if current_step_parts:
+          step_data = self._create_step_data(step_counter, current_step_parts)
+          steps.append(step_data)
+          step_counter += 1
+        current_step_parts = [log_part]
+      else:
+        current_step_parts.append(log_part)
+
+    # Append the last step.
+    if current_step_parts:
+      step_data = self._create_step_data(step_counter, current_step_parts)
+      steps.append(step_data)
+
+    return steps
+
+  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:
+    """Create step data from log parts."""
+    step_data = {
+        'number': str(step_number),
+        'type': 'Step',
+        'log_parts': log_parts
+    }
+
+    all_content = '\n'.join([part.content for part in log_parts])
+    tool_names = self._extract_tool_names(all_content)
+    bash_commands = self._extract_bash_commands(all_content)
+
+    if tool_names:
+      step_data['name'] = f"{', '.join(tool_names)}"
+    if bash_commands:
+      step_data['bash_commands'] = bash_commands
+
+    return step_data
+
   def get_agent_sections(self) -> dict[str, list[LogPart]]:
     """Get the agent sections from the logs."""
 
@@ -91,16 +363,22 @@ def get_agent_cycles(self) -> list[dict]:
     cycles_dict = {}
 
     for agent_name, agent_logs in agent_sections.items():
+      # Parse steps for this agent
+      steps = self._parse_steps_from_logs(agent_logs)
+
       cycle_match = re.search(r'\(Cycle (\d+)\)', agent_name)
       if cycle_match:
         cycle_number = int(cycle_match.group(1))
         if cycle_number not in cycles_dict:
           cycles_dict[cycle_number] = {}
-        cycles_dict[cycle_number][agent_name] = agent_logs
+        cycles_dict[cycle_number][agent_name] = {
+            'logs': agent_logs,
+            'steps': steps
+        }
       else:
         if 0 not in cycles_dict:
           cycles_dict[0] = {}
-        cycles_dict[0][agent_name] = agent_logs
+        cycles_dict[0][agent_name] = {'logs': agent_logs, 'steps': steps}
 
     return [cycles_dict[cycle] for cycle in sorted(cycles_dict.keys())]
 
@@ -178,30 +456,30 @@ def get_formatted_stack_traces(self,
 
         function_name = in_match.group(1)
         path = in_match.group(2)
-        if '/src/' in path and 'llvm-project' not in path and self._benchmark_id and self._sample_id:
-          path_parts = path.split(':')
-          file_path = path_parts[0]  # Just the file path without line numbers
-          line_number = path_parts[1] if len(path_parts) > 1 else None
-
-          relative_path = file_path.lstrip('/')
-
-          # If coverage_report_path is set, it's a local run
-          # Otherwise it's cloud
-          if self._coverage_report_path:
-            url = f'{self._coverage_report_path}{relative_path}.html'
-            url_with_line_number = f'{url}#L{line_number}' if line_number else url
-          else:
-            url = (
-                f'{base_url}/results/{self._benchmark_id}/code-coverage-reports/'
-                f'{self._sample_id}.fuzz_target/report/linux/'
-                f'{relative_path}.html')
-            url_with_line_number = f'{url}#L{line_number}' if line_number else url
-          stack_traces[frame_num] = {
-              "url": url_with_line_number,
-              "path": path,
-              "function": function_name,
-              "memory_address": memory_addr
-          }
+        if '/src/' in path and 'llvm-project' not in path:
+          if self._benchmark_id and self._sample_id:
+            path_parts = path.split(':')
+            file_path = path_parts[0]
+            line_number = path_parts[1] if len(path_parts) > 1 else None
+
+            relative_path = file_path.lstrip('/')
+
+            # If coverage_report_path is set, it's a local run
+            # Otherwise it's cloud
+            if self._coverage_report_path:
+              url = f'{self._coverage_report_path}{relative_path}.html'
+              url_line_number = f'{url}#L{line_number}' if line_number else url
+            else:
+              url = (f'{base_url}/results/{self._benchmark_id}/'
+                     f'code-coverage-reports/{self._sample_id}.fuzz_target/'
+                     f'report/linux/{relative_path}.html')
+              url_line_number = f'{url}#L{line_number}' if line_number else url
+            stack_traces[frame_num] = {
+                "url": url_line_number,
+                "path": path,
+                "function": function_name,
+                "memory_address": memory_addr
+            }
 
     return stack_traces
 
diff --git a/report/templates/base.html b/report/templates/base.html
index 9a4bcd0be..d0d43b0b8 100644
--- a/report/templates/base.html
+++ b/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>
@@ -746,8 +750,8 @@ <h2 class="signature">
 }
 
 document.addEventListener('DOMContentLoaded', (event) => {
-    document.querySelectorAll('pre code.syntax-highlight').forEach((block) => {
-        hljs.highlightElement(block);
+    document.querySelectorAll('.prettify-benchmark-name').forEach(el => {
+        el.textContent = prettifyBenchmarkName(el.textContent);
     });
 
     const searchInput = document.getElementById('searchInput');
@@ -800,10 +804,6 @@ <h2 class="signature">
         }, 300);
     });
 
-    document.querySelectorAll('.prettify-benchmark-name').forEach(el => {
-        el.textContent = prettifyBenchmarkName(el.textContent);
-    });
-
     const tocTree = document.getElementById('toc-tree');
     const sections = document.querySelectorAll('.toc-section');
     sections.forEach((section, index) => {
@@ -913,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>
\ No newline at end of file
+  <!-- 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>
\ No newline at end of file
diff --git a/report/templates/index/index.html b/report/templates/index/index.html
index 8c222333a..079ce8803 100644
--- a/report/templates/index/index.html
+++ b/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,30 @@
         </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="language-coverage-chart" class="chart-box"></div>
+                </div>
+                <div class="chart-row">
+                    <div id="crash-reasons-chart" class="chart-box"></div>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 
 <button class="toc-toggle" id="tocToggle">
diff --git a/report/templates/index/index.js b/report/templates/index/index.js
index 44646d457..6a431976f 100644
--- a/report/templates/index/index.js
+++ b/report/templates/index/index.js
@@ -1,184 +1,363 @@
 document.addEventListener('DOMContentLoaded', function() {
-    // Project summary table expand/collapse buttons
-    const projectSummaryExpandAllButton = document.getElementById('project-summary-expand-all');
-    if (projectSummaryExpandAllButton) {
-        projectSummaryExpandAllButton.addEventListener('click', () => {
-            document.querySelectorAll('[x-ref^="benchmarks_"]').forEach(el => {
-                el.classList.remove('hidden');
-            });
-        });
-    }
-
-    const projectSummaryCollapseAllButton = document.getElementById('project-summary-collapse-all');
-    if (projectSummaryCollapseAllButton) {
-        projectSummaryCollapseAllButton.addEventListener('click', () => {
-            document.querySelectorAll('[x-ref^="benchmarks_"]').forEach(el => {
-                el.classList.add('hidden');
-            });
-        });
-    }
-
-    const crashesExpandAllButton = document.getElementById('crashes-expand-all');
-    if (crashesExpandAllButton) {
-        crashesExpandAllButton.addEventListener('click', () => {
-            document.querySelectorAll('[x-ref^="project_"]').forEach(el => {
-                el.classList.remove('hidden');
-            });
-            document.querySelectorAll('[x-ref^="samples_"]').forEach(el => {
-                el.classList.remove('hidden');
-            });
-        });
-    }
-
-    const crashesCollapseAllButton = document.getElementById('crashes-collapse-all');
-    if (crashesCollapseAllButton) {
-        crashesCollapseAllButton.addEventListener('click', () => {
-            document.querySelectorAll('[x-ref^="project_"]').forEach(el => {
-                el.classList.add('hidden');
-            });
-            document.querySelectorAll('[x-ref^="samples_"]').forEach(el => {
-                el.classList.add('hidden');
-            });
-        });
-    }
-
-    // Project-level expand/collapse buttons
-    document.querySelectorAll('[id^="project-expand-all-"]').forEach(button => {
-        button.addEventListener('click', () => {
-            const projectIndex = button.id.split('-').pop();
-            document.querySelectorAll(`[x-ref^="samples_"][x-ref$="_${projectIndex}"]`).forEach(el => {
-                el.classList.remove('hidden');
-            });
-        });
-    });
-
-    document.querySelectorAll('[id^="project-collapse-all-"]').forEach(button => {
-        button.addEventListener('click', () => {
-            const projectIndex = button.id.split('-').pop();
-            document.querySelectorAll(`[x-ref^="samples_"][x-ref$="_${projectIndex}"]`).forEach(el => {
-                el.classList.add('hidden');
-            });
-        });
-    });
-
-    function compareTableCells(cellA, cellB, sortNumber, sortAsc) {
-        if (!cellA || !cellB) return 0;
-
-        let valueA_str = cellA.dataset.sortValue;
-        let valueB_str = cellB.dataset.sortValue;
-        let comparison = 0;
-
-        if (sortNumber) {
-            let numA = parseFloat(valueA_str);
-            let numB = parseFloat(valueB_str);
-
-            if (isNaN(numA) && isNaN(numB)) {
-                comparison = 0;
-            } else if (isNaN(numA)) {
-                comparison = 1;
-            } else if (isNaN(numB)) {
-                comparison = -1;
-            } else {
-                comparison = numA - numB;
-            }
-        } else {
-            const strA = (valueA_str === undefined || valueA_str === null) ? "" : String(valueA_str);
-            const strB = (valueB_str === undefined || valueB_str === null) ? "" : String(valueB_str);
-            comparison = strA.localeCompare(strB);
-        }
-        return sortAsc ? comparison : -comparison;
-    }
-
-    const tables = Array.from(document.querySelectorAll('table.sortable-table'));
-    tables.forEach(table_element => {
-        const headers = Array.from(table_element.querySelectorAll('th'));
-        headers.forEach((th, colindex) => {
-            if (th.innerText.trim() === '' && colindex === 0) {
-                return;
-            }
-
-            th.addEventListener('click', () => {
-                const sortAsc = th.dataset.sorted !== "asc";
-                const sortNumber = th.hasAttribute('data-sort-number');
-
-                const currentTableHeaders = Array.from(table_element.querySelectorAll('th'));
-                currentTableHeaders.forEach(innerTH => delete innerTH.dataset.sorted);
-                th.dataset.sorted = sortAsc ? "asc" : "desc";
-
-                const tbody = table_element.querySelector('tbody');
-                if (!tbody) return;
-
-                let allRowsInBody = Array.from(tbody.children);
-                let sortableUnits = [];
-                let appendedRows = [];
-
-                if (table_element.id === 'project-summary-table') {
-                    for (let i = 0; i < allRowsInBody.length; i += 2) {
-                        if (allRowsInBody[i] && allRowsInBody[i+1] &&
-                            allRowsInBody[i].classList.contains('project-data-row') &&
-                            allRowsInBody[i+1].classList.contains('project-benchmarks-container-row')) {
-                            sortableUnits.push({
-                                representativeRow: allRowsInBody[i],
-                                actualRows: [allRowsInBody[i], allRowsInBody[i+1]]
-                            });
-                        } else {
-                            appendedRows.push(...allRowsInBody.slice(i));
-                            break;
-                        }
-                    }
-                } else if (table_element.id === 'crashes-table') {
-                    for (let i = 0; i < allRowsInBody.length; i += 2) {
-                        if (allRowsInBody[i] && allRowsInBody[i+1]) {
-                            sortableUnits.push({
-                                representativeRow: allRowsInBody[i],
-                                actualRows: [allRowsInBody[i], allRowsInBody[i+1]]
-                            });
-                        }
-                    }
-                } else if (table_element.closest('[x-ref^="project_"]')) {
-                    for (let i = 0; i < allRowsInBody.length; i += 2) {
-                        if (allRowsInBody[i] && allRowsInBody[i+1]) {
-                            sortableUnits.push({
-                                representativeRow: allRowsInBody[i],
-                                actualRows: [allRowsInBody[i], allRowsInBody[i+1]]
-                            });
-                        }
-                    }
-                } else {
-                    if (table_element.id && table_element.id.startsWith('benchmarks-table-')) {
-                        const averageRowIndex = allRowsInBody.findIndex(row => row.cells.length > 0 && row.cells[0].innerText.trim() === 'Average');
-                        if (averageRowIndex !== -1) {
-                            appendedRows.push(allRowsInBody.splice(averageRowIndex, 1)[0]);
-                        }
-                    }
-                    allRowsInBody.forEach(row => {
-                        sortableUnits.push({ representativeRow: row, actualRows: [row] });
-                    });
-                }
-
-                sortableUnits.sort((unitA, unitB) => {
-                    const cellA = unitA.representativeRow.children[colindex];
-                    const cellB = unitB.representativeRow.children[colindex];
-                    return compareTableCells(cellA, cellB, sortNumber, sortAsc);
-                });
-
-                tbody.innerHTML = '';
-                sortableUnits.forEach(unit => {
-                    unit.actualRows.forEach(row => tbody.appendChild(row));
-                });
-                appendedRows.forEach(row => tbody.appendChild(row));
-
-                let visualIndex = 1;
-                Array.from(tbody.children).forEach(r => {
-                    if (appendedRows.includes(r)) {
-                        return;
-                    }
-                    const firstCell = r.children[0];
-                    if (firstCell && firstCell.classList.contains('table-index') && !firstCell.querySelector('button')) {
-                         firstCell.innerText = visualIndex++;
-                    }
-                });
-            });
-        });
-    });
+	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 readUnifiedData() {
+		const el = document.getElementById('unified-data');
+		if (!el) return null;
+		try { return JSON.parse(el.textContent); } catch (_) { return null; }
+	}
+
+	function containerSize(el, fallbackW = 800, fallbackH = 300) {
+		if (!el) return { width: fallbackW, height: fallbackH };
+		const rect = el.getBoundingClientRect();
+		const width = Math.max(300, Math.floor(rect.width - 20));
+		const height = Math.max(220, Math.floor(rect.height - 20));
+		return { width, height };
+	}
+
+	function appendTitle(el, text) {
+		const title = document.createElement('div');
+		title.textContent = text;
+		title.style.fontWeight = '600';
+		title.style.marginBottom = '8px';
+		el.appendChild(title);
+	}
+
+	function renderLanguagePie(langData) {
+		const el = document.getElementById('language-coverage-chart');
+		if (!el || typeof d3 === 'undefined') return;
+		el.innerHTML = '';
+		appendTitle(el, 'Language Coverage (Experiment new lines)');
+		const { width, height } = containerSize(el);
+		const reserved = 60;
+		const svgHeight = Math.max(220, height - reserved);
+		const legend = d3.select(el).append('div').style('display','flex').style('flexWrap','wrap').style('gap','10px').style('justifyContent','center').style('marginBottom','8px');
+		const color = (d3.schemeTableau10 || d3.schemeCategory10 || []).length ? d3.scaleOrdinal((d3.schemeTableau10 || d3.schemeCategory10)) : d3.scaleOrdinal().range(['#3b82f6','#22c55e','#ef4444','#f59e0b','#8b5cf6','#06b6d4','#84cc16','#e11d48','#64748b','#a855f7']);
+		color.domain(langData.map(d=>d.language));
+		langData.forEach(d => {
+			const item = legend.append('div').style('display','flex').style('alignItems','center').style('gap','6px');
+			item.append('span').style('display','inline-block').style('width','12px').style('height','12px').style('background', color(d.language));
+			item.append('span').text(`${d.language}: ${d.experiment_new}`);
+		});
+		const values = langData.map(d => d.experiment_new || 0);
+		const sum = values.reduce((a,b)=>a+b,0);
+		if (sum <= 0) { el.innerHTML = '<p class="text-gray-500">No language coverage data</p>'; return; }
+		const radius = Math.min(width, svgHeight) / 2 - 8;
+		const svg = d3.select(el).append('svg').attr('width', width).attr('height', svgHeight)
+			.append('g').attr('transform', `translate(${width/2},${svgHeight/2})`);
+		const pie = d3.pie().sort(null).value(d => d.experiment_new)(langData);
+		const arc = d3.arc().outerRadius(radius).innerRadius(radius*0.5);
+		svg.selectAll('path').data(pie).enter().append('path')
+			.attr('d', arc)
+			.attr('fill', d => color(d.data.language))
+			.append('title').text(d => `${d.data.language}: ${d.data.experiment_new}`);
+	}
+
+	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);
+
+		const coverageEl = document.getElementById('coverage-chart');
+		if (projectData.length > 0 && coverageEl) {
+			try {
+				coverageEl.innerHTML = '';
+				appendTitle(coverageEl, 'New vs Existing Code Coverage by Project');
+				const legendDiv = document.createElement('div');
+				legendDiv.style.display = 'flex';
+				legendDiv.style.gap = '16px';
+				legendDiv.style.alignItems = 'center';
+				legendDiv.style.fontSize = '14px';
+				legendDiv.style.marginBottom = '6px';
+				legendDiv.innerHTML = '<span style="display:inline-flex;align-items:center;gap:6px"><span style="display:inline-block;width:12px;height:12px;background:#94a3b8"></span>Existing Coverage</span><span style="display:inline-flex;align-items:center;gap:6px"><span style="display:inline-block;width:12px;height:12px;background:#3b82f6"></span>New Coverage</span>';
+				coverageEl.appendChild(legendDiv);
+				const { width, height } = containerSize(coverageEl);
+				const plot = Plot.plot({
+					title: null,
+					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,
+					height: Math.max(240, height - 56)
+				});
+				coverageEl.appendChild(plot);
+			} catch (error) {
+				coverageEl.innerHTML = '<p class="text-red-500">' + error.message + '</p>';
+			}
+		}
+
+		const langRows = document.querySelectorAll('#language-coverage-gain tbody tr');
+		const langData = Array.from(langRows).map(row => {
+			const cells = row.querySelectorAll('td');
+			if (cells.length >= 6) {
+				return {
+					language: cells[0].dataset.sortValue,
+					ossfuzz_covered: parseInt(cells[2].dataset.sortValue) || 0,
+					experiment_new: parseInt(cells[3].dataset.sortValue) || 0
+				};
+			}
+			return null;
+		}).filter(Boolean);
+		if (langData.length > 0) {
+			try { renderLanguagePie(langData); } catch (_) {}
+		}
+
+		const unified = readUnifiedData();
+		if (unified) {
+			const crashReasons = {};
+			for (const projectName in unified) {
+				const project = unified[projectName];
+				if (project.benchmarks) {
+					for (const benchId in project.benchmarks) {
+						const bench = project.benchmarks[benchId];
+						if (bench.samples) {
+							bench.samples.forEach(s => {
+								const reason = (s.crash_reason || '').trim() || 'N/A';
+								crashReasons[reason] = (crashReasons[reason] || 0) + (s.crashes ? 1 : 0);
+							});
+						}
+					}
+				}
+			}
+			const crEl = document.getElementById('crash-reasons-chart');
+			const crashReasonData = Object.entries(crashReasons).map(([reason, count]) => ({ reason, count })).sort((a,b) => b.count - a.count);
+			if (crashReasonData.length > 0 && crEl) {
+				try {
+					crEl.innerHTML = '';
+					appendTitle(crEl, 'Crash Reasons');
+					const { width, height } = containerSize(crEl);
+					const crPlot = Plot.plot({
+						title: null,
+						x: { label: 'Reason', domain: crashReasonData.map(d => d.reason) },
+						y: { label: 'Count' },
+						marks: [
+							BarY(crashReasonData, { x: 'reason', y: 'count', fill: '#f59e0b' })
+						],
+						width,
+						height: Math.max(240, height - 28)
+					});
+					crEl.appendChild(crPlot);
+				} catch (error) {
+					crEl.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) {
+		projectSummaryExpandAllButton.addEventListener('click', () => {
+			document.querySelectorAll('[x-ref^="benchmarks_"]').forEach(el => {
+				el.classList.remove('hidden');
+			});
+		});
+	}
+
+	const projectSummaryCollapseAllButton = document.getElementById('project-summary-collapse-all');
+	if (projectSummaryCollapseAllButton) {
+		projectSummaryCollapseAllButton.addEventListener('click', () => {
+			document.querySelectorAll('[x-ref^="benchmarks_"]').forEach(el => {
+				el.classList.add('hidden');
+			});
+		});
+	}
+
+	const crashesExpandAllButton = document.getElementById('crashes-expand-all');
+	if (crashesExpandAllButton) {
+		crashesExpandAllButton.addEventListener('click', () => {
+			document.querySelectorAll('[x-ref^="project_"]').forEach(el => {
+				el.classList.remove('hidden');
+			});
+			document.querySelectorAll('[x-ref^="samples_"]').forEach(el => {
+				el.classList.remove('hidden');
+			});
+		});
+	}
+
+	const crashesCollapseAllButton = document.getElementById('crashes-collapse-all');
+	if (crashesCollapseAllButton) {
+		crashesCollapseAllButton.addEventListener('click', () => {
+			document.querySelectorAll('[x-ref^="project_"]').forEach(el => {
+				el.classList.add('hidden');
+			});
+			document.querySelectorAll('[x-ref^="samples_"]').forEach(el => {
+				el.classList.add('hidden');
+			});
+		});
+	}
+
+	// Project-level expand/collapse buttons
+	document.querySelectorAll('[id^="project-expand-all-"]').forEach(button => {
+		button.addEventListener('click', () => {
+			const projectIndex = button.id.split('-').pop();
+			document.querySelectorAll(`[x-ref^="samples_"][x-ref$="_${projectIndex}"]`).forEach(el => {
+				el.classList.remove('hidden');
+			});
+		});
+	});
+
+	document.querySelectorAll('[id^="project-collapse-all-"]').forEach(button => {
+		button.addEventListener('click', () => {
+			const projectIndex = button.id.split('-').pop();
+			document.querySelectorAll(`[x-ref^="samples_"][x-ref$="_${projectIndex}"]`).forEach(el => {
+				el.classList.add('hidden');
+			});
+		});
+	});
+
+	function compareTableCells(cellA, cellB, sortNumber, sortAsc) {
+		if (!cellA || !cellB) return 0;
+
+		let valueA_str = cellA.dataset.sortValue;
+		let valueB_str = cellB.dataset.sortValue;
+		let comparison = 0;
+
+		if (sortNumber) {
+			let numA = parseFloat(valueA_str);
+			let numB = parseFloat(valueB_str);
+
+			if (isNaN(numA) && isNaN(numB)) {
+				comparison = 0;
+			} else if (isNaN(numA)) {
+				comparison = 1;
+			} else if (isNaN(numB)) {
+				comparison = -1;
+			} else {
+				comparison = numA - numB;
+			}
+		} else {
+			const strA = (valueA_str === undefined || valueA_str === null) ? "" : String(valueA_str);
+			const strB = (valueB_str === undefined || valueB_str === null) ? "" : String(valueB_str);
+			comparison = strA.localeCompare(strB);
+		}
+		return sortAsc ? comparison : -comparison;
+	}
+
+	const tables = Array.from(document.querySelectorAll('table.sortable-table'));
+	tables.forEach(table_element => {
+		const headers = Array.from(table_element.querySelectorAll('th'));
+		headers.forEach((th, colindex) => {
+			if (th.innerText.trim() === '' && colindex === 0) {
+				return;
+			}
+
+			th.addEventListener('click', () => {
+				const sortAsc = th.dataset.sorted !== "asc";
+				const sortNumber = th.hasAttribute('data-sort-number');
+
+				const currentTableHeaders = Array.from(table_element.querySelectorAll('th'));
+				currentTableHeaders.forEach(innerTH => delete innerTH.dataset.sorted);
+				th.dataset.sorted = sortAsc ? "asc" : "desc";
+
+				const tbody = table_element.querySelector('tbody');
+				if (!tbody) return;
+
+				let allRowsInBody = Array.from(tbody.children);
+				let sortableUnits = [];
+				let appendedRows = [];
+
+				if (table_element.id === 'project-summary-table') {
+					for (let i = 0; i < allRowsInBody.length; i += 2) {
+						if (allRowsInBody[i] && allRowsInBody[i+1] &&
+							allRowsInBody[i].classList.contains('project-data-row') &&
+							allRowsInBody[i+1].classList.contains('project-benchmarks-container-row')) {
+							sortableUnits.push({
+								representativeRow: allRowsInBody[i],
+								actualRows: [allRowsInBody[i], allRowsInBody[i+1]]
+							});
+						} else {
+							appendedRows.push(...allRowsInBody.slice(i));
+							break;
+						}
+					}
+				} else if (table_element.id === 'crashes-table') {
+					for (let i = 0; i < allRowsInBody.length; i += 2) {
+						if (allRowsInBody[i] && allRowsInBody[i+1]) {
+							sortableUnits.push({
+								representativeRow: allRowsInBody[i],
+								actualRows: [allRowsInBody[i], allRowsInBody[i+1]]
+							});
+						}
+					}
+				} else if (table_element.closest('[x-ref^="project_"]')) {
+					for (let i = 0; i < allRowsInBody.length; i += 2) {
+						if (allRowsInBody[i] && allRowsInBody[i+1]) {
+							sortableUnits.push({
+								representativeRow: allRowsInBody[i],
+								actualRows: [allRowsInBody[i], allRowsInBody[i+1]]
+							});
+						}
+					}
+				} else {
+					if (table_element.id && table_element.id.startsWith('benchmarks-table-')) {
+						const averageRowIndex = allRowsInBody.findIndex(row => row.cells.length > 0 && row.cells[0].innerText.trim() === 'Average');
+						if (averageRowIndex !== -1) {
+							appendedRows.push(allRowsInBody.splice(averageRowIndex, 1)[0]);
+						}
+					}
+					allRowsInBody.forEach(row => {
+						sortableUnits.push({ representativeRow: row, actualRows: [row] });
+					});
+				}
+
+				sortableUnits.sort((unitA, unitB) => {
+					const cellA = unitA.representativeRow.children[colindex];
+					const cellB = unitB.representativeRow.children[colindex];
+					return compareTableCells(cellA, cellB, sortNumber, sortAsc);
+				});
+
+				tbody.innerHTML = '';
+				sortableUnits.forEach(unit => {
+					unit.actualRows.forEach(row => tbody.appendChild(row));
+				});
+				appendedRows.forEach(row => tbody.appendChild(row));
+
+				let visualIndex = 1;
+				Array.from(tbody.children).forEach(r => {
+					if (appendedRows.includes(r)) {
+						return;
+					}
+					const firstCell = r.children[0];
+					if (firstCell && firstCell.classList.contains('table-index') && !firstCell.querySelector('button')) {
+						 firstCell.innerText = visualIndex++;
+					}
+				});
+			});
+		});
+	});
 });
diff --git a/report/templates/sample/sample.html b/report/templates/sample/sample.html
index 67f10c909..27cec449f 100644
--- a/report/templates/sample/sample.html
+++ b/report/templates/sample/sample.html
@@ -17,7 +17,7 @@
 
 {% block content %}
 
-{% if sample_css_content %}
+{% if sample_css_content and sample_css_content.strip() and '{' in sample_css_content %}
 <style type="text/css">
 {{ sample_css_content | safe }}
 </style>
@@ -283,7 +283,7 @@ <h3>Build Script</h3>
                 {% for cycle_data in agent_cycles %}
                   {% if 'standalone' in cycle_data %}
                     <!-- Standalone agents -->
-                    {% for agent_name, agent_logs in cycle_data.standalone.items() %}
+                    {% for agent_name, agent_data in cycle_data.standalone.items() %}
                       <div x-data="{ open: false }" class="border rounded-lg mb-4 agent-section">
                         <button @click="open = !open" class="w-full p-4 flex justify-between items-center text-left rounded-t-lg">
                           <span class="font-medium">{{ agent_name }}</span>
@@ -292,9 +292,30 @@ <h3>Build Script</h3>
                           </svg>
                         </button>
                         <div x-show="open" class="border-t">
-                          {% for log_part in agent_logs %}
-                            <pre class="{% if log_part.chat_prompt %}chat_prompt {% elif log_part.chat_response %}chat_response {% endif %} p-4 rounded-md mb-4 whitespace-pre-wrap break-words">{{ log_part.content }}</pre>
-                          {% endfor %}
+                          {% if agent_data.steps %}
+                            {% for step in agent_data.steps %}
+                              <div x-data="{ stepOpen: false }" class="border-b last:border-b-0">
+                                <button @click="stepOpen = !stepOpen" class="w-full p-3 flex justify-between items-center text-left">
+                                  <span class="font-medium">
+                                    {% if step.number %}Step {{ step.number }}{% else %}Content{% endif %}
+                                    <span class="text-gray-500 ml-2">({{ step.type }})</span>
+                                  </span>
+                                  <svg class="w-3 h-3" :class="{'rotate-180': stepOpen}" 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"></path>
+                                  </svg>
+                                </button>
+                                <div x-show="stepOpen" class="px-3 pb-3">
+                                  {% for log_part in step.log_parts %}
+                                    <div class="log-part-content {% if log_part.chat_prompt %}chat_prompt{% elif log_part.chat_response %}chat_response{% endif %} p-4 rounded-md mb-4 whitespace-pre-wrap break-words">{{ log_part.content|syntax_highlight|safe }}</div>
+                                  {% endfor %}
+                                </div>
+                              </div>
+                            {% endfor %}
+                          {% else %}
+                            {% for log_part in agent_data.logs %}
+                              <div class="{% if log_part.chat_prompt %}chat_prompt {% elif log_part.chat_response %}chat_response {% endif %} p-4 rounded-md mb-4 whitespace-pre-wrap break-words">{{ log_part.content|syntax_highlight(default_lang)|safe }}</div>
+                            {% endfor %}
+                          {% endif %}
                         </div>
                       </div>
                     {% endfor %}
@@ -314,7 +335,7 @@ <h3>Build Script</h3>
                       <div class="mb-2 font-medium">
                         Cycle {{ loop.index }}
                       </div>
-                      {% for agent_name, agent_logs in cycle_data.items() %}
+                      {% for agent_name, agent_data in cycle_data.items() %}
                         <div x-data="{ open: false }" class="border rounded-lg mb-4 agent-section">
                           <button @click="open = !open" class="w-full p-4 flex justify-between items-center text-left rounded-t-lg">
                             <span class="font-medium">{{ agent_name }}</span>
@@ -323,9 +344,101 @@ <h3>Build Script</h3>
                             </svg>
                           </button>
                           <div x-show="open" class="border-t">
-                            {% for log_part in agent_logs %}
-                              <pre class="{% if log_part.chat_prompt %}chat_prompt {% elif log_part.chat_response %}chat_response {% endif %} p-4 rounded-md mb-4 whitespace-pre-wrap break-words">{{ log_part.content }}</pre>
-                            {% endfor %}
+                            {% if agent_data.steps %}
+                              {% if agent_data.steps|length == 1 %}
+                                <!-- Single step - show raw content -->
+                                {% set step = agent_data.steps[0] %}
+                                {% if step.number and step.name %}
+                                  <div class="p-3 border-b mt-3">
+                                    <div class="font-medium mb-2">Step {{ step.number }} -
+                                      {% if 'Stderr' in step.name %}
+                                        {{ step.name.replace('Stderr', '<span class="text-red-600">Stderr</span>') | safe }}
+                                      {% else %}
+                                        {{ step.name }}
+                                      {% endif %}
+                                    </div>
+                                    {% if step.bash_commands %}
+                                    <div class="text-sm text-gray-600 mb-3">
+                                      <span class="font-medium">Commands:</span>
+                                      {% for cmd in step.bash_commands %}
+                                        <span class="inline-block px-2 py-1 rounded text-xs mr-2 mb-1">{{ cmd }}</span>
+                                      {% endfor %}
+                                    </div>
+                                    {% endif %}
+                                    {% if step.log_parts %}
+                                      {% for log_part in step.log_parts %}
+                                        <div class="{% if log_part.chat_prompt %}chat_prompt {% elif log_part.chat_response %}chat_response {% endif %} p-3 rounded-md mb-2 whitespace-pre-wrap break-words">{{ log_part.content|syntax_highlight|safe }}</div>
+                                      {% endfor %}
+                                    {% else %}
+                                      <div class="p-3 rounded-md whitespace-pre-wrap break-words">{{ step.content|syntax_highlight|safe }}</div>
+                                    {% endif %}
+                                  </div>
+                                {% else %}
+                                  {% if step.log_parts %}
+                                    {% for log_part in step.log_parts %}
+                                      <div class="{% if log_part.chat_prompt %}chat_prompt {% elif log_part.chat_response %}chat_response {% endif %} p-4 rounded-md mb-4 whitespace-pre-wrap break-words">{{ log_part.content|syntax_highlight|safe }}</div>
+                                    {% endfor %}
+                                  {% else %}
+                                    <div class="p-4 rounded-md mb-4 whitespace-pre-wrap break-words">{{ step.content|syntax_highlight|safe }}</div>
+                                  {% endif %}
+                                {% endif %}
+                              {% else %}
+                                <!-- Multiple steps - show collapsible -->
+                                {% for step in agent_data.steps %}
+                                  <div x-data="{ stepOpen: false }" class="ml-5 border-b last:border-b-0">
+                                    <button @click="stepOpen = !stepOpen" class="w-full p-3 flex justify-between items-center text-left">
+                                      <div class="flex-1">
+                                        <span class="font-medium">
+                                          {% if step.number %}
+                                            {% if step.name %}
+                                              Step {{ step.number }} -
+                                              {% if 'Stderr' in step.name %}
+                                                {{ step.name.replace('Stderr', '<span class="text-red-600">Stderr</span>') | safe }}
+                                              {% else %}
+                                                {{ step.name }}
+                                              {% endif %}
+                                            {% else %}
+                                              Step {{ step.number }}
+                                            {% endif %}
+                                          {% elif step.name %}
+                                            {% if 'Stderr' in step.name %}
+                                              {{ step.name.replace('Stderr', '<span class="text-red-600">Stderr</span>') | safe }}
+                                            {% else %}
+                                              {{ step.name }}
+                                            {% endif %}
+                                          {% else %}
+                                            Content
+                                          {% endif %}
+                                        </span>
+                                        {% if step.bash_commands %}
+                                        <div class="text-sm text-gray-600 mt-2>
+                                          {% for cmd in step.bash_commands %}
+                                            <span class="inline-block px-1 py-0.5 rounded mr-1">{{ cmd }}</span>
+                                          {% endfor %}
+                                        </div>
+                                        {% endif %}
+                                      </div>
+                                      <svg class="w-3 h-3" :class="{'rotate-180': stepOpen}" 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"></path>
+                                      </svg>
+                                    </button>
+                                    <div x-show="stepOpen" class="ml-5 px-3 pb-3 mt-3">
+                                      {% if step.log_parts %}
+                                        {% for log_part in step.log_parts %}
+                                          <div class="{% if log_part.chat_prompt %}chat_prompt {% elif log_part.chat_response %}chat_response {% endif %} p-3 rounded-md mb-2 whitespace-pre-wrap break-words">{{ log_part.content|syntax_highlight(default_lang)|safe }}</div>
+                                        {% endfor %}
+                                      {% else %}
+                                        <div class="p-3 rounded-md whitespace-pre-wrap break-words">{{ step.content|syntax_highlight|safe }}</div>
+                                      {% endif %}
+                                    </div>
+                                  </div>
+                                {% endfor %}
+                              {% endif %}
+                            {% else %}
+                              {% for log_part in agent_data.logs %}
+                                <div class="{% if log_part.chat_prompt %}chat_prompt {% elif log_part.chat_response %}chat_response {% endif %} p-4 rounded-md mb-4 whitespace-pre-wrap break-words">{{ log_part.content|syntax_highlight(default_lang)|safe }}</div>
+                              {% endfor %}
+                            {% endif %}
                           </div>
                         </div>
                       {% endfor %}
@@ -349,7 +462,7 @@ <h3>Build Script</h3>
         <div x-show="logsOpen"
              class="p-4 border-t">
               {% for part in logs %}
-                <pre id="logs" class="{% if part.chat_prompt %}chat_prompt bg-gray-50{% elif part.chat_response %}chat_response bg-gray-100{% endif %} p-4 rounded-md mb-4 overflow-x-auto">{{ part.content }}</pre>
+                <div id="logs" class="{% if part.chat_prompt %}chat_prompt bg-gray-50{% elif part.chat_response %}chat_response bg-gray-100{% endif %} p-4 rounded-md mb-4 overflow-x-auto">{{ part.content|syntax_highlight(default_lang)|safe }}</div>
               {% endfor %}
         </div>
       </div>
@@ -403,6 +516,7 @@ <h3>Build Script</h3>
 
 <script>
 document.addEventListener('DOMContentLoaded', function() {
+    hljs.highlightAll();
     // Agent sections expand/collapse buttons
     const agentSectionsExpandAllButton = document.getElementById('agent-sections-expand-all');
     if (agentSectionsExpandAllButton) {
diff --git a/report/web.py b/report/web.py
index c391bde45..ec5ee3881 100644
--- a/report/web.py
+++ b/report/web.py
@@ -107,6 +107,11 @@ def __init__(self, template_globals: Optional[Dict[str, Any]] = None):
         'remove_trailing_empty_lines'] = self._remove_trailing_empty_lines
     self._env.filters['splitlines'] = self._splitlines
 
+    # Add a new filter for syntax highlighting
+    logs_parser = LogsParser([])
+    self._env.filters[
+        'syntax_highlight'] = logs_parser._syntax_highlight_content
+
     if template_globals:
       for key, val in template_globals.items():
         self._env.globals[key] = val
@@ -186,6 +191,27 @@ def _copy_and_set_coverage_report(self, benchmark, sample):
       sample.result.coverage_report_path = \
         f'/sample/{benchmark.id}/coverage/{sample.id}/linux/'
 
+  def _copy_plot_library(self):
+    """Copies the Plot.js library to the output directory."""
+    search_path = self._jinja.get_template_search_path()
+    templates_dir = search_path[0] if search_path else 'report/templates'
+    libs_dir = os.path.abspath(
+        os.path.join(templates_dir, '..', 'trends_report_web'))
+
+    os.makedirs(self._output_dir, exist_ok=True)
+
+    for lib_name in ['plot.min.js', 'd3.min.js']:
+      lib_src = os.path.join(libs_dir, lib_name)
+      lib_dst = os.path.join(self._output_dir, lib_name)
+      if os.path.exists(lib_src):
+        try:
+          shutil.copy(lib_src, lib_dst)
+          logging.info('Copied %s to %s', lib_name, lib_dst)
+        except Exception as e:
+          logging.warning('Failed to copy %s: %s', lib_name, e)
+      else:
+        logging.warning('%s not found at %s', lib_name, lib_src)
+
   def _read_static_file(self, file_path_in_templates_subdir: str) -> str:
     """Reads a static file from the templates directory."""
 
@@ -213,6 +239,8 @@ def _read_static_file(self, file_path_in_templates_subdir: str) -> str:
 
   def generate(self):
     """Generate and write every report file."""
+    self._copy_plot_library()
+
     benchmarks = []
     samples_with_bugs = []
     # First pass: collect benchmarks and samples
@@ -365,18 +393,22 @@ def _write_benchmark_sample(self, benchmark: Benchmark, sample: Sample,
       agent_sections = logs_parser.get_agent_sections()
       agent_cycles = logs_parser.get_agent_cycles()
 
-      rendered = self._jinja.render('sample/sample.html',
-                                    benchmark=benchmark,
-                                    sample=sample,
-                                    agent_sections=agent_sections,
-                                    agent_cycles=agent_cycles,
-                                    logs=logs,
-                                    triage=triage,
-                                    targets=sample_targets,
-                                    sample_css_content=sample_css_content,
-                                    sample_js_content=sample_js_content,
-                                    crash_info=crash_info,
-                                    **common_data)
+      rendered = self._jinja.render(
+          'sample/sample.html',
+          benchmark=benchmark,
+          sample=sample,
+          agent_sections=agent_sections,
+          agent_cycles=agent_cycles,
+          logs=logs,
+          logs_parser=logs_parser,
+          default_lang=(benchmark.language.lower() if getattr(
+              benchmark, 'language', '') else ''),
+          triage=triage,
+          targets=sample_targets,
+          sample_css_content=sample_css_content,
+          sample_js_content=sample_js_content,
+          crash_info=crash_info,
+          **common_data)
 
       self._write(f'sample/{benchmark.id}/{sample.id}.html', rendered)
     except Exception as e: