rails_nexus 2.0.0

data/app/javascript/controllers/rails_nexus_controller.js

@@ -0,0 +1,380 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["activity", "shortcutsDialog", "tabs", "tabContent", "exceptionList", "backtraceHidden", "backtraceContent"]
+  static values = { shortcuts: Boolean }
+
+  connect() {
+    this.selectedIndex = -1
+    this.rows = []
+
+    this.showActivity = this.showActivity.bind(this)
+    this.hideActivity = this.hideActivity.bind(this)
+
+    document.addEventListener("turbo:before-fetch-request", this.showActivity)
+    document.addEventListener("turbo:before-fetch-response", this.hideActivity)
+    document.addEventListener("turbo:submit-end", this.hideActivity)
+
+    if (this.shortcutsValue) {
+      this.boundKeydown = this.handleKeydown.bind(this)
+      document.addEventListener("keydown", this.boundKeydown)
+    }
+  }
+
+  disconnect() {
+    document.removeEventListener("turbo:before-fetch-request", this.showActivity)
+    document.removeEventListener("turbo:before-fetch-response", this.hideActivity)
+    document.removeEventListener("turbo:submit-end", this.hideActivity)
+
+    if (this.boundKeydown) {
+      document.removeEventListener("keydown", this.boundKeydown)
+    }
+  }
+
+  // ─── Keyboard Navigation ──────────────────────────────────
+
+  handleKeydown(event) {
+    // Ignore when typing in an input/textarea/select
+    const tag = event.target.tagName.toLowerCase()
+    if (tag === "input" || tag === "textarea" || tag === "select") {
+      if (event.key === "Escape") {
+        event.target.blur()
+        event.preventDefault()
+      }
+      return
+    }
+
+    switch (event.key) {
+      case "/":
+        event.preventDefault()
+        this.focusSearch()
+        break
+      case "j":
+      case "ArrowDown":
+        event.preventDefault()
+        this.navigateDown()
+        break
+      case "k":
+      case "ArrowUp":
+        event.preventDefault()
+        this.navigateUp()
+        break
+      case "Enter":
+        event.preventDefault()
+        this.openSelected()
+        break
+      case "p":
+      case "ArrowLeft":
+        event.preventDefault()
+        this.navigateToPrev()
+        break
+      case "n":
+      case "ArrowRight":
+        event.preventDefault()
+        this.navigateToNext()
+        break
+      case "t":
+        event.preventDefault()
+        this.toggleTheme()
+        break
+      case "Escape":
+        event.preventDefault()
+        this.closeDetails(event)
+        this.closeShortcuts()
+        break
+      case "?":
+        event.preventDefault()
+        this.toggleShortcuts()
+        break
+      case "1": case "2": case "3": case "4": case "5":
+        event.preventDefault()
+        this.switchTabByIndex(parseInt(event.key) - 1)
+        break
+    }
+  }
+
+  focusSearch() {
+    const search = this.element.querySelector(".rn-search .rn-input, input[type='search']")
+    if (search) {
+      search.focus()
+      search.select()
+    }
+  }
+
+  refreshRows() {
+    if (this.hasExceptionListTarget) {
+      this.rows = Array.from(this.exceptionListTarget.querySelectorAll("tr[data-url]"))
+    } else {
+      this.rows = Array.from(this.element.querySelectorAll("tr[data-url]"))
+    }
+  }
+
+  navigateDown() {
+    this.refreshRows()
+    if (this.rows.length === 0) return
+
+    this.selectedIndex = Math.min(this.selectedIndex + 1, this.rows.length - 1)
+    this.highlightRow()
+  }
+
+  navigateUp() {
+    this.refreshRows()
+    if (this.rows.length === 0) return
+
+    this.selectedIndex = Math.max(this.selectedIndex - 1, 0)
+    this.highlightRow()
+  }
+
+  highlightRow() {
+    this.rows.forEach((row, i) => {
+      row.classList.toggle("selected", i === this.selectedIndex)
+    })
+
+    const row = this.rows[this.selectedIndex]
+    if (row) {
+      row.scrollIntoView({ block: "nearest", behavior: "smooth" })
+    }
+  }
+
+  openSelected() {
+    this.refreshRows()
+    if (this.selectedIndex < 0 || this.selectedIndex >= this.rows.length) return
+
+    const row = this.rows[this.selectedIndex]
+    const url = row.dataset.url
+    if (url) {
+      // Fetch and load into the detail panel
+      this.selectRow({ currentTarget: row, preventDefault: () => {} })
+    }
+  }
+
+  // ─── Row Selection ────────────────────────────────────────
+
+  selectRow(event) {
+    event.preventDefault()
+    const row = event.currentTarget
+    const url = row.dataset.url
+    if (!url) return
+
+    // Highlight selected row
+    this.refreshRows()
+    this.rows.forEach(r => r.classList.remove("selected"))
+    row.classList.add("selected")
+
+    // Show detail panel
+    const detailPanel = document.getElementById("exception-detail-desktop")
+    if (detailPanel) {
+      detailPanel.hidden = false
+      detailPanel.classList.remove("hidden")
+    }
+
+    // Load content via Turbo
+    const frame = document.getElementById("exception-details")
+    if (frame) {
+      frame.innerHTML = ""
+      frame.src = url
+    }
+  }
+
+  stopPropagation(event) {
+    event.stopPropagation()
+  }
+
+  // ─── Close Details ────────────────────────────────────────
+
+  closeDetails(event) {
+    event.preventDefault()
+
+    // Deselect all rows
+    this.refreshRows()
+    this.rows.forEach(r => r.classList.remove("selected"))
+    this.selectedIndex = -1
+
+    // Hide detail panel
+    const detailPanel = document.getElementById("exception-detail-desktop")
+    if (detailPanel) {
+      detailPanel.hidden = true
+      detailPanel.classList.add("hidden")
+    }
+
+    // Clear the turbo frame
+    const frame = document.getElementById("exception-details")
+    if (frame) {
+      frame.innerHTML = `
+        <div class="text-center py-12">
+          <div class="w-10 h-10 rounded-full flex items-center justify-center mx-auto" style="background: var(--rn-bg-secondary)">
+            <svg class="w-5 h-5" style="color: var(--rn-text-muted)" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+            </svg>
+          </div>
+          <p class="mt-2 text-xs" style="color: var(--rn-text-muted)">Select an exception to view details</p>
+          <p class="mt-1 text-xs" style="color: var(--rn-text-muted)">Click a row or press <span class="rn-kbd">↓</span> <span class="rn-kbd">↑</span> to navigate</p>
+        </div>
+      `
+    }
+  }
+
+  // ─── Tab Switching ────────────────────────────────────────
+
+  switchTab(event) {
+    const tabName = event.currentTarget.dataset.flTabParam || event.currentTarget.dataset.flTab
+    this.activateTab(tabName)
+  }
+
+  switchTabByIndex(index) {
+    if (!this.hasTabsTarget) return
+    const tabs = this.tabsTarget.querySelectorAll(".rn-tab")
+    if (index >= 0 && index < tabs.length) {
+      const tabName = tabs[index].dataset.flTabParam || tabs[index].dataset.flTab
+      this.activateTab(tabName)
+    }
+  }
+
+  activateTab(tabName) {
+    // Update tab buttons
+    if (this.hasTabsTarget) {
+      this.tabsTarget.querySelectorAll(".rn-tab").forEach(tab => {
+        const isActive = (tab.dataset.flTabParam || tab.dataset.flTab) === tabName
+        tab.classList.toggle("active", isActive)
+      })
+    }
+
+    // Show/hide tab content
+    this.tabContentTargets.forEach(content => {
+      const isTarget = content.dataset.flTabContent === tabName
+      content.style.display = isTarget ? "" : "none"
+    })
+  }
+
+  // ─── Theme Toggle ─────────────────────────────────────────
+
+  toggleTheme() {
+    const themeController = this.application.getControllerForElementAndIdentifier(
+      document.documentElement,
+      "rails_nexus-theme"
+    )
+    if (themeController) {
+      themeController.toggle()
+    } else {
+      // Fallback: direct DOM manipulation
+      const root = document.documentElement
+      const isDark = root.classList.contains("dark")
+      root.classList.remove("dark", "light")
+      root.classList.add(isDark ? "light" : "dark")
+      localStorage.setItem("rails_nexus-theme", isDark ? "light" : "dark")
+    }
+  }
+
+  // ─── Keyboard Shortcuts Dialog ────────────────────────────
+
+  toggleShortcuts() {
+    if (!this.hasShortcutsDialogTarget) return
+    const isOpen = this.shortcutsDialogTarget.classList.contains("open")
+    if (isOpen) {
+      this.closeShortcuts()
+    } else {
+      this.shortcutsDialogTarget.classList.add("open")
+    }
+  }
+
+  closeShortcuts() {
+    if (this.hasShortcutsDialogTarget) {
+      this.shortcutsDialogTarget.classList.remove("open")
+    }
+  }
+
+  // ─── Navigation (prev/next) ───────────────────────────────
+
+  navigateToPrev() {
+    const prevLink = document.querySelector(".rn-nav-link[href*='logged_exceptions']")
+    if (prevLink && prevLink.querySelector(".rn-nav-link-label")?.textContent === "Previous") {
+      prevLink.click()
+    }
+  }
+
+  navigateToNext() {
+    const links = document.querySelectorAll(".rn-nav-link[href*='logged_exceptions']")
+    const nextLink = Array.from(links).find(link =>
+      link.querySelector(".rn-nav-link-label")?.textContent === "Next"
+    )
+    if (nextLink) nextLink.click()
+  }
+
+  // ─── Copy to Clipboard ───────────────────────────────────
+
+  copyId(event) {
+    const id = event.currentTarget.dataset.rails_nexusIdValue
+    if (id) this.copyToClipboard(id, event.currentTarget)
+  }
+
+  copyMessage(event) {
+    const message = event.currentTarget.dataset.rails_nexusMessageValue
+    if (message) this.copyToClipboard(message, event.currentTarget)
+  }
+
+  copyBacktrace(event) {
+    const backtrace = event.currentTarget.dataset.rails_nexusBacktraceValue
+    if (backtrace) this.copyToClipboard(backtrace, event.currentTarget)
+  }
+
+  async copyToClipboard(text, button) {
+    try {
+      await navigator.clipboard.writeText(text)
+      const originalHTML = button.innerHTML
+      button.classList.add("copied")
+      button.innerHTML = `<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg> Copied!`
+      setTimeout(() => {
+        button.classList.remove("copied")
+        button.innerHTML = originalHTML
+      }, 2000)
+    } catch (err) {
+      // Fallback for older browsers
+      const textarea = document.createElement("textarea")
+      textarea.value = text
+      textarea.style.position = "fixed"
+      textarea.style.opacity = "0"
+      document.body.appendChild(textarea)
+      textarea.select()
+      document.execCommand("copy")
+      document.body.removeChild(textarea)
+    }
+  }
+
+  // ─── Backtrace Expand ─────────────────────────────────────
+
+  expandBacktrace(event) {
+    event.preventDefault()
+    const hidden = this.backtraceHiddenTarget
+    if (hidden) {
+      hidden.style.display = hidden.style.display === "none" ? "" : "none"
+      event.currentTarget.textContent = hidden.style.display === "none"
+        ? `Show ${hidden.textContent.split("\n").length} more frames`
+        : "Hide additional frames"
+    }
+  }
+
+  // ─── Submit Helpers ───────────────────────────────────────
+
+  submit() {
+    this.showActivity()
+    const form = this.element.querySelector("form[data-turbo-frame]")
+    if (form) form.requestSubmit()
+  }
+
+  debouncedSubmit(event) {
+    clearTimeout(this._debounceTimer)
+    this._debounceTimer = setTimeout(() => {
+      this.submit()
+    }, 400)
+  }
+
+  // ─── Loading State ────────────────────────────────────────
+
+  showActivity() {
+    this.activityTarget?.classList.remove("hidden")
+  }
+
+  hideActivity() {
+    this.activityTarget?.classList.add("hidden")
+  }
+}

