sage-rails 0.0.7 → 0.0.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f84a14a8dc13d5bca60926490250937bc5b52ae4f77c6962e328cbb28a5635a1
-  data.tar.gz: 59d079bb38465f75b165ed44d63b3cfd9d1f8d52a56fdb5c78feba7cdf987237
+  metadata.gz: 0d4771d99542d22d3e3665bd1d633decc10a4b9246fc867d48bb9b6c63598060
+  data.tar.gz: bf330ca38aff34abb0a3df19d09d937e2235d659a98f30143082569c1aea9aa3
 SHA512:
-  metadata.gz: 71fe7deb5b559a26703f21a3f81f998a4e32a521c91c37e2f69b01957cd39266e098ad679330cfec776408f95b2001dfa79c67f6df5fd9221a55d8e4e826d163
-  data.tar.gz: 4a30c3d554af61200f3424c30c00ab51263229470c8977799289f30fee9dac43605b867f7e7719af9b82c7c995288a13f493f289ccd393ad09198c01b70fcaa1
+  metadata.gz: db485b33ee21c595f40eb29e9d0e9aa62514ddd67db154ee0022757934ceedd7382183bef532f3566a4c13f6ec5d0a3bf9a2f44d6fd47835c665888752fd9d80
+  data.tar.gz: 51bcfe5e82dc8350c5c6294b75b1859e9e0bc6f24ed175d06c950a849c57b416fd86ad7956940c2a498c7cc10d1883d758382345e64e2161762cee62a7cc2d01

data/README.md

@@ -10,6 +10,8 @@ Sage is a Rails engine built on top of the excellent [Blazer](https://github.com
 
 ## Requirements
 
+Rails 7.1+ is recommended, compatability with older versions not guaranteed.
+
 Sage relies on `turbo-rails` and `stimulus-rails` to render the dashboard. These gems should already be included in most modern Rails applications. If not, add them to your Gemfile:
 
 ```ruby
@@ -45,7 +47,6 @@ This generator will:
 - Mount Sage at `/sage` in your routes
 - Create an initializer at `config/initializers/sage.rb`
 - Set up database migrations for message storage
-- Configure JavaScript and CSS dependencies
 
 After installation, run the migrations:
 ```bash

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

@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { text: String }
+
+  connect() {
+    console.log("Clipboard controller connected");
+  }
+
+  copy(event) {
+    event.preventDefault()
+    
+    navigator.clipboard.writeText(this.textValue).then(() => {
+      const originalText = event.target.textContent
+      event.target.textContent = "Copied!"
+      event.target.classList.add("btn-success")
+      
+      setTimeout(() => {
+        event.target.textContent = originalText
+        event.target.classList.remove("btn-success")
+      }, 2000)
+    }).catch(err => {
+      console.error('Failed to copy text: ', err)
+    })
+  }
+}

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

