sage-rails 0.0.3

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

@@ -0,0 +1,48 @@
+<% blazer_title "Edit Query" %>
+<%#= render partial: "form" %>
+
+<div class="row padding left-align">
+  <h5 class="">Edit Query</h5>
+  <%= link_to 'Back', query_path(@query) %>
+</div>
+
+<div class='grid'>
+  <div class='s12 m6 l3 border rounded' style='height: 88vh; display: flex; flex-direction: column;'>
+    <!-- Chat Messages Area -->
+    <%= turbo_stream_from "messages" %>
+    <div id=<%= dom_id(@query, 'messages') %> style='flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column;'
+         data-controller="sage--reverse-infinite-scroll" 
+         data-sage--reverse-infinite-scroll-url-value="<%= query_messages_path(@query) %>"
+         data-sage--reverse-infinite-scroll-page-value="1">
+      
+      <!-- Messages container -->
+      <div data-sage--reverse-infinite-scroll-target="entries" id="entries">
+        <%= turbo_frame_tag "messages-content", src: query_messages_path(@query), loading: :lazy do %>
+          <div class="center-align padding">
+            <small class="secondary-text">Loading messages...</small>
+          </div>
+        <% end %>
+      </div>
+    </div>
+    
+    <!-- Chat Input Form -->
+    <%= render partial: 'input', locals: { query: @query } %>
+  </div>
+
+  <div class='m9' style='position: relative;'>
+    <div class='grid'>
+      <div class='s6'>
+        <%= render partial: "statement_box", locals: { query: @query } %>
+      </div>
+      <div class='s6'>
+        <%= render 'new_form' %>
+      </div>
+    </div>
+
+    <%= turbo_frame_tag dom_id(@query, 'results'), src: run_query_path(@query.id) do %>
+      Loading...
+    <% end %>
+
+  </div>
+</div>
+

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

@@ -0,0 +1,59 @@
+<div id="">
+<div class="padding left-align <%= "#{current_page?(root_path) ? 'active' : ''}" %>">
+  <h5>Queries</h5>
+</div>
+
+  <%# SUB NAVIGATION %>
+  <div class="right-align" style="">
+    <% if blazer_user %>
+      <%= link_to "All", root_path, class: !params[:filter] ? "active" : nil, style: "margin-right: 40px;" %>
+      <% if Blazer.audit %>
+        <%= link_to "Viewed", root_path(filter: "viewed"), class: params[:filter] == "viewed" ? "active" : nil, style: "margin-right: 40px;" %>
+      <% end %>
+
+      <%= link_to "Mine", root_path(filter: "mine"), class: params[:filter] == "mine" ? "active" : nil, style: "margin-right: 40px;" %>
+    <% end %>
+    <%= link_to new_query_path do %>
+      <button>
+        New Query
+      </button>
+    <% end %>
+  </div>
+</div>
+
+<%= render partial: 'search' %>
+
+<%= turbo_frame_tag "queries" do %>
+  <% if @queries.any? %>
+    <table class="border">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <% if Blazer.user_class %>
+            <th style="width: 20%;">Mastermind</th>
+          <% end%>
+        </tr>
+      </thead>
+      <tbody>
+        <% @queries.each do |query| %>
+          <tr> 
+            <td>
+              <%= link_to query.name, query_path(query), class: "text-decoration-none", data: { turbo_frame: '_top' } %>
+            </td>
+            <% if Blazer.user_class %>
+              <td><%= query.creator&.name %></td>
+            <% end %>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+
+    <div style="display: flex; justify-content: center; padding: 1rem;">
+      <%== pagy_nav(@pagy) if @pagy.pages > 1 %>
+    </div>
+  <% else %>
+    <div class="mt-3">
+      <p>No queries found.</p>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,22 @@
+<%= turbo_stream.append dom_id(@query, 'messages') do %>
+  <% if @need_day_separator %>
+    <div class="day-separator center-align small-margin">
+      <small class="secondary-text bold"><%= format_message_date(@message.created_at.to_date) %></small>
+    </div>
+  <% end %>
+  <%= render partial: 'sage/queries/message', locals: { message: @message } %>
+  <script>
+    setTimeout(() => {
+      const messagesDiv = document.getElementById('<%= dom_id(@query, 'messages') %>');
+      if (messagesDiv) {
+        messagesDiv.scrollTop = messagesDiv.scrollHeight;
+      }
+    }, 10);
+  </script>
+<% end %>
+
+<%= turbo_stream.replace(dom_id(@query, 'input')) do %>
+  <%= render partial: 'sage/queries/input', locals: { query: @query } %>
+<% end %>
+
+<%= turbo_stream.update 'chat-textarea', "" %>

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

