rails_error_dashboard 0.6.3 → 0.7.0

data/app/views/layouts/rails_error_dashboard.html.erb

@@ -521,6 +521,48 @@ dd { color: var(--text-primary); }
 .offcanvas-body { flex-grow: 1; padding: var(--space-4); overflow-y: auto; }
 .offcanvas-backdrop { position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); }
 
+.red-ai-help-backdrop { position: fixed; inset: 0; z-index: 1050; background: rgba(15, 23, 42, 0.42); }
+.red-ai-help-panel {
+  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1055;
+  display: flex; flex-direction: column; width: min(460px, 100vw);
+  background: var(--surface-primary); border-left: 1px solid var(--border-primary);
+  box-shadow: var(--shadow-lg); transform: translateX(100%);
+  transition: transform var(--transition-normal); visibility: hidden;
+}
+.red-ai-help-panel.is-open { transform: translateX(0); visibility: visible; }
+.red-ai-help-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--border-primary); }
+.red-ai-help-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--text-primary); }
+.red-ai-help-title i { color: var(--accent); }
+.red-ai-help-subtitle { margin-top: 3px; font-size: 12px; color: var(--text-tertiary); }
+.red-ai-help-messages { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); overflow-y: auto; }
+.red-ai-help-empty { padding: var(--space-4); border: 1px dashed var(--border-primary); border-radius: var(--radius-md); color: var(--text-secondary); font-size: 13px; }
+.red-ai-help-message { border: 1px solid var(--border-primary); border-radius: var(--radius-md); padding: var(--space-3); font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
+.red-ai-help-message.user { align-self: flex-end; max-width: 88%; background: var(--accent-subtle); border-color: color-mix(in oklch, var(--accent) 35%, var(--border-primary)); color: var(--text-primary); }
+.red-ai-help-message.assistant { background: var(--surface-base); color: var(--text-primary); white-space: normal; }
+.red-ai-help-message.assistant > *:first-child { margin-top: 0; }
+.red-ai-help-message.assistant > *:last-child { margin-bottom: 0; }
+.red-ai-help-message.assistant p { margin: 0 0 var(--space-2); }
+.red-ai-help-message.assistant h1,
+.red-ai-help-message.assistant h2,
+.red-ai-help-message.assistant h3 { margin: var(--space-3) 0 var(--space-2); font-size: 14px; line-height: 1.35; }
+.red-ai-help-message.assistant ul,
+.red-ai-help-message.assistant ol { margin: 0 0 var(--space-2) var(--space-5); padding: 0; }
+.red-ai-help-message.assistant li { margin: 2px 0; }
+.red-ai-help-message.assistant pre { margin: var(--space-2) 0; padding: var(--space-3); max-width: 100%; overflow-x: auto; background: var(--surface-secondary); border: 1px solid var(--border-primary); }
+.red-ai-help-message.assistant pre code { color: var(--text-primary); white-space: pre; }
+.red-ai-help-message.assistant code { font-size: 12px; overflow-wrap: anywhere; }
+.red-ai-help-message.assistant blockquote { margin: var(--space-2) 0; padding-left: var(--space-3); border-left: 3px solid var(--border-primary); color: var(--text-secondary); }
+.red-ai-help-message.assistant a { overflow-wrap: anywhere; }
+.red-ai-help-message.error { background: var(--status-critical-bg); border-color: var(--status-critical); color: var(--status-critical); }
+.red-ai-help-form { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-top: 1px solid var(--border-primary); background: var(--surface-primary); }
+.red-ai-help-form textarea { width: 100%; resize: vertical; min-height: 92px; max-height: 220px; padding: var(--space-3); border: 1px solid var(--border-primary); border-radius: var(--radius-md); background: var(--surface-base); color: var(--text-primary); font: inherit; outline: none; }
+.red-ai-help-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
+.red-ai-help-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
+.red-ai-help-status { color: var(--text-tertiary); font-size: 12px; min-height: 18px; }
+@media (max-width: 575.98px) {
+  .red-ai-help-panel { width: 100vw; }
+}
+
 /* Nav */
 .nav { display: flex; flex-direction: column; list-style: none; padding: 0; margin: 0; }
 .nav-item { }
@@ -1611,6 +1653,252 @@ document.addEventListener('DOMContentLoaded', function() {
     return null;
   }
 
+  function setAiHelpOpen(open) {
+    var panel = document.getElementById('red-ai-help-panel');
+    var backdrop = document.getElementById('red-ai-help-backdrop');
+    if (!panel || !backdrop) return;
+
+    panel.classList.toggle('is-open', open);
+    panel.setAttribute('aria-hidden', open ? 'false' : 'true');
+    backdrop.hidden = !open;
+
+    if (open) {
+      var input = document.getElementById('red-ai-help-question');
+      if (input) setTimeout(function() { input.focus(); }, 150);
+    }
+  }
+
+  function appendAiHelpMessage(role, text) {
+    var messages = document.getElementById('red-ai-help-messages');
+    if (!messages) return null;
+
+    var empty = messages.querySelector('.red-ai-help-empty');
+    if (empty) empty.remove();
+
+    var message = document.createElement('div');
+    message.className = 'red-ai-help-message ' + role;
+    if (role === 'assistant') {
+      message.dataset.markdown = text || '';
+      renderAiHelpMarkdown(message);
+    } else {
+      message.textContent = text;
+    }
+    messages.appendChild(message);
+    messages.scrollTop = messages.scrollHeight;
+    return message;
+  }
+
+  function escapeAiHelpHtml(text) {
+    return String(text || '').replace(/[&<>"']/g, function(ch) {
+      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[ch];
+    });
+  }
+
+  function renderAiHelpInlineMarkdown(text) {
+    var escaped = escapeAiHelpHtml(text);
+    escaped = escaped.replace(/`([^`]+)`/g, '<code>$1</code>');
+    escaped = escaped.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    escaped = escaped.replace(/\*([^*\n]+)\*/g, '<em>$1</em>');
+    return escaped.replace(/\[([^\]]+)\]\((https?:\/\/[^)\s]+)\)/g, function(_, label, url) {
+      return '<a href="' + url + '" target="_blank" rel="noopener">' + label + '</a>';
+    });
+  }
+
+  function renderAiHelpMarkdown(message) {
+    var markdown = message.dataset.markdown || '';
+    var lines = markdown.replace(/\r\n/g, '\n').split('\n');
+    var html = [];
+    var paragraph = [];
+    var listType = null;
+    var inCode = false;
+    var codeLines = [];
+
+    function flushParagraph() {
+      if (!paragraph.length) return;
+      html.push('<p>' + renderAiHelpInlineMarkdown(paragraph.join(' ')) + '</p>');
+      paragraph = [];
+    }
+
+    function flushList() {
+      if (!listType) return;
+      html.push('</' + listType + '>');
+      listType = null;
+    }
+
+    lines.forEach(function(line) {
+      var codeFence = line.match(/^```/);
+      if (codeFence) {
+        if (inCode) {
+          html.push('<pre><code>' + escapeAiHelpHtml(codeLines.join('\n')) + '</code></pre>');
+          codeLines = [];
+          inCode = false;
+        } else {
+          flushParagraph();
+          flushList();
+          inCode = true;
+        }
+        return;
+      }
+
+      if (inCode) {
+        codeLines.push(line);
+        return;
+      }
+
+      if (/^\s*$/.test(line)) {
+        flushParagraph();
+        flushList();
+        return;
+      }
+
+      var heading = line.match(/^(#{1,3})\s+(.+)$/);
+      if (heading) {
+        flushParagraph();
+        flushList();
+        html.push('<h' + heading[1].length + '>' + renderAiHelpInlineMarkdown(heading[2]) + '</h' + heading[1].length + '>');
+        return;
+      }
+
+      var unordered = line.match(/^\s*[-*]\s+(.+)$/);
+      var ordered = line.match(/^\s*\d+\.\s+(.+)$/);
+      if (unordered || ordered) {
+        flushParagraph();
+        var desiredList = unordered ? 'ul' : 'ol';
+        if (listType !== desiredList) {
+          flushList();
+          html.push('<' + desiredList + '>');
+          listType = desiredList;
+        }
+        html.push('<li>' + renderAiHelpInlineMarkdown((unordered || ordered)[1]) + '</li>');
+        return;
+      }
+
+      var quote = line.match(/^>\s?(.+)$/);
+      if (quote) {
+        flushParagraph();
+        flushList();
+        html.push('<blockquote>' + renderAiHelpInlineMarkdown(quote[1]) + '</blockquote>');
+        return;
+      }
+
+      paragraph.push(line.trim());
+    });
+
+    if (inCode) {
+      html.push('<pre><code>' + escapeAiHelpHtml(codeLines.join('\n')) + '</code></pre>');
+    }
+    flushParagraph();
+    flushList();
+
+    message.innerHTML = html.join('') || '<p></p>';
+  }
+
+  function submitAiHelpQuestion(form) {
+    var input = document.getElementById('red-ai-help-question');
+    var status = document.getElementById('red-ai-help-status');
+    var button = form.querySelector('button[type="submit"]');
+    var question = input ? input.value.trim() : '';
+    if (!question) {
+      if (status) status.textContent = 'Enter a question first.';
+      return;
+    }
+
+    appendAiHelpMessage('user', question);
+    if (input) input.value = '';
+    if (status) status.textContent = 'Streaming...';
+    if (button) button.disabled = true;
+
+    var tokenMeta = document.querySelector('meta[name="csrf-token"]');
+    fetch(form.dataset.aiHelpUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json',
+        'X-CSRF-Token': tokenMeta ? tokenMeta.content : ''
+      },
+      body: JSON.stringify({ question: question })
+    }).then(function(response) {
+      if (!response.ok) {
+        return response.json().then(function(data) {
+          throw new Error(data.error || 'AI Help request failed.');
+        });
+      }
+      if (!response.body || !window.TextDecoder) {
+        throw new Error('Streaming is not supported by this browser.');
+      }
+
+      var assistantMessage = appendAiHelpMessage('assistant', '');
+      var reader = response.body.getReader();
+      var decoder = new TextDecoder();
+      var buffer = '';
+      var streamError = null;
+
+      function processEvent(rawEvent) {
+        var eventName = 'message';
+        var dataLines = [];
+
+        rawEvent.split('\n').forEach(function(line) {
+          if (!line || line.charAt(0) === ':') return;
+          var separator = line.indexOf(':');
+          var field = separator === -1 ? line : line.slice(0, separator);
+          var value = separator === -1 ? '' : line.slice(separator + 1).replace(/^ /, '');
+          if (field === 'event') eventName = value;
+          if (field === 'data') dataLines.push(value);
+        });
+
+        if (!dataLines.length) return;
+        var data = JSON.parse(dataLines.join('\n'));
+
+        if (eventName === 'chunk') {
+          assistantMessage.dataset.markdown = (assistantMessage.dataset.markdown || '') + (data.text || '');
+          renderAiHelpMarkdown(assistantMessage);
+          var messages = document.getElementById('red-ai-help-messages');
+          if (messages) messages.scrollTop = messages.scrollHeight;
+        } else if (eventName === 'done') {
+          if (status) status.textContent = data.provider && data.model ? data.provider + ' - ' + data.model : '';
+        } else if (eventName === 'error') {
+          streamError = data.error || 'AI Help request failed.';
+        }
+      }
+
+      function processBuffer(finalChunk) {
+        var separator;
+        while ((separator = buffer.indexOf('\n\n')) !== -1) {
+          processEvent(buffer.slice(0, separator));
+          buffer = buffer.slice(separator + 2);
+        }
+        if (finalChunk && buffer.trim()) {
+          processEvent(buffer);
+          buffer = '';
+        }
+      }
+
+      function readNext() {
+        return reader.read().then(function(result) {
+          if (result.done) {
+            buffer += decoder.decode();
+            processBuffer(true);
+            if (streamError) throw new Error(streamError);
+            return;
+          }
+
+          buffer += decoder.decode(result.value, { stream: true }).replace(/\r\n/g, '\n');
+          processBuffer(false);
+          if (streamError) throw new Error(streamError);
+          return readNext();
+        });
+      }
+
+      return readNext();
+    }).catch(function(error) {
+      appendAiHelpMessage('error', error.message);
+      if (status) status.textContent = 'Request failed.';
+    }).finally(function() {
+      if (button) button.disabled = false;
+      if (input) input.focus();
+    });
+  }
+
   document.addEventListener('click', function(e) {
     // Row navigation: <tr data-red-row-href="/path"> — clicking anywhere on the row
     // navigates, except when clicking inside a checkbox cell or interactive elements.
@@ -1656,6 +1944,12 @@ document.addEventListener('DOMContentLoaded', function() {
           window.downloadErrorJSON({ currentTarget: actionEl });
         }
         break;
+      case 'open-ai-help':
+        setAiHelpOpen(true);
+        break;
+      case 'close-ai-help':
+        setAiHelpOpen(false);
+        break;
       case 'switch-tab':
         if (typeof window.switchTab === 'function' && actionEl.dataset.redTab) {
           window.switchTab(actionEl.dataset.redTab);
@@ -1700,6 +1994,19 @@ document.addEventListener('DOMContentLoaded', function() {
         break;
     }
   });
+
+  document.addEventListener('submit', function(e) {
+    if (e.target && e.target.id === 'red-ai-help-form') {
+      e.preventDefault();
+      submitAiHelpQuestion(e.target);
+    }
+  });
+
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') {
+      setAiHelpOpen(false);
+    }
+  });
 });
     </script>
 

