sage-rails 0.0.9 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9ea491a1333c2de79c5d62bf5f82afb9826c18215a728865572ab0fd6a060e19
-  data.tar.gz: 23091f1b922326f6646ce8c0e9e6395b2098789d0eeb8662bea0579b4b897c5d
+  metadata.gz: cc7c4334ddc11b1353e8ad25985adb53a4b7cff4ddc03a6f1e6304773f0a3e52
+  data.tar.gz: b1c9ee4ea70e918eb1592ae56e0f596edf5e7b08670b8769ca8347d1d2cf7ab0
 SHA512:
-  metadata.gz: 7bf466be233a7e4925079033e337aa37719c6be8329145575752f15d8016a9ba9d22a392a5f2b5941049348638b04ed338d3a375e78aa0f214d2c33d1240a02a
-  data.tar.gz: 1fb3cc033cf1de427baf9d36bf1df9f810b061d363e1df390936c9fef364f30f87d81a4885721aded87d8bc5d91e48ffbb35853a93f822363b2c7ddd7e56bec0
+  metadata.gz: 64b12cbfa6ac68335f01a13e0c40d08caf9bbc66ce0a160c8eb277aea82303c43e3fdf4499356b13dcb0688fde80904800b1af752b63b402d966d10b7bf2d90b
+  data.tar.gz: 96e9c95b61d505d644859862f5866ebdca3decccb55b54ad03f609541a5f67779474c31f6a4ea688b0889db19494652cd4a82eb2d19d2874370c0d2415739613

data/app/assets/javascripts/sage/controllers/clipboard_controller.js

@@ -4,7 +4,6 @@ export default class extends Controller {
   static values = { text: String }
 
   connect() {
-    console.log("Clipboard controller connected");
   }
 
   copy(event) {

data/app/assets/javascripts/sage/controllers/dashboard_controller.js

@@ -6,16 +6,10 @@ export default class extends Controller {
   static values = { queries: Array };
 
   connect() {
-    console.log("Dashboard controller connected");
-    console.log("Queries value:", this.queriesValue);
-    
     // Parse the queries value if it's a string
     const queriesData = typeof this.queriesValue === 'string' ? 
       JSON.parse(this.queriesValue) : this.queriesValue;
     this.selectedQueries = Array.isArray(queriesData) ? [...queriesData] : [];
-    
-    console.log("Selected queries:", this.selectedQueries);
-    
     this.render();
     this.setupSortable();
   }
@@ -129,4 +123,4 @@ export default class extends Controller {
       }
     }
   }
-}
+}

data/app/assets/javascripts/sage/controllers/query_toggle_controller.js

@@ -0,0 +1,22 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["content", "icon"]
+
+  toggle() {
+    try {
+      const content = this.contentTarget
+      const icon = this.iconTarget
+      
+      if (content.style.display === "none") {
+        content.style.display = "block"
+        icon.textContent = "visibility_off"
+      } else {
+        content.style.display = "none"
+        icon.textContent = "visibility"
+      }
+    } catch (error) {
+      console.error("Error in toggle:", error)
+    }
+  }
+}

data/app/assets/javascripts/sage/controllers/reverse_infinite_scroll_controller.js

@@ -1,7 +1,5 @@
 import { Controller } from "@hotwired/stimulus";
 