@@ -0,0 +1,44 @@
+<%= turbo_frame_tag "messages-content" do %>
+  <% if @messages.any? %>
+    <% if @pagy.next %>
+      <!-- Pagination trigger for loading older messages -->
+      <div data-sage--reverse-infinite-scroll-target="pagination" style="height: 1px;"></div>
+    <% end %>
+    
+    <% messages_grouped_by_day(@messages).each do |date, messages| %>
+      <div class="day-separator center-align small-margin">
+        <small class="secondary-text bold"><%= format_message_date(date) %></small>
+      </div>
+      <%= render partial: 'sage/queries/message', collection: messages %>
+    <% end %>
+  <% else %>
+    <!-- Empty state -->
+    <div class="center-align padding" style="margin-top: 40px;">
+      <i class="large" style="font-size: 3rem; color: var(--surface-variant); margin-bottom: 16px;">💬</i>
+      <div class="medium-text secondary-text" style="margin-bottom: 8px;">No messages yet</div>
+      <small class="secondary-text">Start a conversation by asking a question below</small>
+    </div>
+  <% end %>
+  
+  <script>
+    // Scroll to bottom on initial load - only for page 1
+    <% if params[:page].blank? || params[:page].to_i == 1 %>
+      // Use multiple timeouts to ensure content is loaded
+      setTimeout(() => {
+        const messagesDiv = document.getElementById('<%= dom_id(@query, 'messages') %>');
+        if (messagesDiv) {
+          console.log("Scrolling to bottom, scrollHeight:", messagesDiv.scrollHeight);
+          messagesDiv.scrollTop = messagesDiv.scrollHeight;
+        }
+      }, 100);
+      
+      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);
+    <% end %>
+  </script>
+<% end %>

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

