sage-rails 0.0.3

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

@@ -0,0 +1,43 @@
+<% if @query.errors.any? %>
+  <article class="border red left-round">
+    <i>error</i>
+    <div>
+      <h6>Error</h6>
+      <p><%= @query.errors.full_messages.first %></p>
+    </div>
+  </article>
+<% end %>
+
+<% @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="s10">
+      <div class="field label border">
+        <%= f.text_field :name %>
+        <%= f.label :name, class: (@query.name.present? ? "active" : "") %>
+      </div>
+      
+      <div class="field textarea label border">
+        <%= f.text_area :description, style: "height: 80px; resize: vertical;" %>
+        <%= f.label :description, "Description (Optional)", class: (@query.description.present? ? "active" : "") %>
+      </div>
+      
+      <%= f.hidden_field :statement, id: 'query_statement_form' %>
+    </div>
+    
+    <div class="s2">
+      <nav style="display: flex; flex-direction: column; gap: 12px; padding-left: 8px;">
+        <% 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>
+<% end %>
+

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

@@ -0,0 +1,232 @@
+<%= turbo_frame_tag dom_id(@query, 'results') do %>
+  <% if @error %>
+    <div style="display: flex; justify-content: center; align-items: center; min-height: 400px; padding: 40px 20px;">
+      <div style="text-align: center; width: 100%; max-width: 90%;">
+        <div style="margin-bottom: 20px;">
+          <svg width="80" height="80" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="opacity: 0.5;">
+            <circle cx="12" cy="12" r="10" stroke="#dc3545" stroke-width="2"/>
+            <path d="M12 8V12" stroke="#dc3545" stroke-width="2" stroke-linecap="round"/>
+            <circle cx="12" cy="16" r="1" fill="#dc3545"/>
+          </svg>
+        </div>
+        <h3 style="color: #dc3545; margin-bottom: 15px; font-weight: 500;">Query Error</h3>
+        <div style="background-color: #f8f9fa; border-left: 4px solid #dc3545; padding: 15px 20px; text-align: left; border-radius: 4px; margin-bottom: 20px; overflow-x: auto;">
+          <pre style="margin: 0; white-space: pre-wrap; word-wrap: break-word;"><code style="color: #495057; font-size: 14px; line-height: 1.5; font-family: 'Courier New', Courier, monospace;"><%= @error.first(1000) %></code></pre>
+        </div>
+        <p style="color: #6c757d; font-size: 14px; margin: 0;">
+          Please check your query syntax and try again.
+        </p>
+      </div>
+    </div>
+  <% elsif !@success %>
+    <% if @only_chart %>
+      <p class="text-muted">Select variables</p>
+    <% else %>
+      <div class="alert alert-info">Can't preview queries with variables</div>
+    <% end %>
+  <% elsif @cohort_analysis %>
+    <% if @cohort_error %>
+      <div class="alert alert-info"><%= @cohort_error %></div>
+    <% else %>
+      <%= render partial: "cohorts" %>
+    <% end %>
+  <% else %>
+    <% unless @only_chart %>
+      <%= render partial: "caching" %>
+      <p class="text-muted" style="margin-bottom: 10px;">
+      <% if @row_limit && @rows.size > @row_limit %>
+        First
+        <% @rows = @rows.first(@row_limit) %>
+      <% end %>
+      <%= pluralize(@rows.size, "row") %>
+
+      <% @checks.select(&:state).each do |check| %>
+        &middot; <small class="check-state <%= check.state.parameterize.gsub("-", "_") %>"><%= link_to check.state.upcase, edit_check_path(check) %></small>
+        <% if check.try(:message) %>
+          &middot; <%= check.message %>
+      <% end %>
+    <% end %>
+
+    <% if @query && @result.forecastable? && !params[:forecast] %>
+      &middot;
+      <%= link_to "Forecast", query_path(@query, params: {forecast: "t"}.merge(variable_params(@query))) %>
+    <% end %>
+      </p>
+    <% end %>
+    <% if @forecast_error %>
+      <div class="alert alert-danger"><%= @forecast_error %></div>
+    <% end %>
+    <% if @cohort_error %>
+      <div class="alert alert-info"><%= @cohort_error %></div>
+    <% end %>
+    <% if @rows.any? %>
+      <% values = @rows.first %>
+      <% chart_id = SecureRandom.hex %>
+      <% column_types = @result.column_types %>
+      <% chart_type = @result.chart_type %>
+      <% chart_options = {id: chart_id, thousands: t("number.format.delimiter"), decimal: t("number.format.separator")} %>
+      <% if ["line", "line2"].include?(chart_type) %>
+        <% chart_options.merge!(min: nil) %>
+      <% end %>
+      <% if chart_type == "scatter" %>
+        <% chart_options.merge!(library: {tooltips: {intersect: false}}) %>
+      <% elsif ["bar", "bar2"].include?(chart_type) %>
+        <% chart_options.merge!(library: {tooltips: {intersect: false, axis: 'x'}}) %>
+      <% elsif chart_type != "pie" %>
+        <% if column_types.size == 2 || @forecast %>
+          <% chart_options.merge!(library: {tooltips: {intersect: false, axis: 'x'}}) %>
+        <% else %>
+          <%# chartjs axis: 'x' has poor behavior with multiple series %>
+          <% chart_options.merge!(library: {tooltips: {intersect: false}}) %>
+        <% end %>
+      <% end %>
+      <% series_library = {} %>
+      <% target_index = @columns.index { |k| k.downcase == "target" } %>
+      <% if target_index %>
+        <% color = "#109618" %>
+        <% series_library[target_index - 1] = {pointStyle: "line", pointBorderWidth: 0, hitRadius: 5, borderColor: color, pointBackgroundColor: color, backgroundColor: color, pointHoverBackgroundColor: color} %>
+      <% end %>
+      <% if @forecast %>
+        <% color = "#54a3ee" %>
+        <% series_library[1] = {borderDash: [8], borderColor: color, pointBackgroundColor: color, backgroundColor: color, pointHoverBackgroundColor: color} %>
+      <% end %>
+      <% if @markers.any? %>
+        <% map_id = SecureRandom.hex %>
+        <%= content_tag :div, nil, id: map_id, style: "height: #{@only_chart ? 545 : 200}px;" %>
+        <%= javascript_tag nonce: true do %>
+          <%= blazer_js_var "mapboxAccessToken", Blazer.mapbox_access_token %>
+          <%= blazer_js_var "markers", @markers %>
+          <%= blazer_js_var "mapId", map_id %>
+          new Mapkick.Map(mapId, markers, {accessToken: mapboxAccessToken, tooltips: {hover: false, html: true}});
+        <% end %>
+      <% elsif @geojson.any? %>
+        <% map_id = SecureRandom.hex %>
+        <%= content_tag :div, nil, id: map_id, style: "height: #{@only_chart ? 545 : 200}px;" %>
+        <%= javascript_tag nonce: true do %>
+          <%= blazer_js_var "mapboxAccessToken", Blazer.mapbox_access_token %>
+          <%= blazer_js_var "geojson", @geojson %>
+          <%= blazer_js_var "mapId", map_id %>
+          new Mapkick.AreaMap(mapId, geojson, {accessToken: mapboxAccessToken, tooltips: {hover: false, html: true}});
+        <% end %>
+      <% elsif chart_type == "line" %>
+        <% chart_data = @columns[1..-1].each_with_index.map{ |k, i| {name: blazer_series_name(k), data: @rows.map{ |r| [r[0], r[i + 1]] }, library: series_library[i]} } %>
+        <% chart_height = @only_chart ? "600px" : "300px" %>
+        <div style="height: <%= chart_height %>;">
+          <%= line_chart chart_data, **chart_options.merge(height: chart_height) %>
+        </div>
+      <% elsif chart_type == "line2" %>
+        <% chart_height = @only_chart ? "600px" : "300px" %>
+        <div style="height: <%= chart_height %>;">
+          <%= line_chart @rows.group_by { |r| v = r[1]; (@smart_values[@columns[1]] || {})[v.to_s] || v }.each_with_index.map { |(name, v), i| {name: blazer_series_name(name), data: v.map { |v2| [v2[0], v2[2]] }, library: series_library[i]} }, **chart_options.merge(height: chart_height) %>
+        </div>
+      <% elsif chart_type == "pie" %>
+        <% chart_height = @only_chart ? "600px" : "300px" %>
+        <div style="height: <%= chart_height %>;">
+          <%= pie_chart @rows.map { |r| [(@smart_values[@columns[0]] || {})[r[0].to_s] || r[0], r[1]] }, **chart_options.merge(height: chart_height) %>
+        </div>
+      <% elsif chart_type == "bar" %>
+        <% chart_height = @only_chart ? "600px" : "300px" %>
+        <div style="height: <%= chart_height %>;">
+          <%= column_chart (values.size - 1).times.map { |i| name = @columns[i + 1]; {name: blazer_series_name(name), data: @rows.first(20).map { |r| [(@smart_values[@columns[0]] || {})[r[0].to_s] || r[0], r[i + 1]] } } }, **chart_options.merge(height: chart_height) %>
+        </div>
+      <% elsif chart_type == "bar2" %>
+        <% first_20 = @rows.group_by { |r| r[0] }.values.first(20).flatten(1) %>
+        <% labels = first_20.map { |r| r[0] }.uniq %>
+        <% series = first_20.map { |r| r[1] }.uniq %>
+        <% labels.each do |l| %>
+          <% series.each do |s| %>
+            <% first_20 << [l, s, 0] unless first_20.find { |r| r[0] == l && r[1] == s } %>
+          <% end %>
+        <% end %>
+        <% chart_height = @only_chart ? "600px" : "300px" %>
+        <div style="height: <%= chart_height %>;">
+          <%= column_chart first_20.group_by { |r| v = r[1]; (@smart_values[@columns[1]] || {})[v.to_s] || v }.each_with_index.map { |(name, v), i| {name: blazer_series_name(name), data: v.sort_by { |r2| labels.index(r2[0]) }.map { |v2| v3 = v2[0]; [(@smart_values[@columns[0]] || {})[v3.to_s] || v3, v2[2]] }} }, **chart_options.merge(height: chart_height) %>
+        </div>
+      <% elsif chart_type == "scatter" %>
+        <% chart_height = @only_chart ? "600px" : "300px" %>
+        <div style="height: <%= chart_height %>;">
+          <%= scatter_chart @rows, xtitle: @columns[0], ytitle: @columns[1], **chart_options.merge(height: chart_height) %>
+        </div>
+      <% elsif @only_chart %>
+        <% if @rows.size == 1 && @rows.first.size == 1 %>
+          <% v = @rows.first.first %>
+          <% if v.is_a?(String) && v == "" %>
+            <div class="text-muted">empty string</div>
+          <% else %>
+            <p style="font-size: 160px;"><%= blazer_format_value(@columns.first, v) %></p>
+          <% end %>
+        <% else %>
+          <% @no_chart = true %>
+        <% end %>
+      <% end %>
+
+      <% unless @only_chart && !@no_chart %>
+        <% header_width = 100 / @columns.size.to_f %>
+        <% # Determine if we're rendering a chart (check all chart conditions) %>
+        <% has_chart = @rows.any? && (
+          @markers.any? || 
+          @geojson.any? || 
+          ["line", "line2", "pie", "bar", "bar2", "scatter"].include?(@result.chart_type)
+        ) %>
+      <% table_height = has_chart ? "300px" : "600px" %>
+      <% if params[:from_show] %>
+        <% table_height_style = "overflow: auto; max-width: 100%;" %>
+      <% else %>
+        <% table_height_style = "overflow: auto; height: #{table_height}; max-width: 100%;" %>
+      <% end %>
+      <div class="results-container" style="<%= table_height_style %>">
+        <% if @columns == ["QUERY PLAN"] %>
+          <pre><code><%= @rows.map { |r| r[0] }.join("\n") %></code></pre>
+        <% elsif @columns == ["PLAN"] && @data_source.adapter == "druid" %>
+          <pre><code><%= @rows[0][0] %></code></pre>
+        <% else %>
+          <table class="stripes" style="width: auto; min-width: 100%;">
+            <thead>
+              <tr>
+                <% @columns.each_with_index do |key, i| %>
+                  <% type = @column_types[i] %>
+                  <th style="width: <%= header_width %>%;" data-sort="<%= type %>">
+                    <div style="min-width: <%= @min_width_types.include?(i) ? 180 : 60 %>px;">
+                      <%= key %>
+                    </div>
+                  </th>
+                <% end %>
+              </tr>
+            </thead>
+            <tbody>
+              <% @rows.each do |row| %>
+                <tr>
+                  <% row.each_with_index do |v, i| %>
+                    <% k = @columns[i] %>
+                    <td>
+                      <% if v.is_a?(Time) %>
+                        <% v = blazer_time_value(@data_source, k, v) %>
+                      <% end %>
+
+                      <% unless v.nil? %>
+                        <% if v.is_a?(String) && v == "" %>
+                          <div class="text-muted">empty string</div>
+                        <% elsif @linked_columns[k] %>
+                          <%= link_to blazer_format_value(k, v), @linked_columns[k].gsub("{value}", u(v.to_s)), target: "_blank" %>
+                        <% else %>
+                          <%= blazer_format_value(k, v) %>
+                        <% end %>
+                      <% end %>
+
+                      <% if (v2 = @smart_values.dig(k, v&.to_s)) %>
+                        <div class="text-muted"><%= v2 %></div>
+                      <% end %>
+                    </td>
+                  <% end %>
+                </tr>
+              <% end %>
+            </tbody>
+          </table>
+        <% end %>
+      </div>
+    <% end %>
+  <% elsif @only_chart %>
+    <p class="text-muted">No rows</p>
+  <% end %>
+<% end %>
+<% end %>

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

