mysql_genius 0.1.0 → 0.3.0

data/docs/superpowers/specs/2026-04-08-dashboard-first-redesign.md

@@ -0,0 +1,87 @@
+# Dashboard-First Redesign
+
+Redesign the default landing experience to lead with PgHero-style monitoring instead of the SQL query builder. Based on Reddit feedback that the current Visual Builder default makes the engine look like "another DB GUI" rather than a MySQL performance dashboard.
+
+## Changes
+
+### 1. New Dashboard Tab (default)
+
+A new tab that becomes the active tab on page load. Loads all data immediately via parallel AJAX calls to existing endpoints. Four stacked sections:
+
+**Server Summary** (reuses `server_overview` endpoint)
+- Four cards in a responsive grid: Server (version, uptime), Connections (used/max progress bar), InnoDB Buffer Pool (hit rate progress bar), Query Activity (questions/sec, slow queries count)
+
+**Top 5 Slow Queries** (reuses `slow_queries` endpoint)
+- Compact table: duration, timestamp, truncated SQL
+- "View all" link switches to Slow Queries tab
+- If Redis not configured: muted placeholder "Configure `redis_url` to monitor slow queries."
+
+**Top 5 Expensive Queries** (reuses `query_stats` endpoint with new `limit` param)
+- Compact table: query digest, calls, total time, avg time
+- Sorted by total time descending
+- "View all" link switches to Query Stats tab
+- If `performance_schema` unavailable: muted placeholder
+
+**Index Alerts** (reuses `duplicate_indexes` and `unused_indexes` endpoints)
+- Two badge cards showing counts: "X duplicate indexes", "X unused indexes"
+- Green checkmark if count is zero
+- Each badge is clickable, switches to the corresponding tab
+
+### 2. Query Explorer Tab (merged Visual Builder + SQL Query)
+
+The two existing query tabs merge into one "Query Explorer" tab with a mode toggle:
+
+- **Visual mode** -- existing visual builder UI (table selector, columns, filters, ordering)
+- **SQL mode** -- existing raw SQL textarea with AI suggestion panel
+- Small toggle buttons at top of tab to switch modes
+- Default mode: Visual
+- SQL generated by visual builder carries over when switching to SQL mode (existing behavior preserved)
+- Shared results area unchanged
+
+### 3. Tab Reorder
+
+New order:
+1. Dashboard (new, default active)
+2. Slow Queries
+3. Query Stats
+4. Server
+5. Table Sizes
+6. Unused Indexes
+7. Duplicate Indexes
+8. Query Explorer (merged)
+9. AI Tools (conditional on `@ai_enabled`)
+
+### 4. Backend Change
+
+Add `limit` parameter support to the `query_stats` action. When present, cap the result set to the given limit. The dashboard passes `limit=5`; the Query Stats tab continues to omit it for the full list.
+
+### 5. Gemspec Description Update
+
+Change description to lead with monitoring:
+> "MysqlGenius gives Rails apps a mountable performance dashboard for MySQL databases. Monitor slow queries, analyze query statistics from performance_schema, detect unused and duplicate indexes, and explore your database with optional AI-powered optimization."
+
+### 6. README Updates
+
+- Reorder screenshots section to lead with Dashboard
+- Update "Usage" section to reflect new tab order and dashboard-first experience
+- Add Dashboard screenshot placeholder
+
+## Not Changing
+
+- No new routes -- dashboard reuses existing endpoints
+- No new controller actions -- only a `limit` param added to `query_stats`
+- All existing tab partials remain intact, just reordered in the view
+- Shared results area unchanged
+- AI features unchanged
+- Authentication unchanged
+
+## Files Affected
+
+- `app/views/mysql_genius/queries/index.html.erb` -- tab bar reorder, new dashboard partial render, merge visual/sql tabs, JS changes for dashboard auto-load and query explorer toggle
+- `app/views/mysql_genius/queries/_tab_dashboard.html.erb` -- new partial
+- `app/views/mysql_genius/queries/_tab_query_explorer.html.erb` -- new partial combining visual builder and sql query content
+- `app/views/mysql_genius/queries/_tab_visual_builder.html.erb` -- removed (content moves to query explorer)
+- `app/views/mysql_genius/queries/_tab_sql_query.html.erb` -- removed (content moves to query explorer)
+- `app/controllers/concerns/mysql_genius/database_analysis.rb` -- add `limit` param to `query_stats`
+- `mysql_genius.gemspec` -- updated description
+- `README.md` -- updated screenshots order, usage section