-console.log("Reverse infinite scroll controller file loaded!");
-
 export default class extends Controller {
   static targets = ["entries", "pagination"];
   static values = {
@@ -11,12 +9,10 @@ export default class extends Controller {
   };
 
   initialize() {
-    console.log("Reverse infinite scroll controller initialized");
     this.intersectionObserver = new IntersectionObserver(
       (entries) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
-            console.log("Pagination target is visible - loading older messages");
             this.loadOlder();
           }
         });
@@ -29,33 +25,24 @@ export default class extends Controller {
   }
 
   connect() {
-    console.log("Reverse infinite scroll controller connected");
-    console.log("Initial page value:", this.pageValue);
-    
     if (this.hasPaginationTarget) {
-      console.log("Found pagination target, observing...");
       this.intersectionObserver.observe(this.paginationTarget);
     } else {
-      console.log("No pagination target found");
     }
   }
 
   paginationTargetConnected(target) {
-    console.log("Pagination target connected dynamically, observing...");
     // Add a delay to allow scroll-to-bottom to happen first
     setTimeout(() => {
-      console.log("Starting to observe pagination target after delay");
       this.intersectionObserver.observe(target);
     }, 1000);
   }
 
   paginationTargetDisconnected(target) {
-    console.log("Pagination target disconnected, stop observing...");
     this.intersectionObserver.unobserve(target);
   }
 
   disconnect() {
-    console.log("Reverse infinite scroll controller disconnected");
     this.intersectionObserver.disconnect();
   }
 
@@ -67,15 +54,11 @@ export default class extends Controller {
 
   async loadOlder() {
     if (this.loadingValue) {
-      console.log("Already loading, skipping...");
       return;
     }
 
-    console.log("Loading older messages...");
-    console.log("Current pageValue:", this.pageValue);
     this.loadingValue = true;
     const nextPage = this.pageValue + 1;
-    console.log("Requesting page:", nextPage);
 
     // Store current scroll position
     const oldScrollHeight = this.element.scrollHeight;
@@ -83,7 +66,6 @@ export default class extends Controller {
 
     try {
       const url = this.buildUrl(nextPage);
-      console.log("Fetching URL:", url);
       
       const response = await fetch(url, {
         headers: {
@@ -96,7 +78,6 @@ export default class extends Controller {
       }
 
       const html = await response.text();
-      console.log("Received response for page", nextPage);
 
       // Parse the turbo-stream content
       const parser = new DOMParser();
@@ -112,7 +93,6 @@ export default class extends Controller {
         // Manually prepend the template content (for reverse infinite scroll)
         this.entriesTarget.insertAdjacentHTML("afterbegin", template.innerHTML);
         this.pageValue = nextPage;
-        console.log(`Updated to page ${nextPage}`);
 
         // Maintain scroll position (prevent jumping to top)
         setTimeout(() => {
@@ -120,25 +100,13 @@ export default class extends Controller {
           const heightDifference = newScrollHeight - oldScrollHeight;
           this.element.scrollTop = oldScrollTop + heightDifference;
           
-          console.log("Scroll position updated:", {
-            oldScrollHeight,
-            newScrollHeight,
-            heightDifference,
-            newScrollTop: this.element.scrollTop
-          });
-
           // Set up observer for new pagination target if it exists
           if (this.hasPaginationTarget) {
-            console.log("Found new pagination target, observing...");
             this.intersectionObserver.observe(this.paginationTarget);
-          } else {
-            console.log("No more pages to load");
           }
         }, 50);
       }
     } catch (error) {
-      console.error("Error loading older messages:", error);
-      console.log("Staying on page", this.pageValue, "due to error");
     } finally {
       this.loadingValue = false;
     }

data/app/assets/javascripts/sage/controllers/search_controller.js

@@ -9,7 +9,6 @@ export default class extends Controller {
   }
 
   connect() {
-    console.log("Search controller initialized");
     // Find the search input
     this.searchInput = this.element.querySelector('input[type="search"]');
 

data/app/assets/javascripts/sage/controllers/variables_controller.js

@@ -32,7 +32,6 @@ export default class extends Controller {
   
   handleVariableChange(event) {
     const input = event.target
-    console.log(`Variable ${input.name} changed to:`, input.value)
     
     // Check if all required variables are filled and submit if so
     setTimeout(() => {
@@ -41,8 +40,6 @@ export default class extends Controller {
   }
   
   handleDateRangeChange(input, picker) {
-    console.log(`Date range updated for ${input.name}:`, input.value)
-    
     // Force update any related hidden fields
     this.updateRelatedDateFields(input, picker)
     
@@ -83,16 +80,10 @@ export default class extends Controller {
       // More robust empty check
       if (this.isEmpty(value)) {
         completed = false
-        console.log(`Variable ${input.name} is empty:`, value)
-      } else {
-        console.log(`Variable ${input.name} has value:`, value)
       }
     })
     
-    console.log(`Form completion check: ${completed ? 'Complete' : 'Incomplete'}`)
-    
     if (completed) {
-      console.log('Submitting form with all variables filled')
       form.submit()
     }
   }
@@ -112,11 +103,8 @@ export default class extends Controller {
   
   // Debug method to check current variable states
   debugVariables() {
-    console.log("=== Current Variable States ===")
     const inputs = this.formTarget.querySelectorAll('input[name], select[name]')
     inputs.forEach(input => {
-      console.log(`${input.name}: "${input.value}" (${typeof input.value})`)
     })
-    console.log("===============================")
   }
-}
+}

data/app/assets/javascripts/sage.js

@@ -5,9 +5,10 @@ import SelectController from "sage/controllers/select_controller"
 import DashboardController from "sage/controllers/dashboard_controller"
 import ReverseInfiniteScrollController from "sage/controllers/reverse_infinite_scroll_controller"
 import VariablesController from "sage/controllers/variables_controller"
+import QueryToggleController from "sage/controllers/query_toggle_controller"
 
 // Export all Sage controllers for manual registration
-export { SearchController, ClipboardController, SelectController, DashboardController, ReverseInfiniteScrollController, VariablesController }
+export { SearchController, ClipboardController, SelectController, DashboardController, ReverseInfiniteScrollController, VariablesController, QueryToggleController }
 
 // Register all Sage controllers with the provided Stimulus application
 export function registerControllers(application) {
@@ -17,5 +18,6 @@ export function registerControllers(application) {
   application.register("sage--dashboard", DashboardController)
   application.register("sage--reverse-infinite-scroll", ReverseInfiniteScrollController)
   application.register("sage--variables", VariablesController)
+  application.register("sage--query-toggle", QueryToggleController)
 }
 

data/app/controllers/sage/queries_controller.rb

@@ -96,6 +96,8 @@ module Sage
         @query = Blazer::Query.new(query_params)
         @query.creator = blazer_user if @query.respond_to?(:creator)
         @query.status = "active" if @query.respond_to?(:status)
+        # Ensure data_source is set for SQL queries
+        @query.data_source ||= Blazer.data_sources.keys.first
 
         if @query.save
           redirect_to query_path(@query, params: variable_params(@query))
@@ -524,73 +526,3 @@ module Sage
     end
   end
 end
-#
-# module Sage
-#   class QueriesController < ApplicationController
-#     before_action :set_data_source
-#
-#     def new
-#       @query = Blazer::Query.new
-#     end
-#
-#     def create
-#       @query = Blazer::Query.new(name: "Sage Query: #{Time.current}")
-#       @query.statement = generate_sql_from_question(query_params[:question])
-#       @query.creator = blazer_user if defined?(blazer_user)
-#
-#       # Optionally save the query if configured
-#       if Sage.configuration.auto_save_queries && @query.statement.present?
-#         @query.save
-#       end
-#
-#       # Store the question for display
-#       @question = query_params[:question]
-#
-#       respond_to do |format|
-#         format.turbo_stream
-#         format.html { render :new }
-#       end
-#     end
-#
-#     def run
-#       @query = Blazer::Query.new(statement: query_params[:sql])
-#
-#       # Use Blazer's run method to execute the query
-#       @result = Blazer.data_sources[@data_source].run_statement(@query.statement)
-#
-#       # Check for errors
-#       if @result.error.present?
-#         @error = @result.error
-#       end
-#
-#       respond_to do |format|
-#         format.turbo_stream
-#         format.html
-#       end
-#     end
-#
-#     private
-#
-#     def set_data_source
-#       @data_source = params[:data_source] || Blazer.data_sources.keys.first
-#     end
-#
-#     def query_params
-#       params.require(:query).permit(:question, :sql, :data_source)
-#     end
-#
-#     def generate_sql_from_question(question)
-#       # Placeholder for AI integration
-#       # In production, this would call your AI service (OpenAI, Anthropic, etc.)
-#       "-- AI generated SQL for: #{question}\n" +
-#       "-- TODO: Integrate with AI service\n" +
-#       "SELECT 'Please configure AI service' as message;"
-#     end
-#
-#     def blazer_user
-#       # Override this method to provide the current user
-#       # For example: current_user.email if using Devise
-#       "sage-user"
-#     end
-#   end
-# end

data/app/javascript/sage/controllers/clipboard_controller.js

@@ -4,7 +4,6 @@ export default class extends Controller {
   static values = { text: String }
 
   connect() {
-    console.log("Clipboard controller connected");
   }
 
   copy(event) {

data/app/javascript/sage/controllers/dashboard_controller.js

@@ -6,15 +6,12 @@ export default class extends Controller {
   static values = { queries: Array };
 
   connect() {
-    console.log("Dashboard controller connected");
-    console.log("Queries value:", this.queriesValue);
     
     // Parse the queries value if it's a string
     const queriesData = typeof this.queriesValue === 'string' ? 
       JSON.parse(this.queriesValue) : this.queriesValue;
     this.selectedQueries = Array.isArray(queriesData) ? [...queriesData] : [];
     
-    console.log("Selected queries:", this.selectedQueries);
     
     this.render();
     this.setupSortable();

data/app/javascript/sage/controllers/query_toggle_controller.js

@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["content", "icon"]
+
+  toggle() {
+    try {
+      const content = this.contentTarget
+      const icon = this.iconTarget
+      
+      const isHidden = window.getComputedStyle(content).display === "none"
+      
+      if (isHidden) {
+        content.style.display = "block"
+        icon.textContent = "visibility_off"
+      } else {
+        content.style.display = "none"
+        icon.textContent = "visibility"
+      }
+    } catch (error) {
+      console.error("Error in toggle:", error)
+    }
+  }
+}

data/app/javascript/sage/controllers/reverse_infinite_scroll_controller.js

@@ -1,6 +1,5 @@
 import { Controller } from "@hotwired/stimulus";
 
-console.log("Reverse infinite scroll controller file loaded!");
 
 export default class extends Controller {
   static targets = ["entries", "pagination"];
@@ -11,12 +10,10 @@ export default class extends Controller {
   };
 
   initialize() {
-    console.log("Reverse infinite scroll controller initialized");
     this.intersectionObserver = new IntersectionObserver(
       (entries) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
-            console.log("Pagination target is visible - loading older messages");
             this.loadOlder();
           }
         });
@@ -29,33 +26,25 @@ export default class extends Controller {
   }
 
   connect() {
-    console.log("Reverse infinite scroll controller connected");
-    console.log("Initial page value:", this.pageValue);
     
     if (this.hasPaginationTarget) {
-      console.log("Found pagination target, observing...");
       this.intersectionObserver.observe(this.paginationTarget);
     } else {
-      console.log("No pagination target found");
     }
   }
 
   paginationTargetConnected(target) {
-    console.log("Pagination target connected dynamically, observing...");
     // Add a delay to allow scroll-to-bottom to happen first
     setTimeout(() => {
-      console.log("Starting to observe pagination target after delay");
       this.intersectionObserver.observe(target);
     }, 1000);
   }
 
   paginationTargetDisconnected(target) {
-    console.log("Pagination target disconnected, stop observing...");
     this.intersectionObserver.unobserve(target);
   }
 
   disconnect() {
-    console.log("Reverse infinite scroll controller disconnected");
     this.intersectionObserver.disconnect();
   }
 
@@ -67,15 +56,11 @@ export default class extends Controller {
 
   async loadOlder() {
     if (this.loadingValue) {
-      console.log("Already loading, skipping...");
       return;
     }
 
-    console.log("Loading older messages...");
-    console.log("Current pageValue:", this.pageValue);
     this.loadingValue = true;
     const nextPage = this.pageValue + 1;
-    console.log("Requesting page:", nextPage);
 
     // Store current scroll position
     const oldScrollHeight = this.element.scrollHeight;
@@ -83,7 +68,6 @@ export default class extends Controller {
 
     try {
       const url = this.buildUrl(nextPage);
-      console.log("Fetching URL:", url);
       
       const response = await fetch(url, {
         headers: {
@@ -96,7 +80,6 @@ export default class extends Controller {
       }
 
       const html = await response.text();
-      console.log("Received response for page", nextPage);
 
       // Parse the turbo-stream content
       const parser = new DOMParser();
@@ -112,7 +95,6 @@ export default class extends Controller {
         // Manually prepend the template content (for reverse infinite scroll)
         this.entriesTarget.insertAdjacentHTML("afterbegin", template.innerHTML);
         this.pageValue = nextPage;
-        console.log(`Updated to page ${nextPage}`);
 
         // Maintain scroll position (prevent jumping to top)
         setTimeout(() => {
@@ -120,25 +102,16 @@ export default class extends Controller {
           const heightDifference = newScrollHeight - oldScrollHeight;
           this.element.scrollTop = oldScrollTop + heightDifference;
           
-          console.log("Scroll position updated:", {
-            oldScrollHeight,
-            newScrollHeight,
-            heightDifference,
-            newScrollTop: this.element.scrollTop
-          });
 
           // Set up observer for new pagination target if it exists
           if (this.hasPaginationTarget) {
-            console.log("Found new pagination target, observing...");
             this.intersectionObserver.observe(this.paginationTarget);
           } else {
-            console.log("No more pages to load");
           }
         }, 50);
       }
     } catch (error) {
       console.error("Error loading older messages:", error);
-      console.log("Staying on page", this.pageValue, "due to error");
     } finally {
       this.loadingValue = false;
     }

data/app/javascript/sage/controllers/search_controller.js

@@ -9,7 +9,6 @@ export default class extends Controller {
   }
 
   connect() {
-    console.log("Search controller initialized");
     // Find the search input
     this.searchInput = this.element.querySelector('input[type="search"]');
 

data/app/javascript/sage/controllers/variables_controller.js

@@ -32,7 +32,6 @@ export default class extends Controller {
   
   handleVariableChange(event) {
     const input = event.target
-    console.log(`Variable ${input.name} changed to:`, input.value)
     
     // Check if all required variables are filled and submit if so
     setTimeout(() => {
@@ -41,7 +40,6 @@ export default class extends Controller {
   }
   
   handleDateRangeChange(input, picker) {
-    console.log(`Date range updated for ${input.name}:`, input.value)
     
     // Force update any related hidden fields
     this.updateRelatedDateFields(input, picker)
@@ -83,16 +81,12 @@ export default class extends Controller {
       // More robust empty check
       if (this.isEmpty(value)) {
         completed = false
-        console.log(`Variable ${input.name} is empty:`, value)
       } else {
-        console.log(`Variable ${input.name} has value:`, value)
       }
     })
     
-    console.log(`Form completion check: ${completed ? 'Complete' : 'Incomplete'}`)
     
     if (completed) {
-      console.log('Submitting form with all variables filled')
       form.submit()
     }
   }
@@ -112,11 +106,6 @@ export default class extends Controller {
   
   // Debug method to check current variable states
   debugVariables() {
-    console.log("=== Current Variable States ===")
     const inputs = this.formTarget.querySelectorAll('input[name], select[name]')
-    inputs.forEach(input => {
-      console.log(`${input.name}: "${input.value}" (${typeof input.value})`)
-    })
-    console.log("===============================")
   }
 }

data/app/javascript/sage.js

@@ -5,9 +5,10 @@ import SelectController from "sage/controllers/select_controller"
 import DashboardController from "sage/controllers/dashboard_controller"
 import ReverseInfiniteScrollController from "sage/controllers/reverse_infinite_scroll_controller"
 import VariablesController from "sage/controllers/variables_controller"
+import QueryToggleController from "sage/controllers/query_toggle_controller.js"
 
 // Export all Sage controllers for manual registration
-export { SearchController, ClipboardController, SelectController, DashboardController, ReverseInfiniteScrollController, VariablesController }
+export { SearchController, ClipboardController, SelectController, DashboardController, ReverseInfiniteScrollController, VariablesController, QueryToggleController }
 
 // Register all Sage controllers with the provided Stimulus application
 export function registerControllers(application) {
@@ -17,5 +18,6 @@ export function registerControllers(application) {
   application.register("sage--dashboard", DashboardController)
   application.register("sage--reverse-infinite-scroll", ReverseInfiniteScrollController)
   application.register("sage--variables", VariablesController)
+  application.register("sage--query-toggle", QueryToggleController)
 }
 

data/app/views/sage/_variables.html.erb

@@ -9,36 +9,40 @@
       return moment.tz(time.format(format), timeZone)
     }
   <% end %>
-  <div data-controller="sage--variables" data-sage--variables-form-target="form">
-    <form id="bind" method="get" action="<%= action %>" class="form-inline" style="margin-bottom: 15px;">
-      <% date_vars = ["start_time", "end_time"] %>
-      <% if (date_vars - @bind_vars).empty? %>
-        <% @bind_vars = @bind_vars - date_vars %>
-      <% else %>
-        <% date_vars = nil %>
-      <% end %>
-
-      <% @bind_vars.each_with_index do |var, i| %>
-        <div style="margin-bottom: 10px;">
-          <div style="margin-bottom: 3px;">
-            <small class="text-muted"><code>{{<%= var %>}}</code></small>
-          </div>
-        </div>
-        <% if (data = @smart_vars[var]) %>
-          <%= select_tag var, options_for_select([[nil, nil]] + data, selected: var_params[var]), style: "margin-right: 20px; width: 200px; display: none;", data: { "sage--variables-target": "variable" } %>
-          <%= javascript_tag nonce: true do %>
-            $("#<%= var %>").selectize({
-              create: true
-            });
+  
+  <!-- Filter Navigation Area -->
+  <div class="surface border left-round" style="padding: 16px; margin-bottom: 20px; background-color: #f8f9fa;">
+    <h6 style="margin: 0 0 16px 0; color: #6b7280; font-weight: 500;">Query Filters</h6>
+    
+    <div data-controller="sage--variables" data-sage--variables-form-target="form">
+      <form id="bind" method="get" action="<%= action %>">
+        <div class="grid">
+          <% date_vars = ["start_time", "end_time"] %>
+          <% if (date_vars - @bind_vars).empty? %>
+            <% @bind_vars = @bind_vars - date_vars %>
+          <% else %>
+            <% date_vars = nil %>
           <% end %>
-        <% elsif var.end_with?("_at") || var == "start_time" || var == "end_time" %>
-          <%= hidden_field_tag var, var_params[var], data: { "sage--variables-target": "variable" } %>
 
-          <div class="selectize-control single" style="width: 200px;">
-            <div id="<%= var %>-select" class="selectize-input" style="display: inline-block;">
-              <span>Select a date</span>
-            </div>
-          </div>
+          <% @bind_vars.each_with_index do |var, i| %>
+            <div class="s12 m6 l4" style="margin-bottom: 20px;">
+              <label style="display: block; margin-bottom: 6px; color: #6b7280; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;">
+                {<%= var %>}
+              </label>
+              <% if (data = @smart_vars[var]) %>
+                <%= select_tag var, options_for_select([[nil, nil]] + data, selected: var_params[var]), 
+                    style: "width: 100%; padding: 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; height: 42px; box-sizing: border-box;", 
+                    data: { "sage--variables-target": "variable" } %>
+                <%= javascript_tag nonce: true do %>
+                  $("#<%= var %>").selectize({
+                    create: true
+                  });
+                <% end %>
+              <% elsif var.end_with?("_at") || var == "start_time" || var == "end_time" %>
+                <%= hidden_field_tag var, var_params[var], data: { "sage--variables-target": "variable" } %>
+                <div id="<%= var %>-select" style="width: 100%; padding: 10px; border: 1px solid #d1d5db; border-radius: 6px; background: white; cursor: pointer; font-size: 14px; color: #6b7280; height: 42px; box-sizing: border-box; display: flex; align-items: center;">
+                  <span>Select a date</span>
+                </div>
 
           <%= javascript_tag nonce: true do %>
             (function() {
@@ -71,24 +75,41 @@
               }
             })()
           <% end %>
-        <% else %>
-          <%= text_field_tag var, var_params[var], style: "width: 120px; margin-right: 20px;", autofocus: i == 0 && !var.end_with?("_at") && !var_params[var], class: "form-control", data: { "sage--variables-target": "variable" } %>
-        <% end %>
-      <% end %>
-
-      <% if date_vars %>
-        <% date_vars.each do |var| %>
-          <%= hidden_field_tag var, var_params[var], data: { "sage--variables-target": "variable" } %>
-        <% end %>
+              <% else %>
+                <%= text_field_tag var, var_params[var], 
+                    style: "width: 100%; padding: 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; height: 42px; box-sizing: border-box;", 
+                    autofocus: i == 0 && !var.end_with?("_at") && !var_params[var], 
+                    data: { "sage--variables-target": "variable" }, 
+                    placeholder: "Enter #{var.humanize.downcase}" %>
+              <% end %>
+            </div>
+          <% end %>
 
-        <div style="margin-bottom: 5px; text-align: left;">
-          <small class="text-muted"><code>{{<%= date_vars.join('}}, {{') %>}}</code></small>
+          <% if date_vars %>
+            <% date_vars.each do |var| %>
+              <%= hidden_field_tag var, var_params[var], data: { "sage--variables-target": "variable" } %>
+            <% end %>
+            
+            <div class="s12 m6 l4" style="margin-bottom: 20px;">
+              <label style="display: block; margin-bottom: 6px; color: #6b7280; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;">
+                {<%= date_vars.join('}, {') %>}
+              </label>
+              <div id="reportrange" style="width: 100%; padding: 10px; border: 1px solid #d1d5db; border-radius: 6px; background: white; cursor: pointer; font-size: 14px; color: #6b7280; height: 42px; box-sizing: border-box; display: flex; align-items: center;">
+                <span>Select a time range</span>
+              </div>
+            </div>
+          <% end %>
         </div>
-        <div class="selectize-control single" style="width: 300px;">
-          <div id="reportrange" class="selectize-input" style="display: inline-block;">
-            <span>Select a time range</span>
-          </div>
+        
+        <div class="right-align" style="margin-top: 16px;">
+          <button type='submit' class='button primary'>
+            <i>play_arrow</i>
+            Run Query
+          </button>
         </div>
+      </form>
+    </div>
+  </div>
 
         <%= javascript_tag nonce: true do %>
           function dateStr(daysAgo) {
@@ -160,9 +181,4 @@
             }
           }
         <% end %>
-      <% end %>
-
-      <button type='submit' class='btn btn-primary'>Run</button>
-    </form>
-  </div>
 <% end %>

data/app/views/sage/dashboards/index.html.erb

@@ -40,7 +40,7 @@
               <%= link_to dashboard.name, dashboard_path(dashboard), class: "text-decoration-none" %>
             </td>
             <% if Blazer.user_class %>
-              <td><%= dashboard.creator.name %></td>
+              <td><%= dashboard.creator&.name %></td>
             <% end %>
           </tr>
         <% end %>

data/app/views/sage/queries/_new_form.html.erb

@@ -11,7 +11,7 @@
 <% @variable_params = @query.persisted? ? variable_params(@query) : nested_variable_params(@query) %>
 
 <%= form_for @query, url: (@query.persisted? ? query_path(@query, params: @variable_params) : queries_path(params: @variable_params)), html: {autocomplete: "off", class: ""} do |f| %>
-  <div class="grid">
+  <div class="grid" style='margin-top: 0px'>
     <div class="s10">
       <div class="field label border">
         <%= f.text_field :name %>
@@ -19,7 +19,7 @@
       </div>
       
       <div class="field textarea label border">
-        <%= f.text_area :description, style: "height: 80px; resize: vertical;" %>
+        <%= f.text_area :description, style: "height: 145px; resize: vertical;" %>
         <%= f.label :description, "Description (Optional)", class: (@query.description.present? ? "active" : "") %>
       </div>
       
@@ -28,14 +28,28 @@
     
     <div class="s2">
       <nav style="display: flex; flex-direction: column; gap: 12px; padding-left: 8px;">
+        <button type='button' onclick="formatSQL()" class="button secondary" title="Format SQL">
+          <i>auto_fix_high</i>
+        </button>
+        
+        <%= form_with url: (defined?(sage) && sage.respond_to?(:run_queries_path) ? sage.run_queries_path : run_queries_path), method: :post, local: false, style: "margin: 0;" do |f| %>
+          <%= f.hidden_field :statement, id: 'run_query_statement' %>
+          <%= f.hidden_field :query_id, value: @query.id %>
+          <%= f.hidden_field :data_source, value: @query.data_source || Blazer.data_sources.keys.first %>
+          <button type='submit' class="button primary" title="Run Query">
+            <i>play_arrow</i>
+          </button>
+        <% end %>
+
+        <button type="submit" name="commit" value="<%= @query.persisted? ? "Update" : "Create" %>" class="button primary" title="<%= @query.persisted? ? "Update" : "Create" %>">
+          <i><%= @query.persisted? ? "save" : "add" %></i>
+        </button>
+
         <% if @query.persisted? %>
           <%= link_to query_path(@query), method: :delete, "data-confirm" => "Are you sure?", class: "button red", title: "Delete" do %>
             <i>delete</i>
           <% end %>
         <% end %>
-        <button type="submit" name="commit" value="<%= @query.persisted? ? "Update" : "Create" %>" class="button primary" title="<%= @query.persisted? ? "Update" : "Create" %>">
-          <i><%= @query.persisted? ? "save" : "add" %></i>
-        </button>
       </nav>
     </div>
   </div>

data/app/views/sage/queries/_statement_box.html.erb

@@ -28,7 +28,7 @@
   }
 </style>
 
-<div id=<%= dom_id(query, 'statement-box') %> class='' style="position: relative;">
+<div id=<%= dom_id(query, 'statement-box') %> class='' style="position: relative; border-radius: 10px;">
   <% 
     # Handle different contexts - job vs regular view rendering
     form_url = if local_assigns[:form_url]
@@ -46,12 +46,8 @@
     <%= f.hidden_field :statement, id: 'query_statement' %>
     <%= f.hidden_field :query_id, value: query.id %>
     <%= f.hidden_field :data_source, value: query.data_source || Blazer.data_sources.keys.first %>
-    <div id="editor-container" style="position: relative; overflow: hidden;">
-      <div id="editor" style="height: 200px;" data-initial-content="<%= html_escape(local_assigns[:statement] || query.statement) %>"><%= local_assigns[:statement] || query.statement %></div>
-      <div style="position: absolute; bottom: 10px; right: 15px; z-index: 1000; border-radius: 4px; padding: 5px; display: flex; gap: 8px;">
-        <button type='button' onclick="formatSQL()" class="secondary">Format</button>
-        <button type='submit' class="<%= 'glow-button' if local_assigns[:statement].present? %>">Run</button>
-      </div>
+    <div id="editor-container" style="position: relative;">
+      <div id="editor" style="height: 225px;" data-initial-content="<%= html_escape(local_assigns[:statement] || query.statement) %>"><%= local_assigns[:statement] || query.statement %></div>
     </div>
   <% end %>
 </div>
@@ -79,7 +75,7 @@
                           'COALESCE', 'NULLIF', 'DATE_TRUNC', 'EXTRACT', 'SUBSTRING',
                           'CONCAT', 'LENGTH', 'LOWER', 'UPPER', 'TRIM', 'REPLACE'];
     
-    // Preserve string literals and comments
+    // Preserve string literals, comments, and JSON operators
     const preservedStrings = [];
     let preservedIndex = 0;
     
@@ -100,6 +96,12 @@
       return `__PRESERVED_STRING_${preservedIndex++}__`;
     });
     
+    // Preserve JSON operators and comparison operators EARLY before any other processing
+    sql = sql.replace(/->>|->|#>>|#>|@>|<@|>=|<=|<>|!=|\?\?|\?&|\?/g, (match) => {
+      preservedStrings.push(match);
+      return `__PRESERVED_STRING_${preservedIndex++}__`;
+    });
+    
     // Remove extra whitespace and normalize spaces
     sql = sql.replace(/\s+/g, ' ').trim();
     
@@ -154,15 +156,25 @@
     // Remove leading newline if present
     sql = sql.replace(/^\n+/, '');
     
-    // Ensure consistent spacing around operators
+    // Ensure consistent spacing around basic operators (complex operators already preserved)
     sql = sql.replace(/\s*=\s*/g, ' = ');
-    sql = sql.replace(/\s*<>\s*/g, ' <> ');
-    sql = sql.replace(/\s*!=\s*/g, ' != ');
-    sql = sql.replace(/\s*<=\s*/g, ' <= ');
-    sql = sql.replace(/\s*>=\s*/g, ' >= ');
     sql = sql.replace(/\s*<\s*/g, ' < ');
     sql = sql.replace(/\s*>\s*/g, ' > ');
     
+    // Final fix: repair any broken operators that slipped through
+    sql = sql.replace(/>\s*=/g, '>=');
+    sql = sql.replace(/<\s*=/g, '<='); 
+    sql = sql.replace(/@\s*>/g, '@>');
+    sql = sql.replace(/<\s*>/g, '<>');
+    sql = sql.replace(/!\s*=/g, '!=');
+    sql = sql.replace(/-\s*>/g, '->');
+    sql = sql.replace(/-\s*>>/g, '->>');
+    sql = sql.replace(/#\s*>/g, '#>');
+    sql = sql.replace(/#\s*>>/g, '#>>');
+    sql = sql.replace(/<\s*@/g, '<@');
+    sql = sql.replace(/\?\s*\?/g, '??');
+    sql = sql.replace(/\?\s*&/g, '?&');
+    
     return sql;
   }
   
@@ -182,7 +194,8 @@
   enableLiveAutocompletion: false,
   highlightActiveLine: false,
   fontSize: 12,
-  minLines: 10
+  minLines: 10,
+  scrollPastEnd: 0.25
   })
   editor.renderer.setShowGutter(true)
   editor.renderer.setPrintMarginColumn(false)
@@ -190,15 +203,22 @@
   editor.renderer.setPadding(10)
   editor.getSession().setUseWrapMode(true)
   
-  // Ensure scrolling works properly with bottom margin
-  editor.renderer.setScrollMargin(0, 0, 50, 0)  // top, right, bottom, left margins
+  // Ensure proper scrolling with bottom margin for buttons
+  editor.renderer.setScrollMargin(0, 0, 60, 0)  // top, right, bottom, left margins
   editor.setAutoScrollEditorIntoView(true)
+  
+  // Force scrollbar to always be visible for consistent layout
+  editor.setOption("vScrollBarAlwaysVisible", true)
+  
+  // Add bottom padding to content area to ensure last line is fully visible
+  editor.renderer.setPadding(10, 10, 60, 10)  // top, right, bottom, left padding
 
-  // Update both hidden fields when editor content changes
+  // Update all hidden fields when editor content changes
   editor.getSession().on("change", function () {
   const value = editor.getValue()
-  $("#query_statement").val(value)  // For run form
+  $("#query_statement").val(value)  // For statement_box run form
   $("#query_statement_form").val(value)  // For main form
+  $("#run_query_statement").val(value)  // For new_form run button
   })
 
   // Set initial value from data attribute or current content
@@ -212,6 +232,7 @@
   const initialValue = editor.getValue()
   $("#query_statement").val(initialValue)
   $("#query_statement_form").val(initialValue)
+  $("#run_query_statement").val(initialValue)
   editor.focus()
 
   // Add top padding to ace_scroller and gutter to keep them aligned

data/app/views/sage/queries/messages/index.html.erb

@@ -27,7 +27,6 @@
       setTimeout(() => {
         const messagesDiv = document.getElementById('<%= dom_id(@query, 'messages') %>');
         if (messagesDiv) {
-          console.log("Scrolling to bottom, scrollHeight:", messagesDiv.scrollHeight);
           messagesDiv.scrollTop = messagesDiv.scrollHeight;
         }
       }, 100);
@@ -35,7 +34,6 @@
       setTimeout(() => {
         const messagesDiv = document.getElementById('<%= dom_id(@query, 'messages') %>');
         if (messagesDiv) {
-          console.log("Final scroll to bottom, scrollHeight:", messagesDiv.scrollHeight);
           messagesDiv.scrollTop = messagesDiv.scrollHeight;
         }
       }, 500);

data/app/views/sage/queries/new.html.erb

@@ -1,36 +1,67 @@
 <%= blazer_title "New Query" %>
-<%# <%= render partial: "form" %>
 
 <div class="padding left-align">
-  <h5 class="">New Query</h5>
+  <h5>New Query</h5>
 </div>
 
 <div class="sage-container">
-  <div class="sage-header">
-    <h5>What are you curious about?</h5>
-  </div>
-
-  <%= form_with url: queries_path, method: :post, local: true, scope: :query do |f| %>
-    <div class="form-group">
-      <%= label_tag "query[question]", "Your Question", class: "form-label" %>
-      <%= text_area_tag "query[question]", nil, 
-          class: "form-control", 
-          rows: 8,
-          placeholder: "e.g., Show me the top 10 customers by revenue in the last 30 days",
-          required: true,
-          data: { sage_target: "question" } %>
-      <small class="form-text text-muted">
-        Be specific about tables, columns, and conditions when possible
-      </small>
+  <!-- BeerCSS Tabs -->
+  <div>
+    <div class="tabs">
+      <a id="prompt-tab" class="active">Ask AI</a>
+      <a id="sql-tab">Write SQL</a>
     </div>
+    
+    <!-- Prompt Mode Page -->
+    <div id="prompt-page" class="page padding active">
+      <%= form_with url: queries_path, method: :post, local: true, scope: :query do |f| %>
+        <div class="form-group">
+          <%= f.label :question, "Your Question", class: "form-label left-align" %>
+          <%= f.text_area :question, 
+              class: "form-control", 
+              rows: 8,
+              placeholder: "e.g., Show me the top 10 customers by revenue in the last 30 days" %>
+          <small class="form-text text-muted">
+            Be specific about tables, columns, and conditions when possible
+          </small>
+        </div>
 
-    <div class="form-actions">
-      <button type='submit' data-disable-with='Generating...'>Generate Report</button>
+        <div class="form-actions">
+          <button type='submit' data-disable-with='Generating...'>Generate Report</button>
+        </div>
+      <% end %>
     </div>
-  <% end %>
 
-  <turbo-frame id="query_result">
-  </turbo-frame>
+    <!-- SQL Mode Page -->
+    <div id="sql-page" class="page padding">
+      <%= form_with url: queries_path, method: :post, local: true, scope: :query do |f| %>
+        <div class="form-group">
+          <%= f.label :name, "Query Name", class: "form-label left-align" %>
+          <%= f.text_field :name, 
+              class: "form-control", 
+              placeholder: "Enter a name for your query",
+              value: params[:name] %>
+        </div>
+        
+        <div class="form-group">
+          <%= f.label :statement, "SQL Statement", class: "form-label left-align" %>
+          <% 
+            forked_statement = ""
+            if params[:fork_query_id].present?
+              forked_query = Blazer::Query.find_by(id: params[:fork_query_id])
+              forked_statement = forked_query&.statement || ""
+            end
+          %>
+          <%= f.hidden_field :statement, id: 'sql_statement_field' %>
+          <div id="sql-editor" style="height: 300px; border: 1px solid #ddd; border-radius: 4px;" data-initial-content="<%= html_escape(forked_statement) %>"><%= forked_statement %></div>
+        </div>
+
+        <div class="form-actions">
+          <button type='submit' data-disable-with='Creating...'>Create Query</button>
+        </div>
+      <% end %>
+    </div>
+  </div>
 
   <% if @schema.present? %>
     <div class="padding">
@@ -75,15 +106,6 @@
     padding: 20px;
   }
 
-  .sage-header {
-    margin-bottom: 30px;
-    text-align: center;
-  }
-
-  .sage-header h1 {
-    margin-bottom: 10px;
-  }
-
   .form-group {
     margin-bottom: 20px;
   }
@@ -94,6 +116,10 @@
     display: block;
   }
 
+  .form-label.left-align {
+    text-align: left;
+  }
+
   .form-control {
     width: 100%;
     padding: 8px 12px;
@@ -130,33 +156,6 @@
     text-align: center;
   }
 
-  .btn {
-    display: inline-block;
-    padding: 10px 20px;
-    font-size: 16px;
-    font-weight: 500;
-    text-align: center;
-    text-decoration: none;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: all 0.2s;
-  }
-
-  .btn-primary {
-    background-color: #4CAF50;
-    color: white;
-  }
-
-  .btn-primary:hover {
-    background-color: #45a049;
-  }
-
-  .btn-primary:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
   .text-muted {
     color: #666;
     font-size: 14px;
@@ -190,6 +189,135 @@
     text-overflow: ellipsis;
     margin-bottom: 10px;
   }
-
 </style>
 
+<script>
+  // ACE Editor initialization
+  let sqlEditor = null;
+
+  function initializeAceEditor() {
+    if (sqlEditor) {
+      sqlEditor.destroy();
+    }
+    
+    const editorDiv = document.getElementById('sql-editor');
+    if (!editorDiv) return;
+    
+    sqlEditor = ace.edit("sql-editor");
+    sqlEditor.setTheme("ace/theme/twilight");
+    sqlEditor.getSession().setMode("ace/mode/sql");
+    sqlEditor.setOptions({
+      enableBasicAutocompletion: false,
+      enableSnippets: false,
+      enableLiveAutocompletion: false,
+      highlightActiveLine: false,
+      fontSize: 12,
+      minLines: 10,
+      scrollPastEnd: 0.25
+    });
+    sqlEditor.renderer.setShowGutter(true);
+    sqlEditor.renderer.setPrintMarginColumn(false);
+    sqlEditor.setShowPrintMargin(false);
+    sqlEditor.renderer.setPadding(10);
+    sqlEditor.getSession().setUseWrapMode(true);
+
+    // Set initial content
+    const initialContent = editorDiv.getAttribute("data-initial-content") || "";
+    if (initialContent) {
+      sqlEditor.setValue(initialContent, -1);
+    }
+
+    // Update hidden field when content changes
+    sqlEditor.getSession().on("change", function() {
+      const statementField = document.getElementById('sql_statement_field');
+      if (statementField) {
+        statementField.value = sqlEditor.getValue();
+      }
+    });
+
+    // Set initial value in hidden field
+    const statementField = document.getElementById('sql_statement_field');
+    if (statementField) {
+      statementField.value = sqlEditor.getValue();
+    }
+  }
+
+  document.addEventListener('DOMContentLoaded', function() {
+    const promptTab = document.getElementById('prompt-tab');
+    const sqlTab = document.getElementById('sql-tab');
+    const promptPage = document.getElementById('prompt-page');
+    const sqlPage = document.getElementById('sql-page');
+
+    function switchToPromptMode() {
+      promptTab.classList.add('active');
+      sqlTab.classList.remove('active');
+      promptPage.classList.add('active');
+      sqlPage.classList.remove('active');
+    }
+
+    function switchToSqlMode() {
+      sqlTab.classList.add('active');
+      promptTab.classList.remove('active');
+      sqlPage.classList.add('active');
+      promptPage.classList.remove('active');
+    }
+
+    promptTab.addEventListener('click', switchToPromptMode);
+    sqlTab.addEventListener('click', switchToSqlMode);
+
+    // If we have fork parameters, automatically switch to SQL mode
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get('fork_query_id') || urlParams.get('name')) {
+      console.log('Fork detected, switching to SQL mode');
+      switchToSqlMode();
+      // Initialize ACE editor immediately for forks
+      setTimeout(() => {
+        console.log('Initializing ACE editor for fork');
+        initializeAceEditor();
+      }, 200);
+    }
+  });
+
+  // Initialize ACE editor when SQL tab is clicked
+  document.addEventListener('click', function(e) {
+    if (e.target.id === 'sql-tab') {
+      setTimeout(() => {
+        initializeAceEditor();
+      }, 100);
+    }
+  });
+
+  // Ensure form submission captures the editor value
+  document.addEventListener('submit', function(e) {
+    if (e.target.closest('#sql-page') && sqlEditor) {
+      const statementField = document.getElementById('sql_statement_field');
+      if (statementField) {
+        statementField.value = sqlEditor.getValue();
+      }
+    }
+  });
+
+  // Handle Turbo navigation for fork detection
+  document.addEventListener('turbo:load', function() {
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get('fork_query_id') || urlParams.get('name')) {
+      console.log('Fork detected via turbo:load, switching to SQL mode');
+      const promptTab = document.getElementById('prompt-tab');
+      const sqlTab = document.getElementById('sql-tab');
+      const promptPage = document.getElementById('prompt-page');
+      const sqlPage = document.getElementById('sql-page');
+      
+      if (sqlTab && promptTab && sqlPage && promptPage) {
+        sqlTab.classList.add('active');
+        promptTab.classList.remove('active');
+        sqlPage.classList.add('active');
+        promptPage.classList.remove('active');
+        
+        setTimeout(() => {
+          console.log('Initializing ACE editor for fork via turbo:load');
+          initializeAceEditor();
+        }, 200);
+      }
+    }
+  });
+</script>

data/app/views/sage/queries/show.html.erb

@@ -6,7 +6,7 @@
   </h5>
 </div>
 
-<div class="row right-align">
+<div class="row right-align" style="margin-bottom: 24px;">
   <%= link_to "Edit", edit_query_path(@query, params: variable_params(@query)), class: "btn btn-default", data: { turbo: false }, disabled: !@query.editable?(blazer_user) %>
   <%= link_to "Fork", new_query_path(params: {variables: variable_params(@query), fork_query_id: @query.id, data_source: @query.data_source, name: @query.name}), class: "btn btn-info" %>
   <% if !@error && @success %>
@@ -30,7 +30,14 @@
 
 <%= render partial: "sage/variables", locals: { action: query_path(@query) } %>
 
-<pre id="code"><code><%= @statement.display_statement %></code></pre>
+<div data-controller="sage--query-toggle">
+  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
+    <span>Statement</span>
+    <i class="material-icons" data-sage--query-toggle-target="icon" data-action="click->sage--query-toggle#toggle" style="cursor: pointer; font-size: 18px; opacity: 0.6;">visibility_off</i>
+  </div>
+  
+  <pre id="code" data-sage--query-toggle-target="content"><code><%= @statement.try(:display_statement) || @query.statement %></code></pre>
+</div>
 
 <% if @success %>
   <%= turbo_frame_tag dom_id(@query, 'results'), src: run_query_path(@query.id, from_show: true, variables: variable_params(@query)) do  %>

data/config/importmap.rb

@@ -5,6 +5,8 @@ pin "sage/controllers/clipboard_controller", to: "sage/controllers/clipboard_con
 pin "sage/controllers/select_controller", to: "sage/controllers/select_controller.js"
 pin "sage/controllers/dashboard_controller", to: "sage/controllers/dashboard_controller.js"
 pin "sage/controllers/reverse_infinite_scroll_controller", to: "sage/controllers/reverse_infinite_scroll_controller.js"
+pin "sage/controllers/variables_controller", to: "sage/controllers/variables_controller.js"
+pin "sage/controllers/query_toggle_controller", to: "sage/controllers/query_toggle_controller.js"
 
 # Don't pin common libraries - let the host app handle them
 # pin "@hotwired/stimulus", to: "stimulus.min.js"

data/lib/sage/engine.rb

@@ -192,7 +192,8 @@ module Sage
           "sage/controllers/clipboard_controller.js",
           "sage/controllers/select_controller.js",
           "sage/controllers/dashboard_controller.js",
-          "sage/controllers/reverse_infinite_scroll_controller.js"
+          "sage/controllers/reverse_infinite_scroll_controller.js",
+          "sage/controllers/query_toggle_controller.js"
         ]
 
         if defined?(Sprockets)

data/lib/sage/version.rb

@@ -1,3 +1,3 @@
 module Sage
-  VERSION = "0.0.9"
+  VERSION = "0.1.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: sage-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.9
+  version: 0.1.0
 platform: ruby
 authors:
 - Nathan Jones
@@ -152,6 +152,7 @@ files:
 - app/assets/javascripts/sage/application.js
 - app/assets/javascripts/sage/controllers/clipboard_controller.js
 - app/assets/javascripts/sage/controllers/dashboard_controller.js
+- app/assets/javascripts/sage/controllers/query_toggle_controller.js
 - app/assets/javascripts/sage/controllers/reverse_infinite_scroll_controller.js
 - app/assets/javascripts/sage/controllers/search_controller.js
 - app/assets/javascripts/sage/controllers/select_controller.js
@@ -170,6 +171,7 @@ files:
 - app/javascript/sage.js
 - app/javascript/sage/controllers/clipboard_controller.js
 - app/javascript/sage/controllers/dashboard_controller.js
+- app/javascript/sage/controllers/query_toggle_controller.js
 - app/javascript/sage/controllers/reverse_infinite_scroll_controller.js
 - app/javascript/sage/controllers/search_controller.js
 - app/javascript/sage/controllers/select_controller.js