@@ -0,0 +1,8 @@
+<%= search_form_for @q, url: root_path, class: 'field border prefix round', data: { controller: 'sage--search', turbo_frame: "queries" } do |f| %>
+
+  <i class="front">search</i>
+  <%= f.search_field :name_or_description_or_statement_cont, 
+                     placeholder: "Search queries by name, description or SQL...", 
+                     class: 'text',
+                     data: { action: 'input->sage--search#submit' } %>
+<% end %>

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

@@ -0,0 +1,241 @@
+<%= turbo_stream_from "statements" %>
+
+<style>
+  @keyframes glow-border {
+    0% {
+      outline: 2px solid rgba(66, 165, 245, 0.8);
+      outline-offset: 0px;
+    }
+    50% {
+      outline: 2px solid rgba(66, 165, 245, 1);
+      outline-offset: 3px;
+    }
+    100% {
+      outline: 2px solid rgba(66, 165, 245, 0.8);
+      outline-offset: 0px;
+    }
+  }
+  
+  .glow-button {
+    animation: glow-border 1.5s ease-in-out infinite;
+    position: relative;
+  }
+  
+  .glow-button:hover {
+    animation-play-state: paused;
+    outline: 2px solid rgba(66, 165, 245, 1);
+    outline-offset: 2px;
+  }
+</style>
+
+<div id=<%= dom_id(query, 'statement-box') %> class='' style="position: relative;">
+  <% 
+    # Handle different contexts - job vs regular view rendering
+    form_url = if local_assigns[:form_url]
+      local_assigns[:form_url]
+    elsif defined?(sage) && sage.respond_to?(:run_queries_path)
+      sage.run_queries_path
+    elsif respond_to?(:run_queries_path)
+      run_queries_path
+    else
+      # Fallback to engine route
+      Sage::Engine.routes.url_helpers.run_queries_path
+    end
+  %>
+  <%= form_with url: form_url, method: :post do |f| %>
+    <%= 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>
+  <% end %>
+</div>
+
+<%= javascript_tag nonce: true do %>
+  function formatSQL() {
+    if (!window.aceEditor) return;
+    
+    const sql = window.aceEditor.getValue();
+    const formatted = formatSQLString(sql);
+    window.aceEditor.setValue(formatted, -1);
+  }
+  
+  function formatSQLString(sql) {
+    // SQL keywords that should be uppercase and on new lines
+    const mainKeywords = ['SELECT', 'FROM', 'WHERE', 'GROUP BY', 'HAVING', 'ORDER BY', 'LIMIT', 'OFFSET', 
+                         'INSERT', 'UPDATE', 'DELETE', 'CREATE', 'ALTER', 'DROP', 'TRUNCATE',
+                         'UNION', 'UNION ALL', 'INTERSECT', 'EXCEPT', 'WITH'];
+    
+    const joinKeywords = ['LEFT JOIN', 'RIGHT JOIN', 'INNER JOIN', 'FULL OUTER JOIN', 'CROSS JOIN', 'JOIN', 'ON'];
+    
+    const otherKeywords = ['AND', 'OR', 'NOT', 'IN', 'EXISTS', 'BETWEEN', 'LIKE', 'IS', 'NULL', 
+                          'CASE', 'WHEN', 'THEN', 'ELSE', 'END', 'AS', 'DISTINCT', 'ALL',
+                          'ASC', 'DESC', 'CAST', 'COUNT', 'SUM', 'AVG', 'MIN', 'MAX',
+                          'COALESCE', 'NULLIF', 'DATE_TRUNC', 'EXTRACT', 'SUBSTRING',
+                          'CONCAT', 'LENGTH', 'LOWER', 'UPPER', 'TRIM', 'REPLACE'];
+    
+    // Preserve string literals and comments
+    const preservedStrings = [];
+    let preservedIndex = 0;
+    
+    // Replace strings with placeholders
+    sql = sql.replace(/'([^']|'')*'/g, (match) => {
+      preservedStrings.push(match);
+      return `__PRESERVED_STRING_${preservedIndex++}__`;
+    });
+    
+    // Replace comments with placeholders  
+    sql = sql.replace(/--[^\n]*/g, (match) => {
+      preservedStrings.push(match);
+      return `__PRESERVED_STRING_${preservedIndex++}__`;
+    });
+    
+    sql = sql.replace(/\/\*[\s\S]*?\*\//g, (match) => {
+      preservedStrings.push(match);
+      return `__PRESERVED_STRING_${preservedIndex++}__`;
+    });
+    
+    // Remove extra whitespace and normalize spaces
+    sql = sql.replace(/\s+/g, ' ').trim();
+    
+    // Format main keywords - add newline before them
+    mainKeywords.forEach(keyword => {
+      const regex = new RegExp('\\b' + keyword + '\\b', 'gi');
+      sql = sql.replace(regex, '\n' + keyword);
+    });
+    
+    // Format JOIN keywords - add newline before them
+    joinKeywords.forEach(keyword => {
+      const regex = new RegExp('\\b' + keyword + '\\b', 'gi');
+      sql = sql.replace(regex, '\n' + keyword);
+    });
+    
+    // Make all SQL keywords uppercase (but not the preserved strings)
+    [...mainKeywords, ...joinKeywords, ...otherKeywords].forEach(keyword => {
+      const regex = new RegExp('\\b' + keyword + '\\b', 'gi');
+      sql = sql.replace(regex, keyword);
+    });
+    
+    // Format commas in SELECT list - add newline and indent after comma
+    sql = sql.replace(/SELECT\s+(.*?)(?=\nFROM|\nWHERE|\nGROUP|\nHAVING|\nORDER|\nLIMIT|$)/gs, (match, selectList) => {
+      // Only format if there are multiple items
+      if (selectList.includes(',')) {
+        selectList = selectList.replace(/,\s*/g, ',\n    ');
+        return 'SELECT\n    ' + selectList.trim();
+      }
+      return 'SELECT ' + selectList.trim();
+    });
+    
+    // Format AND/OR in WHERE clause - put on new line with indent
+    sql = sql.replace(/\n(WHERE|HAVING)\s+(.*?)(?=\n(?:GROUP|ORDER|LIMIT|FROM|SELECT|$))/gs, (match, keyword, condition) => {
+      condition = condition.replace(/\s+(AND|OR)\s+/gi, '\n  $1 ');
+      return '\n' + keyword + ' ' + condition;
+    });
+    
+    // Add indentation for subqueries
+    sql = sql.replace(/\((\s*SELECT[\s\S]*?)\)/g, (match, subquery) => {
+      const indentedSubquery = subquery.split('\n').map(line => '  ' + line).join('\n');
+      return '(\n' + indentedSubquery + '\n)';
+    });
+    
+    // Clean up multiple consecutive newlines
+    sql = sql.replace(/\n\s*\n/g, '\n');
+    
+    // Restore preserved strings
+    preservedStrings.forEach((str, index) => {
+      sql = sql.replace(`__PRESERVED_STRING_${index}__`, str);
+    });
+    
+    // Remove leading newline if present
+    sql = sql.replace(/^\n+/, '');
+    
+    // Ensure consistent spacing around operators
+    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, ' > ');
+    
+    return sql;
+  }
+  
+  function initializeEditor() {
+  // Destroy existing editor if it exists
+  if (window.aceEditor) {
+    window.aceEditor.destroy();
+  }
+  
+  var editor = ace.edit("editor")
+  window.aceEditor = editor;
+  editor.setTheme("ace/theme/twilight")
+  editor.getSession().setMode("ace/mode/sql")
+  editor.setOptions({
+  enableBasicAutocompletion: false,
+  enableSnippets: false,
+  enableLiveAutocompletion: false,
+  highlightActiveLine: false,
+  fontSize: 12,
+  minLines: 10
+  })
+  editor.renderer.setShowGutter(true)
+  editor.renderer.setPrintMarginColumn(false)
+  editor.setShowPrintMargin(false)
+  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
+  editor.setAutoScrollEditorIntoView(true)
+
+  // Update both hidden fields when editor content changes
+  editor.getSession().on("change", function () {
+  const value = editor.getValue()
+  $("#query_statement").val(value)  // For run form
+  $("#query_statement_form").val(value)  // For main form
+  })
+
+  // Set initial value from data attribute or current content
+  const editorDiv = document.getElementById("editor")
+  const initialContent = editorDiv.getAttribute("data-initial-content") || editor.getValue()
+  
+  if (initialContent && initialContent !== editor.getValue()) {
+    editor.setValue(initialContent, -1) // -1 moves cursor to start
+  }
+  
+  const initialValue = editor.getValue()
+  $("#query_statement").val(initialValue)
+  $("#query_statement_form").val(initialValue)
+  editor.focus()
+
+  // Add top padding to ace_scroller and gutter to keep them aligned
+  const aceScroller = document.querySelector('.ace_scroller');
+  const aceGutter = document.querySelector('.ace_gutter');
+
+  if (aceScroller) {
+  aceScroller.style.paddingTop = '10px';
+  }
+  if (aceGutter) {
+  aceGutter.style.paddingTop = '10px';
+  }
+  }
+
+  // Initialize on page load
+  document.addEventListener('turbo:load', initializeEditor);
+  
+  // Initialize when this partial is replaced via Turbo Stream
+  document.addEventListener('turbo:frame-load', initializeEditor);
+  
+  // Also initialize immediately if the DOM is already loaded
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeEditor);
+  } else {
+    initializeEditor();
+  }
+<% end %>

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

