rails_error_dashboard 0.6.4 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3d2151cd1323d1261e27376d1d7d8eb9f47fcb6ec171fcc6c3dbab36fcf52f6a
-  data.tar.gz: 68367fa080c8532c9e69f3aecf13eef84ef8638ac91f83a586cce56341f38b1c
+  metadata.gz: bfd6bfaddc3831f37ef4162c92037dddfb18129068e1ad279449b4fcdf164514
+  data.tar.gz: 031a14fd395298e46d95bcbb182c8333dab85d12c64439e7d840a577a7ced989
 SHA512:
-  metadata.gz: fd3167ec31230e80ca89eb723b78f4d97f073a2c68efa4fbc9fe83e85bfa6b1361fdc43f1f822fb1eadd9d00254d12f105e863d09825843bdeb14386a1cef95a
-  data.tar.gz: da46299157c3cc47a45e55d006ff6657f4d9728832fefc0c051b8e94c1c919be6320b22663742a94ebfd1f8df8cd93e19ac27e9d8e0f45e578a6a2f6d047712e
+  metadata.gz: dae9aaa0bebaf0daf71bd5b3e64590b19b5e48d5a032273304639f49535bc17d5eaa2991a460d9e97403cebcc4dc1f0e70baca2c5291c4c4191d1a5ae092bbf3
+  data.tar.gz: 6bc6d8a6fcf5cb0c262688102ec57cd79d24a8d87f3bed2417ef29d9b63102bc67937784217fbf4a54822b06b1691c333b9210f6bc77c1be49e6055a54559708

data/README.md