@@ -0,0 +1,15 @@
+<%= turbo_stream.append "entries" do %>
+  <% if @pagy.next %>
+    <!-- Add pagination trigger for next page -->
+    <div data-sage--reverse-infinite-scroll-target="pagination" style="height: 1px;"></div>
+  <% end %>
+
+  <div data-page="<%= @pagy.page %>">
+    <% messages_grouped_by_day(@messages).each do |date, messages| %>
+      <div class="day-separator center-align small-margin">
+        <small class="secondary-text bold"><%= format_message_date(date) %></small>
+      </div>
+      <%= render partial: 'sage/queries/message', collection: messages %>
+    <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,195 @@
+<%= blazer_title "New Query" %>
+<%# <%= render partial: "form" %>
+
+<div class="padding left-align">
+  <h5 class="">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>
+    </div>
+
+    <div class="form-actions">
+      <button type='submit' data-disable-with='Generating...'>Generate Report</button>
+    </div>
+  <% end %>
+
+  <turbo-frame id="query_result">
+  </turbo-frame>
+
+  <% if @schema.present? %>
+    <div class="padding">
+      <h6>Schema Guide</h6>
+      <p class="small-text">Available tables and their columns</p>
+      
+      <div class="grid">
+        <% @schema.each_with_index do |table_info, index| %>
+          <div class="s12 m6 l4">
+            <article class="schema-card">
+              <h5 class="table-title">
+                <i class="small">table</i>
+                <%= table_info[:table].to_s.gsub('_', ' ').titleize.truncate(20) %>
+              </h5>
+              <p class="small-text grey-text table-name"><%= table_info[:table].truncate(25) %></p>
+              
+              <p class="column-count">
+                <span class="large-text"><%= table_info[:columns].size %></span>
+                <span class="small-text">columns</span>
+              </p>
+              
+              <%= link_to "View Columns", 
+                  table_schema_queries_path(table_name: table_info[:table]), 
+                  class: "button small view-columns-btn",
+                  data: { turbo_frame: "overlay" } %>
+            </article>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  <% else %>
+    <div class="center-align padding">
+      <p class="grey-text">Schema information not available</p>
+    </div>
+  <% end %>
+</div>
+
+<style>
+  .sage-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+
+  .sage-header {
+    margin-bottom: 30px;
+    text-align: center;
+  }
+
+  .sage-header h1 {
+    margin-bottom: 10px;
+  }
+
+  .form-group {
+    margin-bottom: 20px;
+  }
+
+  .form-label {
+    font-weight: bold;
+    margin-bottom: 5px;
+    display: block;
+  }
+
+  .form-control {
+    width: 100%;
+    padding: 8px 12px;
+    font-size: 14px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background-color: #fff;
+    color: #333;
+  }
+
+  .form-control:focus {
+    outline: none;
+    border-color: #4CAF50;
+    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
+  }
+
+  /* Dark mode styles for form controls */
+  body.dark .form-control {
+    background-color: #2a2a2a;
+    color: #e6e6e6;
+    border-color: #444;
+  }
+
+  body.dark .form-control::placeholder {
+    color: #888;
+  }
+
+  body.dark .form-control:focus {
+    border-color: #4CAF50;
+    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
+  }
+
+  .form-actions {
+    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;
+  }
+
+  /* Dark mode styles for labels and helper text */
+  body.dark .form-label {
+    color: #e6e6e6;
+  }
+
+  body.dark .text-muted {
+    color: #999;
+  }
+
+  .schema-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .table-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: 5px;
+  }
+
+  .table-name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: 10px;
+  }
+
+</style>
+

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

@@ -0,0 +1 @@
+<%= render 'run' %>

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

@@ -0,0 +1,3 @@
+<%= turbo_stream.replace dom_id(@query, 'results') do %>
+  <%= render "run" %>
+<% end %>

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

@@ -0,0 +1,49 @@
+<% blazer_title @query.name %>
+
+<div class="padding left-align">
+  <h5 style="">
+    <%= @query.name %>
+  </h5>
+</div>
+
+<div class="row right-align">
+  <%= 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 %>
+    <%= button_to "Download", "/queries/run.csv", params: @run_data, class: "btn btn-primary" %>
+  <% end %>
+</div>
+
+<% if @sql_errors.any? %>
+  <div class="alert alert-danger">
+    <ul>
+      <% @sql_errors.each do |message| %>
+        <li><%= message %></li>
+      <% end %>
+    </ul>
+  </div>
+<% end %>
+
+<% if @query.description.present? %>
+  <p style="white-space: pre-line;"><%= @query.description %></p>
+<% end %>
+
+<%= render partial: "blazer/variables", locals: { action: query_path(@query) } %>
+
+<pre id="code"><code><%= @statement.display_statement %></code></pre>
+
+<% if @success %>
+  <%= turbo_frame_tag dom_id(@query, 'results'), src: run_query_path(@query.id, from_show: true) do  %>
+    loading...
+  <% end %>
+<% end %>
+
+<%= javascript_tag nonce: true do %>
+  // do not highlight really long queries
+  // this can lead to performance issues
+  var code = $("#code code")
+  if (code.text().length < 10000) {
+    hljs.highlightElement(code.get(0))
+  }
+<% end %>
+

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