data/app/views/rails_error_dashboard/errors/_ai_help_panel.html.erb

@@ -0,0 +1,36 @@
+<div id="red-ai-help-backdrop" class="red-ai-help-backdrop" data-red-action="close-ai-help" hidden></div>
+
+<aside id="red-ai-help-panel" class="red-ai-help-panel" aria-labelledby="red-ai-help-title" aria-hidden="true">
+  <div class="red-ai-help-header">
+    <div>
+      <div id="red-ai-help-title" class="red-ai-help-title">
+        <i class="bi bi-stars"></i>
+        AI Help
+      </div>
+      <div class="red-ai-help-subtitle">
+        <%= RailsErrorDashboard.configuration.effective_llm_provider.to_s.titleize %>
+        &middot;
+        <%= RailsErrorDashboard.configuration.effective_llm_model %>
+      </div>
+    </div>
+    <button type="button" class="btn-close" data-red-action="close-ai-help" aria-label="Close AI Help"></button>
+  </div>
+
+  <div id="red-ai-help-messages" class="red-ai-help-messages" aria-live="polite">
+    <div class="red-ai-help-empty">
+      Ask about root cause, reproduction steps, likely fixes, or what to inspect next.
+    </div>
+  </div>
+
+  <form id="red-ai-help-form" class="red-ai-help-form" data-ai-help-url="<%= ai_help_error_path(error, **app_context) %>">
+    <label for="red-ai-help-question">Question</label>
+    <textarea id="red-ai-help-question" name="question" rows="4" maxlength="4000" placeholder="What is the likely root cause?"></textarea>
+    <div class="red-ai-help-footer">
+      <span id="red-ai-help-status" class="red-ai-help-status"></span>
+      <button type="submit" class="btn btn-primary">
+        <i class="bi bi-send"></i>
+        Ask
+      </button>
+    </div>
+  </form>
+</aside>