data/app/javascript/controllers/rails_nexus_detail_controller.js

@@ -0,0 +1,165 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["tabs", "tabContent", "backtraceContent", "backtraceHidden", "sourcePanel"]
+
+  // ─── Tab Switching ────────────────────────────────────────
+
+  switchTab(event) {
+    const tabName = event.params.tab || event.currentTarget.getAttribute("data-rn-tab-param")
+    if (!tabName) return
+
+    // Update tab buttons
+    this.tabsTarget.querySelectorAll(".rn-tab").forEach(tab => {
+      const isActive = tab.getAttribute("data-rn-tab-param") === tabName
+      tab.classList.toggle("active", isActive)
+    })
+
+    // Show/hide tab content
+    this.tabContentTargets.forEach(content => {
+      const isTarget = content.getAttribute("data-rn-tab-content") === tabName
+      content.style.display = isTarget ? "" : "none"
+    })
+  }
+
+  // ─── Copy to Clipboard ───────────────────────────────────
+
+  copyId(event) {
+    const id = event.currentTarget.getAttribute("data-rails_nexus-detail-id-value") ||
+               event.currentTarget.dataset.rails_nexusDetailIdValue
+    if (id) this.copyToClipboard(id, event.currentTarget)
+  }
+
+  copyMessage(event) {
+    const msg = event.currentTarget.getAttribute("data-rails_nexus-detail-message-value") ||
+                event.currentTarget.dataset.rails_nexusDetailMessageValue
+    if (msg) this.copyToClipboard(msg, event.currentTarget)
+  }
+
+  copyBacktrace(event) {
+    const bt = event.currentTarget.getAttribute("data-rails_nexus-detail-backtrace-value") ||
+               event.currentTarget.dataset.rails_nexusDetailBacktraceValue
+    if (bt) this.copyToClipboard(bt, event.currentTarget)
+  }
+
+  async copyToClipboard(text, button) {
+    try {
+      await navigator.clipboard.writeText(text)
+    } catch {
+      const textarea = document.createElement("textarea")
+      textarea.value = text
+      textarea.style.position = "fixed"
+      textarea.style.opacity = "0"
+      document.body.appendChild(textarea)
+      textarea.select()
+      document.execCommand("copy")
+      document.body.removeChild(textarea)
+    }
+    const orig = button.innerHTML
+    button.classList.add("copied")
+    button.innerHTML = `<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg> Copied!`
+    setTimeout(() => { button.classList.remove("copied"); button.innerHTML = orig }, 2000)
+  }
+
+  // ─── Backtrace Expand ────────────────────────────────────
+
+  expandBacktrace(event) {
+    event.preventDefault()
+    const hidden = this.backtraceHiddenTarget
+    if (hidden) {
+      hidden.style.display = hidden.style.display === "none" ? "" : "none"
+      event.currentTarget.textContent = hidden.style.display === "none"
+        ? "Show more frames"
+        : "Hide additional frames"
+    }
+  }
+
+  // ─── Source Code Toggle ─────────────────────────────────
+
+  toggleSource(event) {
+    event.preventDefault()
+    const btn = event.currentTarget
+    const file = btn.dataset.file
+    const line = btn.dataset.line
+
+    // Find the source panel for this frame
+    const panel = this.sourcePanelTargets.find(p =>
+      p.dataset.file === file && p.dataset.line === line
+    )
+    if (!panel) return
+
+    if (panel.style.display === "none") {
+      // Load source code via AJAX
+      panel.style.display = ""
+      const loading = panel.querySelector(".rn-source-loading")
+      if (loading) loading.style.display = ""
+
+      fetch(`/rails_nexus/source_code?file=${encodeURIComponent(file)}&line=${line}&context=5`, {
+        headers: { "Accept": "application/json" }
+      })
+        .then(r => r.json())
+        .then(data => {
+          if (data.source) {
+            panel.innerHTML = this.renderSourceSnippet(data.source, data.blame)
+          } else {
+            panel.innerHTML = `<div class="text-xs" style="color: var(--rn-text-muted); padding: 0.5rem">Source not available</div>`
+          }
+        })
+        .catch(() => {
+          panel.innerHTML = `<div class="text-xs" style="color: var(--rn-text-muted); padding: 0.5rem">Failed to load source</div>`
+        })
+    } else {
+      panel.style.display = "none"
+    }
+  }
+
+  renderSourceSnippet(snippet, blame) {
+    let html = `<div class="rn-source-code rounded" style="background: var(--rn-bg-primary); border: 1px solid var(--rn-border-light); overflow-x: auto; font-size: 0.75rem; font-family: monospace">`
+
+    // Git blame header
+    if (blame) {
+      html += `<div class="flex items-center gap-2 px-3 py-1.5" style="background: var(--rn-bg-secondary); border-bottom: 1px solid var(--rn-border-light); font-size: 0.7rem; color: var(--rn-text-muted)">`
+      html += `<span style="color: var(--rn-primary)">${blame.author || 'unknown'}</span>`
+      html += `<span>·</span>`
+      html += `<span>${blame.date || ''}</span>`
+      html += `<span>·</span>`
+      html += `<span style="color: var(--rn-text-muted)">${blame.message || ''}</span>`
+      html += `<span class="ml-auto font-mono" style="color: var(--rn-text-muted)">${blame.sha || ''}</span>`
+      html += `</div>`
+    }
+
+    // Source lines
+    snippet.lines.forEach((line) => {
+      const bg = line.is_error ? 'var(--rn-bg-warning-subtle)' : 'transparent'
+      html += `<div class="flex" style="background: ${bg}; padding: 0 0.75rem">`
+      html += `<span style="min-width: 2.5rem; text-align: right; color: var(--rn-text-muted); user-select: none; padding-right: 1rem">${line.number}</span>`
+      html += `<span style="white-space: pre; color: var(--rn-text)">${(line.content || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')}</span>`
+      html += `</div>`
+    })
+
+    html += `</div>`
+    return html
+  }
+
+  // ─── Close Details ───────────────────────────────────────
+
+  closeDetails() {
+    const frame = document.getElementById("exception-details")
+    if (frame) {
+      frame.innerHTML = `
+        <div class="text-center py-12">
+          <div class="w-10 h-10 rounded-full flex items-center justify-center mx-auto" style="background: var(--rn-bg-secondary)">
+            <svg class="w-5 h-5" style="color: var(--rn-text-muted)" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+            </svg>
+          </div>
+          <p class="mt-2 text-xs" style="color: var(--rn-text-muted)">Select an exception to view details</p>
+          <p class="mt-1 text-xs" style="color: var(--rn-text-muted)">Click a row or press <span class="rn-kbd">↓</span> <span class="rn-kbd">↑</span> to navigate</p>
+        </div>
+      `
+    }
+
+    // Deselect rows
+    document.querySelectorAll(".rn-table tbody tr.selected").forEach(r => r.classList.remove("selected"))
+  }
+}