@@ -0,0 +1,14 @@
+<div id="<%= stream_target_id %>">
+  <%= simple_format(content) %>
+</div>
+<script>
+  setTimeout(() => {
+    const streamElement = document.getElementById('<%= stream_target_id %>');
+    if (streamElement) {
+      const messagesDiv = streamElement.closest('[id$="_messages"]');
+      if (messagesDiv) {
+        messagesDiv.scrollTop = messagesDiv.scrollHeight;
+      }
+    }
+  }, 10);
+</script>

data/app/views/sage/queries/create.turbo_stream.erb

@@ -0,0 +1,114 @@
+<%= turbo_stream.update "query_result" do %>
+  <div class="query-result">
+    <h3>Generated SQL Query</h3>
+    
+    <div class="sql-container">
+      <pre class="sql-code"><%= @query.statement %></pre>
+      
+      <div class="query-actions">
+        <%= form_with url: run_query_path(id: @query.id || "temp"), method: :post, local: false do |f| %>
+          <%= hidden_field_tag "query[sql]", @query.statement %>
+          <%= hidden_field_tag "query[question]", @question %>
+          
+          <div class="button-group">
+            <%= f.submit "Run Query", class: "btn btn-success" %>
+            <%= link_to "Copy SQL", "#", 
+                class: "btn btn-secondary",
+                data: { 
+                  controller: "clipboard",
+                  clipboard_text_value: @query.statement,
+                  action: "click->clipboard#copy"
+                } %>
+            <% if @query.persisted? %>
+              <%= link_to "View in Blazer", main_app.blazer_query_path(@query), class: "btn btn-secondary", target: "_blank" %>
+            <% end %>
+            <%= link_to "New Query", new_query_path, class: "btn btn-outline", data: { turbo_frame: "_top" } %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+
+    <div class="query-metadata">
+      <p class="text-muted">
+        <strong>Original question:</strong> <%= @question %>
+      </p>
+    </div>
+  </div>
+<% end %>
+
+<style>
+  .query-result {
+    margin-top: 30px;
+    padding: 20px;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+  }
+
+  .query-result h3 {
+    margin-bottom: 15px;
+    color: #333;
+  }
+
+  .sql-container {
+    background-color: white;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  .sql-code {
+    margin: 0;
+    padding: 15px;
+    background-color: #f5f5f5;
+    font-family: 'Monaco', 'Consolas', monospace;
+    font-size: 13px;
+    line-height: 1.5;
+    overflow-x: auto;
+  }
+
+  .query-actions {
+    padding: 15px;
+    background-color: white;
+    border-top: 1px solid #e0e0e0;
+  }
+
+  .button-group {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  .btn-success {
+    background-color: #28a745;
+    color: white;
+  }
+
+  .btn-success:hover {
+    background-color: #218838;
+  }
+
+  .btn-secondary {
+    background-color: #6c757d;
+    color: white;
+  }
+
+  .btn-secondary:hover {
+    background-color: #5a6268;
+  }
+
+  .btn-outline {
+    background-color: white;
+    color: #333;
+    border: 1px solid #ddd;
+  }
+
+  .btn-outline:hover {
+    background-color: #f8f9fa;
+  }
+
+  .query-metadata {
+    margin-top: 15px;
+    padding-top: 15px;
+    border-top: 1px solid #e0e0e0;
+  }
+</style>