@@ -0,0 +1,132 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="dashboard"
+export default class extends Controller {
+  static targets = ["queryList", "queryTemplate"];
+  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();
+  }
+
+  addQuery(event) {
+    const { value, text } = event.detail;
+    
+    // Check for duplicates and remove if found
+    const existingIndex = this.selectedQueries.findIndex(q => q.id == value);
+    if (existingIndex !== -1) {
+      this.selectedQueries.splice(existingIndex, 1);
+    }
+    
+    // Add the new query
+    this.selectedQueries.push({ id: value, name: text });
+    this.render();
+  }
+
+  removeQuery(event) {
+    const index = parseInt(event.params.index);
+    this.selectedQueries.splice(index, 1);
+    this.render();
+  }
+
+  render() {
+    // Check if the target exists
+    if (!this.hasQueryListTarget) {
+      console.error("queryList target not found");
+      return;
+    }
+    
+    if (this.selectedQueries.length === 0) {
+      this.queryListTarget.style.display = 'none';
+      return;
+    }
+
+    this.queryListTarget.style.display = 'block';
+    let queriesContainer = this.queryListTarget.querySelector('#queries');
+    
+    // If the container doesn't exist, create it
+    if (!queriesContainer) {
+      queriesContainer = document.createElement('div');
+      queriesContainer.id = 'queries';
+      queriesContainer.style.display = 'flex';
+      queriesContainer.style.flexDirection = 'column';
+      queriesContainer.style.gap = '8px';
+      this.queryListTarget.appendChild(queriesContainer);
+    }
+    
+    queriesContainer.innerHTML = '';
+    
+    this.selectedQueries.forEach((query, index) => {
+      // Create a plain div without any Beer CSS classes
+      const item = document.createElement('div');
+      // Remove ALL classes and use inline styles only
+      item.style.cssText = `
+        display: flex !important;
+        align-items: center !important;
+        width: 100% !important;
+        padding: 12px !important;
+        margin-bottom: 8px !important;
+        background-color: #f5f5f5 !important;
+        border-radius: 8px !important;
+        opacity: 1 !important;
+        filter: none !important;
+      `;
+      
+      // Use a Material Icons checkbox instead of HTML input
+      const checkIcon = document.createElement('i');
+      checkIcon.className = 'material-icons';
+      checkIcon.textContent = 'check_box';
+      checkIcon.style.cssText = 'color: #6750A4 !important; margin-right: 12px !important; font-size: 24px !important;';
+      
+      const text = document.createElement('strong');  // Use strong tag
+      text.textContent = query.name;
+      text.style.cssText = 'flex: 1 !important; color: #000000 !important; opacity: 1 !important; filter: none !important;';
+      
+      const closeBtn = document.createElement('i');
+      closeBtn.className = 'material-icons';
+      closeBtn.textContent = 'close';
+      closeBtn.style.cssText = 'cursor: pointer !important; color: #000000 !important; opacity: 1 !important; font-size: 20px !important;';
+      closeBtn.setAttribute('data-action', 'click->sage--dashboard#removeQuery');
+      closeBtn.setAttribute('data-sage--dashboard-index-param', index);
+      
+      const hiddenInput = document.createElement('input');
+      hiddenInput.type = 'hidden';
+      hiddenInput.name = 'query_ids[]';
+      hiddenInput.value = query.id;
+      
+      item.appendChild(checkIcon);
+      item.appendChild(text);
+      item.appendChild(closeBtn);
+      item.appendChild(hiddenInput);
+      
+      queriesContainer.appendChild(item);
+    });
+  }
+
+  setupSortable() {
+    if (typeof Sortable !== 'undefined') {
+      const queriesContainer = this.queryListTarget.querySelector('#queries');
+      if (queriesContainer) {
+        Sortable.create(queriesContainer, {
+          onEnd: (e) => {
+            // Move the item in our array to match the new position
+            const movedItem = this.selectedQueries.splice(e.oldIndex, 1)[0];
+            this.selectedQueries.splice(e.newIndex, 0, movedItem);
+            this.render();
+          }
+        });
+      }
+    }
+  }
+}

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

