mysql_genius 0.1.1 → 0.3.1

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

@@ -1,27 +1,32 @@
-<h4>&#128024; MySQLGenius</h4>
+<div style="display:flex;align-items:center;justify-content:space-between;">
+  <h4>&#128024; MySQLGenius</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>
 
 <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 active" data-tab="dashboard">Dashboard</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>
+  <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 "mysql_genius/queries/tab_visual_builder" %>
-<%= render "mysql_genius/queries/tab_sql_query" %>
+<%= render "mysql_genius/queries/tab_dashboard" %>
 <%= 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" %>
+<%= render "mysql_genius/queries/tab_table_sizes" %>
+<%= render "mysql_genius/queries/tab_unused_indexes" %>
+<%= render "mysql_genius/queries/tab_duplicate_indexes" %>
+<%= render "mysql_genius/queries/tab_query_explorer" %>
 <% if @ai_enabled %>
   <%= render "mysql_genius/queries/tab_ai_tools" %>
 <% end %>
@@ -53,6 +58,8 @@
     migration_risk: '<%= mysql_genius.migration_risk_path %>'
   };
 
+  var RAILS_MIGRATION_VERSION = '<%= Rails::VERSION::MAJOR %>.<%= Rails::VERSION::MINOR %>';
+
   var csrfMeta = document.querySelector('meta[name="csrf-token"]');
   var csrfToken = csrfMeta ? csrfMeta.getAttribute('content') : '';
   var currentColumns = [];
@@ -69,6 +76,168 @@
   function hide(e) { e.classList.add('mg-hidden'); }
   function escHtml(s) { var d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
 
+  // --- 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) backtick 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 === '`') {
+        // Backtick-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);
@@ -117,18 +286,191 @@
 
   // --- 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);
+    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() {
-      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();
+    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
+    hide(el('dash-slow-table')); hide(el('dash-slow-empty'));
+    hide(el('dash-qstats-table')); hide(el('dash-qstats-empty')); hide(el('dash-qstats-error'));
+    el('dash-slow-tbody').innerHTML = '';
+    el('dash-qstats-tbody').innerHTML = '';
+    el('dash-dup-count').textContent = '--';
+    el('dash-unused-count').textContent = '--';
+
+    var loaded = { server: false, slow: false, 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(); });
+
+    // 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();
+    });
+
+    // 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) {
+          return '<tr>' +
+            '<td>' + sqlBlock(q.sql, 120) + '</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 count = Array.isArray(data) ? data.length : 0;
+      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'));
+      }
     });
   });
 
@@ -498,15 +840,14 @@
       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>';
+          '<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.';
@@ -522,10 +863,13 @@
     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');
+      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'));
     }
   });
 
@@ -548,10 +892,22 @@
           '<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>' +
+          '<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.';
@@ -560,6 +916,9 @@
   }
 
   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 ---
 
@@ -571,7 +930,7 @@
 
   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>';
+      '<div style="background:' + color + ';border-radius:3px;height:8px;width:' + Math.max(pct, 1) + '%;transition:width 0.3s;"></div></div>';
   }
 
   var PIE_COLORS = [
@@ -642,17 +1001,27 @@
         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></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><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) + '</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';
@@ -679,19 +1048,19 @@
       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>' +
+          '<td>' + sqlBlock(q.sql, 120) + '</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>';
@@ -727,13 +1096,25 @@
         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>' +
+          '<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'];
+      data.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>';
@@ -742,6 +1123,9 @@
   }
 
   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 ---
 

data/bin/console

@@ -1,4 +1,5 @@
 #!/usr/bin/env ruby
+# frozen_string_literal: true
 
 require "bundler/setup"
 require "mysql_genius"

data/config/routes.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 MysqlGenius::Engine.routes.draw do
   root to: "queries#index"