data/app/views/rails_error_dashboard/errors/_breadcrumbs_group.html.erb

@@ -1,6 +1,7 @@
       <!-- Breadcrumbs (Request Activity Trail) -->
       <% if RailsErrorDashboard.configuration.enable_breadcrumbs && error.respond_to?(:breadcrumbs) && error.breadcrumbs.present? %>
         <% breadcrumbs = JSON.parse(error.breadcrumbs) rescue [] %>
+        <% breadcrumbs = [] unless breadcrumbs.is_a?(Array) %>
         <% if breadcrumbs.any? %>
           <% deprecation_crumbs = breadcrumbs.select { |c| c["c"] == "deprecation" } %>
           <% if deprecation_crumbs.any? %>
@@ -209,13 +210,71 @@
                   </thead>
                   <tbody>
                     <% breadcrumbs.each_with_index do |crumb, i| %>
-                      <tr>
+                      <% cat = crumb["c"].to_s %>
+                      <% meta = crumb["meta"].is_a?(Hash) ? crumb["meta"] : {} %>
+                      <% is_llm = cat == "llm" %>
+                      <% is_tool = cat == "llm_tool" %>
+                      <% prev_cat = i > 0 ? breadcrumbs[i - 1]["c"].to_s : nil %>
+                      <% nested = is_tool && (prev_cat == "llm" || prev_cat == "llm_tool") %>
+                      <tr<%= nested ? ' class="llm-tool-row"'.html_safe : "".html_safe %>>
                         <td class="text-muted"><%= i + 1 %></td>
