mysql_genius 0.1.0

data/app/views/mysql_genius/queries/index.html.erb

@@ -0,0 +1,1185 @@
+<h4>&#128024; MySQLGenius</h4>
+
+<div class="mg-tabs">
+  <button class="mg-tab active" data-tab="visual">Visual Builder</button>
+  <button class="mg-tab" data-tab="sql">SQL Query</button>
+  <button class="mg-tab" data-tab="slow">Slow Queries</button>
+  <button class="mg-tab" data-tab="indexes">Duplicate Indexes</button>
+  <button class="mg-tab" data-tab="sizes">Table Sizes</button>
+  <button class="mg-tab" data-tab="qstats">Query Stats</button>
+  <button class="mg-tab" data-tab="unused">Unused Indexes</button>
+  <button class="mg-tab" data-tab="server">Server</button>
+  <% if @ai_enabled %>
+    <button class="mg-tab" data-tab="aitools">AI Tools</button>
+  <% end %>
+</div>
+
+<%= render "mysql_genius/queries/tab_visual_builder" %>
+<%= render "mysql_genius/queries/tab_sql_query" %>
+<%= render "mysql_genius/queries/tab_slow_queries" %>
+<%= render "mysql_genius/queries/tab_duplicate_indexes" %>
+<%= render "mysql_genius/queries/tab_table_sizes" %>
+<%= render "mysql_genius/queries/tab_query_stats" %>
+<%= render "mysql_genius/queries/tab_unused_indexes" %>
+<%= render "mysql_genius/queries/tab_server" %>
+<% if @ai_enabled %>
+  <%= render "mysql_genius/queries/tab_ai_tools" %>
+<% end %>
+
+<%= render "mysql_genius/queries/shared_results" %>
+
+<script>
+(function() {
+  "use strict";
+
+  var ROUTES = {
+    columns:      '<%= mysql_genius.columns_path %>',
+    execute:      '<%= mysql_genius.execute_path %>',
+    explain:      '<%= mysql_genius.explain_path %>',
+    suggest:      '<%= mysql_genius.suggest_path %>',
+    optimize:     '<%= mysql_genius.optimize_path %>',
+    slow_queries: '<%= mysql_genius.slow_queries_path %>',
+    duplicate_indexes: '<%= mysql_genius.duplicate_indexes_path %>',
+    table_sizes: '<%= mysql_genius.table_sizes_path %>',
+    query_stats: '<%= mysql_genius.query_stats_path %>',
+    unused_indexes: '<%= mysql_genius.unused_indexes_path %>',
+    server_overview: '<%= mysql_genius.server_overview_path %>',
+    describe_query: '<%= mysql_genius.describe_query_path %>',
+    schema_review: '<%= mysql_genius.schema_review_path %>',
+    rewrite_query: '<%= mysql_genius.rewrite_query_path %>',
+    index_advisor: '<%= mysql_genius.index_advisor_path %>',
+    anomaly_detection: '<%= mysql_genius.anomaly_detection_path %>',
+    root_cause: '<%= mysql_genius.root_cause_path %>',
+    migration_risk: '<%= mysql_genius.migration_risk_path %>'
+  };
+
+  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 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 ---
+
+  qsa('.mg-tab').forEach(function(tab) {
+    tab.addEventListener('click', function() {
+      qsa('.mg-tab').forEach(function(t) { t.classList.remove('active'); });
+      qsa('.mg-tab-content').forEach(function(c) { c.classList.remove('active'); });
+      tab.classList.add('active');
+      el('tab-' + tab.dataset.tab).classList.add('active');
+      if (tab.dataset.tab === 'slow') loadSlowQueries();
+      if (tab.dataset.tab === 'indexes') loadDuplicateIndexes();
+      if (tab.dataset.tab === 'sizes') loadTableSizes();
+      if (tab.dataset.tab === 'qstats') loadQueryStats();
+      if (tab.dataset.tab === 'unused') loadUnusedIndexes();
+      if (tab.dataset.tab === 'server') loadServerOverview();
+    });
+  });
+
+  // --- 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('`' + c.value + '`'); });
+    if (!cols.length) cols = ['*'];
+    var sql = 'SELECT ' + cols.join(', ') + ' FROM `' + 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('`' + col + '` ' + op);
+      } else if (op === 'BETWEEN') {
+        var endEl = qs('.vb-filter-val-end', row);
+        var endVal = endEl ? endEl.value : '';
+        wheres.push("`" + col + "` BETWEEN '" + val.replace(/'/g, "''") + "' AND '" + endVal.replace(/'/g, "''") + "'");
+      } else if (op === 'LIKE') {
+        wheres.push("`" + col + "` LIKE '" + val.replace(/'/g, "''") + "'");
+      } else {
+        wheres.push("`" + 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('`' + 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('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 = '';
+  }
+
+  function renderResults(data) {
+    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')); });
+
+  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.');
+        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';
+        var sqlEsc = escHtml(q.sql);
+        var sqlShort = sqlEsc.length > 200 ? sqlEsc.substring(0, 200) + '...' : sqlEsc;
+        return '<tr><td><span class="mg-badge ' + cls + '">' + d + ' ms</span></td>' +
+          '<td><small>' + escHtml(q.timestamp) + '</small></td>' +
+          '<td><code title="' + sqlEsc + '">' + sqlShort + '</code></td>' +
+          '<td><button class="mg-btn mg-btn-outline mg-btn-sm slow-explain-btn" data-sql="' + sqlEsc.replace(/"/g, '&quot;') + '">Explain</button> ' +
+          '<button class="mg-btn mg-btn-outline-secondary mg-btn-sm slow-use-btn" data-sql="' + sqlEsc.replace(/"/g, '&quot;') + '">Use</button></td></tr>';
+      }).join('');
+      show(el('slow-table-wrapper'));
+    }, function() {
+      hide(el('slow-loading'));
+      el('slow-empty').textContent = 'Failed to load slow queries.';
+      show(el('slow-empty'));
+    });
+  }
+
+  el('slow-refresh').addEventListener('click', loadSlowQueries);
+
+  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;
+      qsa('.mg-tab').forEach(function(t) { t.classList.remove('active'); });
+      qsa('.mg-tab-content').forEach(function(c) { c.classList.remove('active'); });
+      qs('[data-tab="sql"]').classList.add('active');
+      el('tab-sql').classList.add('active');
+    }
+  });
+
+  // --- 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 = '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><code style="font-size:11px;user-select:all;cursor:pointer;" title="Click to select">' + escHtml(dropSql) + '</code></td>' +
+          '</tr>';
+      }).join('');
+      show(el('dup-table-wrapper'));
+    }, function() {
+      hide(el('dup-loading'));
+      el('dup-empty').textContent = 'Failed to scan indexes.';
+      show(el('dup-empty'));
+    });
+  }
+
+  el('dup-refresh').addEventListener('click', loadDuplicateIndexes);
+
+  // --- 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) + '%;"></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() : '?';
+        return '<tr>' +
+          '<td><strong>' + escHtml(t.table) + '</strong></td>' +
+          '<td style="text-align:right">' + rows + '</td>' +
+          '<td style="text-align:right">' + formatMb(t.data_mb) + '</td>' +
+          '<td style="text-align:right">' + formatMb(t.index_mb) + '</td>' +
+          '<td style="text-align:right"><strong>' + formatMb(t.total_mb) + '</strong></td>' +
+          '<td style="text-align:right">' + (t.fragmented_mb > 0 ? formatMb(t.fragmented_mb) : '-') + '</td>' +
+          '<td>' + sizeBar(pct, color) + '</td>' +
+          '</tr>';
+      }).join('');
+      show(el('sizes-table-wrapper'));
+    }, function() {
+      hide(el('sizes-loading'));
+      el('sizes-total').textContent = 'Failed to load';
+    });
+  }
+
+  el('sizes-refresh').addEventListener('click', loadTableSizes);
+
+  // --- 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 = '';
+
+    var sort = el('qstats-sort').value;
+    ajaxGet(ROUTES.query_stats, { sort: sort }, 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 sqlShort = q.sql.length > 120 ? q.sql.substring(0, 120) + '...' : q.sql;
+        return '<tr>' +
+          '<td><code style="font-size:11px;word-break:break-all;" title="' + escHtml(q.sql) + '">' + escHtml(sqlShort) + '</code></td>' +
+          '<td style="text-align:right">' + Number(q.calls).toLocaleString() + '</td>' +
+          '<td style="text-align:right">' + formatDuration(q.total_time_ms) + '</td>' +
+          '<td style="text-align:right">' + formatDuration(q.avg_time_ms) + '</td>' +
+          '<td style="text-align:right">' + formatDuration(q.max_time_ms) + '</td>' +
+          '<td style="text-align:right">' + Number(q.rows_examined).toLocaleString() + '</td>' +
+          '<td style="text-align:right">' + Number(q.rows_sent).toLocaleString() + '</td>' +
+          '<td style="text-align:right">' + (ratioClass ? '<span class="mg-badge ' + ratioClass + '">' + q.rows_ratio + 'x</span>' : q.rows_ratio + 'x') + '</td>' +
+          '</tr>';
+      }).join('');
+      show(el('qstats-table-wrapper'));
+    }, 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';
+  }
+
+  el('qstats-refresh').addEventListener('click', loadQueryStats);
+  el('qstats-sort').addEventListener('change', loadQueryStats);
+
+  // --- 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;
+      }
+      if (!data.length) { show(el('unused-empty')); el('unused-count').textContent = '0'; return; }
+      el('unused-count').textContent = data.length + ' found';
+      el('unused-tbody').innerHTML = data.map(function(d) {
+        return '<tr>' +
+          '<td><strong>' + escHtml(d.table) + '</strong></td>' +
+          '<td><code>' + escHtml(d.index_name) + '</code></td>' +
+          '<td style="text-align:right">' + d.reads + '</td>' +
+          '<td style="text-align:right">' + Number(d.writes).toLocaleString() + '</td>' +
+          '<td style="text-align:right">' + Number(d.table_rows).toLocaleString() + '</td>' +
+          '<td><code style="font-size:11px;user-select:all;cursor:pointer;" title="Click to select">' + escHtml(d.drop_sql) + '</code></td>' +
+          '</tr>';
+      }).join('');
+      show(el('unused-table-wrapper'));
+    }, 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);
+
+  // --- 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 showAiQueryResult(title, html) {
+    el('ai-query-title').innerHTML = '<strong>&#9889; ' + escHtml(title) + '</strong>';
+    el('ai-query-content').innerHTML = html;
+    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.');
+        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';
+      });
+    });
+  }
+
+  // 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.');
+        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.');
+        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';
+      });
+    });
+  }
+
+  // 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 || '');
+        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 || '');
+        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);
+
+    var badgeColors = { danger: '#dc3545', warning: '#ffc107', info: '#17a2b8' };
+    var bgColors = { danger: '#fff5f5', warning: '#fffbeb', info: '#f0f9ff' };
+    var borderColors = { danger: '#f5c6cb', warning: '#ffeeba', info: '#bee5eb' };
+
+    return sections.map(function(sec) {
+      var content = formatMarkdown(sec.lines.join('\n').trim());
+      if (!content || content === '<br>') return '';
+      var badge = badgeColors[sec.severity] || badgeColors.info;
+      var bg = bgColors[sec.severity] || bgColors.info;
+      var border = borderColors[sec.severity] || borderColors.info;
+      return '<div class="mg-card mg-mb" style="border-left:4px solid ' + badge + ';background:' + bg + ';border-color:' + border + ';">' +
+        (sec.title ? '<div class="mg-card-header" style="background:transparent;border-bottom:1px solid ' + border + ';"><strong>' + escHtml(sec.title) + '</strong></div>' : '') +
+        '<div class="mg-card-body" style="font-size:13px;">' + content + '</div></div>';
+    }).filter(function(s) { return s; }).join('');
+  }
+})();
+</script>