glancer 1.0.0

data/app/views/glancer/messages/_data_table.html.erb

@@ -0,0 +1,268 @@
+<% if data.present? && data.any? %>
+  <%# Warning: only when there is no LIMIT and no explicit time filter %>
+  <% sql_text = @message&.code.to_s.downcase %>
+  <% has_no_limit   = !sql_text.match?(/\blimit\b|\btop\s+\d/) %>
+  <% has_time_filter = sql_text.match?(/interval|date_sub|date_add|date_format|curdate|now\s*\(|getdate|dateadd|datediff|sysdate|between\s+[\w'"]+\s+and\s+[\w'"]+|\d{4}-\d{2}-\d{2}/) %>
+  <% is_large = data.size >= 500 %>
+  <% if (has_no_limit && !has_time_filter) || is_large %>
+    <div class="flex items-center gap-2 px-3 py-2 bg-amber-50 dark:bg-amber-950 border-b border-amber-100 dark:border-amber-900 text-xs text-amber-700 dark:text-amber-400">
+      <svg class="w-3.5 h-3.5 flex-shrink-0" aria-hidden="true"><use href="#icon-warning"/></svg>
+      <% if is_large %>
+        <%= t("glancer.messages.large_warning", count: data.size) %>
+      <% else %>
+        <%= t("glancer.messages.no_limit_warning") %>
+      <% end %>
+    </div>
+  <% end %>
+
+  <%# Chart grid — one card per chart config %>
+  <% raw_cd = local_assigns[:chart_data]
+     chart_configs = (raw_cd.is_a?(Array) ? raw_cd : raw_cd.is_a?(Hash) ? [raw_cd] : [])
+                     .compact
+                     .select { |c| c.is_a?(Hash) && c.key?(:type) && c.key?(:datasets) } %>
+  <% if chart_configs.any? %>
+    <% msg_id = @message&.id || SecureRandom.hex(4) %>
+    <div class="border-b border-gray-100 dark:border-gray-800">
+      <div class="<%= chart_configs.size > 1 ? 'grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-gray-100 dark:divide-gray-800' : '' %>">
+        <% chart_configs.each_with_index do |cfg, idx| %>
+          <div class="relative px-4 pt-4 pb-3">
+            <button onclick="glancerOpenChartFullscreen('<%= "#{msg_id}-#{idx}" %>')"
+                    class="absolute top-3 right-3 p-0.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors z-10"
+                    aria-label="Expand chart fullscreen">
+              <svg class="w-3.5 h-3.5" aria-hidden="true"><use href="#icon-maximize"/></svg>
+            </button>
+            <canvas id="chart-<%= msg_id %>-<%= idx %>" style="max-height:260px;"></canvas>
+          </div>
+        <% end %>
+      </div>
+    </div>
+
+    <script>
+      (function() {
+        if (typeof Chart === 'undefined') return;
+
+        window._glancerChartCfg = window._glancerChartCfg || {};
+
+        var PALETTE = [
+          'rgba(147,51,234,0.8)','rgba(59,130,246,0.8)','rgba(16,185,129,0.8)',
+          'rgba(245,158,11,0.8)','rgba(239,68,68,0.8)','rgba(236,72,153,0.8)',
+          'rgba(20,184,166,0.8)','rgba(249,115,22,0.8)','rgba(132,204,22,0.8)',
+          'rgba(251,146,60,0.8)'
+        ];
+
+        function styleDatasets(chartCfg) {
+          if (!chartCfg || !Array.isArray(chartCfg.datasets)) return;
+          chartCfg.datasets.forEach(function(ds, i) {
+            var color = PALETTE[i % PALETTE.length];
+            if (chartCfg.type === 'line') {
+              ds.borderColor      = color;
+              ds.backgroundColor  = color.replace('0.8', '0.12');
+              ds.tension          = 0.35;
+              ds.fill             = chartCfg.datasets.length === 1;
+              ds.pointRadius      = Math.max(2, Math.min(5, Math.floor(200 / Math.max((chartCfg.labels || []).length, 1))));
+              ds.pointHoverRadius = ds.pointRadius + 2;
+            } else if (chartCfg.type === 'doughnut') {
+              ds.backgroundColor = PALETTE;
+              ds.borderWidth     = 2;
+            } else if (chartCfg.type === 'scatter') {
+              ds.backgroundColor  = color;
+              ds.borderColor      = color.replace('0.8', '1');
+              ds.pointRadius      = 5;
+              ds.pointHoverRadius = 7;
+            } else {
+              ds.backgroundColor = color;
+              ds.borderColor     = color.replace('0.8', '1');
+              ds.borderWidth     = 1;
+              ds.borderRadius    = 3;
+            }
+          });
+        }
+
+        function buildScales(chartCfg) {
+          if (chartCfg.type === 'doughnut') return {};
+          if (chartCfg.type === 'scatter') {
+            return {
+              x: { type: 'linear', title: { display: !!chartCfg.xLabel, text: chartCfg.xLabel || '', font: { size: 10 } }, ticks: { font: { size: 10 } } },
+              y: { title: { display: !!chartCfg.yLabel, text: chartCfg.yLabel || '', font: { size: 10 } }, ticks: { font: { size: 10 } }, beginAtZero: chartCfg.type === 'bar' }
+            };
+          }
+          return {
+            x: { ticks: { font: { size: 10 }, maxRotation: 45, maxTicksLimit: 14 } },
+            y: { ticks: { font: { size: 10 } }, beginAtZero: chartCfg.type === 'bar' }
+          };
+        }
+
+        window.glancerOpenChartFullscreen = function(key) {
+          var orig = window._glancerChartCfg[key];
+          if (!orig || typeof Chart === 'undefined') return;
+          var cfg = JSON.parse(JSON.stringify(orig));
+          styleDatasets(cfg);
+
+          var dialog = document.createElement('dialog');
+          dialog.className = 'glancer-fullscreen-dialog';
+          var typeLabel = cfg.type.charAt(0).toUpperCase() + cfg.type.slice(1) + ' Chart';
+          dialog.innerHTML =
+            '<div class="glancer-fullscreen-inner">' +
+              '<div class="glancer-fullscreen-toolbar">' +
+                '<span class="glancer-fullscreen-title">' + typeLabel + '</span>' +
+                '<button class="glancer-fullscreen-close" aria-label="Close">' +
+                  '<svg class="w-4 h-4" aria-hidden="true"><use href="#icon-x"/></svg>' +
+                '</button>' +
+              '</div>' +
+              '<div class="glancer-fullscreen-body" style="display:flex;align-items:center;justify-content:center;padding:1.5rem;">' +
+                '<canvas style="width:100%;height:100%;"></canvas>' +
+              '</div>' +
+            '</div>';
+          document.body.appendChild(dialog);
+          dialog.showModal();
+
+          var ctx = dialog.querySelector('canvas');
+          new Chart(ctx, {
+            type: cfg.type,
+            data: {
+              labels:   cfg.type === 'scatter' ? undefined : cfg.labels,
+              datasets: cfg.datasets
+            },
+            options: {
+              responsive: true,
+              maintainAspectRatio: false,
+              animation: { duration: 400 },
+              plugins: {
+                legend: {
+                  display: cfg.datasets.length > 1 || cfg.type === 'doughnut',
+                  position: 'bottom',
+                  labels: { boxWidth: 14, font: { size: 13 } }
+                }
+              },
+              scales: buildScales(cfg)
+            }
+          });
+
+          var close = function() { dialog.close(); dialog.remove(); };
+          dialog.querySelector('.glancer-fullscreen-close').addEventListener('click', close);
+          dialog.addEventListener('click', function(e) { if (e.target === dialog) close(); });
+          dialog.addEventListener('close', function() { dialog.remove(); });
+        };
+
+        <% chart_configs.each_with_index do |chart_rb, idx| %>
+          (function() {
+            var key = '<%= "#{msg_id}-#{idx}" %>';
+            var cfg = <%= chart_rb.to_json.gsub('</', '<\/').html_safe %>;
+            if (!cfg || !Array.isArray(cfg.datasets)) return;
+            window._glancerChartCfg[key] = cfg;
+
+            var ctx = document.getElementById('chart-' + key);
+            if (!ctx) return;
+            var chartCfg = JSON.parse(JSON.stringify(cfg));
+            styleDatasets(chartCfg);
+            new Chart(ctx, {
+              type: chartCfg.type,
+              data: {
+                labels:   chartCfg.type === 'scatter' ? undefined : chartCfg.labels,
+                datasets: chartCfg.datasets
+              },
+              options: {
+                responsive: true,
+                maintainAspectRatio: true,
+                animation: { duration: 400 },
+                plugins: {
+                  legend: {
+                    display: chartCfg.datasets.length > 1 || chartCfg.type === 'doughnut',
+                    position: 'bottom',
+                    labels: { boxWidth: 12, font: { size: 11 } }
+                  }
+                },
+                scales: buildScales(chartCfg)
+              }
+            });
+          })();
+        <% end %>
+      })();
+    </script>
+  <% end %>
+
+  <%# Data table %>
+  <div>
+    <div class="overflow-x-auto">
+      <table class="min-w-full text-xs">
+        <thead>
+          <tr class="bg-gray-50 dark:bg-gray-800">
+            <% data.first&.keys&.each do |key| %>
+              <th class="px-3 py-2 text-left font-semibold text-gray-500 dark:text-gray-400 whitespace-nowrap border-b border-gray-200 dark:border-gray-700">
+                <%= key %>
+              </th>
+            <% end %>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
+          <% data.each do |row| %>
+            <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
+              <% row.values.each do |value| %>
+                <td class="px-3 py-2 text-gray-700 dark:text-gray-300 whitespace-nowrap">
+                  <%= value.nil? ? '<span class="text-gray-300 dark:text-gray-600 italic">null</span>'.html_safe : value %>
+                </td>
+              <% end %>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <script>
+    (function() {
+      var msgId    = '<%= @message&.id %>';
+      var section  = document.getElementById('results-section-' + msgId);
+      var header   = document.getElementById('results-header-' + msgId);
+      var meta     = document.getElementById('results-meta-' + msgId);
+      var container = document.getElementById('results-' + msgId);
+      var arrow    = document.getElementById('results-arrow-' + msgId);
+      var scope    = container?.closest('[data-controller="message"]');
+      var dlBtn    = scope?.querySelector('[data-message-target="downloadBtn"]');
+
+      if (dlBtn) dlBtn.classList.remove('hidden');
+
+      if (section && header && container) {
+        section.dataset.resultsOpen = 'true';
+        header.classList.remove('hidden');
+        header.classList.add('flex');
+        container.style.maxHeight = 'none';
+        container.style.overflow  = '';
+
+        if (typeof Chart !== 'undefined') {
+          requestAnimationFrame(function() {
+            container.querySelectorAll('canvas').forEach(function(canvas) {
+              var chart = Chart.getChart(canvas);
+              if (chart) chart.resize();
+            });
+          });
+        }
+
+        var rowCount  = <%= data.size %>;
+        var rowLabel  = rowCount === 1 ? '<%= j t("glancer.messages.row") %>' : '<%= j t("glancer.messages.rows") %>';
+        var timeStr   = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        var ranPrefix = '<%= j t("glancer.messages.ran_at", time: "").strip.chomp(":").strip %>';
+        if (meta) meta.textContent = rowCount + ' ' + rowLabel + ' · ' + ranPrefix + ' ' + timeStr;
+        if (arrow) arrow.style.transform = 'rotate(0deg)';
+      }
+    })();
+  </script>
+<% else %>
+  <div class="px-4 py-3 text-xs text-center text-gray-400 dark:text-gray-500">
+    <%= t("glancer.messages.no_results") %>
+  </div>
+  <script>
+    (function() {
+      var msgId   = '<%= @message&.id %>';
+      var section = document.getElementById('results-section-' + msgId);
+      var header  = document.getElementById('results-header-' + msgId);
+      if (section && header) {
+        section.dataset.resultsOpen = 'true';
+        header.classList.remove('hidden');
+        header.classList.add('flex');
+        var container = document.getElementById('results-' + msgId);
+        if (container) { container.style.maxHeight = 'none'; container.style.overflow = ''; }
+      }
+    })();
+  </script>
+<% end %>

data/app/views/glancer/messages/_execution_error.html.erb

@@ -0,0 +1,26 @@
+<div class="px-4 py-3 border-t border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-950">
+  <div class="flex items-start gap-2">
+    <svg class="w-3.5 h-3.5 text-red-500 flex-shrink-0 mt-0.5" aria-hidden="true"><use href="#icon-x"/></svg>
+    <div>
+      <p class="text-xs font-medium text-red-700 dark:text-red-400"><%= t("glancer.messages.execution_failed") %></p>
+      <p class="text-[11px] text-red-600 dark:text-red-500 mt-0.5 font-mono"><%= error_message %></p>
+    </div>
+  </div>
+  <script>
+    (function() {
+      var msgId    = '<%= @message&.id %>';
+      var section  = document.getElementById('results-section-' + msgId);
+      var header   = document.getElementById('results-header-' + msgId);
+      var container = document.getElementById('results-' + msgId);
+      if (section && header && container) {
+        section.dataset.resultsOpen = 'true';
+        header.classList.remove('hidden');
+        header.classList.add('flex');
+        container.style.maxHeight = 'none';
+        container.style.overflow = '';
+        var meta = document.getElementById('results-meta-' + msgId);
+        if (meta) meta.textContent = '<%= j t("glancer.messages.execution_failed") %>';
+      }
+    })();
+  </script>
+</div>

data/app/views/glancer/messages/_form.html.erb

@@ -0,0 +1,93 @@
+<%# Compute indexed table names for @ autocomplete.
+    Only paths with "#" are real table entries (e.g. "schema.rb#users").
+    Paths without "#" are auxiliary chunks (inflections file, etc.). %>
+<% glancer_tables = begin
+     Glancer::Embedding.where(source_type: "schema")
+                       .pluck(:source_path)
+                       .filter_map do |p|
+                         next unless p.include?("#")
+                         n = p.split("#").last
+                         n unless n == "foreign_keys"
+                       end
+                       .uniq.sort
+   rescue StandardError
+     []
+   end %>
+
+<div id="message-form" class="max-w-3xl lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl mx-auto">
+  <%= form_with model: [chat, Glancer::Message.new],
+                url: glancer.chat_messages_path(chat),
+                data: {
+                  controller: "message",
+                  action: "submit->message#submit",
+                  message_target: "form",
+                  message_tables_value: glancer_tables.to_json,
+                  message_step_labels_value: {
+                    enriching:          t("glancer.workflow_steps.enriching"),
+                    retrieving_context: t("glancer.workflow_steps.retrieving_context"),
+                    generating_code:    t("glancer.workflow_steps.generating_code"),
+                    validating:         t("glancer.workflow_steps.validating"),
+                    executing:          t("glancer.workflow_steps.executing"),
+                    humanizing:         t("glancer.workflow_steps.humanizing")
+                  }.to_json
+                } do |f| %>
+    <div class="relative">
+      <%# @ mention autocomplete dropdown — shown above the form when @ is typed %>
+      <div id="mention-dropdown" class="hidden absolute left-0 right-0 bottom-full mb-1 max-h-52 overflow-y-auto bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg z-50 text-sm" role="listbox" aria-label="Table suggestions"></div>
+
+      <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm focus-within:ring-2 focus-within:ring-primary-500 focus-within:border-transparent transition-shadow">
+        <%= f.text_area :content,
+            rows: 1,
+            maxlength: 2000,
+            placeholder: t("glancer.chat.placeholder"),
+            class: "block w-full px-4 pt-3.5 pb-2 bg-transparent resize-none outline-none text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 min-h-[42px] max-h-[200px] relative z-10",
+            data: {
+              message_target: "input",
+              action: "keydown->message#handleKeydown input->message#autoResize input->message#updateCharCount input->message#handleMentionInput keydown->message#handleMentionKeydown"
+            },
+            aria: { label: t("glancer.chat.placeholder"), autocomplete: "off" } %>
+
+        <%# @ mention chips — shown when @tablename is detected in input %>
+        <div id="mention-chips" class="hidden px-3 pb-1.5 flex flex-wrap gap-1.5" data-message-target="mentionChips" aria-label="Referenced tables"></div>
+
+        <div class="flex items-center justify-between px-3 pb-2.5">
+          <div class="flex items-center gap-3">
+            <span class="text-[11px] text-gray-300 dark:text-gray-600 select-none" data-message-target="charCount" aria-live="polite">0 / 2000</span>
+            <% if glancer_tables.any? %>
+              <span class="hidden sm:inline-flex items-center gap-1 text-[11px] text-gray-300 dark:text-gray-600 select-none" title="<%= t('glancer.chat.mention_tip_title') %>">
+                <kbd class="inline-flex items-center px-1 py-px rounded border border-gray-200 dark:border-gray-700 font-mono text-[10px] leading-none text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-800">@</kbd>
+                <%= t("glancer.chat.mention_tip") %>
+              </span>
+            <% end %>
+          </div>
+          <div class="flex items-center gap-2">
+            <span class="hidden sm:block text-[11px] text-gray-300 dark:text-gray-600 select-none"><%= t("glancer.chat.hint") %></span>
+            <%# Microphone button %>
+            <button type="button"
+                    class="flex items-center justify-center w-8 h-8 rounded-xl text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-950 transition-colors"
+                    data-message-target="micBtn"
+                    data-action="click->message#toggleRecording"
+                    aria-label="<%= t('glancer.chat.record') %>">
+              <svg class="w-4 h-4" aria-hidden="true"><use href="#icon-mic"/></svg>
+            </button>
+            <%# Cancel button — visible only while processing %>
+            <button type="button"
+                    class="hidden flex items-center justify-center w-8 h-8 rounded-xl bg-gray-100 dark:bg-gray-700 hover:bg-red-50 dark:hover:bg-red-950 text-gray-500 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 transition-colors"
+                    data-message-target="cancelBtn"
+                    data-action="click->message#cancelSubmit"
+                    aria-label="Cancel">
+              <svg class="w-3.5 h-3.5" aria-hidden="true"><use href="#icon-x"/></svg>
+            </button>
+            <%# Send button %>
+            <button type="submit"
+                    class="flex items-center justify-center w-8 h-8 rounded-xl bg-primary-600 hover:bg-primary-700 active:bg-primary-800 disabled:opacity-40 disabled:cursor-not-allowed text-white transition-colors"
+                    data-message-target="submitBtn"
+                    aria-label="<%= t('glancer.chat.send') %>">
+              <svg class="w-3.5 h-3.5" aria-hidden="true"><use href="#icon-send"/></svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/views/glancer/messages/_message.html.erb

@@ -0,0 +1,206 @@
+<% time_label = message.created_at.strftime("%-d %b, %H:%M") %>
+<% time_full  = message.created_at.strftime("%-d de %B de %Y às %H:%M:%S") %>
+
+<% if message.user? %>
+  <%# User message: right-aligned bubble %>
+  <div class="message user flex justify-end">
+    <div class="max-w-[78%] sm:max-w-[65%] min-w-0">
+      <div class="user-message-prose bg-primary-600 dark:bg-primary-700 text-white rounded-2xl rounded-tr-sm px-4 py-3 text-sm leading-relaxed prose prose-sm max-w-none overflow-hidden break-words">
+        <%= raw Glancer::Utils::MarkdownHelper.markdown_to_html(message.content, schema_base: glancer.db_schema_path, valid_tables: glancer_table_names) %>
+      </div>
+      <div class="flex items-center justify-end gap-2 mt-1.5 px-1">
+        <span class="text-[11px] text-gray-400 dark:text-gray-500" title="<%= time_full %>"><%= time_label %></span>
+        <button type="button"
+                class="p-0.5 rounded text-gray-300 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-400 transition-colors"
+                data-controller="chat"
+                data-action="click->chat#copy"
+                data-message="<%= j message.content %>"
+                aria-label="<%= t('glancer.messages.copy') %>">
+          <svg class="w-3 h-3" aria-hidden="true"><use href="#icon-copy"/></svg>
+        </button>
+      </div>
+    </div>
+  </div>
+
+<% elsif message.assistant? %>
+  <%# ── Processing placeholder ─────────────────────────────────────────── %>
+  <% if message.processing? || message.pending? %>
+    <div id="message-<%= message.id %>"
+         class="message assistant flex items-start gap-3"
+         data-controller="message"
+         data-message-poll-url-value="<%= glancer.poll_message_path(message) %>"
+         data-message-is-processing-value="true">
+      <div class="flex-shrink-0 mt-0.5 w-7 h-7 rounded-lg bg-primary-100 dark:bg-primary-950 flex items-center justify-center" aria-hidden="true">
+        <svg class="w-3.5 h-3.5 text-primary-600 dark:text-primary-400"><use href="#icon-database"/></svg>
+      </div>
+      <div class="flex items-center gap-2 mt-2 text-xs text-gray-400 dark:text-gray-500" role="status" aria-live="polite">
+        <span data-message-target="processingLabel">Processing…</span>
+        <span class="flex gap-0.5" aria-hidden="true">
+          <span class="w-1.5 h-1.5 rounded-full bg-primary-400 dark:bg-primary-500 animate-bounce" style="animation-delay:0ms"></span>
+          <span class="w-1.5 h-1.5 rounded-full bg-primary-400 dark:bg-primary-500 animate-bounce" style="animation-delay:150ms"></span>
+          <span class="w-1.5 h-1.5 rounded-full bg-primary-400 dark:bg-primary-500 animate-bounce" style="animation-delay:300ms"></span>
+        </span>
+      </div>
+    </div>
+
+  <% else %>
+  <%# ── Completed assistant message ──────────────────────────────────────── %>
+  <%# Assistant message: left-aligned with avatar %>
+  <div id="message-<%= message.id %>" class="message assistant flex items-start gap-3" data-controller="message">
+    <div class="flex-shrink-0 mt-0.5 w-7 h-7 rounded-lg bg-primary-100 dark:bg-primary-950 flex items-center justify-center" aria-hidden="true">
+      <svg class="w-3.5 h-3.5 text-primary-600 dark:text-primary-400"><use href="#icon-database"/></svg>
+    </div>
+
+    <div class="flex-1 min-w-0">
+      <%# Response text %>
+      <div class="message-content prose prose-sm dark:prose-invert max-w-none text-gray-800 dark:text-gray-200 leading-relaxed">
+        <%= raw Glancer::Utils::MarkdownHelper.markdown_to_html(message.content, schema_base: glancer.db_schema_path, valid_tables: glancer_table_names) %>
+      </div>
+
+      <%# Code block for successful queries — hidden initially for new messages; revealed after typewriter %>
+      <% if message.successful? && message.code.present? %>
+        <% code_label = message.code_type == "activerecord" ? "Ruby" : "SQL" %>
+        <div class="mt-3 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden" data-sql-block>
+          <%# Code block header %>
+          <div class="flex items-center justify-between px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+            <div class="flex items-center gap-2">
+              <span class="text-[11px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500"><%= code_label %></span>
+              <% if message.user_edited_code? %>
+                <span class="text-[10px] font-medium text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-950 px-2 py-0.5 rounded-full"><%= t("glancer.messages.edited_badge") %></span>
+              <% end %>
+            </div>
+            <div class="flex items-center gap-1.5">
+              <%# Copy code %>
+              <button class="p-1.5 rounded-md text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                      data-action="click->message#copySql"
+                      data-sql="<%= j message.code.strip %>"
+                      aria-label="<%= t('glancer.messages.copy_sql') %>">
+                <svg class="w-3.5 h-3.5" aria-hidden="true"><use href="#icon-copy"/></svg>
+              </button>
+
+              <%# Edit code — icon swaps to X while in edit mode %>
+              <button class="p-1.5 rounded-md text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                      data-action="click->message#toggleEditSql"
+                      data-message-id="<%= message.id %>"
+                      data-message-target="editBtn"
+                      aria-label="<%= t('glancer.messages.edit_sql') %>">
+                <svg class="w-3.5 h-3.5" aria-hidden="true"><use href="#icon-edit"/></svg>
+              </button>
+
+              <%# Open in Blazer — only for SQL mode %>
+              <% if Glancer.configuration.resolved_blazer_path.present? && message.code_type != "activerecord" %>
+                <%= form_with url: glancer.open_message_in_blazer_path(message), method: :post, data: { turbo: false }, class: "contents" do %>
+                  <button type="submit"
+                          class="flex items-center gap-1 px-2 py-1 text-[11px] font-medium rounded-md border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                          aria-label="<%= t('glancer.messages.open_blazer') %>">
+                    <svg class="w-2.5 h-2.5" aria-hidden="true"><use href="#icon-external"/></svg>
+                    <%= t("glancer.messages.open_blazer") %>
+                  </button>
+                <% end %>
+              <% end %>
+
+              <%# Run SQL — label changes to "Save & Run" via JS when in edit mode %>
+              <button class="flex items-center gap-1.5 px-2.5 py-1 text-[11px] font-medium rounded-md bg-primary-600 hover:bg-primary-700 active:bg-primary-800 text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                      data-action="click->message#runQuery"
+                      data-message-id="<%= message.id %>"
+                      data-message-target="runBtn"
+                      aria-label="<%= t('glancer.messages.run') %>">
+                <svg class="w-2.5 h-2.5" aria-hidden="true"><use href="#icon-play"/></svg>
+                <span><%= t("glancer.messages.run") %></span>
+              </button>
+
+              <%# Export CSV (hidden until results load) %>
+              <button class="hidden flex items-center gap-1.5 px-2.5 py-1 text-[11px] font-medium rounded-md border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                      data-action="click->message#exportToCSV"
+                      data-message-target="downloadBtn"
+                      aria-label="<%= t('glancer.messages.csv') %>">
+                <svg class="w-2.5 h-2.5" aria-hidden="true"><use href="#icon-download"/></svg>
+                <span><%= t("glancer.messages.csv") %></span>
+              </button>
+            </div>
+          </div>
+
+          <%# Code block (normal view) %>
+          <% lang_class = message.code_type == "activerecord" ? "language-ruby" : "language-sql" %>
+          <div id="sql-code-wrapper-<%= message.id %>">
+            <pre class="!m-0 !rounded-none !border-0 text-xs p-3"><code id="sql-code-<%= message.id %>" class="<%= lang_class %>"><%= message.code.strip %></code></pre>
+          </div>
+
+          <%# Code editor (edit mode, hidden by default) — contenteditable with live Prism highlighting %>
+          <div id="sql-editor-wrapper-<%= message.id %>" class="hidden">
+            <div class="px-3 py-1.5 bg-[#1e1e2e] border-t border-gray-700 flex items-center gap-1.5">
+              <svg class="w-3 h-3 text-primary-400" aria-hidden="true"><use href="#icon-edit"/></svg>
+              <span class="text-[10px] font-medium text-gray-500 uppercase tracking-wider"><%= message.code_type == "activerecord" ? "Editing Ruby" : "Editing SQL" %></span>
+            </div>
+            <div id="sql-editor-<%= message.id %>"
+                 class="glancer-code-editor language-<%= message.code_type == "activerecord" ? "ruby" : "sql" %>"
+                 contenteditable="true"
+                 spellcheck="false"
+                 role="textbox"
+                 aria-multiline="true"
+                 aria-label="<%= t('glancer.messages.edit_sql') %>"></div>
+          </div>
+
+          <%# Results section: persistent toggle strip + collapsible container %>
+          <div id="results-section-<%= message.id %>" data-results-open="false">
+            <%# Toggle strip — hidden until results load %>
+            <div id="results-header-<%= message.id %>"
+                 class="hidden items-center justify-between px-3 py-1.5 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
+              <span id="results-meta-<%= message.id %>" class="text-[11px] text-gray-400 dark:text-gray-500"></span>
+              <div class="flex items-center gap-1">
+                <button data-action="click->message#openFullscreenTable"
+                        data-message-id="<%= message.id %>"
+                        class="p-0.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+                        aria-label="Expand table fullscreen">
+                  <svg class="w-3.5 h-3.5" aria-hidden="true"><use href="#icon-maximize"/></svg>
+                </button>
+                <button data-action="click->message#toggleResults"
+                        data-message-id="<%= message.id %>"
+                        class="p-0.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+                        aria-label="Toggle results">
+                  <svg id="results-arrow-<%= message.id %>"
+                       class="w-3.5 h-3.5 transition-transform duration-200"
+                       aria-hidden="true">
+                    <use href="#icon-chevron-down"/>
+                  </svg>
+                </button>
+              </div>
+            </div>
+            <%# Collapsible container %>
+            <div id="results-<%= message.id %>"
+                 data-message-target="resultsContainer"
+                 style="overflow:hidden;transition:max-height 0.3s ease;max-height:0">
+            </div>
+          </div>
+        </div>
+      <% end %>
+
+      <%# Timestamp + action buttons %>
+      <div class="flex items-center gap-2 mt-1.5 px-0.5 flex-wrap">
+        <span class="text-[11px] text-gray-400 dark:text-gray-500" title="<%= time_full %>"><%= time_label %></span>
+        <% if message.llm_model.present? %>
+          <span class="text-[10px] text-gray-300 dark:text-gray-600 select-none" title="Model used for this response">· <%= message.llm_model.split('/').last %></span>
+        <% end %>
+
+        <%# Copy full response %>
+        <button type="button"
+                class="p-0.5 rounded text-gray-300 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-400 transition-colors"
+                data-action="click->message#copyText"
+                aria-label="<%= t('glancer.messages.copy_response') %>">
+          <svg class="w-3 h-3" aria-hidden="true"><use href="#icon-copy"/></svg>
+        </button>
+
+        <%# Info panel %>
+        <button type="button"
+                class="p-0.5 rounded text-gray-300 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-400 transition-colors"
+                data-action="click->message#openMessageInfo"
+                data-message-id="<%= message.id %>"
+                aria-label="<%= t('glancer.messages.details') %>"
+                aria-expanded="false">
+          <svg class="w-3 h-3" aria-hidden="true"><use href="#icon-info"/></svg>
+        </button>
+      </div>
+    </div>
+  </div>
+  <% end %><%# end complete/processing branch %>
+<% end %><%# end message.assistant? %>