-                        <td><span class="badge bg-<%= breadcrumb_badge_color(crumb["c"]) %>"><%= crumb["c"] %></span></td>
-                        <td>
+                        <td><span class="badge bg-<%= breadcrumb_badge_color(cat) %>"><%= cat %></span></td>
+                        <td<%= ' style="padding-left: 2rem;"'.html_safe if nested %>>
+                          <% if nested %><i class="bi bi-arrow-return-right text-muted me-1" aria-hidden="true"></i><% end %>
                           <code style="word-break: break-all; font-size: 0.85em;"><%= truncate(crumb["m"].to_s, length: 200) %></code>
-                          <% if crumb["meta"].present? %>
-                            <br><small class="text-muted"><%= crumb["meta"].inspect %></small>
+                          <% if is_llm %>
+                            <% provider = meta["provider"].presence %>
+                            <% model = meta["model"].presence %>
+                            <% in_tok = meta["input_tokens"].presence %>
+                            <% out_tok = meta["output_tokens"].presence %>
+                            <% cost = meta["cost_usd"].presence %>
+                            <% status = meta["status"].presence %>
+                            <% err_class = meta["error_class"].presence %>
+                            <% err_msg = meta["error_message"].presence %>
+                            <br><small class="text-muted">
+                              <% if provider || model %>
+                                <i class="bi bi-cpu" aria-hidden="true"></i>
+                                <%= [ provider, model ].compact.join(" · ") %>
+                              <% end %>
+                              <% if in_tok || out_tok %>
+                                · <i class="bi bi-input-cursor-text" aria-hidden="true"></i>
+                                in:<strong><%= in_tok || "?" %></strong>
+                                / out:<strong><%= out_tok || "?" %></strong>
+                              <% end %>
+                              <% if cost %>
+                                · <i class="bi bi-currency-dollar" aria-hidden="true"></i>
+                                <strong>$<%= "%.6f" % cost.to_f %></strong>
+                              <% end %>
+                              <% if status && status != "success" %>
+                                · <span class="badge bg-danger"><%= status %></span>
+                              <% end %>
+                            </small>
+                            <% if err_class || err_msg %>
+                              <br><small class="text-danger">
+                                <i class="bi bi-exclamation-triangle" aria-hidden="true"></i>
+                                <%= [ err_class, err_msg ].compact.join(": ") %>
+                              </small>
+                            <% end %>
+                          <% elsif is_tool %>
+                            <% tool_name = meta["tool_name"].presence %>
+                            <% tool_args = meta["tool_arguments"].presence %>
+                            <% tool_result = meta["tool_result"].presence %>
+                            <% if tool_name || tool_args || tool_result %>
+                              <br><small class="text-muted">
+                                <% if tool_name %>
+                                  <i class="bi bi-wrench-adjustable" aria-hidden="true"></i>
+                                  <strong><%= tool_name %></strong>
+                                <% end %>
+                                <% if tool_args %>
+                                  · args: <code style="font-size: 0.85em;"><%= truncate(tool_args, length: 120) %></code>
+                                <% end %>
+                                <% if tool_result %>
+                                  · result: <code style="font-size: 0.85em;"><%= truncate(tool_result, length: 120) %></code>
+                                <% end %>
+                              </small>
+                            <% end %>
+                          <% elsif meta.present? %>
+                            <br><small class="text-muted"><%= meta.inspect %></small>
                           <% end %>
                         </td>
                         <td>