data/lib/generators/mysql_genius/install/install_generator.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module MysqlGenius
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      source_root File.expand_path("templates", __dir__)
+
+      desc "Creates a MysqlGenius initializer and mounts the engine in routes."
+
+      def copy_initializer
+        template("initializer.rb", "config/initializers/mysql_genius.rb")
+      end
+
+      def mount_engine
+        route('mount MysqlGenius::Engine, at: "/mysql_genius"')
+      end
+    end
+  end
+end

data/lib/generators/mysql_genius/install/templates/initializer.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+MysqlGenius.configure do |config|
+  # --- Authentication ---
+  # Lambda that receives the controller instance. Return true to allow access.
+  # Default: allows everyone. Use route constraints for most cases.
+  # config.authenticate = ->(controller) { controller.current_user&.admin? }
+
+  # To use current_user or other app helpers, inherit from ApplicationController:
+  # config.base_controller = "ApplicationController"
+
+  # --- Tables ---
+  # Tables featured at the top of the visual builder dropdown (optional).
+  # config.featured_tables = %w[users posts comments]
+
+  # Tables blocked from querying (defaults: sessions, schema_migrations, ar_internal_metadata).
+  # config.blocked_tables += %w[oauth_tokens api_keys]
+
+  # Column patterns to redact with [REDACTED] in results (case-insensitive substring match).
+  # config.masked_column_patterns = %w[password secret digest token ssn]
+
+  # Default columns checked in the visual builder per table (optional).
+  # config.default_columns = {
+  #   "users" => %w[id name email created_at],
+  #   "posts" => %w[id title user_id published_at]
+  # }
+
+  # --- Query Safety ---
+  # config.max_row_limit = 1000       # Hard cap on rows returned
+  # config.default_row_limit = 25     # Default when no limit specified
+  # config.query_timeout_ms = 30_000  # 30 second timeout
+
+  # --- Slow Query Monitoring ---
+  # Requires Redis. Set to nil to disable.
+  # config.redis_url = ENV["REDIS_URL"]
+  # config.slow_query_threshold_ms = 250
+
+  # --- Audit Logging ---
+  # Set to nil to disable. Logs query executions, rejections, and errors.
+  # config.audit_logger = Logger.new(Rails.root.join("log", "mysql_genius.log"))
+
+  # --- AI Features (optional) ---
+  # Supports any OpenAI-compatible API: OpenAI, Azure OpenAI, Ollama, or a custom client.
+  # config.ai_endpoint = "https://api.openai.com/v1/chat/completions"
+  # config.ai_api_key = ENV["OPENAI_API_KEY"]
+  # config.ai_model = "gpt-4o"
+  # config.ai_auth_style = :bearer  # :bearer for OpenAI/Ollama, :api_key for Azure
+
+  # Domain context helps the AI understand your schema and generate better queries.
+  # config.ai_system_context = <<~CONTEXT
+  #   This is an e-commerce database.
+  #   - `users` stores customer accounts.
+  #   - `orders` tracks purchases, linked to users via `user_id`.
+  #   - Soft-deleted records have `deleted_at IS NOT NULL`.
+  # CONTEXT
+end

data/lib/mysql_genius/configuration.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module MysqlGenius
   class Configuration
     # Tables to feature in the visual builder dropdown (array of strings).
@@ -66,17 +68,17 @@ module MysqlGenius
 
     def initialize
       @featured_tables = []