data/app/javascript/controllers/rails_nexus_sidebar_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["drawer", "overlay"]
+
+  toggle() {
+    this.drawerTarget.classList.toggle("open")
+    this.overlayTarget.classList.toggle("open")
+  }
+
+  close() {
+    this.drawerTarget.classList.remove("open")
+    this.overlayTarget.classList.remove("open")
+  }
+}

data/app/javascript/controllers/rails_nexus_theme_controller.js

@@ -0,0 +1,31 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { theme: String }
+
+  connect() {
+    const saved = localStorage.getItem("rails_nexus-theme")
+    if (saved) {
+      this.applyTheme(saved)
+    } else if (this.themeValue && this.themeValue !== "auto") {
+      this.applyTheme(this.themeValue)
+    } else {
+      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
+      this.applyTheme(prefersDark ? "dark" : "light")
+    }
+  }
+
+  toggle() {
+    const root = document.documentElement
+    const isDark = root.classList.contains("dark")
+    const newTheme = isDark ? "light" : "dark"
+    this.applyTheme(newTheme)
+  }
+
+  applyTheme(theme) {
+    const root = document.documentElement
+    root.classList.remove("dark", "light")
+    root.classList.add(theme)
+    localStorage.setItem("rails_nexus-theme", theme)
+  }
+}