data/app/views/rails_error_dashboard/errors/_error_row.html.erb

@@ -57,11 +57,11 @@
     <% end %>
   </td>
   <td style="padding: var(--space-3) var(--space-4); text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primary);">
-    <%= error.occurrence_count.to_s(:delimited) rescue error.occurrence_count %>
+    <%= number_with_delimiter(error.occurrence_count) %>
   </td>
   <td style="padding: var(--space-3) var(--space-4); text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary);">
     <% if error.user_id %>
-      <%= error.user_id %>
+      <%= link_to error.user_id, errors_path(user_id: error.user_id, unresolved: '0'), style: "color: inherit; text-decoration: none;", title: "View all errors for user #{error.user_id}" %>
     <% else %>
       <span style="color: var(--text-tertiary);">&mdash;</span>
     <% end %>

data/app/views/rails_error_dashboard/errors/_instance_variables.html.erb

@@ -1,6 +1,7 @@
       <!-- Instance Variables (captured from receiver object at raise time) -->
       <% if RailsErrorDashboard.configuration.enable_instance_variables && error.class.column_names.include?("instance_variables") && error.read_attribute(:instance_variables).present? %>
         <% instance_vars = JSON.parse(error.read_attribute(:instance_variables)) rescue {} %>
+        <% instance_vars = {} unless instance_vars.is_a?(Hash) %>
         <% self_class = instance_vars.delete("_self_class") %>
         <% if instance_vars.any? %>
           <div class="card mb-4" id="section-instance-variables">

