sql_genius 0.9.0

data/lib/sql_genius/core/views/sql_genius/queries/dashboard.html.erb

@@ -0,0 +1,1826 @@
+<% if capability?(:standalone_header) %>
+<div style="display:flex;align-items:center;justify-content:space-between;">
+  <h4>&#128024; SQLGenius</h4>
+  <button class="mg-theme-toggle" id="mg-theme-btn" title="Toggle dark/light theme" onclick="(function(){var d=document.documentElement,t=d.getAttribute('data-theme')==='dark'?'light':'dark';d.setAttribute('data-theme',t);localStorage.setItem('mg-theme',t);document.getElementById('mg-theme-btn').textContent=t==='dark'?'\u2600\uFE0F':'\uD83C\uDF19';})()">
+    <script>document.write(document.documentElement.getAttribute('data-theme')==='dark'?'\u2600\uFE0F':'\uD83C\uDF19')</script>
+  </button>
+</div>
+<% end %>
+
+<div class="mg-tabs">
+  <button class="mg-tab active" data-tab="dashboard">Dashboard</button>
+  <% if capability?(:slow_queries) %>
+    <button class="mg-tab" data-tab="slow">Slow Queries</button>
+  <% end %>
+  <button class="mg-tab" data-tab="qstats">Query Stats</button>
+  <button class="mg-tab" data-tab="server">Server</button>
+  <button class="mg-tab" data-tab="tables">Tables</button>
+  <button class="mg-tab" data-tab="unused">Unused Indexes</button>
+  <button class="mg-tab" data-tab="indexes">Duplicate Indexes</button>
+  <button class="mg-tab" data-tab="explorer">Query Explorer</button>
+  <% if @ai_enabled %>
+    <button class="mg-tab" data-tab="aitools">AI Tools</button>
+  <% end %>
+</div>
+
+<%= render_partial(:tab_dashboard) %>
+<% if capability?(:slow_queries) %>
+  <%= render_partial(:tab_slow_queries) %>
+<% end %>
+<%= render_partial(:tab_query_stats) %>
+<%= render_partial(:tab_server) %>
+<%= render_partial(:tab_table_sizes) %>
+<%= render_partial(:tab_unused_indexes) %>
+<%= render_partial(:tab_duplicate_indexes) %>
+<%= render_partial(:tab_query_explorer) %>
+<% if @ai_enabled %>
+  <%= render_partial(:tab_ai_tools) %>
+<% end %>
+
+<%= render_partial(:shared_results) %>
+
+<script>
+(function() {
+  "use strict";
+
+  var ROUTES = {
+    columns:      '<%= path_for(:columns) %>',
+    execute:      '<%= path_for(:execute) %>',
+    explain:      '<%= path_for(:explain) %>',
+    suggest:      '<%= path_for(:suggest) %>',
+    optimize:     '<%= path_for(:optimize) %>',
+    slow_queries: '<%= path_for(:slow_queries) %>',
+    duplicate_indexes: '<%= path_for(:duplicate_indexes) %>',
+    table_sizes: '<%= path_for(:table_sizes) %>',
+    query_stats: '<%= path_for(:query_stats) %>',
+    unused_indexes: '<%= path_for(:unused_indexes) %>',
+    server_overview: '<%= path_for(:server_overview) %>',
+    describe_query: '<%= path_for(:describe_query) %>',
+    schema_review: '<%= path_for(:schema_review) %>',
+    rewrite_query: '<%= path_for(:rewrite_query) %>',
+    index_advisor: '<%= path_for(:index_advisor) %>',
+    anomaly_detection: '<%= path_for(:anomaly_detection) %>',
+    root_cause: '<%= path_for(:root_cause) %>',
+    migration_risk: '<%= path_for(:migration_risk) %>',
+    variable_review: '<%= path_for(:variable_review) %>',
+    connection_advisor: '<%= path_for(:connection_advisor) %>',
+    workload_digest: '<%= path_for(:workload_digest) %>',
+    innodb_health: '<%= path_for(:innodb_health) %>',
+    index_planner: '<%= path_for(:index_planner) %>',
+    pattern_grouper: '<%= path_for(:pattern_grouper) %>',
+    query_detail: '<%= path_for(:query_detail_prefix) %>'
+  };
+
+  var IDENTIFIER_QUOTE = String.fromCharCode(<%= (@identifier_quote_char || "`").ord %>);
+  var RAILS_MIGRATION_VERSION = '<%= @framework_version_major %>.<%= @framework_version_minor %>';
+
+  var csrfMeta = document.querySelector('meta[name="csrf-token"]');
+  var csrfToken = csrfMeta ? csrfMeta.getAttribute('content') : '';
+  var currentColumns = [];
+  var columnTypeMap = {};
+  var lastExplainSql = '';
+  var lastExplainRows = [];
+
+  // --- Helpers ---
+
+  function el(id) { return document.getElementById(id); }
+  function qs(sel, parent) { return (parent || document).querySelector(sel); }
+  function qsa(sel, parent) { return Array.from((parent || document).querySelectorAll(sel)); }
+  function show(e) { e.classList.remove('mg-hidden'); }
+  function hide(e) { e.classList.add('mg-hidden'); }
+  function escHtml(s) { var d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
+  function quoteIdentifier(name) {
+    var quote = IDENTIFIER_QUOTE || '`';
+    var identifier = String(name);
+    if (quote === '[') return '[' + identifier.split(']').join(']]') + ']';
+    return quote + identifier.split(quote).join(quote + quote) + quote;
+  }
+
+  function formatBytes(bytes) {
+    if (bytes === null || bytes === undefined) return '—';
+    var n = Number(bytes);
+    if (!isFinite(n) || n <= 0) return '0 B';
+    var units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    var i = Math.min(units.length - 1, Math.floor(Math.log(n) / Math.log(1024)));
+    return (n / Math.pow(1024, i)).toFixed(i === 0 ? 0 : 1) + ' ' + units[i];
+  }
+
+  function formatRelativeTime(isoString) {
+    if (!isoString) return null;
+    var then = new Date(isoString);
+    if (isNaN(then.getTime())) return null;
+    var diffMs = Date.now() - then.getTime();
+    if (diffMs < 0) diffMs = 0;
+    var seconds = Math.floor(diffMs / 1000);
+    if (seconds < 60) return seconds + 's ago';
+    var minutes = Math.floor(seconds / 60);
+    if (minutes < 60) return minutes + 'm ago';
+    var hours = Math.floor(minutes / 60);
+    if (hours < 48) return hours + 'h ago';
+    var days = Math.floor(hours / 24);
+    return days + 'd ago';
+  }
+
+  function renderUnusedStatsContext(data) {
+    var ctx = el('unused-stats-context');
+    if (!ctx) return;
+    var parts = [];
+    if (data && data.stats_reset_at) {
+      var rel = formatRelativeTime(data.stats_reset_at);
+      if (rel) parts.push('Stats last reset <strong>' + escHtml(rel) + '</strong>');
+    }
+    var threshold = data && (data.min_scans || data.min_scans === 0) ? data.min_scans : null;
+    if (threshold !== null) {
+      parts.push('threshold: scans &le; <strong>' + threshold + '</strong>');
+    }
+    ctx.innerHTML = parts.length ? parts.join(' &middot; ') : '';
+    if (parts.length) show(ctx); else hide(ctx);
+  }
+
+  // --- Table Sorting ---
+
+  function parseSortValue(text) {
+    var m = text.match(/([\d.]+)\s*(s|ms|KB|MB|GB)/i);
+    if (m) {
+      var n = parseFloat(m[1]);
+      var unit = m[2].toLowerCase();
+      if (unit === 's') return n * 1000;
+      if (unit === 'gb') return n * 1024;
+      if (unit === 'mb') return n;
+      if (unit === 'kb') return n / 1024;
+      return n;
+    }
+    return parseFloat(text.replace(/[^0-9.\-]/g, '')) || 0;
+  }
+
+  function makeSortable(table) {
+    if (table.dataset.sortable) return;
+    table.dataset.sortable = '1';
+
+    var headers = Array.from(table.querySelectorAll('th'));
+    headers.forEach(function(th, colIdx) {
+      if (th.dataset.noSort || th.textContent.trim() === '' || th.textContent.trim() === 'Actions') return;
+      th.classList.add('mg-sortable');
+      th.addEventListener('click', function() {
+        var tbody = table.querySelector('tbody');
+        if (!tbody) return;
+        var rows = Array.from(tbody.querySelectorAll('tr'));
+        if (rows.length === 0) return;
+
+        var asc = !th.classList.contains('mg-sort-asc');
+        headers.forEach(function(h) { h.classList.remove('mg-sort-asc', 'mg-sort-desc'); });
+        th.classList.add(asc ? 'mg-sort-asc' : 'mg-sort-desc');
+
+        var isNum = th.style.textAlign === 'right' || th.classList.contains('mg-num');
+
+        rows.sort(function(a, b) {
+          var cellA = a.children[colIdx];
+          var cellB = b.children[colIdx];
+          if (!cellA || !cellB) return 0;
+          var valA = cellA.textContent.trim();
+          var valB = cellB.textContent.trim();
+
+          if (isNum) {
+            return asc ? parseSortValue(valA) - parseSortValue(valB) : parseSortValue(valB) - parseSortValue(valA);
+          }
+          return asc ? valA.localeCompare(valB) : valB.localeCompare(valA);
+        });
+
+        rows.forEach(function(row) { tbody.appendChild(row); });
+      });
+    });
+  }
+
+  // --- SQL Syntax Highlighting (single-pass tokenizer) ---
+
+  var SQL_KW_SET = {};
+  'SELECT FROM WHERE JOIN LEFT RIGHT INNER OUTER CROSS FULL ON AND OR NOT IN EXISTS BETWEEN LIKE IS NULL AS DISTINCT ALL UNION INTERSECT EXCEPT INSERT INTO VALUES UPDATE SET DELETE CREATE ALTER DROP TABLE INDEX VIEW TRIGGER PROCEDURE FUNCTION DATABASE SCHEMA IF THEN ELSE END CASE WHEN HAVING LIMIT OFFSET ASC DESC USING FORCE USE IGNORE WITH RECURSIVE OVER EXPLAIN ANALYZE SHOW DESCRIBE'.split(' ').forEach(function(w) { SQL_KW_SET[w] = true; });
+
+  var SQL_FN_SET = {};
+  'COUNT SUM AVG MIN MAX COALESCE IFNULL NULLIF CAST CONVERT CONCAT CONCAT_WS GROUP_CONCAT SUBSTRING SUBSTR REPLACE TRIM LTRIM RTRIM UPPER LOWER UCASE LCASE LENGTH CHAR_LENGTH NOW CURDATE CURTIME DATE_FORMAT DATE_ADD DATE_SUB DATEDIFF TIMESTAMPDIFF UNIX_TIMESTAMP FROM_UNIXTIME IF ELT FIELD FIND_IN_SET FORMAT HEX UNHEX MD5 SHA1 SHA2 AES_ENCRYPT AES_DECRYPT ROUND CEIL CEILING FLOOR ABS MOD POWER SQRT LOG LOG2 LOG10 RAND GREATEST LEAST JSON_EXTRACT JSON_UNQUOTE JSON_SET JSON_OBJECT JSON_ARRAY JSON_CONTAINS JSON_LENGTH ROW_NUMBER RANK DENSE_RANK LAG LEAD FIRST_VALUE LAST_VALUE NTH_VALUE'.split(' ').forEach(function(w) { SQL_FN_SET[w] = true; });
+
+  // Single-pass tokenizer regex: matches tokens in order of priority
+  // 1) single-quoted strings  2) quoted identifiers  3) numbers  4) words  5) operators  6) punctuation  7) ? placeholder  8) * star  9) whitespace  10) anything else
+  var SQL_TOKEN_RE = /'[^']*'|`[^`]*`|"(?:""|[^"])*"|\b\d+(?:\.\d+)?\b|[A-Za-z_]\w*|\?|>=|<=|<>|!=|[><=]|[(),;*]|\s+|./g;
+
+  function highlightSql(sql) {
+    if (!sql) return '';
+    var result = [];
+    var match;
+    SQL_TOKEN_RE.lastIndex = 0;
+    while ((match = SQL_TOKEN_RE.exec(sql)) !== null) {
+      var tok = match[0];
+      var ch = tok.charAt(0);
+
+      if (ch === "'") {
+        // String literal
+        result.push('<span class="mg-sql-str">' + escHtml(tok) + '</span>');
+      } else if (ch === '`' || ch === '"') {
+        // Quoted identifier
+        result.push('<span class="mg-sql-tbl">' + escHtml(tok) + '</span>');
+      } else if (/^\d/.test(tok)) {
+        // Number
+        result.push('<span class="mg-sql-num">' + escHtml(tok) + '</span>');
+      } else if (/^[A-Za-z_]/.test(tok)) {
+        // Word: check if keyword, function, or plain identifier
+        var upper = tok.toUpperCase();
+        // Check for compound keywords (GROUP BY, ORDER BY, PARTITION BY)
+        var rest = sql.substring(SQL_TOKEN_RE.lastIndex);
+        var compoundMatch = rest.match(/^(\s+)(BY)\b/i);
+        if ((upper === 'GROUP' || upper === 'ORDER' || upper === 'PARTITION') && compoundMatch) {
+          result.push('<span class="mg-sql-kw">' + escHtml(tok) + escHtml(compoundMatch[1]) + escHtml(compoundMatch[2].toUpperCase()) + '</span>');
+          SQL_TOKEN_RE.lastIndex += compoundMatch[0].length;
+        } else if (SQL_FN_SET[upper] && rest.match(/^\s*\(/)) {
+          result.push('<span class="mg-sql-fn">' + escHtml(tok.toUpperCase()) + '</span>');
+        } else if (SQL_KW_SET[upper]) {
+          result.push('<span class="mg-sql-kw">' + escHtml(tok.toUpperCase()) + '</span>');
+        } else {
+          result.push(escHtml(tok));
+        }
+      } else if (tok === '?') {
+        result.push('<span class="mg-sql-placeholder">?</span>');
+      } else if (tok === '*') {
+        result.push('<span class="mg-sql-star">*</span>');
+      } else if (/^(>=|<=|<>|!=|[><=])$/.test(tok)) {
+        result.push('<span class="mg-sql-op">' + escHtml(tok) + '</span>');
+      } else if (/^[(),;]$/.test(tok)) {
+        result.push('<span class="mg-sql-punc">' + escHtml(tok) + '</span>');
+      } else {
+        // Whitespace or unknown
+        result.push(escHtml(tok));
+      }
+    }
+    return result.join('');
+  }
+
+  function sqlBlock(sql, maxLen) {
+    var truncated = maxLen && sql.length > maxLen;
+    var displaySql = truncated ? sql.substring(0, maxLen) + '...' : sql;
+    return '<code class="mg-sql-block" title="' + escHtml(sql) + '">' + highlightSql(displaySql) + '</code>';
+  }
+
+  // --- Duration Formatting with Color ---
+
+  function formatDurationStyled(ms) {
+    var text = formatDuration(ms);
+    var cls = 'mg-dur-fast';
+    if (ms >= 1000) cls = 'mg-dur-slow';
+    else if (ms >= 100) cls = 'mg-dur-moderate';
+    return '<span class="' + cls + '">' + text + '</span>';
+  }
+
+  function migrationTimestamp() {
+    var now = new Date();
+    return now.getFullYear().toString() +
+      ('0' + (now.getMonth() + 1)).slice(-2) +
+      ('0' + now.getDate()).slice(-2) +
+      ('0' + now.getHours()).slice(-2) +
+      ('0' + now.getMinutes()).slice(-2) +
+      ('0' + now.getSeconds()).slice(-2);
+  }
+
+  function copyToClipboard(text, btn) {
+    var done = function() {
+      btn.innerHTML = '&#10003; Copied';
+      setTimeout(function() { btn.innerHTML = '&#128203; Copy'; }, 2000);
+    };
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(text).then(done);
+    } else {
+      var ta = document.createElement('textarea');
+      ta.value = text;
+      ta.style.position = 'fixed';
+      ta.style.opacity = '0';
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand('copy');
+      document.body.removeChild(ta);
+      done();
+    }
+  }
+
+  function ajax(method, url, data, onSuccess, onError) {
+    var xhr = new XMLHttpRequest();
+    xhr.open(method, url, true);
+    xhr.setRequestHeader('X-CSRF-Token', csrfToken);
+    xhr.setRequestHeader('Accept', 'application/json');
+    xhr.onload = function() {
+      var json;
+      try { json = JSON.parse(xhr.responseText); } catch(e) { json = null; }
+      if (xhr.status >= 200 && xhr.status < 300) {
+        onSuccess(json);
+      } else {
+        (onError || function(){})(json, xhr.status);
+      }
+    };
+    xhr.onerror = function() { (onError || function(){})(null, 0); };
+    if (data && method !== 'GET') {
+      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+      var parts = [];
+      for (var k in data) {
+        if (Array.isArray(data[k])) {
+          data[k].forEach(function(v, i) {
+            if (typeof v === 'object') {
+              for (var vk in v) parts.push(encodeURIComponent(k + '[' + i + '][' + vk + ']') + '=' + encodeURIComponent(v[vk]));
+            } else {
+              parts.push(encodeURIComponent(k + '[]') + '=' + encodeURIComponent(v));
+            }
+          });
+        } else {
+          parts.push(encodeURIComponent(k) + '=' + encodeURIComponent(data[k]));
+        }
+      }
+      xhr.send(parts.join('&'));
+    } else if (method === 'GET' && data) {
+      xhr.send();
+    } else {
+      xhr.send();
+    }
+  }
+
+  function ajaxGet(url, params, onSuccess, onError) {
+    var query = Object.keys(params).map(function(k) {
+      return encodeURIComponent(k) + '=' + encodeURIComponent(params[k]);
+    }).join('&');
+    ajax('GET', url + '?' + query, null, onSuccess, onError);
+  }
+
+  // --- Tabs ---
+
+  function activateTab(name) {
+    qsa('.mg-tab').forEach(function(t) { t.classList.remove('active'); });
+    qsa('.mg-tab-content').forEach(function(c) { c.classList.remove('active'); });
+    var btn = qs('[data-tab="' + name + '"]');
+    if (!btn) { name = 'dashboard'; btn = qs('[data-tab="dashboard"]'); }
+    btn.classList.add('active');
+    el('tab-' + name).classList.add('active');
+    history.replaceState(null, '', location.pathname + '#' + name);
+
+    // Hide query results and AI responses when leaving the explorer tab
+    if (name !== 'explorer') {
+      hide(el('query-results'));
+      hide(el('explain-results'));
+      hide(el('ai-query-result'));
+    }
+    if (name === 'dashboard') loadDashboard();
+    if (name === 'slow') loadSlowQueries();
+    if (name === 'indexes') loadDuplicateIndexes();
+    if (name === 'tables') loadTableSizes();
+    if (name === 'qstats') loadQueryStats();
+    if (name === 'unused') loadUnusedIndexes();
+    if (name === 'server') loadServerOverview();
+  }
+
+  qsa('.mg-tab').forEach(function(tab) {
+    tab.addEventListener('click', function() { activateTab(tab.dataset.tab); });
+  });
+
+  // --- Dashboard ---
+
+  function loadDashboard() {
+    show(el('dash-loading'));
+    hide(el('dash-content')); hide(el('dash-error'));
+    // Reset previous data
+<% if capability?(:slow_queries) %>
+    hide(el('dash-slow-table')); hide(el('dash-slow-empty'));
+    el('dash-slow-tbody').innerHTML = '';
+<% end %>
+    hide(el('dash-qstats-table')); hide(el('dash-qstats-empty')); hide(el('dash-qstats-error'));
+    el('dash-qstats-tbody').innerHTML = '';
+    el('dash-dup-count').textContent = '--';
+    el('dash-unused-count').textContent = '--';
+
+    var loaded = { server: false, slow: <%= capability?(:slow_queries) ? "false" : "true" %>, qstats: false, dup: false, unused: false };
+
+    function checkAllLoaded() {
+      if (!loaded.server || !loaded.slow || !loaded.qstats || !loaded.dup || !loaded.unused) return;
+      hide(el('dash-loading'));
+      show(el('dash-content'));
+    }
+
+    // Server overview
+    ajaxGet(ROUTES.server_overview, {}, function(data) {
+      if (data.error) { loaded.server = true; checkAllLoaded(); return; }
+      var s = data.server;
+      var c = data.connections;
+      var db = data.innodb;
+      var q = data.queries;
+
+      el('dash-server-info').innerHTML =
+        statRow('Version', '<code>' + escHtml(s.version) + '</code>') +
+        statRow('Uptime', escHtml(s.uptime)) +
+        statRow('Queries/sec', q.qps);
+
+      el('dash-conn-bar').innerHTML = usageBar(c.usage_pct, c.current + ' / ' + c.max + ' (' + c.usage_pct + '%)');
+      el('dash-conn-info').innerHTML =
+        statRow('Threads Running', c.threads_running) +
+        statRow('Max Used', c.max_used);
+
+      var poolUsedPct = db.buffer_pool_pages_total > 0
+        ? (((db.buffer_pool_pages_total - db.buffer_pool_pages_free) / db.buffer_pool_pages_total) * 100).toFixed(1)
+        : 0;
+      el('dash-innodb-bar').innerHTML = usageBar(parseFloat(poolUsedPct), db.buffer_pool_mb + ' MB (' + poolUsedPct + '% used)');
+      el('dash-innodb-info').innerHTML =
+        statRow('Hit Rate', db.buffer_pool_hit_rate + '%') +
+        statRow('Dirty Pages', Number(db.buffer_pool_pages_dirty).toLocaleString());
+
+      var tmpBadge = q.tmp_disk_pct > 25
+        ? '<span class="mg-badge mg-badge-danger">' + q.tmp_disk_pct + '%</span>'
+        : q.tmp_disk_pct + '%';
+      el('dash-query-info').innerHTML =
+        statRow('Slow Queries', Number(q.slow_queries).toLocaleString()) +
+        statRow('Tmp Disk Tables', tmpBadge);
+
+      loaded.server = true;
+      checkAllLoaded();
+    }, function() { loaded.server = true; checkAllLoaded(); });
+
+    <% if capability?(:slow_queries) %>
+    // Top 5 slow queries
+    ajaxGet(ROUTES.slow_queries, {}, function(data) {
+      if (!data || !data.length) {
+        el('dash-slow-empty').textContent = 'No slow queries recorded.';
+        show(el('dash-slow-empty'));
+      } else {
+        var top5 = data.slice(0, 5);
+        el('dash-slow-tbody').innerHTML = top5.map(function(q) {
+          var d = q.duration_ms;
+          var cls = d >= 2000 ? 'mg-badge-danger' : d >= 1000 ? 'mg-badge-warning' : 'mg-badge-info';
+          return '<tr><td><span class="mg-badge ' + cls + '">' + d + ' ms</span></td>' +
+            '<td><small>' + escHtml(q.timestamp) + '</small></td>' +
+            '<td>' + sqlBlock(q.sql, 120) + '</td></tr>';
+        }).join('');
+        show(el('dash-slow-table'));
+      }
+      loaded.slow = true;
+      checkAllLoaded();
+    }, function() {
+      el('dash-slow-empty').textContent = 'Configure redis_url to monitor slow queries.';
+      show(el('dash-slow-empty'));
+      loaded.slow = true;
+      checkAllLoaded();
+    });
+    <% end %>
+
+    // Top 5 expensive queries
+    ajaxGet(ROUTES.query_stats, { sort: 'total_time', limit: 5 }, function(data) {
+      if (data.error) {
+        el('dash-qstats-error').innerHTML = '<div class="mg-text-muted">' + escHtml(data.error) + '</div>';
+        show(el('dash-qstats-error'));
+      } else if (!data.length) {
+        el('dash-qstats-empty').textContent = 'No query statistics available.';
+        show(el('dash-qstats-empty'));
+      } else {
+        el('dash-qstats-tbody').innerHTML = data.map(function(q) {
+          var sqlCell = (q.digest && q.digest.length > 0)
+            ? '<a href="' + ROUTES.query_detail + encodeURIComponent(q.digest) + '" class="mg-link">' + sqlBlock(q.sql, 120) + '</a>'
+            : sqlBlock(q.sql, 120);
+          return '<tr>' +
+            '<td>' + sqlCell + '</td>' +
+            '<td class="mg-num">' + Number(q.calls).toLocaleString() + '</td>' +
+            '<td class="mg-num">' + formatDurationStyled(q.total_time_ms) + '</td>' +
+            '<td class="mg-num">' + formatDurationStyled(q.avg_time_ms) + '</td></tr>';
+        }).join('');
+        show(el('dash-qstats-table'));
+      }
+      loaded.qstats = true;
+      checkAllLoaded();
+    }, function() {
+      el('dash-qstats-empty').textContent = 'Query statistics unavailable.';
+      show(el('dash-qstats-empty'));
+      loaded.qstats = true;
+      checkAllLoaded();
+    });
+
+    // Duplicate indexes count
+    ajaxGet(ROUTES.duplicate_indexes, {}, function(data) {
+      var count = Array.isArray(data) ? data.length : 0;
+      var countEl = el('dash-dup-count');
+      if (count === 0) {
+        countEl.innerHTML = '<span style="color:#28a745;">&#10003; 0</span>';
+      } else {
+        countEl.innerHTML = '<span style="color:#dc3545;">' + count + '</span>';
+      }
+      loaded.dup = true;
+      checkAllLoaded();
+    }, function() { el('dash-dup-count').textContent = '?'; loaded.dup = true; checkAllLoaded(); });
+
+    // Unused indexes count
+    ajaxGet(ROUTES.unused_indexes, {}, function(data) {
+      var indexes = (data && data.indexes) || [];
+      var count = indexes.length;
+      var countEl = el('dash-unused-count');
+      if (count === 0) {
+        countEl.innerHTML = '<span style="color:#28a745;">&#10003; 0</span>';
+      } else {
+        countEl.innerHTML = '<span style="color:#dc3545;">' + count + '</span>';
+      }
+      loaded.unused = true;
+      checkAllLoaded();
+    }, function() { el('dash-unused-count').textContent = '?'; loaded.unused = true; checkAllLoaded(); });
+  }
+
+  // Dashboard tab-jump buttons
+  document.addEventListener('click', function(e) {
+    var jumpBtn = e.target.closest('.dash-jump-tab');
+    if (jumpBtn) { activateTab(jumpBtn.dataset.target); }
+  });
+
+  // Restore active tab from URL hash, or default to dashboard
+  var initialTab = (location.hash || '').replace('#', '') || 'dashboard';
+  activateTab(initialTab);
+
+  // --- Query Explorer Mode Toggle ---
+
+  qsa('.qe-mode').forEach(function(btn) {
+    btn.addEventListener('click', function() {
+      qsa('.qe-mode').forEach(function(b) {
+        b.classList.remove('active');
+        b.classList.add('mg-btn-outline');
+      });
+      btn.classList.add('active');
+      btn.classList.remove('mg-btn-outline');
+      if (btn.dataset.mode === 'visual') {
+        show(el('qe-visual'));
+        hide(el('qe-sql'));
+      } else {
+        hide(el('qe-visual'));
+        show(el('qe-sql'));
+      }
+    });
+  });
+
+  // --- Visual Builder ---
+
+  var typeLabels = { string: 'text', text: 'text', integer: 'number', boolean: 'yes/no', date: 'date', datetime: 'date/time', decimal: 'decimal', float: 'decimal' };
+  function colTypeLabel(type) { return typeLabels[type] || type; }
+
+  function operatorsForType(type) {
+    switch(type) {
+      case 'boolean': return ['=', '!=', 'IS NULL', 'IS NOT NULL'];
+      case 'date': case 'datetime': return ['=', '!=', '>', '<', '>=', '<=', 'BETWEEN', 'IS NULL', 'IS NOT NULL'];
+      case 'integer': case 'decimal': case 'float': return ['=', '!=', '>', '<', '>=', '<=', 'IS NULL', 'IS NOT NULL'];
+      default: return ['=', '!=', 'LIKE', '>', '<', 'IS NULL', 'IS NOT NULL'];
+    }
+  }
+
+  function loadColumnsForTable(table, callback) {
+    el('vb-columns').innerHTML = '';
+    el('vb-filters').innerHTML = '';
+    el('vb-orders').innerHTML = '';
+    columnTypeMap = {};
+    if (!table) {
+      hide(el('vb-columns-section')); hide(el('vb-filters-section'));
+      hide(el('vb-order-section')); hide(el('vb-generated-sql'));
+      el('vb-run').disabled = true; el('vb-explain').disabled = true;
+      return;
+    }
+    ajaxGet(ROUTES.columns, { table: table }, function(cols) {
+      currentColumns = cols;
+      cols.forEach(function(c) { columnTypeMap[c.name] = c.type; });
+      var html = '';
+      cols.forEach(function(col) {
+        var checked = col['default'] ? ' checked' : '';
+        html += '<label class="mg-check"><input type="checkbox" class="vb-col-check" value="' + escHtml(col.name) + '"' + checked +
+          ' data-default="' + (col['default'] ? '1' : '0') + '">' + escHtml(col.name) +
+          ' <span class="type-hint">(' + colTypeLabel(col.type) + ')</span></label>';
+      });
+      el('vb-columns').innerHTML = html;
+      show(el('vb-columns-section')); show(el('vb-filters-section'));
+      show(el('vb-order-section')); show(el('vb-generated-sql'));
+      el('vb-run').disabled = false; el('vb-explain').disabled = false;
+      if (callback) callback(cols); else updateGeneratedSql();
+    });
+  }
+
+  el('vb-table').addEventListener('change', function() { loadColumnsForTable(this.value); });
+
+  el('vb-toggle-all').addEventListener('click', function() {
+    var checks = qsa('.vb-col-check');
+    var allChecked = checks.every(function(c) { return c.checked; });
+    checks.forEach(function(c) { c.checked = !allChecked; });
+    updateGeneratedSql();
+  });
+
+  el('vb-show-defaults').addEventListener('click', function() {
+    qsa('.vb-col-check').forEach(function(c) { c.checked = c.dataset['default'] === '1'; });
+    updateGeneratedSql();
+  });
+
+  document.addEventListener('change', function(e) {
+    if (e.target.classList.contains('vb-col-check')) updateGeneratedSql();
+  });
+
+  function columnOptions(useAll) {
+    var cols = useAll ? currentColumns : currentColumns.filter(function(c) { return c['default']; });
+    var html = '<option value="">-- column --</option>';
+    cols.forEach(function(c) { html += '<option value="' + escHtml(c.name) + '">' + escHtml(c.name) + ' (' + colTypeLabel(c.type) + ')</option>'; });
+    return html;
+  }
+
+  function addFilterRow(useAll) {
+    var div = document.createElement('div');
+    div.className = 'mg-row mg-mb vb-filter-row';
+    div.style.alignItems = 'center';
+    div.innerHTML =
+      '<div class="mg-col-3"><select class="vb-filter-col">' + columnOptions(useAll) + '</select></div>' +
+      '<div class="mg-col-2"><select class="vb-filter-op"><option>=</option><option>!=</option><option>LIKE</option><option>></option><option><</option><option>IS NULL</option><option>IS NOT NULL</option></select></div>' +
+      '<div class="mg-col-4 vb-filter-val-container"><input type="text" class="vb-filter-val" placeholder="value"></div>' +
+      '<div><button class="mg-btn mg-btn-outline-danger mg-btn-sm vb-remove-filter">&#10005;</button></div>';
+    el('vb-filters').appendChild(div);
+  }
+
+  el('vb-add-filter').addEventListener('click', function() { addFilterRow(false); updateGeneratedSql(); });
+
+  document.addEventListener('change', function(e) {
+    if (e.target.classList.contains('vb-filter-col')) {
+      var row = e.target.closest('.vb-filter-row');
+      var colType = columnTypeMap[e.target.value] || 'string';
+      var opSel = qs('.vb-filter-op', row);
+      var ops = operatorsForType(colType);
+      opSel.innerHTML = ops.map(function(o) { return '<option>' + o + '</option>'; }).join('');
+      updateValueInput(row, colType, opSel.value);
+      updateGeneratedSql();
+    }
+    if (e.target.classList.contains('vb-filter-op')) {
+      var row = e.target.closest('.vb-filter-row');
+      var colName = qs('.vb-filter-col', row).value;
+      var colType = columnTypeMap[colName] || 'string';
+      updateValueInput(row, colType, e.target.value);
+      updateGeneratedSql();
+    }
+  });
+
+  document.addEventListener('input', function(e) {
+    if (e.target.classList.contains('vb-filter-val')) updateGeneratedSql();
+  });
+
+  document.addEventListener('click', function(e) {
+    if (e.target.closest('.vb-remove-filter')) { e.target.closest('.vb-filter-row').remove(); updateGeneratedSql(); }
+    if (e.target.closest('.vb-remove-order')) { e.target.closest('.vb-order-row').remove(); updateGeneratedSql(); }
+  });
+
+  function updateValueInput(row, colType, op) {
+    var container = qs('.vb-filter-val-container', row);
+    if (op === 'IS NULL' || op === 'IS NOT NULL') { container.innerHTML = ''; return; }
+    if (colType === 'boolean') {
+      container.innerHTML = '<select class="vb-filter-val"><option value="1">True</option><option value="0">False</option></select>';
+    } else if ((colType === 'date' || colType === 'datetime') && op === 'BETWEEN') {
+      container.innerHTML = '<input type="date" class="vb-filter-val" style="width:45%;display:inline-block;"> <span class="mg-text-muted">and</span> <input type="date" class="vb-filter-val-end" style="width:45%;display:inline-block;">';
+    } else if (colType === 'date' || colType === 'datetime') {
+      container.innerHTML = '<input type="date" class="vb-filter-val">';
+    } else if (colType === 'integer') {
+      container.innerHTML = '<input type="number" class="vb-filter-val" placeholder="number" step="1">';
+    } else if (colType === 'decimal' || colType === 'float') {
+      container.innerHTML = '<input type="number" class="vb-filter-val" placeholder="number" step="any">';
+    } else {
+      var ph = (op === 'LIKE') ? 'use % as wildcard' : 'value';
+      container.innerHTML = '<input type="text" class="vb-filter-val" placeholder="' + ph + '">';
+    }
+  }
+
+  // --- Order By ---
+
+  function addOrderRow(useAll) {
+    var cols = useAll ? currentColumns : currentColumns.filter(function(c) { return c['default']; });
+    var options = '<option value="">-- column --</option>';
+    cols.forEach(function(c) { options += '<option value="' + escHtml(c.name) + '">' + escHtml(c.name) + '</option>'; });
+    var div = document.createElement('div');
+    div.className = 'mg-row mg-mb vb-order-row';
+    div.style.alignItems = 'center';
+    div.innerHTML =
+      '<div class="mg-col-3"><select class="vb-order-col">' + options + '</select></div>' +
+      '<div class="mg-col-2"><select class="vb-order-dir"><option value="ASC">Ascending</option><option value="DESC">Descending</option></select></div>' +
+      '<div><button class="mg-btn mg-btn-outline-danger mg-btn-sm vb-remove-order">&#10005;</button></div>';
+    el('vb-orders').appendChild(div);
+  }
+
+  el('vb-add-order').addEventListener('click', function() { addOrderRow(false); updateGeneratedSql(); });
+
+  document.addEventListener('change', function(e) {
+    if (e.target.classList.contains('vb-order-col') || e.target.classList.contains('vb-order-dir')) updateGeneratedSql();
+  });
+
+  // --- Build SQL ---
+
+  function buildSql() {
+    var table = el('vb-table').value;
+    if (!table) return '';
+    var cols = [];
+    qsa('.vb-col-check:checked').forEach(function(c) { cols.push(quoteIdentifier(c.value)); });
+    if (!cols.length) cols = ['*'];
+    var sql = 'SELECT ' + cols.join(', ') + ' FROM ' + quoteIdentifier(table);
+    var wheres = [];
+    qsa('.vb-filter-row').forEach(function(row) {
+      var col = qs('.vb-filter-col', row).value;
+      var op = qs('.vb-filter-op', row).value;
+      var valEl = qs('.vb-filter-val', row);
+      var val = valEl ? valEl.value : '';
+      if (!col) return;
+      if (op === 'IS NULL' || op === 'IS NOT NULL') {
+        wheres.push(quoteIdentifier(col) + ' ' + op);
+      } else if (op === 'BETWEEN') {
+        var endEl = qs('.vb-filter-val-end', row);
+        var endVal = endEl ? endEl.value : '';
+        wheres.push(quoteIdentifier(col) + " BETWEEN '" + val.replace(/'/g, "''") + "' AND '" + endVal.replace(/'/g, "''") + "'");
+      } else if (op === 'LIKE') {
+        wheres.push(quoteIdentifier(col) + " LIKE '" + val.replace(/'/g, "''") + "'");
+      } else {
+        wheres.push(quoteIdentifier(col) + " " + op + " '" + val.replace(/'/g, "''") + "'");
+      }
+    });
+    if (wheres.length) sql += ' WHERE ' + wheres.join(' AND ');
+    var orders = [];
+    qsa('.vb-order-row').forEach(function(row) {
+      var col = qs('.vb-order-col', row).value;
+      var dir = qs('.vb-order-dir', row).value;
+      if (col) orders.push(quoteIdentifier(col) + ' ' + dir);
+    });
+    if (orders.length) sql += ' ORDER BY ' + orders.join(', ');
+    return sql;
+  }
+
+  function updateGeneratedSql() {
+    var sql = buildSql();
+    el('vb-sql-preview').value = sql;
+    el('sql-input').value = sql;
+  }
+
+  // --- Run Query ---
+
+  el('vb-run').addEventListener('click', function() {
+    var sql = buildSql();
+    if (sql) runQuery(sql, parseInt(el('vb-row-limit').value) || 25);
+  });
+
+  el('sql-run').addEventListener('click', function() {
+    var sql = el('sql-input').value.trim();
+    if (sql) runQuery(sql, parseInt(el('sql-row-limit').value) || 25);
+  });
+
+  el('sql-input').addEventListener('input', function() { el('vb-sql-preview').value = this.value; });
+
+  function runQuery(sql, rowLimit) {
+    clearResults();
+    setBtnLoading(['vb-run', 'sql-run'], true);
+    ajax('POST', ROUTES.execute, { sql: sql, row_limit: rowLimit }, function(data) {
+      renderResults(data);
+      setBtnLoading(['vb-run', 'sql-run'], false);
+    }, function(json) {
+      var cls = (json && json.timeout) ? 'mg-alert-warning' : 'mg-alert-danger';
+      el('results-alert').innerHTML = '<div class="mg-alert ' + cls + '">' + escHtml((json && json.error) || 'An unexpected error occurred.') + '</div>';
+      show(el('query-results'));
+      show(el('results-alert'));
+      setBtnLoading(['vb-run', 'sql-run'], false);
+    });
+  }
+
+  function clearResults() {
+    hide(el('results-alert')); hide(el('results-stats'));
+    hide(el('results-table-wrapper')); hide(el('results-empty'));
+    hide(el('results-truncated'));
+    el('results-thead').innerHTML = '';
+    el('results-tbody').innerHTML = '';
+    show(el('query-results'));
+  }
+
+  function renderResults(data) {
+    show(el('query-results'));
+    if (data.row_count === 0) {
+      show(el('results-empty')); show(el('results-stats'));
+      el('results-row-count').textContent = '0 rows';
+      el('results-time').textContent = data.execution_time_ms + ' ms';
+      return;
+    }
+    el('results-row-count').textContent = data.row_count + ' row' + (data.row_count !== 1 ? 's' : '');
+    el('results-time').textContent = data.execution_time_ms + ' ms';
+    if (data.truncated) show(el('results-truncated'));
+    show(el('results-stats'));
+
+    el('results-thead').innerHTML = '<tr>' + data.columns.map(function(c) { return '<th>' + escHtml(c) + '</th>'; }).join('') + '</tr>';
+    el('results-tbody').innerHTML = data.rows.map(function(row) {
+      return '<tr>' + row.map(function(val) {
+        if (val === null) return '<td><em class="null">NULL</em></td>';
+        if (val === '[REDACTED]') return '<td><span class="redacted">[REDACTED]</span></td>';
+        return '<td>' + escHtml(String(val)) + '</td>';
+      }).join('') + '</tr>';
+    }).join('');
+    show(el('results-table-wrapper'));
+  }
+
+  // --- Explain ---
+
+  el('vb-explain').addEventListener('click', function() { var sql = buildSql(); if (sql) runExplain(sql); });
+  el('sql-explain').addEventListener('click', function() { var sql = el('sql-input').value.trim(); if (sql) runExplain(sql); });
+  el('explain-close').addEventListener('click', function() { hide(el('explain-results')); });
+  el('results-close').addEventListener('click', function() { hide(el('query-results')); });
+
+  function runExplain(sql, fromSlowQuery) {
+    lastExplainSql = sql;
+    hide(el('explain-results')); hide(el('optimize-results'));
+    el('explain-thead').innerHTML = '';
+    el('explain-tbody').innerHTML = '';
+    setBtnLoading(['vb-explain', 'sql-explain'], true);
+
+    var postData = { sql: sql };
+    if (fromSlowQuery) postData.from_slow_query = 'true';
+    ajax('POST', ROUTES.explain, postData, function(data) {
+      lastExplainRows = data.rows;
+      el('explain-thead').innerHTML = '<tr>' + data.columns.map(function(c) { return '<th>' + escHtml(c) + '</th>'; }).join('') + '</tr>';
+      el('explain-tbody').innerHTML = data.rows.map(function(row) {
+        return '<tr>' + row.map(function(val) {
+          return val === null ? '<td><em class="null">NULL</em></td>' : '<td>' + escHtml(String(val)) + '</td>';
+        }).join('') + '</tr>';
+      }).join('');
+      show(el('explain-results'));
+      setBtnLoading(['vb-explain', 'sql-explain'], false);
+    }, function(json) {
+      el('results-alert').innerHTML = '<div class="mg-alert mg-alert-danger">' + escHtml((json && json.error) || 'Explain failed.') + '</div>';
+      show(el('results-alert'));
+      setBtnLoading(['vb-explain', 'sql-explain'], false);
+    });
+  }
+
+  // --- AI ---
+
+  var aiToggle = el('ai-toggle');
+  if (aiToggle) {
+    aiToggle.addEventListener('click', function() {
+      var panel = el('ai-panel');
+      panel.classList.toggle('mg-hidden');
+    });
+  }
+
+  var aiSuggest = el('ai-suggest');
+  if (aiSuggest) {
+    aiSuggest.addEventListener('click', function() {
+      var prompt = el('ai-prompt').value.trim();
+      if (!prompt) return;
+      aiSuggest.disabled = true;
+      aiSuggest.innerHTML = '<span class="mg-spinner"></span> Thinking...';
+      hide(el('ai-result'));
+
+      ajax('POST', ROUTES.suggest, { prompt: prompt }, function(data) {
+        el('sql-input').value = data.sql || '';
+        if (data.explanation) {
+          el('ai-explanation').textContent = data.explanation;
+          show(el('ai-result'));
+        }
+        parseSqlToBuilder(data.sql);
+        aiSuggest.disabled = false;
+        aiSuggest.innerHTML = '&#9889; Suggest Query';
+      }, function(json) {
+        el('results-alert').innerHTML = '<div class="mg-alert mg-alert-danger">' + escHtml((json && json.error) || 'AI suggestion failed.') + '</div>';
+        show(el('results-alert'));
+        aiSuggest.disabled = false;
+        aiSuggest.innerHTML = '&#9889; Suggest Query';
+      });
+    });
+  }
+
+  var explainOptimize = el('explain-optimize');
+  if (explainOptimize) {
+    explainOptimize.addEventListener('click', function() {
+      explainOptimize.disabled = true;
+      explainOptimize.innerHTML = '<span class="mg-spinner"></span> Analyzing...';
+      hide(el('optimize-results'));
+
+      var data = { sql: lastExplainSql };
+      lastExplainRows.forEach(function(row, i) {
+        row.forEach(function(val, j) {
+          data['explain_rows[' + i + '][' + j + ']'] = val == null ? '' : val;
+        });
+      });
+
+      ajax('POST', ROUTES.optimize, data, function(resp) {
+        el('optimize-content').innerHTML = formatMarkdown(resp.suggestions || 'No suggestions available.') + copyButton('optimize-content');
+        show(el('optimize-results'));
+        explainOptimize.disabled = false;
+        explainOptimize.innerHTML = '&#9889; AI Optimization';
+      }, function(json) {
+        el('optimize-content').textContent = (json && json.error) || 'Optimization failed.';
+        show(el('optimize-results'));
+        explainOptimize.disabled = false;
+        explainOptimize.innerHTML = '&#9889; AI Optimization';
+      });
+    });
+  }
+
+  // --- Slow Queries ---
+
+  function loadSlowQueries() {
+    show(el('slow-loading'));
+    hide(el('slow-empty')); hide(el('slow-table-wrapper'));
+    el('slow-tbody').innerHTML = '';
+
+    ajaxGet(ROUTES.slow_queries, {}, function(data) {
+      hide(el('slow-loading'));
+      if (!data || !data.length) { show(el('slow-empty')); el('slow-count').textContent = '0'; return; }
+      el('slow-count').textContent = data.length + ' queries';
+      el('slow-tbody').innerHTML = data.map(function(q) {
+        var d = q.duration_ms;
+        var cls = d >= 2000 ? 'mg-badge-danger' : d >= 1000 ? 'mg-badge-warning' : 'mg-badge-info';
+        return '<tr><td><span class="mg-badge ' + cls + '">' + d + ' ms</span></td>' +
+          '<td><small>' + escHtml(q.timestamp) + '</small></td>' +
+          '<td>' + sqlBlock(q.sql, 200) + '</td>' +
+          '<td><button class="mg-btn mg-btn-outline mg-btn-sm slow-explain-btn" data-sql="' + escHtml(q.sql).replace(/"/g, '&quot;') + '">Explain</button> ' +
+          '<button class="mg-btn mg-btn-outline-secondary mg-btn-sm slow-use-btn" data-sql="' + escHtml(q.sql).replace(/"/g, '&quot;') + '">Use</button></td></tr>';
+      }).join('');
+      show(el('slow-table-wrapper'));
+      makeSortable(qs('#slow-table-wrapper .mg-table'));
+    }, function() {
+      hide(el('slow-loading'));
+      el('slow-empty').textContent = 'Failed to load slow queries.';
+      show(el('slow-empty'));
+    });
+  }
+
+<% if capability?(:slow_queries) %>
+  el('slow-refresh').addEventListener('click', loadSlowQueries);
+<% end %>
+
+  document.addEventListener('click', function(e) {
+    var btn = e.target.closest('.slow-explain-btn');
+    if (btn) runExplain(btn.dataset.sql, true);
+    var useBtn = e.target.closest('.slow-use-btn');
+    if (useBtn) {
+      el('sql-input').value = useBtn.dataset.sql;
+      activateTab('explorer');
+      // Switch to SQL mode within Query Explorer
+      qsa('.qe-mode').forEach(function(b) { b.classList.remove('active'); b.classList.add('mg-btn-outline'); });
+      qs('.qe-mode[data-mode="sql"]').classList.add('active');
+      qs('.qe-mode[data-mode="sql"]').classList.remove('mg-btn-outline');
+      hide(el('qe-visual'));
+      show(el('qe-sql'));
+    }
+  });
+
+  // --- Duplicate Indexes ---
+
+  function loadDuplicateIndexes() {
+    show(el('dup-loading'));
+    hide(el('dup-empty')); hide(el('dup-table-wrapper'));
+    el('dup-tbody').innerHTML = '';
+
+    ajaxGet(ROUTES.duplicate_indexes, {}, function(data) {
+      hide(el('dup-loading'));
+      if (!data || !data.length) { show(el('dup-empty')); el('dup-count').textContent = '0'; return; }
+      el('dup-count').textContent = data.length + ' found';
+      el('dup-tbody').innerHTML = data.map(function(d) {
+        var dropSql = d.drop_sql || ('ALTER TABLE `' + d.table + '` DROP INDEX `' + d.duplicate_index + '`;');
+        return '<tr>' +
+          '<td><strong>' + escHtml(d.table) + '</strong></td>' +
+          '<td><code>' + escHtml(d.duplicate_index) + '</code>' + (d.unique ? ' <span class="mg-badge mg-badge-warning">UNIQUE</span>' : '') + '</td>' +
+          '<td>' + d.duplicate_columns.map(function(c) { return '<code>' + escHtml(c) + '</code>'; }).join(', ') + '</td>' +
+          '<td><code>' + escHtml(d.covered_by_index) + '</code></td>' +
+          '<td>' + d.covered_by_columns.map(function(c) { return '<code>' + escHtml(c) + '</code>'; }).join(', ') + '</td>' +
+          '<td>' + sqlBlock(dropSql, 0) + '</td>' +
+          '</tr>';
+      }).join('');
+      show(el('dup-table-wrapper'));
+      makeSortable(qs('#dup-table-wrapper .mg-table'));
+
+      // Generate migration
+      var ts = migrationTimestamp();
+      var migrationLines = ['# ' + ts + '_remove_duplicate_indexes.rb', '',
+        'class RemoveDuplicateIndexes < ActiveRecord::Migration[' + RAILS_MIGRATION_VERSION + ']', '  def change'];
+      data.forEach(function(d) {
+        migrationLines.push('    remove_index :' + d.table + ', name: :' + d.duplicate_index);
+      });
+      migrationLines.push('  end', 'end');
+      el('dup-migration-code').textContent = migrationLines.join('\n');
+      show(el('dup-migration'));
+    }, function() {
+      hide(el('dup-loading'));
+      el('dup-empty').textContent = 'Failed to scan indexes.';
+      show(el('dup-empty'));
+    });
+  }
+
+  el('dup-refresh').addEventListener('click', loadDuplicateIndexes);
+  el('dup-copy-migration').addEventListener('click', function() {
+    copyToClipboard(el('dup-migration-code').textContent, el('dup-copy-migration'));
+  });
+
+  // --- Table Sizes ---
+
+  function formatMb(mb) {
+    if (mb >= 1024) return (mb / 1024).toFixed(2) + ' GB';
+    if (mb >= 1) return mb.toFixed(2) + ' MB';
+    return (mb * 1024).toFixed(0) + ' KB';
+  }
+
+  function sizeBar(pct, color) {
+    return '<div style="background:#e9ecef;border-radius:3px;height:8px;width:100%;">' +
+      '<div style="background:' + color + ';border-radius:3px;height:8px;width:' + Math.max(pct, 1) + '%;transition:width 0.3s;"></div></div>';
+  }
+
+  var PIE_COLORS = [
+    '#4e79a7', '#f28e2b', '#e15759', '#76b7b2', '#59a14f',
+    '#edc948', '#b07aa1', '#ff9da7', '#9c755f', '#bab0ac',
+    '#86bcb6', '#8cd17d', '#b6992d', '#499894', '#d37295'
+  ];
+
+  function drawPieChart(canvas, slices, legendEl) {
+    var ctx = canvas.getContext('2d');
+    var w = canvas.width;
+    var h = canvas.height;
+    var cx = w / 2;
+    var cy = h / 2;
+    var r = Math.min(cx, cy) - 4;
+    var total = slices.reduce(function(s, sl) { return s + sl.value; }, 0);
+    if (total === 0) return;
+
+    ctx.clearRect(0, 0, w, h);
+    var startAngle = -Math.PI / 2;
+
+    slices.forEach(function(sl, i) {
+      var sliceAngle = (sl.value / total) * 2 * Math.PI;
+      ctx.beginPath();
+      ctx.moveTo(cx, cy);
+      ctx.arc(cx, cy, r, startAngle, startAngle + sliceAngle);
+      ctx.closePath();
+      ctx.fillStyle = PIE_COLORS[i % PIE_COLORS.length];
+      ctx.fill();
+      ctx.strokeStyle = '#fff';
+      ctx.lineWidth = 1.5;
+      ctx.stroke();
+      startAngle += sliceAngle;
+    });
+
+    // Legend
+    legendEl.innerHTML = slices.map(function(sl, i) {
+      var pct = ((sl.value / total) * 100).toFixed(1);
+      return '<div style="display:flex;align-items:center;gap:6px;">' +
+        '<span style="display:inline-block;width:12px;height:12px;border-radius:2px;background:' + PIE_COLORS[i % PIE_COLORS.length] + ';flex-shrink:0;"></span>' +
+        '<span>' + escHtml(sl.label) + '</span>' +
+        '<span class="mg-text-muted">' + formatMb(sl.value) + ' (' + pct + '%)</span></div>';
+    }).join('');
+  }
+
+  function loadTableSizes() {
+    show(el('sizes-loading'));
+    hide(el('sizes-table-wrapper')); hide(el('sizes-chart-wrapper'));
+    el('sizes-tbody').innerHTML = '';
+
+    ajaxGet(ROUTES.table_sizes, {}, function(data) {
+      hide(el('sizes-loading'));
+      if (!data || !data.length) { el('sizes-total').textContent = '0 tables'; show(el('sizes-table-wrapper')); return; }
+
+      var totalMb = data.reduce(function(sum, t) { return sum + t.total_mb; }, 0);
+      el('sizes-total').textContent = data.length + ' tables, ' + formatMb(totalMb) + ' total';
+      var maxMb = data[0].total_mb || 1;
+
+      // Pie chart: top 10 tables + "Other"
+      var topN = data.slice(0, 10);
+      var otherMb = data.slice(10).reduce(function(s, t) { return s + t.total_mb; }, 0);
+      var slices = topN.map(function(t) { return { label: t.table, value: t.total_mb }; });
+      if (otherMb > 0) slices.push({ label: 'Other (' + (data.length - 10) + ' tables)', value: otherMb });
+      drawPieChart(el('sizes-pie'), slices, el('sizes-legend'));
+      show(el('sizes-chart-wrapper'));
+
+      el('sizes-tbody').innerHTML = data.map(function(t) {
+        var pct = (t.total_mb / maxMb) * 100;
+        var color = t.total_mb >= 100 ? '#dc3545' : t.total_mb >= 10 ? '#ffc107' : '#28a745';
+        var rows = t.rows != null ? Number(t.rows).toLocaleString() : '?';
+        var fragText = t.fragmented_mb > 0 ? formatMb(t.fragmented_mb) : '<span class="mg-text-muted">\u2014</span>';
+        if (t.needs_optimize) fragText += ' <span class="mg-badge mg-badge-warning" title="Fragmentation >10% of total size">optimize</span>';
+        var updated = t.updated_at ? new Date(t.updated_at).toLocaleDateString() : '<span class="mg-text-muted">\u2014</span>';
+        var engineBadge = t.engine ? '<span class="mg-badge mg-badge-secondary">' + escHtml(t.engine) + '</span>' : '';
+        return '<tr>' +
+          '<td><strong>' + escHtml(t.table) + '</strong>' +
+            (t.collation ? ' <span class="mg-text-muted" style="font-size:11px">' + escHtml(t.collation) + '</span>' : '') +
+            (t.auto_increment ? ' <span class="mg-text-muted" style="font-size:11px">AI:' + Number(t.auto_increment).toLocaleString() + '</span>' : '') +
+          '</td>' +
+          '<td class="mg-num">' + rows + '</td>' +
+          '<td>' + engineBadge + '</td>' +
+          '<td class="mg-num">' + formatMb(t.data_mb) + '</td>' +
+          '<td class="mg-num">' + formatMb(t.index_mb) + '</td>' +
+          '<td class="mg-num"><strong>' + formatMb(t.total_mb) + '</strong></td>' +
+          '<td class="mg-num">' + fragText + '</td>' +
+          '<td>' + updated + '</td>' +
+          '<td>' + sizeBar(pct, color) +
+            (t.needs_optimize ? ' <button class="mg-btn mg-btn-outline mg-btn-sm mg-table-optimize" data-table="' + escHtml(t.table) + '" style="margin-left:4px;">&#9889; AI Optimize</button>' : '') +
+          '</td>' +
+          '</tr>';
+      }).join('');
+      show(el('sizes-table-wrapper'));
+      makeSortable(qs('#sizes-table-wrapper .mg-table'));
+    }, function() {
+      hide(el('sizes-loading'));
+      el('sizes-total').textContent = 'Failed to load';
+    });
+  }
+
+  el('sizes-refresh').addEventListener('click', loadTableSizes);
+
+  // AI Optimize button on tables with fragmentation
+  document.addEventListener('click', function(e) {
+    var btn = e.target.closest('.mg-table-optimize');
+    if (!btn) return;
+    var table = btn.dataset.table;
+    btn.disabled = true;
+    btn.innerHTML = '<span class="mg-spinner"></span>';
+    aiCall(ROUTES.schema_review, { table: table }, function(data) {
+      showAiQueryResult('Optimization: ' + table, formatFindings(data.findings || data.raw || 'No suggestions.'));
+      btn.disabled = false;
+      btn.innerHTML = '&#9889; AI Optimize';
+    }, function(err) {
+      showAiQueryResult('Error', '<div class="mg-alert mg-alert-danger">' + escHtml(err) + '</div>');
+      btn.disabled = false;
+      btn.innerHTML = '&#9889; AI Optimize';
+    });
+  });
+
+  // --- Query Stats ---
+
+  function loadQueryStats() {
+    show(el('qstats-loading'));
+    hide(el('qstats-empty')); hide(el('qstats-table-wrapper')); hide(el('qstats-error'));
+    el('qstats-tbody').innerHTML = '';
+
+    ajaxGet(ROUTES.query_stats, { sort: 'total_time' }, function(data) {
+      hide(el('qstats-loading'));
+      if (data.error) {
+        el('qstats-error').innerHTML = '<div class="mg-alert mg-alert-warning">' + escHtml(data.error) + '</div>';
+        show(el('qstats-error')); return;
+      }
+      if (!data.length) { show(el('qstats-empty')); el('qstats-count').textContent = '0'; return; }
+      el('qstats-count').textContent = data.length + ' queries';
+      el('qstats-tbody').innerHTML = data.map(function(q) {
+        var ratioClass = q.rows_ratio > 100 ? 'mg-badge-danger' : q.rows_ratio > 10 ? 'mg-badge-warning' : '';
+        var sqlCell = q.digest
+          ? '<a href="' + ROUTES.query_detail + encodeURIComponent(q.digest) + '" class="mg-link">' + sqlBlock(q.sql, 120) + '</a>'
+          : sqlBlock(q.sql, 120);
+        return '<tr>' +
+          '<td>' + sqlCell + '</td>' +
+          '<td class="mg-num">' + Number(q.calls).toLocaleString() + '</td>' +
+          '<td class="mg-num">' + formatDurationStyled(q.total_time_ms) + '</td>' +
+          '<td class="mg-num">' + formatDurationStyled(q.avg_time_ms) + '</td>' +
+          '<td class="mg-num">' + formatDurationStyled(q.max_time_ms) + '</td>' +
+          '<td class="mg-num">' + Number(q.rows_examined).toLocaleString() + '</td>' +
+          '<td class="mg-num">' + Number(q.rows_sent).toLocaleString() + '</td>' +
+          '<td class="mg-num">' + (ratioClass ? '<span class="mg-badge ' + ratioClass + '">' + q.rows_ratio + 'x</span>' : q.rows_ratio + 'x') + '</td>' +
+          '</tr>';
+      }).join('');
+      show(el('qstats-table-wrapper'));
+      makeSortable(qs('#qstats-table-wrapper .mg-table'));
+    }, function(json) {
+      hide(el('qstats-loading'));
+      el('qstats-error').innerHTML = '<div class="mg-alert mg-alert-warning">' + escHtml((json && json.error) || 'Failed to load query stats.') + '</div>';
+      show(el('qstats-error'));
+    });
+  }
+
+  function formatDuration(ms) {
+    if (ms >= 60000) return (ms / 60000).toFixed(1) + ' min';
+    if (ms >= 1000) return (ms / 1000).toFixed(1) + ' s';
+    return ms.toFixed(1) + ' ms';
+  }
+
+  // --- Unused Indexes ---
+
+  function loadUnusedIndexes() {
+    show(el('unused-loading'));
+    hide(el('unused-empty')); hide(el('unused-table-wrapper')); hide(el('unused-error'));
+    el('unused-tbody').innerHTML = '';
+
+    ajaxGet(ROUTES.unused_indexes, {}, function(data) {
+      hide(el('unused-loading'));
+      if (data.error) {
+        el('unused-error').innerHTML = '<div class="mg-alert mg-alert-warning">' + escHtml(data.error) + '</div>';
+        show(el('unused-error')); return;
+      }
+      var indexes = (data && data.indexes) || [];
+      renderUnusedStatsContext(data);
+      if (!indexes.length) { show(el('unused-empty')); el('unused-count').textContent = '0'; return; }
+      el('unused-count').textContent = indexes.length + ' found';
+      el('unused-tbody').innerHTML = indexes.map(function(d) {
+        return '<tr>' +
+          '<td><strong>' + escHtml(d.table) + '</strong></td>' +
+          '<td><code>' + escHtml(d.index_name) + '</code></td>' +
+          '<td class="mg-num">' + formatBytes(d.size_bytes) + '</td>' +
+          '<td class="mg-num">' + d.reads + '</td>' +
+          '<td class="mg-num">' + Number(d.writes).toLocaleString() + '</td>' +
+          '<td class="mg-num">' + Number(d.table_rows).toLocaleString() + '</td>' +
+          '<td>' + sqlBlock(d.drop_sql, 0) + '</td>' +
+          '</tr>';
+      }).join('');
+      show(el('unused-table-wrapper'));
+      makeSortable(qs('#unused-table-wrapper .mg-table'));
+
+      // Generate migration
+      var ts = migrationTimestamp();
+      var migrationLines = ['# ' + ts + '_remove_unused_indexes.rb', '',
+        'class RemoveUnusedIndexes < ActiveRecord::Migration[' + RAILS_MIGRATION_VERSION + ']', '  def change'];
+      indexes.forEach(function(d) {
+        migrationLines.push('    remove_index :' + d.table + ', name: :' + d.index_name);
+      });
+      migrationLines.push('  end', 'end');
+      el('unused-migration-code').textContent = migrationLines.join('\n');
+      show(el('unused-migration'));
+    }, function(json) {
+      hide(el('unused-loading'));
+      el('unused-error').innerHTML = '<div class="mg-alert mg-alert-warning">' + escHtml((json && json.error) || 'Failed to load unused indexes.') + '</div>';
+      show(el('unused-error'));
+    });
+  }
+
+  el('unused-refresh').addEventListener('click', loadUnusedIndexes);
+  el('unused-copy-migration').addEventListener('click', function() {
+    copyToClipboard(el('unused-migration-code').textContent, el('unused-copy-migration'));
+  });
+
+  // --- Server Overview ---
+
+  function usageBar(pct, label) {
+    var color = pct >= 90 ? '#dc3545' : pct >= 70 ? '#ffc107' : '#28a745';
+    return '<div class="mg-usage-bar">' +
+      '<div class="mg-usage-bar-fill" style="width:' + Math.min(pct, 100) + '%;background:' + color + ';"></div>' +
+      '<div class="mg-usage-bar-text">' + label + '</div></div>';
+  }
+
+  function statRow(label, value) {
+    return '<div class="mg-stat-label">' + label + '</div><div class="mg-stat-value">' + value + '</div>';
+  }
+
+  function loadServerOverview() {
+    show(el('server-loading'));
+    hide(el('server-content')); hide(el('server-error'));
+
+    ajaxGet(ROUTES.server_overview, {}, function(data) {
+      hide(el('server-loading'));
+      if (data.error) {
+        el('server-error').innerHTML = '<div class="mg-alert mg-alert-warning">' + escHtml(data.error) + '</div>';
+        show(el('server-error')); return;
+      }
+
+      var s = data.server;
+      var c = data.connections;
+      var db = data.innodb;
+      var q = data.queries;
+
+      // Server info
+      el('server-info').innerHTML =
+        statRow('Version', '<code>' + escHtml(s.version) + '</code>') +
+        statRow('Uptime', escHtml(s.uptime)) +
+        statRow('Queries/sec', q.qps) +
+        statRow('Total Queries', Number(q.questions).toLocaleString()) +
+        statRow('Slow Queries', Number(q.slow_queries).toLocaleString());
+
+      // Connections
+      el('conn-bar').innerHTML = usageBar(c.usage_pct, c.current + ' / ' + c.max + ' (' + c.usage_pct + '%)');
+      el('conn-info').innerHTML =
+        statRow('Threads Running', c.threads_running) +
+        statRow('Threads Cached', c.threads_cached) +
+        statRow('Threads Created', Number(c.threads_created).toLocaleString()) +
+        statRow('Max Used', c.max_used) +
+        statRow('Aborted Connects', Number(c.aborted_connects).toLocaleString()) +
+        statRow('Aborted Clients', Number(c.aborted_clients).toLocaleString());
+
+      // InnoDB
+      var poolUsedPct = db.buffer_pool_pages_total > 0
+        ? (((db.buffer_pool_pages_total - db.buffer_pool_pages_free) / db.buffer_pool_pages_total) * 100).toFixed(1)
+        : 0;
+      el('innodb-bar').innerHTML = usageBar(parseFloat(poolUsedPct), db.buffer_pool_mb + ' MB (' + poolUsedPct + '% used)');
+      el('innodb-info').innerHTML =
+        statRow('Hit Rate', db.buffer_pool_hit_rate + '%') +
+        statRow('Dirty Pages', Number(db.buffer_pool_pages_dirty).toLocaleString()) +
+        statRow('Free Pages', Number(db.buffer_pool_pages_free).toLocaleString()) +
+        statRow('Row Lock Waits', Number(db.row_lock_waits).toLocaleString()) +
+        statRow('Row Lock Time', formatDuration(db.row_lock_time_ms));
+
+      // Query activity
+      var tmpBadge = q.tmp_disk_pct > 25
+        ? '<span class="mg-badge mg-badge-danger">' + q.tmp_disk_pct + '%</span>'
+        : q.tmp_disk_pct + '%';
+      el('query-info').innerHTML =
+        statRow('Tmp Tables (disk)', Number(q.tmp_disk_tables).toLocaleString() + ' / ' + Number(q.tmp_tables).toLocaleString() + ' ' + tmpBadge) +
+        statRow('Full Joins (no index)', Number(q.select_full_join).toLocaleString()) +
+        statRow('Sort Merge Passes', Number(q.sort_merge_passes).toLocaleString());
+
+      show(el('server-content'));
+    }, function(json) {
+      hide(el('server-loading'));
+      el('server-error').innerHTML = '<div class="mg-alert mg-alert-warning">' + escHtml((json && json.error) || 'Failed to load server overview.') + '</div>';
+      show(el('server-error'));
+    });
+  }
+
+  el('server-refresh').addEventListener('click', loadServerOverview);
+
+  // --- AI Feature Handlers ---
+
+  // Generic AI call helper
+  function aiCall(url, data, onSuccess, onError) {
+    ajax('POST', url, data, function(result) {
+      if (result.error) { onError(result.error); return; }
+      onSuccess(result);
+    }, function(json) {
+      onError((json && json.error) || 'AI request failed.');
+    });
+  }
+
+  function copyButton(targetId) {
+    return '<div style="text-align:right;margin-top:8px;"><button class="mg-btn mg-btn-outline-secondary mg-btn-sm mg-copy-ai" data-target="' + targetId + '">Copy response</button></div>';
+  }
+
+  document.addEventListener('click', function(e) {
+    var btn = e.target.closest('.mg-copy-ai');
+    if (!btn) return;
+    var target = el(btn.dataset.target);
+    if (!target) return;
+    var text = target.innerText || target.textContent;
+    navigator.clipboard.writeText(text).then(function() {
+      btn.textContent = 'Copied!';
+      setTimeout(function() { btn.textContent = 'Copy response'; }, 2000);
+    });
+  });
+
+  function showAiQueryResult(title, html) {
+    el('ai-query-title').innerHTML = '<strong>&#9889; ' + escHtml(title) + '</strong>';
+    el('ai-query-content').innerHTML = html + copyButton('ai-query-content');
+    show(el('ai-query-result'));
+  }
+
+  el('ai-query-close').addEventListener('click', function() { hide(el('ai-query-result')); });
+
+  // Describe Query
+  var sqlDescribe = el('sql-describe');
+  if (sqlDescribe) {
+    sqlDescribe.addEventListener('click', function() {
+      var sql = el('sql-input').value.trim();
+      if (!sql) return;
+      sqlDescribe.disabled = true;
+      sqlDescribe.innerHTML = '<span class="mg-spinner"></span>';
+      hide(el('ai-query-result'));
+      aiCall(ROUTES.describe_query, { sql: sql }, function(data) {
+        showAiQueryResult('Query Description', formatMarkdown(data.explanation || data.raw || 'No explanation returned.'));
+        sqlDescribe.disabled = false;
+        sqlDescribe.innerHTML = '&#9889; Describe';
+      }, function(err) {
+        showAiQueryResult('Error', '<div class="mg-alert mg-alert-danger">' + escHtml(err) + '</div>');
+        sqlDescribe.disabled = false;
+        sqlDescribe.innerHTML = '&#9889; Describe';
+      });
+    });
+  }
+
+  // Rewrite Query
+  var sqlRewrite = el('sql-rewrite');
+  if (sqlRewrite) {
+    sqlRewrite.addEventListener('click', function() {
+      var sql = el('sql-input').value.trim();
+      if (!sql) return;
+      sqlRewrite.disabled = true;
+      sqlRewrite.innerHTML = '<span class="mg-spinner"></span>';
+      hide(el('ai-query-result'));
+      aiCall(ROUTES.rewrite_query, { sql: sql }, function(data) {
+        var html = '';
+        if (data.rewritten) {
+          html += '<strong>Rewritten Query:</strong><pre class="mg-pre"><code>' + escHtml(data.rewritten) + '</code></pre>';
+        }
+        if (data.changes) {
+          html += '<strong>Changes:</strong><br>' + formatMarkdown(data.changes);
+        }
+        if (!data.rewritten && !data.changes) {
+          html = formatMarkdown(data.raw || 'No rewrite suggestions.');
+        }
+        showAiQueryResult('Query Rewrite', html);
+        sqlRewrite.disabled = false;
+        sqlRewrite.innerHTML = '&#9889; Rewrite';
+      }, function(err) {
+        showAiQueryResult('Error', '<div class="mg-alert mg-alert-danger">' + escHtml(err) + '</div>');
+        sqlRewrite.disabled = false;
+        sqlRewrite.innerHTML = '&#9889; Rewrite';
+      });
+    });
+  }
+
+  // Index Advisor (on EXPLAIN results)
+  var indexAdvisor = el('explain-index-advisor');
+  if (indexAdvisor) {
+    indexAdvisor.addEventListener('click', function() {
+      indexAdvisor.disabled = true;
+      indexAdvisor.innerHTML = '<span class="mg-spinner"></span> Analyzing...';
+      hide(el('optimize-results'));
+
+      var data = { sql: lastExplainSql };
+      lastExplainRows.forEach(function(row, i) {
+        row.forEach(function(val, j) {
+          data['explain_rows[' + i + '][' + j + ']'] = val == null ? '' : val;
+        });
+      });
+
+      aiCall(ROUTES.index_advisor, data, function(resp) {
+        el('optimize-content').innerHTML = formatMarkdown(resp.indexes || resp.raw || 'No suggestions.') + copyButton('optimize-content');
+        show(el('optimize-results'));
+        indexAdvisor.disabled = false;
+        indexAdvisor.innerHTML = '&#9889; Index Advisor';
+      }, function(err) {
+        el('optimize-content').innerHTML = '<div class="mg-alert mg-alert-danger">' + escHtml(err) + '</div>';
+        show(el('optimize-results'));
+        indexAdvisor.disabled = false;
+        indexAdvisor.innerHTML = '&#9889; Index Advisor';
+      });
+    });
+  }
+
+  <% if capability?(:slow_queries) %>
+  // Server: Root Cause Analysis
+  var rootCauseBtn = el('server-root-cause');
+  if (rootCauseBtn) {
+    rootCauseBtn.addEventListener('click', function() {
+      rootCauseBtn.disabled = true;
+      rootCauseBtn.innerHTML = '<span class="mg-spinner"></span> Diagnosing...';
+      hide(el('server-ai-result'));
+      aiCall(ROUTES.root_cause, {}, function(data) {
+        el('server-ai-title').innerHTML = '<strong>&#9889; Root Cause Analysis</strong>';
+        el('server-ai-content').innerHTML = formatMarkdown(data.diagnosis || data.raw || 'No diagnosis.') + copyButton('server-ai-content');
+        show(el('server-ai-result'));
+        rootCauseBtn.disabled = false;
+        rootCauseBtn.innerHTML = '&#9889; Why is it slow?';
+      }, function(err) {
+        el('server-ai-title').innerHTML = '<strong>&#9889; Error</strong>';
+        el('server-ai-content').innerHTML = '<div class="mg-alert mg-alert-danger">' + escHtml(err) + '</div>';
+        show(el('server-ai-result'));
+        rootCauseBtn.disabled = false;
+        rootCauseBtn.innerHTML = '&#9889; Why is it slow?';
+      });
+    });
+  }
+
+  el('server-ai-close').addEventListener('click', function() { hide(el('server-ai-result')); });
+
+  // Server: Anomaly Detection
+  var anomalyBtn = el('server-anomaly');
+  if (anomalyBtn) {
+    anomalyBtn.addEventListener('click', function() {
+      anomalyBtn.disabled = true;
+      anomalyBtn.innerHTML = '<span class="mg-spinner"></span> Analyzing...';
+      hide(el('server-ai-result'));
+      aiCall(ROUTES.anomaly_detection, {}, function(data) {
+        el('server-ai-title').innerHTML = '<strong>&#9889; Query Health Report</strong>';
+        el('server-ai-content').innerHTML = formatMarkdown(data.report || data.raw || 'No anomalies detected.') + copyButton('server-ai-content');
+        show(el('server-ai-result'));
+        anomalyBtn.disabled = false;
+        anomalyBtn.innerHTML = '&#9889; Anomaly Detection';
+      }, function(err) {
+        el('server-ai-title').innerHTML = '<strong>&#9889; Error</strong>';
+        el('server-ai-content').innerHTML = '<div class="mg-alert mg-alert-danger">' + escHtml(err) + '</div>';
+        show(el('server-ai-result'));
+        anomalyBtn.disabled = false;
+        anomalyBtn.innerHTML = '&#9889; Anomaly Detection';
+      });
+    });
+  }
+  <% end %>
+
+  // Server: Variable Review
+  var varReviewBtn = el('server-variable-review');
+  if (varReviewBtn) {
+    varReviewBtn.addEventListener('click', function() {
+      varReviewBtn.disabled = true;
+      varReviewBtn.innerHTML = '<span class="mg-spinner"></span> Reviewing...';
+      hide(el('server-ai-result'));
+      aiCall(ROUTES.variable_review, {}, function(data) {
+        el('server-ai-title').innerHTML = '<strong>&#9889; Variable Configuration Review</strong>';
+        el('server-ai-content').innerHTML = formatMarkdown(data.findings || data.raw || 'No findings.') + copyButton('server-ai-content');
+        show(el('server-ai-result'));
+        varReviewBtn.disabled = false;
+        varReviewBtn.innerHTML = '&#9889; Variable Review';
+      }, function(err) {
+        el('server-ai-title').innerHTML = '<strong>&#9889; Error</strong>';
+        el('server-ai-content').innerHTML = '<div class="mg-alert mg-alert-danger">' + escHtml(err) + '</div>';
+        show(el('server-ai-result'));
+        varReviewBtn.disabled = false;
+        varReviewBtn.innerHTML = '&#9889; Variable Review';
+      });
+    });
+  }
+
+  // Server: Connection Advisor
+  var connAdvisorBtn = el('server-connection-advisor');
+  if (connAdvisorBtn) {
+    connAdvisorBtn.addEventListener('click', function() {
+      connAdvisorBtn.disabled = true;
+      connAdvisorBtn.innerHTML = '<span class="mg-spinner"></span> Diagnosing...';
+      hide(el('server-ai-result'));
+      aiCall(ROUTES.connection_advisor, {}, function(data) {
+        el('server-ai-title').innerHTML = '<strong>&#9889; Connection Pressure Diagnosis</strong>';
+        el('server-ai-content').innerHTML = formatMarkdown(data.diagnosis || data.raw || 'No diagnosis.') + copyButton('server-ai-content');
+        show(el('server-ai-result'));
+        connAdvisorBtn.disabled = false;
+        connAdvisorBtn.innerHTML = '&#9889; Connection Advisor';
+      }, function(err) {
+        el('server-ai-title').innerHTML = '<strong>&#9889; Error</strong>';
+        el('server-ai-content').innerHTML = '<div class="mg-alert mg-alert-danger">' + escHtml(err) + '</div>';
+        show(el('server-ai-result'));
+        connAdvisorBtn.disabled = false;
+        connAdvisorBtn.innerHTML = '&#9889; Connection Advisor';
+      });
+    });
+  }
+
+  // Server: InnoDB Health
+  var innodbHealthBtn = el('server-innodb-health');
+  if (innodbHealthBtn) {
+    innodbHealthBtn.addEventListener('click', function() {
+      innodbHealthBtn.disabled = true;
+      innodbHealthBtn.innerHTML = '<span class="mg-spinner"></span> Interpreting...';
+      hide(el('server-ai-result'));
+      aiCall(ROUTES.innodb_health, {}, function(data) {
+        el('server-ai-title').innerHTML = '<strong>&#9889; InnoDB Health Interpretation</strong>';
+        el('server-ai-content').innerHTML = formatMarkdown(data.findings || data.raw || 'No findings.') + copyButton('server-ai-content');
+        show(el('server-ai-result'));
+        innodbHealthBtn.disabled = false;
+        innodbHealthBtn.innerHTML = '&#9889; InnoDB Health';
+      }, function(err) {
+        el('server-ai-title').innerHTML = '<strong>&#9889; Error</strong>';
+        el('server-ai-content').innerHTML = '<div class="mg-alert mg-alert-danger">' + escHtml(err) + '</div>';
+        show(el('server-ai-result'));
+        innodbHealthBtn.disabled = false;
+        innodbHealthBtn.innerHTML = '&#9889; InnoDB Health';
+      });
+    });
+  }
+
+  // Query Stats: Workload Digest
+  var workloadBtn = el('qstats-workload-digest');
+  if (workloadBtn) {
+    workloadBtn.addEventListener('click', function() {
+      workloadBtn.disabled = true;
+      workloadBtn.innerHTML = '<span class="mg-spinner"></span> Analyzing...';
+      hide(el('qstats-ai-result'));
+      aiCall(ROUTES.workload_digest, {}, function(data) {
+        el('qstats-ai-title').innerHTML = '<strong>&#9889; Workload Digest</strong>';
+        el('qstats-ai-content').innerHTML = formatMarkdown(data.digest || data.raw || 'No digest available.') + copyButton('qstats-ai-content');
+        show(el('qstats-ai-result'));
+        workloadBtn.disabled = false;
+        workloadBtn.innerHTML = '&#9889; Workload Digest';
+      }, function(err) {
+        el('qstats-ai-title').innerHTML = '<strong>&#9889; Error</strong>';
+        el('qstats-ai-content').innerHTML = '<div class="mg-alert mg-alert-danger">' + escHtml(err) + '</div>';
+        show(el('qstats-ai-result'));
+        workloadBtn.disabled = false;
+        workloadBtn.innerHTML = '&#9889; Workload Digest';
+      });
+    });
+
+    el('qstats-ai-close').addEventListener('click', function() { hide(el('qstats-ai-result')); });
+  }
+
+  // Query Stats: Pattern Grouper
+  var patternBtn = el('qstats-pattern-grouper');
+  if (patternBtn) {
+    patternBtn.addEventListener('click', function() {
+      patternBtn.disabled = true;
+      patternBtn.innerHTML = '<span class="mg-spinner"></span> Grouping...';
+      hide(el('qstats-ai-result'));
+      aiCall(ROUTES.pattern_grouper, {}, function(data) {
+        el('qstats-ai-title').innerHTML = '<strong>&#9889; Slow Query Pattern Groups</strong>';
+        el('qstats-ai-content').innerHTML = formatMarkdown(data.groups || data.raw || 'No patterns found.') + copyButton('qstats-ai-content');
+        show(el('qstats-ai-result'));
+        patternBtn.disabled = false;
+        patternBtn.innerHTML = '&#9889; Pattern Grouper';
+      }, function(err) {
+        el('qstats-ai-title').innerHTML = '<strong>&#9889; Error</strong>';
+        el('qstats-ai-content').innerHTML = '<div class="mg-alert mg-alert-danger">' + escHtml(err) + '</div>';
+        show(el('qstats-ai-result'));
+        patternBtn.disabled = false;
+        patternBtn.innerHTML = '&#9889; Pattern Grouper';
+      });
+    });
+  }
+
+  // Unused Indexes: Index Planner
+  var indexPlannerBtn = el('unused-index-planner');
+  if (indexPlannerBtn) {
+    indexPlannerBtn.addEventListener('click', function() {
+      indexPlannerBtn.disabled = true;
+      indexPlannerBtn.innerHTML = '<span class="mg-spinner"></span> Planning...';
+      hide(el('unused-ai-result'));
+      aiCall(ROUTES.index_planner, {}, function(data) {
+        el('unused-ai-title').innerHTML = '<strong>&#9889; Index Consolidation Plan</strong>';
+        el('unused-ai-content').innerHTML = formatMarkdown(data.plan || data.raw || 'No plan generated.') + copyButton('unused-ai-content');
+        show(el('unused-ai-result'));
+        indexPlannerBtn.disabled = false;
+        indexPlannerBtn.innerHTML = '&#9889; Index Planner';
+      }, function(err) {
+        el('unused-ai-title').innerHTML = '<strong>&#9889; Error</strong>';
+        el('unused-ai-content').innerHTML = '<div class="mg-alert mg-alert-danger">' + escHtml(err) + '</div>';
+        show(el('unused-ai-result'));
+        indexPlannerBtn.disabled = false;
+        indexPlannerBtn.innerHTML = '&#9889; Index Planner';
+      });
+    });
+
+    el('unused-ai-close').addEventListener('click', function() { hide(el('unused-ai-result')); });
+  }
+
+  // Schema Review
+  var schemaBtn = el('schema-review-btn');
+  if (schemaBtn) {
+    schemaBtn.addEventListener('click', function() {
+      schemaBtn.disabled = true;
+      schemaBtn.innerHTML = '<span class="mg-spinner"></span> Analyzing...';
+      hide(el('schema-result'));
+      var table = el('schema-table').value;
+      aiCall(ROUTES.schema_review, { table: table }, function(data) {
+        el('schema-result-content').innerHTML = formatFindings(data.findings || data.raw || '') + copyButton('schema-result-content');
+        show(el('schema-result'));
+        schemaBtn.disabled = false;
+        schemaBtn.innerHTML = '&#9889; Analyze Schema';
+      }, function(err) {
+        el('schema-result-content').innerHTML = '<div class="mg-alert mg-alert-danger">' + escHtml(err) + '</div>';
+        show(el('schema-result'));
+        schemaBtn.disabled = false;
+        schemaBtn.innerHTML = '&#9889; Analyze Schema';
+      });
+    });
+  }
+
+  // Migration Risk
+  var migrationBtn = el('migration-assess-btn');
+  if (migrationBtn) {
+    migrationBtn.addEventListener('click', function() {
+      var migration = el('migration-input').value.trim();
+      if (!migration) {
+        el('migration-risk-badge').innerHTML = '';
+        el('migration-result-content').innerHTML = '<div class="mg-alert mg-alert-warning">Please paste a Rails migration or DDL statement above.</div>';
+        show(el('migration-result'));
+        return;
+      }
+      migrationBtn.disabled = true;
+      migrationBtn.innerHTML = '<span class="mg-spinner"></span> Assessing...';
+      hide(el('migration-result'));
+      aiCall(ROUTES.migration_risk, { migration: migration }, function(data) {
+        var level = (data.risk_level || '').toLowerCase();
+        var badgeClass = level === 'critical' ? 'mg-badge-danger' : level === 'high' ? 'mg-badge-danger' : level === 'medium' ? 'mg-badge-warning' : 'mg-badge-info';
+        el('migration-risk-badge').innerHTML = level ? '<span class="mg-badge ' + badgeClass + '" style="font-size:14px;padding:4px 12px;">Risk: ' + level.toUpperCase() + '</span>' : '';
+        el('migration-result-content').innerHTML = formatFindings(data.assessment || data.raw || '') + copyButton('migration-result-content');
+        show(el('migration-result'));
+        migrationBtn.disabled = false;
+        migrationBtn.innerHTML = '&#9889; Assess Risk';
+      }, function(err) {
+        el('migration-risk-badge').innerHTML = '';
+        el('migration-result-content').innerHTML = '<div class="mg-alert mg-alert-danger">' + escHtml(err) + '</div>';
+        show(el('migration-result'));
+        migrationBtn.disabled = false;
+        migrationBtn.innerHTML = '&#9889; Assess Risk';
+      });
+    });
+  }
+
+  // --- SQL to Builder sync ---
+
+  function parseSqlToBuilder(sql) {
+    if (!sql) return;
+    if (sql.match(/\b(JOIN|GROUP\s+BY|HAVING|UNION)\b/i) || (sql.match(/SELECT/gi) || []).length > 1) return;
+    var tableMatch = sql.match(/FROM\s+`?(\w+)`?/i);
+    if (!tableMatch) return;
+    var tableName = tableMatch[1];
+    if (!qs('#vb-table option[value="' + tableName + '"]')) return;
+
+    var colMatch = sql.match(/SELECT\s+(.*?)\s+FROM/i);
+    var selectedCols = [];
+    if (colMatch && colMatch[1].trim() !== '*') {
+      colMatch[1].split(',').forEach(function(p) { var n = p.trim().replace(/`/g, ''); if (n) selectedCols.push(n); });
+    }
+
+    var whereMatch = sql.match(/WHERE\s+(.*?)(?:\s+ORDER\s+BY\b|\s+LIMIT\b|\s*$)/i);
+    var conditions = whereMatch ? parseWhereClause(whereMatch[1]) : [];
+
+    var orderMatch = sql.match(/ORDER\s+BY\s+(.*?)(?:\s+LIMIT\b|\s*$)/i);
+    var orders = [];
+    if (orderMatch) {
+      orderMatch[1].split(',').forEach(function(p) {
+        var m = p.trim().match(/`?(\w+)`?\s*(ASC|DESC)?/i);
+        if (m) orders.push({ column: m[1], direction: (m[2] || 'ASC').toUpperCase() });
+      });
+    }
+
+    el('vb-table').value = tableName;
+    loadColumnsForTable(tableName, function() {
+      if (selectedCols.length) {
+        qsa('.vb-col-check').forEach(function(c) { c.checked = selectedCols.indexOf(c.value) !== -1; });
+      }
+      el('vb-filters').innerHTML = '';
+      conditions.forEach(function(cond) {
+        addFilterRow(true);
+        var row = el('vb-filters').lastElementChild;
+        qs('.vb-filter-col', row).value = cond.column;
+        var colType = columnTypeMap[cond.column] || 'string';
+        var opSel = qs('.vb-filter-op', row);
+        opSel.innerHTML = operatorsForType(colType).map(function(o) { return '<option>' + o + '</option>'; }).join('');
+        opSel.value = cond.operator;
+        updateValueInput(row, colType, cond.operator);
+        if (cond.operator !== 'IS NULL' && cond.operator !== 'IS NOT NULL') {
+          var valEl = qs('.vb-filter-val', row);
+          if (valEl) valEl.value = cond.value;
+          if (cond.operator === 'BETWEEN') { var endEl = qs('.vb-filter-val-end', row); if (endEl) endEl.value = cond.endValue; }
+        }
+      });
+      el('vb-orders').innerHTML = '';
+      orders.forEach(function(ord) {
+        addOrderRow(true);
+        var row = el('vb-orders').lastElementChild;
+        qs('.vb-order-col', row).value = ord.column;
+        qs('.vb-order-dir', row).value = ord.direction;
+      });
+      updateGeneratedSql();
+    });
+  }
+
+  function parseWhereClause(str) {
+    var conditions = [];
+    var betweenRe = /`?(\w+)`?\s+BETWEEN\s+'([^']*)'\s+AND\s+'([^']*)'/gi;
+    var m;
+    while ((m = betweenRe.exec(str)) !== null) conditions.push({ column: m[1], operator: 'BETWEEN', value: m[2], endValue: m[3] });
+    var remaining = str.replace(betweenRe, '{{B}}');
+    remaining.split(/\s+AND\s+/i).forEach(function(part) {
+      part = part.trim();
+      if (!part || part === '{{B}}') return;
+      var m;
+      if ((m = part.match(/`?(\w+)`?\s+IS\s+NOT\s+NULL/i))) { conditions.push({ column: m[1], operator: 'IS NOT NULL', value: '' }); return; }
+      if ((m = part.match(/`?(\w+)`?\s+IS\s+NULL/i))) { conditions.push({ column: m[1], operator: 'IS NULL', value: '' }); return; }
+      if ((m = part.match(/`?(\w+)`?\s+LIKE\s+'([^']*)'/i))) { conditions.push({ column: m[1], operator: 'LIKE', value: m[2] }); return; }
+      if ((m = part.match(/`?(\w+)`?\s*(!=|>=|<=|=|>|<)\s*'([^']*)'/))) { conditions.push({ column: m[1], operator: m[2], value: m[3] }); return; }
+      if ((m = part.match(/`?(\w+)`?\s*(!=|>=|<=|=|>|<)\s*(\d+\.?\d*)/))) { conditions.push({ column: m[1], operator: m[2], value: m[3] }); return; }
+    });
+    return conditions;
+  }
+
+  // --- Utilities ---
+
+  function setBtnLoading(ids, loading) {
+    ids.forEach(function(id) {
+      var btn = el(id);
+      if (!btn) return;
+      btn.disabled = loading;
+      if (loading) { btn.dataset.origHtml = btn.innerHTML; btn.innerHTML = '<span class="mg-spinner"></span>'; }
+      else if (btn.dataset.origHtml) { btn.innerHTML = btn.dataset.origHtml; }
+    });
+  }
+
+  function formatMarkdown(text) {
+    if (!text) return '';
+    // Normalize literal \n from JSON strings to actual newlines
+    text = text.replace(/\\n/g, '\n');
+    return text
+      .replace(/```sql\n?([\s\S]*?)```/g, '<pre class="mg-pre"><code>$1</code></pre>')
+      .replace(/```\n?([\s\S]*?)```/g, '<pre class="mg-pre"><code>$1</code></pre>')
+      .replace(/`([^`]+)`/g, '<code>$1</code>')
+      .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+      .replace(/^####\s+(.+)$/gm, '<h5 style="margin:12px 0 4px;">$1</h5>')
+      .replace(/^###\s+(.+)$/gm, '<h4 style="margin:16px 0 6px;">$1</h4>')
+      .replace(/^##\s+(.+)$/gm, '<h3 style="margin:20px 0 8px;">$1</h3>')
+      .replace(/^#\s+(.+)$/gm, '<h3 style="margin:20px 0 8px;">$1</h3>')
+      .replace(/^---+$/gm, '<hr style="margin:12px 0;">')
+      .replace(/^\d+\.\s+(.+)$/gm, '<li>$1</li>')
+      .replace(/^[-*]\s+(.+)$/gm, '<li>$1</li>')
+      .replace(/(<li>[\s\S]*?<\/li>)/g, '<ul style="margin:4px 0 4px 16px;padding:0;">$1</ul>')
+      .replace(/<\/ul>\s*<ul[^>]*>/g, '')
+      .replace(/\n\n/g, '<br><br>')
+      .replace(/\n/g, '<br>');
+  }
+
+  function formatFindings(text) {
+    if (!text) return '<div class="mg-text-muted">No findings.</div>';
+    text = text.replace(/\\n/g, '\n');
+
+    // Split into severity sections
+    var sections = [];
+    var current = null;
+    text.split('\n').forEach(function(line) {
+      var heading = line.match(/^#{1,3}\s+(.+)/);
+      if (heading) {
+        var title = heading[1].replace(/\*\*/g, '');
+        var severity = 'info';
+        var titleLower = title.toLowerCase();
+        if (titleLower.indexOf('critical') !== -1) severity = 'danger';
+        else if (titleLower.indexOf('warning') !== -1) severity = 'warning';
+        else if (titleLower.indexOf('suggestion') !== -1 || titleLower.indexOf('info') !== -1) severity = 'info';
+        current = { title: title, severity: severity, lines: [] };
+        sections.push(current);
+      } else if (current) {
+        current.lines.push(line);
+      } else {
+        if (!sections.length) sections.push({ title: '', severity: 'info', lines: [] });
+        if (!current) current = sections[0];
+        current.lines.push(line);
+      }
+    });
+
+    if (!sections.length) return formatMarkdown(text);
+
+    return sections.map(function(sec) {
+      var content = formatMarkdown(sec.lines.join('\n').trim());
+      if (!content || content === '<br>') return '';
+      return '<div class="mg-ai-section mg-ai-' + sec.severity + ' mg-mb">' +
+        (sec.title ? '<div class="mg-ai-section-header"><strong>' + escHtml(sec.title) + '</strong></div>' : '') +
+        '<div class="mg-ai-section-body">' + content + '</div></div>';
+    }).filter(function(s) { return s; }).join('');
+  }
+})();
+</script>