data/app/javascript/rails_nexus/application.js

@@ -0,0 +1,17 @@
+import "@hotwired/turbo-rails"
+import { Application } from "@hotwired/stimulus"
+
+import RailsNexusController from "rails_nexus/controllers/rails_nexus"
+import RailsNexusDetailController from "rails_nexus/controllers/rails_nexus_detail"
+import RailsNexusSidebarController from "rails_nexus/controllers/rails_nexus_sidebar"
+import RailsNexusThemeController from "rails_nexus/controllers/rails_nexus_theme"
+
+// Keep the engine independent from the host application's Stimulus setup.
+const application = Application.start()
+application.debug = false
+
+// Register engine controllers
+application.register("rails_nexus", RailsNexusController)
+application.register("rails_nexus-theme", RailsNexusThemeController)
+application.register("rails_nexus-sidebar", RailsNexusSidebarController)
+application.register("rails_nexus-detail", RailsNexusDetailController)

data/app/jobs/rails_nexus/application_job.rb

@@ -0,0 +1,4 @@
+module RailsNexus
+  class ApplicationJob < ActiveJob::Base
+  end
+end

data/app/mailers/rails_nexus/application_mailer.rb

@@ -0,0 +1,6 @@
+module RailsNexus
+  class ApplicationMailer < ActionMailer::Base
+    default from: "from@example.com"
+    layout "mailer"
+  end
+end

data/app/models/rails_nexus/application_record.rb

@@ -0,0 +1,5 @@
+module RailsNexus
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end