data/app/views/rails_error_dashboard/errors/_llm_summary.html.erb

@@ -0,0 +1,97 @@
+<% if RailsErrorDashboard.configuration.enable_llm_observability &&
+      RailsErrorDashboard.configuration.enable_breadcrumbs &&
+      error.respond_to?(:breadcrumbs) && error.breadcrumbs.present? %>
+  <% breadcrumbs = JSON.parse(error.breadcrumbs) rescue [] %>
+  <% breadcrumbs = [] unless breadcrumbs.is_a?(Array) %>
+  <% llm_summary = RailsErrorDashboard::Services::LlmSummary.call(breadcrumbs) %>
+  <% if llm_summary %>
+    <div class="card mb-4" id="section-llm-summary">
+      <div class="card-header">
+        <h5 class="mb-0">
+          <i class="bi bi-robot text-info" aria-hidden="true"></i> LLM Calls
+          <span class="badge bg-info text-dark"><%= llm_summary[:total_calls] %></span>
+        </h5>
+        <small class="text-muted">Aggregated from request breadcrumbs</small>
+      </div>
+      <div class="card-body">
+        <div class="row text-center mb-3">
+          <div class="col-4">
+            <div class="fs-4 fw-bold"><%= llm_summary[:total_calls] %></div>
+            <small class="text-muted">Calls</small>
+          </div>
+          <div class="col-4">
+            <div class="fs-4 fw-bold"><%= number_with_delimiter(llm_summary[:total_tokens]) %></div>
+            <small class="text-muted">Tokens</small>
+          </div>
+          <div class="col-4">
+            <div class="fs-4 fw-bold">
+              <% if llm_summary[:total_cost_usd] > 0 %>
+                $<%= "%.4f" % llm_summary[:total_cost_usd] %>
+              <% else %>
+                <span class="text-muted">--</span>
+              <% end %>
+            </div>
+            <small class="text-muted">Cost</small>
+          </div>
+        </div>
+
+        <div class="mb-3">
+          <div class="d-flex justify-content-between mb-1">
+            <small class="text-muted">Input</small>
+            <small><strong><%= number_with_delimiter(llm_summary[:total_input_tokens]) %></strong></small>
+          </div>
+          <div class="d-flex justify-content-between mb-1">
+            <small class="text-muted">Output</small>
+            <small><strong><%= number_with_delimiter(llm_summary[:total_output_tokens]) %></strong></small>
+          </div>
+          <% if llm_summary[:total_tool_calls] > 0 %>
+            <div class="d-flex justify-content-between mb-1">
+              <small class="text-muted">Tool calls</small>
+              <small><strong><%= llm_summary[:total_tool_calls] %></strong></small>
+            </div>
+          <% end %>
+          <div class="d-flex justify-content-between mb-1">
+            <small class="text-muted">Total time</small>
+            <small><strong><%= "%.1f" % llm_summary[:total_duration_ms] %>ms</strong></small>
+          </div>
+          <% if llm_summary[:error_count] > 0 %>
+            <div class="d-flex justify-content-between mb-1">
+              <small class="text-muted">Errors</small>
+              <small><span class="badge bg-danger"><%= llm_summary[:error_count] %></span></small>
+            </div>
+          <% end %>
+        </div>
+
+        <% if llm_summary[:by_model].any? %>
+          <hr class="my-2">
+          <small class="text-muted d-block mb-2">By model</small>
+          <% llm_summary[:by_model].each do |row| %>
+            <div class="d-flex justify-content-between align-items-center mb-1">
+              <small style="word-break: break-all;">
+                <% if row[:provider].present? %>
+                  <span class="text-muted"><%= row[:provider] %>·</span>
+                <% end %>
+                <strong><%= row[:model].presence || "unknown" %></strong>
+              </small>
+              <small class="text-muted">
+                <%= row[:calls] %> · <%= number_with_delimiter(row[:tokens]) %>tok
+                <% if row[:cost_usd] > 0 %>
+                  · $<%= "%.4f" % row[:cost_usd] %>
+                <% end %>
+              </small>
+            </div>
+          <% end %>
+        <% end %>
+
+        <% if llm_summary[:error_count] > 0 %>
+          <div class="alert alert-danger py-1 px-2 mb-0 mt-2">
+            <small>
+              <i class="bi bi-exclamation-triangle" aria-hidden="true"></i>
+              <%= llm_summary[:error_count] %> failed call<%= llm_summary[:error_count] == 1 ? "" : "s" %> — see breadcrumbs trail for details.
+            </small>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/app/views/rails_error_dashboard/errors/_local_variables.html.erb