@@ -0,0 +1,146 @@
+import { Controller } from "@hotwired/stimulus";
+
+console.log("Reverse infinite scroll controller file loaded!");
+
+export default class extends Controller {
+  static targets = ["entries", "pagination"];
+  static values = {
+    url: String,
+    page: Number,
+    loading: Boolean,
+  };
+
+  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();
+          }
+        });
+      },
+      {
+        rootMargin: "50px 0px 50px 0px",
+        threshold: 0.1,
+      }
+    );
+  }
+
+  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();
+  }
+
+  buildUrl(nextPage) {
+    const url = new URL(this.urlValue, window.location.origin);
+    url.searchParams.set("page", nextPage);
+    return url.toString();
+  }
+
+  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;
+    const oldScrollTop = this.element.scrollTop;
+
+    try {
+      const url = this.buildUrl(nextPage);
+      console.log("Fetching URL:", url);
+      
+      const response = await fetch(url, {
+        headers: {
+          Accept: "text/vnd.turbo-stream.html",
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const html = await response.text();
+      console.log("Received response for page", nextPage);
+
+      // Parse the turbo-stream content
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(html, "text/html");
+      const template = doc.querySelector("template");
+
+      if (template) {
+        // Remove the current pagination target before appending new content
+        if (this.hasPaginationTarget) {
+          this.paginationTarget.remove();
+        }
+
+        // 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(() => {
+          const newScrollHeight = this.element.scrollHeight;
+          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

@@ -0,0 +1,47 @@
+import { Controller } from "@hotwired/stimulus";
+import debounce from "debounce";
+
+// Connects to data-controller="search"
+export default class extends Controller {
+  initialize() {
+    this.submit = debounce(this.submit.bind(this), 300);
+    this.searchInput = null;
+  }
+
+  connect() {
+    console.log("Search controller initialized");
+    // Find the search input
+    this.searchInput = this.element.querySelector('input[type="search"]');
+
+    if (this.searchInput) {
+      // Focus the input
+      if (this.searchInput.value.length > 0) {
+        this.searchInput.focus();
+      }
+
+      // If we have a stored cursor position, restore it
+      if (this.cursorPosition !== undefined) {
+        this.searchInput.setSelectionRange(
+          this.cursorPosition,
+          this.cursorPosition
+        );
+        // Clear the stored position after using it
+        this.cursorPosition = undefined;
+      } else {
+        // If no stored position, place cursor at the end
+        const length = this.searchInput.value.length;
+        this.searchInput.setSelectionRange(length, length);
+      }
+    }
+  }
+
+  submit(event) {
+    // Store the cursor position before submitting
+    if (this.searchInput) {
+      this.cursorPosition = this.searchInput.selectionStart;
+    }
+
+    this.element.requestSubmit();
+  }
+}
+

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

@@ -0,0 +1,215 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="select"
+export default class extends Controller {
+  static targets = ["input", "dropdown", "option", "hidden"];
+  static values = { 
+    options: Array,
+    placeholder: String,
+    selected: String,
+    maxOptions: { type: Number, default: 100 }
+  };
+
+  connect() {
+    this.selectedValue = this.selectedValue || "";
+    
+    // Parse options if they're a string
+    let options = this.optionsValue;
+    if (typeof options === 'string') {
+      try {
+        options = JSON.parse(options);
+      } catch (e) {
+        console.error("Failed to parse options:", e);
+        options = [];
+      }
+    }
+    
+    this.filteredOptions = Array.isArray(options) ? options.slice(0, this.maxOptionsValue) : [];
+    
+    // If there's a pre-selected value from the data attribute, set it
+    if (this.hasSelectedValue && this.selectedValue) {
+      const selectedOption = this.filteredOptions.find(opt => opt.value == this.selectedValue);
+      if (selectedOption) {
+        this.inputTarget.value = selectedOption.text;
+        if (this.hasHiddenTarget) {
+          this.hiddenTarget.value = selectedOption.value;
+        }
+      }
+    }
+    
+    this.render();
+    this.setupEventListeners();
+  }
+
+  setupEventListeners() {
+    // Close dropdown when clicking outside
+    document.addEventListener('click', this.handleOutsideClick.bind(this));
+    
+    // Handle keyboard navigation
+    this.inputTarget.addEventListener('keydown', this.handleKeydown.bind(this));
+  }
+
+  disconnect() {
+    document.removeEventListener('click', this.handleOutsideClick.bind(this));
+  }
+
+  handleOutsideClick(event) {
+    if (!this.element.contains(event.target)) {
+      this.closeDropdown();
+    }
+  }
+
+  handleKeydown(event) {
+    const dropdown = this.dropdownTarget;
+    const options = this.optionTargets;
+    const activeOption = dropdown.querySelector('.active');
+    
+    switch(event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this.navigateOptions(options, activeOption, 1);
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.navigateOptions(options, activeOption, -1);
+        break;
+      case 'Enter':
+        event.preventDefault();
+        if (activeOption) {
+          this.selectOption(activeOption.dataset.value, activeOption.textContent);
+        }
+        break;
+      case 'Escape':
+        this.closeDropdown();
+        break;
+    }
+  }
+
+  navigateOptions(options, activeOption, direction) {
+    let currentIndex = activeOption ? Array.from(options).indexOf(activeOption) : -1;
+    let nextIndex = currentIndex + direction;
+    
+    if (nextIndex < 0) nextIndex = options.length - 1;
+    if (nextIndex >= options.length) nextIndex = 0;
+    
+    // Remove active class from all options
+    options.forEach(option => option.classList.remove('active'));
+    
+    // Add active class to next option
+    if (options[nextIndex]) {
+      options[nextIndex].classList.add('active');
+      options[nextIndex].scrollIntoView({ block: 'nearest' });
+    }
+  }
+
+  search(event) {
+    const query = event.target.value.toLowerCase().trim();
+    
+    // Parse options properly
+    let options = this.optionsValue;
+    if (typeof options === 'string') {
+      try {
+        options = JSON.parse(options);
+      } catch (e) {
+        options = [];
+      }
+    }
+    options = Array.isArray(options) ? options : [];
+    
+    if (query === '' || query === ' ') {
+      this.filteredOptions = options.slice(0, this.maxOptionsValue);
+    } else {
+      this.filteredOptions = options
+        .filter(option => option.text.toLowerCase().includes(query))
+        .slice(0, this.maxOptionsValue);
+    }
+    
+    this.renderOptions();
+    this.openDropdown();
+  }
+
+  selectOption(value, text) {
+    // Update the input to show selected text
+    this.inputTarget.value = text;
+    this.selectedValue = value;
+    
+    // Update hidden field if present
+    if (this.hasHiddenTarget) {
+      this.hiddenTarget.value = value;
+    }
+    
+    // Dispatch custom event for external handling
+    const selectEvent = new CustomEvent('select:change', {
+      detail: { value: value, text: text },
+      bubbles: true
+    });
+    this.element.dispatchEvent(selectEvent);
+    
+    this.closeDropdown();
+  }
+
+  openDropdown() {
+    this.dropdownTarget.classList.remove('hidden');
+    this.dropdownTarget.classList.add('visible');
+  }
+
+  closeDropdown() {
+    this.dropdownTarget.classList.remove('visible');
+    this.dropdownTarget.classList.add('hidden');
+  }
+
+  focus() {
+    // Reset search to show all options when focusing
+    const currentValue = this.inputTarget.value.trim();
+    if (currentValue === '' || currentValue === ' ') {
+      // Parse options properly
+      let options = this.optionsValue;
+      if (typeof options === 'string') {
+        try {
+          options = JSON.parse(options);
+        } catch (e) {
+          options = [];
+        }
+      }
+      this.filteredOptions = Array.isArray(options) ? options.slice(0, this.maxOptionsValue) : [];
+      this.renderOptions();
+    }
+    this.openDropdown();
+  }
+
+  blur() {
+    // Delay hiding to allow option clicks
+    setTimeout(() => {
+      this.closeDropdown();
+    }, 150);
+  }
+
+  render() {
+    // Don't set placeholder for Beer CSS floating labels
+    this.renderOptions();
+  }
+
+  renderOptions() {
+    this.dropdownTarget.innerHTML = '';
+    
+    if (this.filteredOptions.length === 0) {
+      const noResults = document.createElement('div');
+      noResults.className = 'select-option no-results';
+      noResults.textContent = 'No results found';
+      this.dropdownTarget.appendChild(noResults);
+      return;
+    }
+    
+    this.filteredOptions.forEach(option => {
+      const optionElement = document.createElement('div');
+      optionElement.className = 'select-option';
+      optionElement.dataset.selectTarget = 'option';
+      optionElement.dataset.value = option.value;
+      optionElement.textContent = option.text;
+      optionElement.addEventListener('click', () => {
+        this.selectOption(option.value, option.text);
+      });
+      this.dropdownTarget.appendChild(optionElement);
+    });
+  }
+}

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

@@ -0,0 +1,122 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["form", "variable"]
+  
+  connect() {
+    // Override the global submitIfCompleted function from Blazer
+    window.submitIfCompleted = this.submitIfCompleted.bind(this)
+    
+    // Set up event listeners for variable changes
+    this.setupVariableListeners()
+  }
+  
+  setupVariableListeners() {
+    // Listen for changes on all variable inputs
+    this.variableTargets.forEach(input => {
+      input.addEventListener("change", (event) => {
+        this.handleVariableChange(event)
+      })
+      
+      // Also listen for daterangepicker events if present
+      if (input.dataset.daterangepicker) {
+        const picker = $(input).data('daterangepicker')
+        if (picker) {
+          $(input).on('apply.daterangepicker', (ev, picker) => {
+            this.handleDateRangeChange(input, picker)
+          })
+        }
+      }
+    })
+  }
+  
+  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(() => {
+      this.submitIfCompleted(this.formTarget)
+    }, 100) // Small delay to ensure all values are updated
+  }
+  
+  handleDateRangeChange(input, picker) {
+    console.log(`Date range updated for ${input.name}:`, input.value)
+    
+    // Force update any related hidden fields
+    this.updateRelatedDateFields(input, picker)
+    
+    // Submit the form after date range is updated
+    setTimeout(() => {
+      this.submitIfCompleted(this.formTarget)
+    }, 200) // Longer delay for date picker updates
+  }
+  
+  updateRelatedDateFields(input, picker) {
+    // If this is a start_time/end_time combo, make sure both are updated
+    if (input.name === "start_time" || input.name === "end_time") {
+      const startTimeInput = this.formTarget.querySelector('input[name="start_time"]')
+      const endTimeInput = this.formTarget.querySelector('input[name="end_time"]')
+      
+      if (startTimeInput && endTimeInput && picker) {
+        // Update both fields based on the picker values
+        if (picker.startDate) {
+          startTimeInput.value = picker.startDate.utc().format()
+        }
+        if (picker.endDate) {
+          endTimeInput.value = picker.endDate.endOf("day").utc().format()
+        }
+      }
+    }
+  }
+  
+  submitIfCompleted(form) {
+    if (!form) return
+    
+    let completed = true
+    const requiredInputs = form.querySelectorAll('input[name], select[name]')
+    
+    // Check each required input
+    requiredInputs.forEach(input => {
+      const value = input.value
+      
+      // 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()
+    }
+  }
+  
+  isEmpty(value) {
+    // More comprehensive empty check
+    return value === null || 
+           value === undefined || 
+           value === "" || 
+           (typeof value === "string" && value.trim() === "")
+  }
+  
+  // Manual trigger for testing
+  triggerSubmit() {
+    this.submitIfCompleted(this.formTarget)
+  }
+  
+  // 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

@@ -0,0 +1,21 @@
+// Import controllers
+import SearchController from "sage/controllers/search_controller"
+import ClipboardController from "sage/controllers/clipboard_controller"
+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"
+
+// Export all Sage controllers for manual registration
+export { SearchController, ClipboardController, SelectController, DashboardController, ReverseInfiniteScrollController, VariablesController }
+
+// Register all Sage controllers with the provided Stimulus application
+export function registerControllers(application) {
+  application.register("sage--search", SearchController)
+  application.register("sage--clipboard", ClipboardController)
+  application.register("sage--select", SelectController)
+  application.register("sage--dashboard", DashboardController)
+  application.register("sage--reverse-infinite-scroll", ReverseInfiniteScrollController)
+  application.register("sage--variables", VariablesController)
+}
+

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

@@ -20,7 +20,6 @@ module Sage
       end
 
       def add_routes
-        # Remove existing Blazer route if present
         routes_file = "config/routes.rb"
         if File.exist?(routes_file)
           routes_content = File.read(routes_file)
@@ -29,15 +28,19 @@ module Sage
           blazer_route_pattern = /^\s*mount\s+Blazer::Engine\s*,\s*at:\s*['"]blazer['"]\s*$/
 
           if routes_content.match?(blazer_route_pattern)
-            # Remove the Blazer route
-            gsub_file routes_file, blazer_route_pattern, ""
-            say "Removed existing Blazer route", :yellow
+            # Replace the Blazer route with Sage route
+            gsub_file routes_file, blazer_route_pattern, '  mount Sage::Engine => "/sage"'
+            say "Replaced Blazer route with Sage route at /sage", :green
+          else
+            # No existing Blazer route, add Sage route
+            route 'mount Sage::Engine => "/sage"'
+            say "Mounted Sage at /sage", :green
           end
+        else
+          # No routes file, add Sage route
+          route 'mount Sage::Engine => "/sage"'
+          say "Mounted Sage at /sage", :green
         end
-
-        # Mount Sage (which includes Blazer functionality)
-        route 'mount Sage::Engine => "/sage"'
-        say "Mounted Sage at /sage", :green
       end
 
       def create_initializer
@@ -72,31 +75,6 @@ module Sage
         say "Created migration for sage_messages table", :green
       end
 
-      def add_javascript_integration
-        say "Configuring JavaScript integration...", :green
-
-        # Update controllers/index.js to register Sage controllers
-        controllers_index_path = "app/javascript/controllers/index.js"
-        if File.exist?(controllers_index_path)
-          controllers_content = File.read(controllers_index_path)
-          unless controllers_content.include?("sage")
-            append_to_file controllers_index_path do
-              <<~JS
-
-                // Import and register Sage controllers
-                import { registerControllers } from "sage"
-                registerControllers(application)
-              JS
-            end
-            say "Updated controllers/index.js to register Sage controllers", :green
-          else
-            say "Sage controllers already registered in controllers/index.js", :yellow
-          end
-        else
-          say "Could not find app/javascript/controllers/index.js - you'll need to manually import Sage controllers", :yellow
-        end
-      end
-
       def add_stylesheets
         # Stylesheets are served directly from the engine via the asset pipeline
         # No need to copy or require them - they're automatically available

data/lib/sage/engine.rb

@@ -141,8 +141,8 @@ module Sage
     end
 
     initializer "sage.assets" do |app|
-      # Add JavaScript path for Propshaft
-      if defined?(Propshaft::Railtie)
+      # Add JavaScript paths based on asset pipeline
+      if app.config.respond_to?(:assets)
         app.config.assets.paths << Engine.root.join("app/javascript")
         app.config.assets.paths << Engine.root.join("app/javascript/sage")
       end

data/lib/sage/version.rb

@@ -1,3 +1,3 @@
 module Sage
-  VERSION = "0.0.7"
+  VERSION = "0.0.8"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: sage-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.7
+  version: 0.0.8
 platform: ruby
 authors:
 - Nathan Jones
@@ -148,7 +148,14 @@ files:
 - app/assets/images/sage/chevron-down-zinc-500.svg
 - app/assets/images/sage/chevron-right.svg
 - app/assets/images/sage/loading.svg
+- app/assets/javascripts/sage.js
 - 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/reverse_infinite_scroll_controller.js
+- app/assets/javascripts/sage/controllers/search_controller.js
+- app/assets/javascripts/sage/controllers/select_controller.js
+- app/assets/javascripts/sage/controllers/variables_controller.js
 - app/assets/stylesheets/sage/application.css
 - app/controllers/sage/actions_controller.rb
 - app/controllers/sage/application_controller.rb