@@ -0,0 +1,77 @@
+<%= turbo_frame_tag "overlay" do %>
+  <%= render layout: 'sage/shared/overlay', locals: { title: @table_display_name } do %>
+      <% if @table_info.present? %>
+        <p class="small-text grey-text"><%= @table_info[:table] %></p>
+
+        <div class="space"></div>
+
+        <h6>Columns (<%= @table_info[:columns].size %>)</h6>
+        <div class="columns-grid">
+          <% @table_info[:columns].each do |column| %>
+            <div class="row padding">
+              <div class="max">
+                <span class="column-name"><%= column[:name] %></span>
+              </div>
+              <div>
+                <span class="chip small"><%= column[:data_type].upcase %></span>
+              </div>
+            </div>
+          <% end %>
+        </div>
+      <% else %>
+        <h5>Table Not Found</h5>
+        <p>The requested table schema could not be found.</p>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <style>
+.overlay-header {
+  padding: 20px;
+  border-bottom: 1px solid #eee;
+}
+
+  .overlay-header h4 {
+    margin: 0 0 5px 0;
+  }
+
+  .overlay-content {
+    padding: 20px;
+  }
+
+  .columns-grid {
+    max-height: 400px;
+    overflow-y: auto;
+  }
+
+  .column-row {
+    padding: 10px 0;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  .column-row:last-child {
+    border-bottom: none;
+  }
+
+  .column-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .column-name {
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-weight: 500;
+    color: #0969da;
+  }
+
+  .column-type {
+    font-size: 11px;
+    color: #6c757d;
+    background: #e9ecef;
+    padding: 2px 8px;
+    border-radius: 12px;
+    text-transform: uppercase;
+    font-weight: 500;
+  }
+  </style>

data/app/views/sage/shared/_navigation.html.erb

@@ -0,0 +1,26 @@
+<nav class="m l left">
+  <header>
+    <button class="extra circle transparent">
+      Sage
+    </button>
+  </header>
+
+  <button id="theme-toggle" class='transparent circle' onclick="changeTheme()">
+    <i></i>
+  </button>
+  <%= link_to root_path, class: "#{current_page?(root_path) ? 'active' : ''}" do %>
+    <i>widgets</i>
+    <span>Queries</span>
+  <% end %>
+  <%= link_to checks_path, class: "#{current_page?(checks_path) ? 'active' : ''}" do %>
+    <i>style</i>
+    <span>Checks</span>
+  <% end %>
+  <%= link_to dashboards_path, class: "#{current_page?(dashboards_path) ? 'active' : ''}" do %>
+    <i>code</i>
+    <span>Dashboards</span>
+  <% end %>
+</nav>
+
+
+

data/app/views/sage/shared/_overlay.html.erb

@@ -0,0 +1,11 @@
+<dialog id='dialog' class="right" style='width: 400px;'>
+  <h5><%= local_assigns[:title] %></h5>
+  <div>
+    <%= yield %>
+  </div>
+
+  <div class="space"></div>
+  <nav class="right-align">
+    <button class="button" onclick="ui('#dialog'); document.getElementById('overlay').innerHTML = '';">Close</button>
+  </nav>
+</dialog>

data/config/importmap.rb

@@ -0,0 +1,11 @@
+pin "sage/application", to: "sage/application.js", preload: true
+pin "sage", to: "sage.js"
+pin "sage/controllers/search_controller", to: "sage/controllers/search_controller.js"
+pin "sage/controllers/clipboard_controller", to: "sage/controllers/clipboard_controller.js"
+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"
+
+# Don't pin common libraries - let the host app handle them
+# pin "@hotwired/stimulus", to: "stimulus.min.js"
+# pin "@hotwired/turbo-rails", to: "turbo.min.js"

data/config/initializers/pagy.rb

@@ -0,0 +1,2 @@
+Pagy::DEFAULT[:items] = 10
+Pagy::DEFAULT[:overflow] = :last_page