mysql_genius 0.1.1 → 0.3.1

data/app/controllers/concerns/mysql_genius/query_execution.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module MysqlGenius
   module QueryExecution
     extend ActiveSupport::Concern
@@ -5,15 +7,15 @@ module MysqlGenius
     def execute
       sql = params[:sql].to_s.strip
       row_limit = if params[:row_limit].present?
-                    [[params[:row_limit].to_i, 1].max, mysql_genius_config.max_row_limit].min
-                  else
-                    mysql_genius_config.default_row_limit
-                  end
+        params[:row_limit].to_i.clamp(1, mysql_genius_config.max_row_limit)
+      else
+        mysql_genius_config.default_row_limit
+      end
 
       error = validate_sql(sql)
       if error
         audit(:rejection, sql: sql, reason: error)
-        return render json: { error: error }, status: :unprocessable_entity
+        return render(json: { error: error }, status: :unprocessable_entity)
       end
 
       limited_sql = apply_row_limit(sql, row_limit)
@@ -35,20 +37,20 @@ module MysqlGenius
 
         audit(:query, sql: sql, execution_time_ms: execution_time_ms, row_count: rows.length)
 
-        render json: {
+        render(json: {
           columns: columns,
           rows: rows,
           row_count: rows.length,
           execution_time_ms: execution_time_ms,
-          truncated: truncated
-        }
+          truncated: truncated,
+        })
       rescue ActiveRecord::StatementInvalid => e
         if timeout_error?(e)
           audit(:error, sql: sql, error: "Query timeout")
-          render json: { error: "Query exceeded the #{mysql_genius_config.query_timeout_ms / 1000} second timeout limit.", timeout: true }, status: :unprocessable_entity
+          render(json: { error: "Query exceeded the #{mysql_genius_config.query_timeout_ms / 1000} second timeout limit.", timeout: true }, status: :unprocessable_entity)
         else
           audit(:error, sql: sql, error: e.message)
-          render json: { error: "Query error: #{e.message.split(':').last.strip}" }, status: :unprocessable_entity
+          render(json: { error: "Query error: #{e.message.split(":").last.strip}" }, status: :unprocessable_entity)
         end
       end
     end
@@ -59,20 +61,20 @@ module MysqlGenius
 
       unless skip_validation
         error = validate_sql(sql)