@@ -13,7 +13,7 @@
 gem 'rails_error_dashboard'
 ```
 
-**5-minute setup** · **Works out-of-the-box** · **100% Rails + Postgres** · **No vendor lock-in**
+**5-minute setup** · **Works out-of-the-box** · **Postgres, MySQL/Trilogy, SQLite** · **No vendor lock-in**
 
 [Full Documentation](https://anjanj.github.io/rails_error_dashboard/) · [Live Demo](https://rails-error-dashboard.anjan.dev) · [RubyGems](https://rubygems.org/gems/rails_error_dashboard)
 
@@ -35,6 +35,18 @@ gem 'rails_error_dashboard'
 
 ![Error Detail](docs/images/error-detail.png)
 
+**AI Help** — Optional OpenAI or Anthropic assistance streamed directly inside the error detail page.
+
+![AI Help](docs/images/ai-help.png)
+
+---
+
+## From the Community
+
+> All three [self-hosted alternatives] had an issue with error backtrace when using Turbo — RED did fix it… solid_errors and Faultline are not very active projects, RED is very active and @AnjanJ is very responsive in fixing issues. So, RED was my final choice.
+>
+> — **Gael Marziou** ([@gmarziou](https://github.com/gmarziou)) · [read the full discussion](https://github.com/AnjanJ/rails_error_dashboard/discussions/116)
+
 ---
 
 ## Who This Is For
@@ -124,7 +136,7 @@ Requires breadcrumbs to be enabled.
 
 ![Job Health](docs/images/job-health.png)
 
-**Database Health** — PgHero-style live PostgreSQL stats (table sizes, unused indexes, dead tuples, vacuum timestamps) plus historical connection pool data from error snapshots.
+**Database Health** — PgHero-style live PostgreSQL stats (table sizes, unused indexes, dead tuples, vacuum timestamps) plus historical connection pool data from error snapshots. PostgreSQL-only for the system-table views; MySQL and SQLite show connection pool stats and hide the rest.
 
 ![Database Health](docs/images/database-health.png)
 
@@ -147,6 +159,79 @@ config.enable_activestorage_tracking = true  # requires enable_breadcrumbs = tru
 [Complete documentation →](docs/FEATURES.md#job-health-page)
 </details>
 
+<details>
+<summary><strong>LLM Observability — Calls, Tokens, Cost, Tool Use</strong></summary>
+
+Capture every LLM call your app makes — model, latency, token counts, estimated USD cost, and tool-use requests — as breadcrumbs on the error that follows. When a request crashes, you see the chat completion that preceded it: which model was called, how long it took, what it cost, and which tools it asked to invoke.
+
+- Three capture paths — pick whichever matches your stack
+- Cost estimated from a built-in pricing table (Claude 4.x, GPT-4o/o1, Gemini 2.5) — override per-model via `config.llm_pricing_overrides`
+- Tool-call requests summarized inline; tool *execution* spans captured separately via the OTel path
+- Content capture (prompts/completions) **OFF by default** — only token counts and metadata are recorded
+- Same host-app safety guarantees as the rest of the gem — never raises, never blocks the request, every callback rescue-wrapped
+
+```ruby
+config.enable_breadcrumbs        = true   # required — LLM crumbs ride the breadcrumb pipeline
+config.enable_llm_observability  = true
+# Optional — override the built-in pricing table for your account
+# config.llm_pricing_overrides = { "claude-sonnet-4-6" => { input: 3.0, output: 15.0 } }
+```
+
+**Path A — `ruby-openai` (Faraday middleware)**
+
+```ruby
+# Gemfile already has: gem "ruby-openai"
+client = OpenAI::Client.new do |f|
+  f.use RailsErrorDashboard::Integrations::LlmMiddleware
+end
+```
+
+**Path B — `ruby_llm` (OpenTelemetry)**
+
+`ruby_llm` doesn't expose a Faraday hook, but the thoughtbot OTel instrumentation gem emits GenAI-semconv spans that our SpanProcessor picks up automatically.
+
+```ruby
+# Gemfile
+gem "ruby_llm"
+gem "opentelemetry-sdk"
+gem "opentelemetry-instrumentation-ruby_llm"
+
+# config/initializers/opentelemetry.rb
+OpenTelemetry::SDK.configure do |c|
+  c.use "OpenTelemetry::Instrumentation::RubyLLM"
+end
+```
+
+The dashboard's `LlmSpanProcessor` registers itself with `OpenTelemetry.tracer_provider` during engine boot — no extra wiring.
+
+**Path C — anything else (Anthropic official SDK, Net::HTTP, gRPC, Ollama, …)**
+
+The official `anthropic` gem uses `Net::HTTP` directly (no Faraday hook), and many local-inference setups don't run OTel. Wrap any LLM call in `ActiveSupport::Notifications.instrument` — pass a mutable Hash so token counts can be filled in *after* the call:
+
+```ruby
+payload = { provider: "anthropic", model: "claude-sonnet-4-6" }
+
+ActiveSupport::Notifications.instrument("red.llm_call", payload) do
+  response = Anthropic::Client.new.messages.create(
+    model: "claude-sonnet-4-6",
+    messages: [ { role: "user", content: "hi" } ]
+  )
+  payload[:input_tokens]  = response.usage.input_tokens
+  payload[:output_tokens] = response.usage.output_tokens
+end
+
+# Tool execution — captured as its own llm_tool breadcrumb
+ActiveSupport::Notifications.instrument("red.llm_tool_call",
+  tool_name: "search_database",
+  tool_arguments: { query: "..." }
+) do
+  # run the tool
+end
+```
+
+Payload contract matches the `LlmCallEvent` value object — see [`docs/LLM_OBSERVABILITY.md`](docs/LLM_OBSERVABILITY.md) for the full field list.
+</details>
+
 <details>
 <summary><strong>Issue Tracking — GitHub, GitLab, Codeberg</strong></summary>
 
@@ -234,10 +319,20 @@ config.enable_source_code_integration = true  # required for source code viewer
 </details>
 
 <details>
-<summary><strong>Error Replay — Copy as cURL / RSpec / LLM Markdown</strong></summary>
+<summary><strong>AI Help + Error Replay — Ask, Copy as cURL / RSpec / LLM Markdown</strong></summary>
 
 Replay failing requests with one click. Copy the request as a cURL command, generate an RSpec test, or **copy all error details as clean Markdown** for pasting into an LLM session. The LLM export includes app backtrace, cause chain, local/instance variables, breadcrumbs, environment, system health, and related errors — with framework frames filtered and sensitive data preserved as `[FILTERED]`.
 
+When an LLM provider is configured, the error detail page also shows an **AI Help** drawer. Users can ask follow-up questions about the current error and receive streamed Markdown answers from OpenAI or Anthropic without leaving the dashboard.
+
+```ruby
+config.llm_provider = :openai # or :anthropic
+config.llm_api_key = -> { Rails.application.credentials.dig(:openai, :api_key) }
+config.llm_model = "gpt-5"
+```
+
+> **Privacy:** AI Help sends the error's details (backtrace, context, and your question) to the configured provider (OpenAI or Anthropic). Keep `config.filter_sensitive_data = true` (the default) so sensitive values are redacted as `[FILTERED]` before they leave your app.
+
 [Complete documentation →](docs/FEATURES.md#error-details-page)
 </details>
 
@@ -527,7 +622,7 @@ Built with [Rails](https://rubyonrails.org/) · Custom design tokens with [Boots
 
 [![Contributors](https://contrib.rocks/image?repo=AnjanJ/rails_error_dashboard)](https://github.com/AnjanJ/rails_error_dashboard/graphs/contributors)
 
-Special thanks to [@bonniesimon](https://github.com/bonniesimon), [@gundestrup](https://github.com/gundestrup), [@midwire](https://github.com/midwire), [@RafaelTurtle](https://github.com/RafaelTurtle), [@j4rs](https://github.com/j4rs), and [@gmarziou](https://github.com/gmarziou). See [CONTRIBUTORS.md](CONTRIBUTORS.md) for the full list.
+Special thanks to [@bonniesimon](https://github.com/bonniesimon), [@gundestrup](https://github.com/gundestrup), [@midwire](https://github.com/midwire), [@RafaelTurtle](https://github.com/RafaelTurtle), [@j4rs](https://github.com/j4rs), [@gmarziou](https://github.com/gmarziou), and [@antarr](https://github.com/antarr). See [CONTRIBUTORS.md](CONTRIBUTORS.md) for the full list.
 
 ---
 

data/app/controllers/rails_error_dashboard/errors_controller.rb

@@ -173,6 +173,43 @@ module RailsErrorDashboard
       redirect_to error_path(params[:id], anchor: "issue-tracking", **app_context_params)
     end
 
+    def ai_help
+      unless RailsErrorDashboard.configuration.llm_configured?
+        render json: { error: "AI Help is not configured" }, status: :not_found
+        return
+      end
+
+      question = params[:question].to_s.strip
+      if question.blank?
+        render json: { error: "Question cannot be blank" }, status: :unprocessable_entity
+        return
+      end
+
+      if question.length > 4000
+        render json: { error: "Question is too long. Keep it under 4,000 characters." }, status: :unprocessable_entity
+        return
+      end
+
+      error = ErrorLog.includes(:comments, :parent_cascade_patterns, :child_cascade_patterns).find(params[:id])
+      related_errors = error.related_errors(limit: 5, application_id: @current_application_id)
+      context = Services::MarkdownErrorFormatter.call(error, related_errors: related_errors)
+
+      response.headers["Content-Type"] = "text/event-stream"
+      response.headers["Cache-Control"] = "no-cache"
+      response.headers["X-Accel-Buffering"] = "no"
+
+      self.response_body = Enumerator.new do |stream|
+        begin
+          result = Services::LlmClient.stream(error: error, question: question, context: context) do |text|
+            stream << sse_event("chunk", text: text)
+          end
+          stream << sse_event("done", result)
+        rescue Services::LlmClient::ConfigurationError, Services::LlmClient::RequestError => e
+          stream << sse_event("error", error: e.message)
+        end
+      end
+    end
+
     def analytics
       days = days_param(default: 30)
       @days = days
@@ -609,6 +646,10 @@ module RailsErrorDashboard
       }
     end
 
+    def sse_event(event, payload)
+      "event: #{event}\ndata: #{payload.to_json}\n\n"
+    end
+
     def filter_params
       params.permit(*FILTERABLE_PARAMS).to_h.symbolize_keys
     end

data/app/helpers/rails_error_dashboard/application_helper.rb

@@ -263,6 +263,8 @@ module RailsErrorDashboard
       when "mailer"     then "secondary"
       when "custom"     then "dark"
       when "deprecation" then "danger"
+      when "llm"        then "info"
+      when "llm_tool"   then "warning"
       else "light"
       end
     end

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>