@@ -1,6 +1,7 @@
       <!-- Local Variables (captured via TracePoint) -->
       <% if RailsErrorDashboard.configuration.enable_local_variables && error.respond_to?(:local_variables) && error.local_variables.present? %>
         <% local_vars = JSON.parse(error.local_variables) rescue {} %>
+        <% local_vars = {} unless local_vars.is_a?(Hash) %>
         <% if local_vars.any? %>
           <div class="card mb-4" id="section-local-variables">
             <div class="card-header">

data/app/views/rails_error_dashboard/errors/_modals.html.erb

@@ -2,7 +2,7 @@
 <div class="modal fade" id="resolveModal" tabindex="-1" aria-labelledby="resolveModalLabel" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
-      <%= form_with url: resolve_error_path(error), method: :post, class: "modal-content" do |f| %>
+      <%= form_with url: resolve_error_path(error), method: :post do |f| %>
         <div class="modal-header">
           <h5 class="modal-title" id="resolveModalLabel">
             <i class="bi bi-check-circle"></i> Mark Error as Resolved

data/app/views/rails_error_dashboard/errors/_show_scripts.html.erb

@@ -1,32 +1,33 @@
 <script<%= " nonce=\"#{red_csp_nonce}\"".html_safe if red_csp_nonce %>>
   window.downloadErrorJSON = function(event) {
     const errorData = {
-      id: <%= raw error.id.to_json %>,
-      error_type: <%= raw error.error_type.to_json %>,
-      message: <%= raw error.message.to_json %>,
-      backtrace: <%= raw error.backtrace.to_json %>,
-      occurred_at: <%= raw error.occurred_at.to_json %>,
-      first_seen_at: <%= raw error.first_seen_at.to_json %>,
-      last_seen_at: <%= raw error.last_seen_at.to_json %>,
-      occurrence_count: <%= raw error.occurrence_count.to_json %>,
-      resolved: <%= raw error.resolved?.to_json %>,
-      resolved_at: <%= raw error.resolved_at.to_json %>,
-      resolved_by_name: <%= raw error.resolved_by_name.to_json %>,
-      platform: <%= raw error.platform.to_json %>,
-      user_id: <%= raw error.user_id.to_json %>,
-      severity: <%= raw error.severity.to_json %>,
-      priority_level: <%= raw (error.priority_level || 0).to_json %>,
+      id: <%= js_safe_json(error.id) %>,
+      error_type: <%= js_safe_json(error.error_type) %>,
+      message: <%= js_safe_json(error.message) %>,
+      backtrace: <%= js_safe_json(error.backtrace) %>,
+      occurred_at: <%= js_safe_json(error.occurred_at) %>,
+      first_seen_at: <%= js_safe_json(error.first_seen_at) %>,
+      last_seen_at: <%= js_safe_json(error.last_seen_at) %>,
+      occurrence_count: <%= js_safe_json(error.occurrence_count) %>,
+      resolved: <%= js_safe_json(error.resolved?) %>,
+      resolved_at: <%= js_safe_json(error.resolved_at) %>,
+      resolved_by_name: <%= js_safe_json(error.resolved_by_name) %>,
+      platform: <%= js_safe_json(error.platform) %>,
+      user_id: <%= js_safe_json(error.user_id) %>,
+      severity: <%= js_safe_json(error.severity) %>,
+      priority_level: <%= js_safe_json(error.priority_level || 0) %>,
       <% if error.respond_to?(:exception_cause) && error.exception_cause.present? %>
-      exception_cause: <%= raw error.exception_cause %>,
+      <% parsed_cause = (JSON.parse(error.exception_cause) rescue nil) %>
+      exception_cause: <%= js_safe_json(parsed_cause) %>,
       <% end %>
       <% if error.respond_to?(:app_version) %>
-      app_version: <%= raw error.app_version.to_json %>,
+      app_version: <%= js_safe_json(error.app_version) %>,
       <% end %>
       <% if error.respond_to?(:git_commit) %>
-      git_commit: <%= raw error.git_commit.to_json %>,
+      git_commit: <%= js_safe_json(error.git_commit) %>,
       <% end %>
-      created_at: <%= raw error.created_at.to_json %>,
-      updated_at: <%= raw error.updated_at.to_json %>
+      created_at: <%= js_safe_json(error.created_at) %>,
+      updated_at: <%= js_safe_json(error.updated_at) %>
     };
 
     const jsonString = JSON.stringify(errorData, null, 2);