-        return render json: { error: error }, status: :unprocessable_entity if error
+        return render(json: { error: error }, status: :unprocessable_entity) if error
       end
 
       # Reject truncated SQL (captured slow queries are capped at 2000 chars)
       unless sql.match?(/\)\s*$/) || sql.match?(/\w\s*$/) || sql.match?(/['"`]\s*$/) || sql.match?(/\d\s*$/)
-        return render json: { error: "This query appears to be truncated and cannot be explained." }, status: :unprocessable_entity
+        return render(json: { error: "This query appears to be truncated and cannot be explained." }, status: :unprocessable_entity)
       end
 
-      explain_sql = "EXPLAIN #{sql.gsub(/;\s*\z/, '')}"
+      explain_sql = "EXPLAIN #{sql.gsub(/;\s*\z/, "")}"
       results = ActiveRecord::Base.connection.exec_query(explain_sql)
 
-      render json: { columns: results.columns, rows: results.rows }
+      render(json: { columns: results.columns, rows: results.rows })
     rescue ActiveRecord::StatementInvalid => e
-      render json: { error: "Explain error: #{e.message.split(':').last.strip}" }, status: :unprocessable_entity
+      render(json: { error: "Explain error: #{e.message.split(":").last.strip}" }, status: :unprocessable_entity)
     end
 
     private
@@ -108,7 +110,7 @@ module MysqlGenius
     end
 
     def sanitize_ai_sql(sql)
-      sql.gsub(/```(?:sql)?\s*/i, "").gsub(/```/, "").strip
+      sql.gsub(/```(?:sql)?\s*/i, "").gsub("```", "").strip
     end
 
     def audit(type, **attrs)

data/app/controllers/mysql_genius/base_controller.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module MysqlGenius
   class BaseController < MysqlGenius.configuration.base_controller.constantize
     layout "mysql_genius/application"
@@ -7,7 +9,7 @@ module MysqlGenius
 
     def authenticate_mysql_genius!
       unless MysqlGenius.configuration.authenticate.call(self)
-        render plain: "Not authorized", status: :unauthorized
+        render(plain: "Not authorized", status: :unauthorized)
       end
     end
 

data/app/controllers/mysql_genius/queries_controller.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module MysqlGenius
   class QueriesController < BaseController
     include QueryExecution
@@ -6,10 +8,10 @@ module MysqlGenius
 
     def index
       @featured_tables = if mysql_genius_config.featured_tables.any?
-                           mysql_genius_config.featured_tables.sort
-                         else
-                           queryable_tables.sort
-                         end
+        mysql_genius_config.featured_tables.sort
+      else
+        queryable_tables.sort
+      end
       @all_tables = queryable_tables.sort
       @ai_enabled = mysql_genius_config.ai_enabled?
     end
@@ -17,32 +19,37 @@ module MysqlGenius
     def columns
       table = params[:table]
       if mysql_genius_config.blocked_tables.include?(table)
-        return render json: { error: "Table '#{table}' is not available for querying." }, status: :forbidden
+        return render(json: { error: "Table '#{table}' is not available for querying." }, status: :forbidden)
       end
 
       unless ActiveRecord::Base.connection.tables.include?(table)
-        return render json: { error: "Table '#{table}' does not exist." }, status: :not_found
+        return render(json: { error: "Table '#{table}' does not exist." }, status: :not_found)
       end
 
       defaults = mysql_genius_config.default_columns[table] || []
       cols = ActiveRecord::Base.connection.columns(table).reject { |c| masked_column?(c.name) }.map do |c|
         { name: c.name, type: c.type.to_s, default: defaults.empty? || defaults.include?(c.name) }
       end
-      render json: cols
+      render(json: cols)
     end
 
     def slow_queries
       unless mysql_genius_config.redis_url.present?
-        return render json: { error: "Slow query monitoring is not configured." }, status: :not_found
+        return render(json: [], status: :ok)
       end
 
+      require "redis"
       redis = Redis.new(url: mysql_genius_config.redis_url)
       key = SlowQueryMonitor.redis_key
       raw = redis.lrange(key, 0, 199)
-      queries = raw.map { |entry| JSON.parse(entry) rescue nil }.compact
-      render json: queries
-    rescue => e
-      render json: [], status: :ok
+      queries = raw.map do |entry|
+        JSON.parse(entry)
+      rescue JSON::ParserError
+        nil
+      end.compact
+      render(json: queries)
+    rescue StandardError => e
+      render(json: { error: "Slow query error: #{e.message}" }, status: :unprocessable_entity)
     end
 
     private

data/app/services/mysql_genius/ai_client.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require "net/http"
 require "json"
 require "uri"
@@ -20,7 +22,7 @@ module MysqlGenius
       body = {
         messages: messages,
         response_format: { type: "json_object" },
-        temperature: temperature
+        temperature: temperature,
       }
       body[:model] = @config.ai_model if @config.ai_model && !@config.ai_model.empty?
 
@@ -28,7 +30,7 @@ module MysqlGenius
       parsed = JSON.parse(response.body)
 
       if parsed["error"]
-        raise Error, "AI API error: #{parsed['error']['message'] || parsed['error']}"
+        raise Error, "AI API error: #{parsed["error"]["message"] || parsed["error"]}"
       end
 
       content = parsed.dig("choices", 0, "message", "content")
@@ -60,6 +62,11 @@ module MysqlGenius
 
       http = Net::HTTP.new(uri.host, uri.port)
       http.use_ssl = uri.scheme == "https"
+      if http.use_ssl?
+        http.verify_mode = OpenSSL::SSL::VERIFY_PEER
+        cert_file = ENV["SSL_CERT_FILE"] || OpenSSL::X509::DEFAULT_CERT_FILE
+        http.ca_file = cert_file if File.exist?(cert_file)
+      end
       http.open_timeout = 10
       http.read_timeout = 60
 

data/app/services/mysql_genius/ai_optimization_service.rb

@@ -1,10 +1,12 @@
+# frozen_string_literal: true
+
 module MysqlGenius
   class AiOptimizationService
     def call(sql, explain_rows, allowed_tables)
       schema = build_schema_description(allowed_tables)
       messages = [
         { role: "system", content: system_prompt(schema) },
-        { role: "user", content: user_prompt(sql, explain_rows) }
+        { role: "user", content: user_prompt(sql, explain_rows) },
       ]
 
       AiClient.new.chat(messages: messages)
@@ -38,6 +40,7 @@ module MysqlGenius
 
     def format_explain(explain_rows)
       return explain_rows if explain_rows.is_a?(String)
+
       explain_rows.map { |row| row.join(" | ") }.join("\n")
     end
 
@@ -45,10 +48,11 @@ module MysqlGenius
       connection = ActiveRecord::Base.connection
       allowed_tables.map do |table|
         next unless connection.tables.include?(table)
+
         columns = connection.columns(table).map { |c| "#{c.name} (#{c.type})" }
-        indexes = connection.indexes(table).map { |idx| "#{idx.name}: [#{idx.columns.join(', ')}]#{idx.unique ? ' UNIQUE' : ''}" }
-        desc = "#{table}: #{columns.join(', ')}"
-        desc += "\n  Indexes: #{indexes.join('; ')}" if indexes.any?
+        indexes = connection.indexes(table).map { |idx| "#{idx.name}: [#{idx.columns.join(", ")}]#{" UNIQUE" if idx.unique}" }
+        desc = "#{table}: #{columns.join(", ")}"
+        desc += "\n  Indexes: #{indexes.join("; ")}" if indexes.any?
         desc
       end.compact.join("\n")
     end

data/app/services/mysql_genius/ai_suggestion_service.rb

@@ -1,10 +1,12 @@
+# frozen_string_literal: true
+
 module MysqlGenius
   class AiSuggestionService
     def call(user_prompt, allowed_tables)
       schema = build_schema_description(allowed_tables)
       messages = [
         { role: "system", content: system_prompt(schema) },
-        { role: "user", content: user_prompt }
+        { role: "user", content: user_prompt },
       ]
 
       AiClient.new.chat(messages: messages)
@@ -48,8 +50,9 @@ module MysqlGenius
       connection = ActiveRecord::Base.connection
       allowed_tables.map do |table|
         next unless connection.tables.include?(table)
+
         columns = connection.columns(table).map { |c| "#{c.name} (#{c.type})" }
-        "#{table}: #{columns.join(', ')}"
+        "#{table}: #{columns.join(", ")}"
       end.compact.join("\n")
     end
   end

data/app/views/layouts/mysql_genius/application.html.erb

@@ -53,6 +53,7 @@
     .mg-badge-warning { background: #fff3cd; color: #856404; }
     .mg-badge-danger { background: #f8d7da; color: #721c24; }
     .mg-badge-secondary { background: #e2e3e5; color: #383d41; }
+    .mg-badge-success { background: #d4edda; color: #155724; }
 
     /* Alert */
     .mg-alert { padding: 10px 14px; border-radius: 4px; margin-bottom: 12px; font-size: 13px; }
@@ -77,13 +78,50 @@
 
     /* Table */
     .mg-table-wrap { overflow-x: auto; }
-    table.mg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
-    .mg-table th, .mg-table td { padding: 4px 8px; border: 1px solid #dee2e6; text-align: left; }
-    .mg-table th { background: #f8f9fa; font-weight: 500; white-space: nowrap; }
-    .mg-table tr:nth-child(even) { background: #f8f9fa; }
+    table.mg-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
+    .mg-table th { padding: 10px 12px; text-align: left; white-space: nowrap; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #5a6770; background: #f1f3f5; border-bottom: 2px solid #d0d7de; user-select: none; }
+    .mg-table th.mg-sortable { cursor: pointer; position: relative; padding-right: 20px; }
+    .mg-table th.mg-sortable:hover { color: #333; }
+    .mg-table th.mg-sortable::after { content: '\2195'; position: absolute; right: 6px; opacity: 0.3; font-size: 10px; }
+    .mg-table th.mg-sort-asc::after { content: '\2191'; opacity: 0.8; }
+    .mg-table th.mg-sort-desc::after { content: '\2193'; opacity: 0.8; }
+    .mg-table th:first-child { border-top-left-radius: 6px; }
+    .mg-table th:last-child { border-top-right-radius: 6px; }
+    .mg-table td { padding: 8px 12px; border-bottom: 1px solid #eaecef; vertical-align: top; }
+    .mg-table tbody tr { transition: background-color 0.15s ease; }
+    .mg-table tbody tr:hover { background: #f0f6ff; }
+    .mg-table tbody tr:nth-child(even) { background: #fafbfc; }
+    .mg-table tbody tr:nth-child(even):hover { background: #f0f6ff; }
+    .mg-table tbody tr:last-child td { border-bottom: none; }
     .mg-table em.null { color: #999; font-style: italic; }
     .mg-table .redacted { color: #999; }
 
+    /* Numeric table cells */
+    .mg-table td.mg-num { text-align: right; font-variant-numeric: tabular-nums; font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace; font-size: 12px; white-space: nowrap; }
+
+    /* SQL code blocks in tables */
+    .mg-sql-block { display: block; padding: 6px 8px; background: #1e1e2e; color: #cdd6f4; border-radius: 5px; font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.5; word-break: break-word; white-space: pre-wrap; max-height: 120px; overflow-y: auto; border: 1px solid #313244; }
+    .mg-sql-block::-webkit-scrollbar { width: 4px; }
+    .mg-sql-block::-webkit-scrollbar-track { background: transparent; }
+    .mg-sql-block::-webkit-scrollbar-thumb { background: #585b70; border-radius: 2px; }
+
+    /* SQL syntax colors (Catppuccin Mocha inspired) */
+    .mg-sql-kw { color: #cba6f7; font-weight: 600; }
+    .mg-sql-fn { color: #89b4fa; }
+    .mg-sql-str { color: #a6e3a1; }
+    .mg-sql-num { color: #fab387; }
+    .mg-sql-op { color: #89dceb; }
+    .mg-sql-comment { color: #6c7086; font-style: italic; }
+    .mg-sql-tbl { color: #f9e2af; }
+    .mg-sql-star { color: #f38ba8; font-weight: 700; }
+    .mg-sql-punc { color: #9399b2; }
+    .mg-sql-placeholder { color: #74c7ec; font-style: italic; }
+
+    /* Duration color coding */
+    .mg-dur-fast { color: #1a7f37; }
+    .mg-dur-moderate { color: #9a6700; }
+    .mg-dur-slow { color: #cf222e; font-weight: 600; }
+
     /* Checkbox grid */
     .mg-checks { display: flex; flex-wrap: wrap; gap: 4px 16px; }
     .mg-check { display: flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; }
@@ -104,11 +142,115 @@
     .mg-mb { margin-bottom: 12px; }
     .mg-text-muted { color: #888; font-size: 13px; }
     .mg-text-center { text-align: center; padding: 24px 0; }
-    code { font-size: 12px; word-break: break-all; background: #f4f4f4; padding: 1px 4px; border-radius: 2px; }
+    code { font-size: 12px; word-break: break-all; background: #f0f1f3; padding: 2px 6px; border-radius: 3px; color: #24292f; }
     pre.mg-pre { background: #f4f4f4; padding: 10px; border-radius: 4px; overflow-x: auto; font-size: 12px; }
+
+    /* Theme toggle */
+    .mg-theme-toggle { background: none; border: 1px solid #ced4da; border-radius: 4px; padding: 4px 8px; cursor: pointer; font-size: 14px; line-height: 1; color: inherit; }
+    .mg-theme-toggle:hover { background: #e9ecef; }
+
+    /* --- Dark Theme --- */
+    [data-theme="dark"] body,
+    [data-theme="dark"] { background: #161b22; color: #c9d1d9; }
+    [data-theme="dark"] .mg-container { color: #c9d1d9; }
+
+    /* Tabs */
+    [data-theme="dark"] .mg-tabs { border-bottom-color: #30363d; }
+    [data-theme="dark"] .mg-tab { color: #8b949e; }
+    [data-theme="dark"] .mg-tab:hover { color: #c9d1d9; }
+    [data-theme="dark"] .mg-tab.active { background: #0d1117; border-color: #30363d; border-bottom-color: #0d1117; color: #c9d1d9; }
+    [data-theme="dark"] .mg-tab-content { background: #0d1117; border-color: #30363d; }
+
+    /* Forms */
+    [data-theme="dark"] select,
+    [data-theme="dark"] input[type="number"],
+    [data-theme="dark"] input[type="text"],
+    [data-theme="dark"] textarea { background: #0d1117; color: #c9d1d9; border-color: #30363d; }
+    [data-theme="dark"] select:focus,
+    [data-theme="dark"] input:focus,
+    [data-theme="dark"] textarea:focus { border-color: #58a6ff; box-shadow: 0 0 0 2px rgba(88,166,255,.15); }
+    [data-theme="dark"] textarea[readonly] { background: #161b22; }
+    [data-theme="dark"] label { color: #c9d1d9; }
+
+    /* Buttons */
+    [data-theme="dark"] .mg-btn-primary { background: #238636; border-color: #238636; }
+    [data-theme="dark"] .mg-btn-primary:hover:not(:disabled) { background: #2ea043; }
+    [data-theme="dark"] .mg-btn-outline { background: #0d1117; color: #58a6ff; border-color: #30363d; }
+    [data-theme="dark"] .mg-btn-outline:hover:not(:disabled) { background: #161b22; border-color: #58a6ff; }
+    [data-theme="dark"] .mg-btn-outline-secondary { background: #0d1117; color: #8b949e; border-color: #30363d; }
+    [data-theme="dark"] .mg-btn-outline-secondary:hover:not(:disabled) { background: #161b22; }
+    [data-theme="dark"] .mg-btn-outline-danger { background: #0d1117; color: #f85149; border-color: #30363d; }
+    [data-theme="dark"] .mg-btn-outline-danger:hover:not(:disabled) { background: #1c0d0d; }
+
+    /* Badges */
+    [data-theme="dark"] .mg-badge-info { background: #0d2a3a; color: #58a6ff; }
+    [data-theme="dark"] .mg-badge-warning { background: #2d2000; color: #d29922; }
+    [data-theme="dark"] .mg-badge-danger { background: #2d0d0d; color: #f85149; }
+    [data-theme="dark"] .mg-badge-secondary { background: #21262d; color: #8b949e; }
+    [data-theme="dark"] .mg-badge-success { background: #0d2d1a; color: #3fb950; }
+
+    /* Alerts */
+    [data-theme="dark"] .mg-alert-danger { background: #2d0d0d; color: #f85149; border-color: #3d1414; }
+    [data-theme="dark"] .mg-alert-warning { background: #2d2000; color: #d29922; border-color: #3d2e00; }
+    [data-theme="dark"] .mg-alert-info { background: #0d2a3a; color: #58a6ff; border-color: #0d3a5a; }
+
+    /* Cards */
+    [data-theme="dark"] .mg-card { border-color: #30363d; }
+    [data-theme="dark"] .mg-card-header { background: #161b22; border-bottom-color: #30363d; color: #c9d1d9; }
+    [data-theme="dark"] .mg-card-toggle { color: #58a6ff; }
+
+    /* Stat grid */
+    [data-theme="dark"] .mg-stat-grid .mg-stat-label { color: #8b949e; }
+    [data-theme="dark"] .mg-usage-bar { background: #21262d; }
+
+    /* Tables */
+    [data-theme="dark"] .mg-table th { background: #161b22; color: #8b949e; border-bottom-color: #30363d; }
+    [data-theme="dark"] .mg-table th.mg-sortable:hover { color: #c9d1d9; }
+    [data-theme="dark"] .mg-table td { border-bottom-color: #21262d; }
+    [data-theme="dark"] .mg-table tbody tr:hover { background: #1c2128; }
+    [data-theme="dark"] .mg-table tbody tr:nth-child(even) { background: #0d1117; }
+    [data-theme="dark"] .mg-table tbody tr:nth-child(even):hover { background: #1c2128; }
+    [data-theme="dark"] .mg-table em.null { color: #484f58; }
+    [data-theme="dark"] .mg-table .redacted { color: #484f58; }
+
+    /* Duration colors (dark) */
+    [data-theme="dark"] .mg-dur-fast { color: #3fb950; }
+    [data-theme="dark"] .mg-dur-moderate { color: #d29922; }
+    [data-theme="dark"] .mg-dur-slow { color: #f85149; }
+
+    /* Inline code */
+    [data-theme="dark"] code { background: #21262d; color: #c9d1d9; }
+    [data-theme="dark"] pre.mg-pre { background: #161b22; color: #c9d1d9; }
+
+    /* Links */
+    [data-theme="dark"] .mg-link { color: #58a6ff; }
+
+    /* Spinner */
+    [data-theme="dark"] .mg-spinner { border-color: #30363d; border-top-color: #58a6ff; }
+
+    /* Text */
+    [data-theme="dark"] .mg-text-muted { color: #8b949e; }
+
+    /* Checkboxes */
+    [data-theme="dark"] .mg-check .type-hint { color: #484f58; }
+
+    /* Theme toggle (dark) */
+    [data-theme="dark"] .mg-theme-toggle { border-color: #30363d; color: #c9d1d9; }
+    [data-theme="dark"] .mg-theme-toggle:hover { background: #21262d; }
+
+    /* Database switcher (dark) */
+    [data-theme="dark"] .mg-db-switcher select { background: #0d1117; color: #c9d1d9; border-color: #30363d; }
+    [data-theme="dark"] .mg-db-badge { background: #0d2a3a; color: #58a6ff; }
   </style>
 </head>
 <body>
+  <script>
+    (function() {
+      var saved = localStorage.getItem('mg-theme');
+      var theme = saved || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+      document.documentElement.setAttribute('data-theme', theme);
+    })();
+  </script>
   <div class="mg-container">
     <%= yield %>
   </div>

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

@@ -0,0 +1,95 @@
+<!-- Dashboard Tab -->
+<div class="mg-tab-content active" id="tab-dashboard">
+  <div id="dash-loading" class="mg-text-center"><span class="mg-spinner"></span> Loading dashboard...</div>
+  <div id="dash-error" class="mg-hidden"></div>
+  <div id="dash-content" class="mg-hidden">
+
+    <!-- Server Summary -->
+    <div class="mg-card mg-mb">
+      <div class="mg-card-header" style="display:flex;justify-content:space-between;align-items:center;">
+        <strong>Server</strong>
+        <button class="mg-btn mg-btn-outline-secondary mg-btn-sm dash-jump-tab" data-target="server">Details &rarr;</button>
+      </div>
+    </div>
+    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:16px;">
+      <div class="mg-card">
+        <div class="mg-card-header"><strong>Overview</strong></div>
+        <div class="mg-card-body">
+          <div class="mg-stat-grid" id="dash-server-info"></div>
+        </div>
+      </div>
+      <div class="mg-card">
+        <div class="mg-card-header"><strong>Connections</strong></div>
+        <div class="mg-card-body">
+          <div id="dash-conn-bar" style="margin-bottom:8px;"></div>
+          <div class="mg-stat-grid" id="dash-conn-info"></div>
+        </div>
+      </div>
+      <div class="mg-card">
+        <div class="mg-card-header"><strong>InnoDB Buffer Pool</strong></div>
+        <div class="mg-card-body">
+          <div id="dash-innodb-bar" style="margin-bottom:8px;"></div>
+          <div class="mg-stat-grid" id="dash-innodb-info"></div>
+        </div>
+      </div>
+      <div class="mg-card">
+        <div class="mg-card-header"><strong>Query Activity</strong></div>
+        <div class="mg-card-body">
+          <div class="mg-stat-grid" id="dash-query-info"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Top 5 Slow Queries -->
+    <div class="mg-card mg-mb">
+      <div class="mg-card-header" style="display:flex;justify-content:space-between;align-items:center;">
+        <strong>Slow Queries</strong>
+        <button class="mg-btn mg-btn-outline-secondary mg-btn-sm dash-jump-tab" data-target="slow">View all &rarr;</button>
+      </div>
+      <div class="mg-card-body">
+        <div id="dash-slow-empty" class="mg-text-muted mg-hidden"></div>
+        <div id="dash-slow-table" class="mg-table-wrap mg-hidden">
+          <table class="mg-table">
+            <thead><tr><th style="width:100px">Duration</th><th style="width:160px">Time</th><th>SQL</th></tr></thead>
+            <tbody id="dash-slow-tbody"></tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- Top 5 Expensive Queries -->
+    <div class="mg-card mg-mb">
+      <div class="mg-card-header" style="display:flex;justify-content:space-between;align-items:center;">
+        <strong>Most Expensive Queries</strong>
+        <button class="mg-btn mg-btn-outline-secondary mg-btn-sm dash-jump-tab" data-target="qstats">View all &rarr;</button>
+      </div>
+      <div class="mg-card-body">
+        <div id="dash-qstats-empty" class="mg-text-muted mg-hidden"></div>
+        <div id="dash-qstats-error" class="mg-hidden"></div>
+        <div id="dash-qstats-table" class="mg-table-wrap mg-hidden">
+          <table class="mg-table">
+            <thead><tr><th>Query</th><th style="text-align:right">Calls</th><th style="text-align:right">Total Time</th><th style="text-align:right">Avg Time</th></tr></thead>
+            <tbody id="dash-qstats-tbody"></tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- Index Alerts -->
+    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;">
+      <div class="mg-card dash-jump-tab" data-target="indexes" style="cursor:pointer;">
+        <div class="mg-card-body mg-text-center">
+          <div id="dash-dup-count" style="font-size:24px;font-weight:700;">--</div>
+          <div class="mg-text-muted">Duplicate Indexes</div>
+        </div>
+      </div>
+      <div class="mg-card dash-jump-tab" data-target="unused" style="cursor:pointer;">
+        <div class="mg-card-body mg-text-center">
+          <div id="dash-unused-count" style="font-size:24px;font-weight:700;">--</div>
+          <div class="mg-text-muted">Unused Indexes</div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>

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

@@ -21,4 +21,15 @@
       <tbody id="dup-tbody"></tbody>
     </table>
   </div>
+  <div id="dup-migration" class="mg-hidden" style="margin-top:16px;">
+    <div class="mg-card">
+      <div class="mg-card-header" style="display:flex;justify-content:space-between;align-items:center;">
+        <strong>Suggested Migration</strong>
+        <button id="dup-copy-migration" class="mg-btn mg-btn-outline-secondary mg-btn-sm">&#128203; Copy</button>
+      </div>
+      <div class="mg-card-body">
+        <pre id="dup-migration-code" style="font-size:12px;margin:0;white-space:pre-wrap;user-select:all;"></pre>
+      </div>
+    </div>
+  </div>
 </div>