-      @blocked_tables = %w[
-        sessions
-        ar_internal_metadata
-        schema_migrations
+      @blocked_tables = [
+        "sessions",
+        "ar_internal_metadata",
+        "schema_migrations",
       ]
-      @masked_column_patterns = %w[password secret digest token]
+      @masked_column_patterns = ["password", "secret", "digest", "token"]
       @default_columns = {}
       @max_row_limit = 1000
       @default_row_limit = 25
       @query_timeout_ms = 30_000
-      @authenticate = ->(controller) { true }
+      @authenticate = ->(_controller) { true }
       @ai_client = nil
       @ai_endpoint = nil
       @ai_api_key = nil

data/lib/mysql_genius/engine.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module MysqlGenius
   class Engine < ::Rails::Engine
     isolate_namespace MysqlGenius

data/lib/mysql_genius/slow_query_monitor.rb

@@ -1,36 +1,41 @@
+# frozen_string_literal: true
+
 require "json"
+require "time"
 
 module MysqlGenius
   class SlowQueryMonitor
-    def self.redis_key
-      "mysql_genius:slow_queries"
-    end
+    class << self
+      def redis_key
+        "mysql_genius:slow_queries"
+      end
 
-    def self.subscribe!
-      ActiveSupport::Notifications.subscribe("sql.active_record") do |_name, start, finish, _id, payload|
-        duration_ms = ((finish - start) * 1000).round(1)
-        sql = payload[:sql].to_s
-        threshold = MysqlGenius.configuration.slow_query_threshold_ms
+      def subscribe!
+        ActiveSupport::Notifications.subscribe("sql.active_record") do |_name, start, finish, _id, payload|
+          duration_ms = ((finish - start) * 1000).round(1)
+          sql = payload[:sql].to_s
+          threshold = MysqlGenius.configuration.slow_query_threshold_ms
 
-        next unless duration_ms >= threshold
-        next unless sql.match?(/\ASELECT\b/i)
-        next if sql.include?("SCHEMA")
-        next if sql.include?("EXPLAIN")
-        next if payload[:name] == "SCHEMA"
+          next if duration_ms < threshold
+          next unless sql.match?(/\ASELECT\b/i)
+          next if sql.include?("SCHEMA")
+          next if sql.include?("EXPLAIN")
+          next if payload[:name] == "SCHEMA"
 
-        begin
-          redis = Redis.new(url: MysqlGenius.configuration.redis_url)
-          entry = {
-            sql: sql.truncate(10_000),
-            duration_ms: duration_ms,
-            timestamp: Time.current.iso8601,
-            name: payload[:name]
-          }.to_json
+          begin
+            redis = Redis.new(url: MysqlGenius.configuration.redis_url)
+            entry = {
+              sql: sql.length > 10_000 ? sql[0, 10_000] : sql,
+              duration_ms: duration_ms,
+              timestamp: Time.now.iso8601,
+              name: payload[:name],
+            }.to_json
 
-          redis.lpush(redis_key, entry)
-          redis.ltrim(redis_key, 0, 199)
-        rescue => e
-          Rails.logger.debug("[mysql_genius] Slow query logger error: #{e.message}") if defined?(Rails)
+            redis.lpush(redis_key, entry)
+            redis.ltrim(redis_key, 0, 199)
+          rescue => e
+            Rails.logger.debug("[mysql_genius] Slow query logger error: #{e.message}") if defined?(Rails)
+          end
         end
       end
     end

data/lib/mysql_genius/sql_validator.rb

@@ -1,8 +1,10 @@
+# frozen_string_literal: true
+
 module MysqlGenius
   module SqlValidator
-    FORBIDDEN_KEYWORDS = %w[INSERT UPDATE DELETE DROP ALTER CREATE TRUNCATE GRANT REVOKE].freeze
+    FORBIDDEN_KEYWORDS = ["INSERT", "UPDATE", "DELETE", "DROP", "ALTER", "CREATE", "TRUNCATE", "GRANT", "REVOKE"].freeze
 
-    module_function
+    extend self
 
     def validate(sql, blocked_tables:, connection:)
       return "Please enter a query." if sql.nil? || sql.strip.empty?
@@ -22,7 +24,7 @@ module MysqlGenius
       tables_in_query = extract_table_references(normalized, connection)
       blocked = tables_in_query & blocked_tables
       if blocked.any?
-        return "Access denied for table(s): #{blocked.join(', ')}."
+        return "Access denied for table(s): #{blocked.join(", ")}."
       end
 
       nil
@@ -44,7 +46,7 @@ module MysqlGenius
       elsif sql.match?(/\bLIMIT\s+\d+/i)
         sql.gsub(/\bLIMIT\s+(\d+)/i) { "LIMIT #{[::Regexp.last_match(1).to_i, limit].min}" }
       else
-        "#{sql.gsub(/;\s*\z/, '')} LIMIT #{limit}"
+        "#{sql.gsub(/;\s*\z/, "")} LIMIT #{limit}"
       end
     end
 

data/lib/mysql_genius/version.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module MysqlGenius
-  VERSION = "0.1.0"
+  VERSION = "0.3.0"
 end

data/lib/mysql_genius.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require "mysql_genius/version"
 require "mysql_genius/configuration"
 require "mysql_genius/sql_validator"

data/mysql_genius.gemspec

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 lib = File.expand_path("../lib", __FILE__)
 $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
 require "mysql_genius/version"
@@ -9,9 +11,9 @@ Gem::Specification.new do |spec|
   spec.email         = ["antarr.t.byrd@uth.tmc.edu"]
 
   spec.summary       = "A MySQL performance dashboard and query explorer for Rails — like PgHero, but for MySQL."
-  spec.description   = "MysqlGenius gives Rails apps a mountable admin dashboard for MySQL databases. " \
-                        "Includes a safe SQL query explorer with visual builder, EXPLAIN analysis, " \
-                        "slow query monitoring, audit logging, and optional AI-powered query suggestions and optimization."
+  spec.description   = "MysqlGenius gives Rails apps a mountable performance dashboard for MySQL databases. " \
+    "Monitor slow queries, analyze query statistics from performance_schema, detect unused and duplicate indexes, " \
+    "and explore your database with optional AI-powered optimization."
   spec.homepage      = "https://github.com/antarr/mysql_genius"
   spec.license       = "MIT"
 
@@ -21,14 +23,13 @@ Gem::Specification.new do |spec|
   spec.metadata["source_code_uri"] = spec.homepage
   spec.metadata["changelog_uri"]   = "#{spec.homepage}/blob/main/CHANGELOG.md"
 
-  spec.files = Dir.chdir(File.expand_path('..', __FILE__)) do
-    `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+  spec.files = Dir.chdir(File.expand_path("..", __FILE__)) do
+    %x(git ls-files -z).split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
   end
   spec.bindir        = "exe"
   spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
   spec.require_paths = ["lib"]
 
-  spec.add_dependency "railties", ">= 5.2"
-  spec.add_dependency "activerecord", ">= 5.2"
-
+  spec.add_dependency("activerecord", ">= 5.2", "< 9")
+  spec.add_dependency("railties", ">= 5.2", "< 9")
 end

metadata

@@ -1,22 +1,24 @@
 --- !ruby/object:Gem::Specification
 name: mysql_genius
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Antarr Byrd
-autorequire: 
 bindir: exe
 cert_chain: []
-date: 2026-04-09 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
-  name: railties
+  name: activerecord
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
         version: '5.2'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '9'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -24,13 +26,19 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '5.2'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '9'
 - !ruby/object:Gem::Dependency
-  name: activerecord
+  name: railties
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
         version: '5.2'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '9'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -38,18 +46,24 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '5.2'
-description: MysqlGenius gives Rails apps a mountable admin dashboard for MySQL databases.
-  Includes a safe SQL query explorer with visual builder, EXPLAIN analysis, slow query
-  monitoring, audit logging, and optional AI-powered query suggestions and optimization.
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '9'
+description: MysqlGenius gives Rails apps a mountable performance dashboard for MySQL
+  databases. Monitor slow queries, analyze query statistics from performance_schema,
+  detect unused and duplicate indexes, and explore your database with optional AI-powered
+  optimization.
 email:
 - antarr.t.byrd@uth.tmc.edu
 executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- ".github/FUNDING.yml"
 - ".github/workflows/ci.yml"
 - ".gitignore"
 - ".rspec"
+- ".rubocop.yml"
 - CHANGELOG.md
 - Gemfile
 - LICENSE.txt
@@ -66,25 +80,29 @@ files:
 - app/views/layouts/mysql_genius/application.html.erb
 - app/views/mysql_genius/queries/_shared_results.html.erb
 - app/views/mysql_genius/queries/_tab_ai_tools.html.erb
+- app/views/mysql_genius/queries/_tab_dashboard.html.erb
 - app/views/mysql_genius/queries/_tab_duplicate_indexes.html.erb
+- app/views/mysql_genius/queries/_tab_query_explorer.html.erb
 - app/views/mysql_genius/queries/_tab_query_stats.html.erb
 - app/views/mysql_genius/queries/_tab_server.html.erb
 - app/views/mysql_genius/queries/_tab_slow_queries.html.erb
-- app/views/mysql_genius/queries/_tab_sql_query.html.erb
 - app/views/mysql_genius/queries/_tab_table_sizes.html.erb
 - app/views/mysql_genius/queries/_tab_unused_indexes.html.erb
-- app/views/mysql_genius/queries/_tab_visual_builder.html.erb
 - app/views/mysql_genius/queries/index.html.erb
 - bin/console
 - bin/setup
 - config/routes.rb
 - docs/screenshots/ai_tools.png
+- docs/screenshots/dashboard.png
 - docs/screenshots/duplicate_indexes.png
+- docs/screenshots/query_explore.png
 - docs/screenshots/query_stats.png
 - docs/screenshots/server.png
-- docs/screenshots/sql_query.png
 - docs/screenshots/table_sizes.png
-- docs/screenshots/visual_builder.png
+- docs/superpowers/plans/2026-04-08-dashboard-first-redesign.md
+- docs/superpowers/specs/2026-04-08-dashboard-first-redesign.md
+- lib/generators/mysql_genius/install/install_generator.rb
+- lib/generators/mysql_genius/install/templates/initializer.rb
 - lib/mysql_genius.rb
 - lib/mysql_genius/configuration.rb
 - lib/mysql_genius/engine.rb
@@ -99,7 +117,6 @@ metadata:
   homepage_uri: https://github.com/antarr/mysql_genius
   source_code_uri: https://github.com/antarr/mysql_genius
   changelog_uri: https://github.com/antarr/mysql_genius/blob/main/CHANGELOG.md
-post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -114,8 +131,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.3.1
-signing_key: 
+rubygems_version: 4.0.4
 specification_version: 4
 summary: A MySQL performance dashboard and query explorer for Rails — like PgHero,
   but for MySQL.

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

@@ -1,40 +0,0 @@
-<!-- SQL Query Tab -->
-<div class="mg-tab-content" id="tab-sql">
-  <% if @ai_enabled %>
-    <div class="mg-card mg-mb">
-      <div class="mg-card-header">
-        <span class="mg-card-toggle" id="ai-toggle">&#9889; AI Assistant <span class="mg-text-muted">- Describe what you want in plain English</span></span>
-      </div>
-      <div class="mg-card-body mg-hidden" id="ai-panel">
-        <div class="mg-field">
-          <textarea id="ai-prompt" rows="2" placeholder="e.g. Show me all users created in the last 30 days"></textarea>
-          <div class="mg-text-muted" style="margin-top:2px;">Only table names and column names are sent to the AI. No row data leaves the system.</div>
-        </div>
-        <button id="ai-suggest" class="mg-btn mg-btn-primary mg-btn-sm mg-mb">&#9889; Suggest Query</button>
-        <div id="ai-result" class="mg-hidden">
-          <div id="ai-explanation" class="mg-alert mg-alert-info"></div>
-        </div>
-      </div>
-    </div>
-  <% end %>
-
-  <div class="mg-field">
-    <label for="sql-input">SQL Query</label>
-    <textarea id="sql-input" rows="5" placeholder="SELECT * FROM users LIMIT 10"></textarea>
-  </div>
-  <div class="mg-row">
-    <div class="mg-col-2 mg-field">
-      <label for="sql-row-limit">Row Limit</label>
-      <input type="number" id="sql-row-limit" value="25" min="1" max="<%= MysqlGenius.configuration.max_row_limit %>">
-    </div>
-    <div class="mg-field">
-      <label>&nbsp;</label>
-      <button id="sql-run" class="mg-btn mg-btn-primary">&#9654; Run Query</button>
-      <button id="sql-explain" class="mg-btn mg-btn-outline">&#128270; Explain</button>
-      <% if @ai_enabled %>
-        <button id="sql-describe" class="mg-btn mg-btn-outline mg-btn-sm" style="margin-left:8px;">&#9889; Describe</button>
-        <button id="sql-rewrite" class="mg-btn mg-btn-outline mg-btn-sm">&#9889; Rewrite</button>
-      <% end %>
-    </div>
-  </div>
-</div>

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

@@ -1,61 +0,0 @@
-<!-- Visual Builder Tab -->
-<div class="mg-tab-content active" id="tab-visual">
-  <div class="mg-row mg-mb">
-    <div class="mg-col-4 mg-field">
-      <label for="vb-table">Table</label>
-      <select id="vb-table">
-        <option value="">-- Select a table --</option>
-        <% if @featured_tables != @all_tables %>
-          <optgroup label="Featured">
-            <% @featured_tables.each do |table| %>
-              <option value="<%= table %>"><%= table %></option>
-            <% end %>
-          </optgroup>
-          <optgroup label="All Tables">
-            <% (@all_tables - @featured_tables).each do |table| %>
-              <option value="<%= table %>"><%= table %></option>
-            <% end %>
-          </optgroup>
-        <% else %>
-          <% @all_tables.each do |table| %>
-            <option value="<%= table %>"><%= table %></option>
-          <% end %>
-        <% end %>
-      </select>
-    </div>
-    <div class="mg-col-2 mg-field">
-      <label for="vb-row-limit">Row Limit</label>
-      <input type="number" id="vb-row-limit" value="25" min="1" max="<%= MysqlGenius.configuration.max_row_limit %>">
-    </div>
-    <div class="mg-field">
-      <label>&nbsp;</label>
-      <button id="vb-run" class="mg-btn mg-btn-primary" disabled>&#9654; Run Query</button>
-      <button id="vb-explain" class="mg-btn mg-btn-outline" disabled>&#128270; Explain</button>
-    </div>
-  </div>
-
-  <div id="vb-columns-section" class="mg-mb mg-hidden">
-    <label>Columns
-      <span id="vb-toggle-all" class="mg-link">Toggle All</span>
-      <span id="vb-show-defaults" class="mg-link">Reset Defaults</span>
-    </label>
-    <div id="vb-columns" class="mg-checks"></div>
-  </div>
-
-  <div id="vb-filters-section" class="mg-mb mg-hidden">
-    <label>Filters</label>
-    <div id="vb-filters"></div>
-    <button id="vb-add-filter" class="mg-btn mg-btn-outline-secondary mg-btn-sm" style="margin-top:4px;">+ Add Filter</button>
-  </div>
-
-  <div id="vb-order-section" class="mg-mb mg-hidden">
-    <label>Order By</label>
-    <div id="vb-orders"></div>
-    <button id="vb-add-order" class="mg-btn mg-btn-outline-secondary mg-btn-sm" style="margin-top:4px;">+ Add Sort</button>
-  </div>
-
-  <div id="vb-generated-sql" class="mg-mb mg-hidden">
-    <label>Generated SQL</label>
-    <textarea id="vb-sql-preview" rows="2" readonly></textarea>
-  </div>
-</div>