railscope 0.1.0

data/client/src/screens/views/Show.tsx

@@ -0,0 +1,337 @@
+import { useState, useEffect } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { getEntry } from '@/api/entries'
+import { Entry } from '@/lib/types'
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card'
+import { JsonViewer } from '@/components/ui/JsonViewer'
+
+type TabType = 'data' | 'properties'
+
+export default function ViewsShow() {
+  const { id } = useParams()
+  const navigate = useNavigate()
+  const [entry, setEntry] = useState<Entry | null>(null)
+  const [batch, setBatch] = useState<Entry[]>([])
+  const [loading, setLoading] = useState(true)
+  const [activeTab, setActiveTab] = useState<TabType>('data')
+
+  useEffect(() => {
+    loadEntry()
+  }, [id])
+
+  async function loadEntry() {
+    if (!id) return
+    setLoading(true)
+    try {
+      const response = await getEntry(id)
+      setEntry(response.data)
+      setBatch(response.batch || [])
+    } catch (error) {
+      console.error('Failed to load entry:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="p-6">
+        <Card>
+          <CardContent className="py-12 text-center text-dark-muted">
+            Loading...
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  if (!entry) {
+    return (
+      <div className="p-6">
+        <Card>
+          <CardContent className="py-12 text-center text-dark-muted">
+            View not found.
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  const payload = entry.payload as Record<string, unknown>
+
+  const formattedTime = new Date(entry.occurred_at).toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: true
+  })
+  const timeAgoStr = getTimeAgo(entry.occurred_at)
+
+  const viewTypeColors: Record<string, string> = {
+    template: 'bg-blue-500/20 text-blue-400',
+    partial: 'bg-purple-500/20 text-purple-400',
+    layout: 'bg-green-500/20 text-green-400'
+  }
+
+  const getTabContent = () => {
+    if (activeTab === 'data') {
+      return payload.data || {}
+    }
+    return {
+      name: payload.name,
+      path: payload.path,
+      full_path: payload.full_path,
+      view_type: payload.view_type,
+      layout: payload.layout,
+      duration: payload.duration
+    }
+  }
+
+  return (
+    <div className="p-6 space-y-5">
+      {/* View Details Card */}
+      <Card>
+        <CardHeader>
+          <CardTitle>View Details</CardTitle>
+        </CardHeader>
+        <CardContent className="p-0">
+          <table className="w-full">
+            <tbody>
+              <tr className="border-t border-dark-border">
+                <td className="px-4 py-3 text-dark-muted whitespace-nowrap w-32">Time</td>
+                <td className="px-4 py-3">{formattedTime} ({timeAgoStr})</td>
+              </tr>
+              <tr className="border-t border-dark-border">
+                <td className="px-4 py-3 text-dark-muted whitespace-nowrap">Type</td>
+                <td className="px-4 py-3">
+                  <span className={`px-2 py-0.5 rounded text-xs font-medium ${viewTypeColors[String(payload.view_type)] || 'bg-gray-500/20 text-gray-400'}`}>
+                    {String(payload.view_type)}
+                  </span>
+                </td>
+              </tr>
+              <tr className="border-t border-dark-border">
+                <td className="px-4 py-3 text-dark-muted whitespace-nowrap">Name</td>
+                <td className="px-4 py-3 font-mono text-sm text-white">
+                  {String(payload.name)}
+                </td>
+              </tr>
+              <tr className="border-t border-dark-border">
+                <td className="px-4 py-3 text-dark-muted whitespace-nowrap">Path</td>
+                <td className="px-4 py-3 font-mono text-sm">{String(payload.path)}</td>
+              </tr>
+              <tr className="border-t border-dark-border">
+                <td className="px-4 py-3 text-dark-muted whitespace-nowrap">Full Path</td>
+                <td className="px-4 py-3 font-mono text-xs text-dark-muted break-all">{String(payload.full_path)}</td>
+              </tr>
+              {Boolean(payload.layout) && (
+                <tr className="border-t border-dark-border">
+                  <td className="px-4 py-3 text-dark-muted whitespace-nowrap">Layout</td>
+                  <td className="px-4 py-3 font-mono text-sm">{String(payload.layout)}</td>
+                </tr>
+              )}
+              <tr className="border-t border-dark-border">
+                <td className="px-4 py-3 text-dark-muted whitespace-nowrap">Duration</td>
+                <td className="px-4 py-3">{String(payload.duration ?? '-')}ms</td>
+              </tr>
+            </tbody>
+          </table>
+        </CardContent>
+      </Card>
+
+      {/* Data Card with Tabs */}
+      <Card>
+        <div className="flex border-b border-dark-border">
+          <button
+            onClick={() => setActiveTab('data')}
+            className={`px-4 py-2.5 text-sm font-medium ${
+              activeTab === 'data'
+                ? 'bg-blue-500 text-white'
+                : 'text-dark-muted hover:text-dark-text'
+            }`}
+          >
+            View Data
+          </button>
+          <button
+            onClick={() => setActiveTab('properties')}
+            className={`px-4 py-2.5 text-sm font-medium ${
+              activeTab === 'properties'
+                ? 'bg-blue-500 text-white'
+                : 'text-dark-muted hover:text-dark-text'
+            }`}
+          >
+            Properties
+          </button>
+        </div>
+        <div className="bg-[#1a1a2e]">
+          <JsonViewer data={getTabContent()} className="border-0 bg-transparent" />
+        </div>
+      </Card>
+
+      {/* Related Entries */}
+      {batch.length > 0 && <RelatedEntries entries={batch} currentEntryId={entry.id} navigate={navigate} />}
+    </div>
+  )
+}
+
+function getTimeAgo(date: string): string {
+  const seconds = Math.floor((new Date().getTime() - new Date(date).getTime()) / 1000)
+  if (seconds < 60) return `${seconds}s ago`
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`
+  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`
+  return `${Math.floor(seconds / 86400)}d ago`
+}
+
+interface RelatedEntriesProps {
+  entries: Entry[]
+  currentEntryId: number
+  navigate: ReturnType<typeof useNavigate>
+}
+
+function RelatedEntries({ entries, currentEntryId, navigate }: RelatedEntriesProps) {
+  const [currentTab, setCurrentTab] = useState<string>('')
+
+  // Filter out the current entry from related entries
+  const filteredEntries = entries.filter(e => e.id !== currentEntryId)
+
+  const groupedEntries = filteredEntries.reduce((acc, entry) => {
+    const type = entry.entry_type
+    if (!acc[type]) acc[type] = []
+    acc[type].push(entry)
+    return acc
+  }, {} as Record<string, Entry[]>)
+
+  const tabs = Object.entries(groupedEntries).map(([type, items]) => ({
+    type,
+    label: getTypeLabel(type),
+    count: items.length
+  }))
+
+  useEffect(() => {
+    if (tabs.length > 0 && !currentTab) {
+      setCurrentTab(tabs[0].type)
+    }
+  }, [tabs.length])
+
+  if (tabs.length === 0) return null
+
+  const currentEntries = groupedEntries[currentTab] || []
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Related Entries</CardTitle>
+      </CardHeader>
+      <div className="flex flex-wrap border-b border-dark-border">
+        {tabs.map((tab) => (
+          <button
+            key={tab.type}
+            onClick={() => setCurrentTab(tab.type)}
+            className={`px-4 py-2.5 text-sm font-medium ${
+              currentTab === tab.type
+                ? 'bg-blue-500 text-white'
+                : 'text-dark-muted hover:text-dark-text'
+            }`}
+          >
+            {tab.label} ({tab.count})
+          </button>
+        ))}
+      </div>
+      <table className="w-full">
+        <tbody>
+          {currentEntries.map((relatedEntry) => {
+            const relPayload = relatedEntry.payload as Record<string, unknown>
+            const path = getEntryPath(relatedEntry)
+
+            return (
+              <tr
+                key={relatedEntry.id}
+                onClick={() => navigate(path)}
+                className="border-b border-dark-border hover:bg-white/[0.02] cursor-pointer"
+              >
+                <td className="px-4 py-3">
+                  <span className="text-dark-text text-sm">{getEntryDescription(relatedEntry, relPayload)}</span>
+                </td>
+                <td className="px-4 py-3 text-right text-dark-muted text-xs">
+                  {getTimeAgo(relatedEntry.occurred_at)}
+                </td>
+                <td className="px-4 py-3 w-12">
+                  <ArrowIcon />
+                </td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </Card>
+  )
+}
+
+function ArrowIcon() {
+  return (
+    <svg className="w-5 h-5 text-dark-muted" viewBox="0 0 20 20" fill="currentColor">
+      <path
+        fillRule="evenodd"
+        d="M10 18a8 8 0 100-16 8 8 0 000 16zM6.75 9.25a.75.75 0 000 1.5h4.59l-2.1 1.95a.75.75 0 001.02 1.1l3.5-3.25a.75.75 0 000-1.1l-3.5-3.25a.75.75 0 10-1.02 1.1l2.1 1.95H6.75z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+}
+
+function getEntryPath(entry: Entry): string {
+  switch (entry.entry_type) {
+    case 'query': return `/queries/${entry.id}`
+    case 'exception': return `/exceptions/${entry.id}`
+    case 'job_enqueue':
+    case 'job_perform': return `/jobs/${entry.id}`
+    case 'request': return `/requests/${entry.id}`
+    case 'command': return `/commands/${entry.id}`
+    case 'view': return `/views/${entry.id}`
+    default: return `/${entry.entry_type}s/${entry.id}`
+  }
+}
+
+function getEntryDescription(entry: Entry, payload: Record<string, unknown>): string {
+  switch (entry.entry_type) {
+    case 'query':
+      return String(payload.sql || '').substring(0, 100)
+    case 'request':
+      return `${payload.method} ${payload.path}`
+    case 'command':
+      return `Command: ${payload.command}`
+    case 'exception':
+      return `${payload.class}: ${String(payload.message || '').substring(0, 50)}`
+    case 'job_enqueue':
+    case 'job_perform':
+      return `Job: ${payload.job_class}`
+    case 'view':
+      return `${payload.view_type}: ${payload.name || payload.path}`
+    default:
+      return entry.entry_type
+  }
+}
+
+function getTypeLabel(type: string): string {
+  const labels: Record<string, string> = {
+    query: 'Queries',
+    exception: 'Exceptions',
+    job_enqueue: 'Enqueued',
+    job_perform: 'Performed',
+    request: 'Requests',
+    command: 'Commands',
+    log: 'Logs',
+    cache: 'Cache',
+    event: 'Events',
+    mail: 'Mail',
+    notification: 'Notifications',
+    model: 'Models',
+    gate: 'Gates',
+    redis: 'Redis',
+    view: 'Views',
+    client_request: 'HTTP Client'
+  }
+  return labels[type] || type
+}

data/client/tailwind.config.js

@@ -0,0 +1,22 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        dark: {
+          bg: '#0d1117',
+          surface: '#161b22',
+          border: '#30363d',
+          text: '#c9d1d9',
+          muted: '#8b949e',
+        }
+      }
+    },
+  },
+  plugins: [],
+}

data/client/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

data/client/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

data/client/vite.config.ts

@@ -0,0 +1,37 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  base: '/railscope/assets/',
+  build: {
+    outDir: '../public/railscope/assets',
+    emptyOutDir: true,
+    rollupOptions: {
+      output: {
+        entryFileNames: 'app.js',
+        chunkFileNames: 'app-[hash].js',
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name?.endsWith('.css')) {
+            return 'app.css'
+          }
+          return 'assets/[name]-[hash][extname]'
+        }
+      }
+    }
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src')
+    }
+  },
+  server: {
+    proxy: {
+      '/railscope/api': {
+        target: 'http://localhost:3000',
+        changeOrigin: true
+      }
+    }
+  }
+})

data/config/routes.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+Railscope::Engine.routes.draw do
+  # API endpoints
+  namespace :api do
+    resources :entries, only: %i[index show destroy] do
+      collection do
+        get "batch/:batch_id", action: :batch, as: :batch
+        get "family/:family_hash", action: :family, as: :family
+      end
+    end
+  end
+
+  # Serve React SPA for all other routes
+  get "*path", to: "application#index", constraints: ->(req) { !req.path.start_with?("/api") }
+  root to: "application#index"
+end

data/db/migrate/20260131023242_create_railscope_entries.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+class CreateRailscopeEntries < ActiveRecord::Migration[7.0]
+  def change
+    create_table :railscope_entries do |t|
+      # UUID as public identifier
+      t.uuid :uuid, default: "gen_random_uuid()", null: false
+
+      # Batch ID groups all entries from a single request/job
+      t.uuid :batch_id
+
+      # Family hash groups similar entries (e.g., same SQL pattern)
+      t.string :family_hash
+
+      # Entry type (request, query, exception, job_perform, etc.)
+      t.string :entry_type, null: false
+
+      # Payload data as JSONB
+      t.jsonb :payload, default: {}
+
+      # Tags array for categorization
+      t.string :tags, array: true, default: []
+
+      # Control visibility on index pages
+      t.boolean :should_display_on_index, default: true, null: false
+
+      # When the event occurred
+      t.datetime :occurred_at, null: false
+
+      t.timestamps
+    end
+
+    add_index :railscope_entries, :uuid, unique: true
+    add_index :railscope_entries, :batch_id
+    add_index :railscope_entries, :family_hash
+    add_index :railscope_entries, :entry_type
+    add_index :railscope_entries, :occurred_at
+    add_index :railscope_entries, :tags, using: :gin
+    add_index :railscope_entries, %i[entry_type should_display_on_index], name: "idx_railscope_type_displayable"
+  end
+end

data/lib/generators/railscope/install_generator.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+require "rails/generators"
+require "rails/generators/base"
+
+module Railscope
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      source_root File.expand_path("templates", __dir__)
+
+      desc "Creates a Railscope initializer and mounts the engine."
+
+      def copy_initializer
+        template "initializer.rb", "config/initializers/railscope.rb"
+      end
+
+      def mount_engine
+        route 'mount Railscope::Engine, at: "/railscope"'
+      end
+
+      def show_post_install_message
+        say ""
+        say "Railscope installed successfully!", :green
+        say ""
+        say "Next steps:"
+        say "  1. Run migrations: rails db:migrate"
+        say "  2. Enable Railscope: add RAILSCOPE_ENABLED=true to your .env"
+        say "  3. Start your server and visit /railscope"
+        say ""
+      end
+    end
+  end
+end

data/lib/generators/railscope/templates/initializer.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+# Railscope Configuration
+# =======================
+#
+# Railscope is disabled by default. Enable it by setting
+# the RAILSCOPE_ENABLED environment variable:
+#
+#   RAILSCOPE_ENABLED=true
+#
+
+Railscope.configure do |config|
+  # Retention Period
+  # ----------------
+  # Number of days to keep entries before purging.
+  # Can also be set via RAILSCOPE_RETENTION_DAYS env var.
+  #
+  # config.retention_days = 7
+
+  # Ignored Paths
+  # -------------
+  # Requests to these paths will not be recorded.
+  # Default: /railscope, /assets, /packs, /cable
+  #
+  # config.add_ignore_paths("/health", "/ping", "/metrics")
+
+  # Sensitive Keys
+  # --------------
+  # Additional parameter names to filter from payloads.
+  # By default, common sensitive keys are filtered (password, token, etc.)
+  # plus everything in Rails.application.config.filter_parameters
+  #
+  # config.add_sensitive_keys(:cpf, :ssn, :bank_account)
+end

data/lib/railscope/context.rb

@@ -0,0 +1,91 @@
+# frozen_string_literal: true
+
+module Railscope
+  class Context
+    THREAD_KEY = :railscope_context
+
+    class << self
+      def current
+        Thread.current[THREAD_KEY] ||= new
+      end
+
+      def clear!
+        Thread.current[THREAD_KEY] = nil
+      end
+
+      def with(**attributes)
+        previous = current.to_h.dup
+        attributes.each { |key, value| current[key] = value }
+        yield
+      ensure
+        clear!
+        previous.each { |key, value| current[key] = value }
+      end
+    end
+
+    def initialize
+      @store = {}
+    end
+
+    def []=(key, value)
+      @store[key.to_sym] = value
+    end
+
+    def [](key)
+      @store[key.to_sym]
+    end
+
+    def fetch(key, default = nil)
+      @store.fetch(key.to_sym, default)
+    end
+
+    def merge!(hash)
+      hash.each { |key, value| self[key] = value }
+      self
+    end
+
+    def to_h
+      @store.dup
+    end
+
+    # Batch ID groups all entries from a single request/job
+    def batch_id
+      self[:batch_id] ||= SecureRandom.uuid
+    end
+
+    def batch_id=(value)
+      self[:batch_id] = value
+    end
+
+    # Request ID from Rails (for correlation with Rails logs)
+    def request_id
+      self[:request_id]
+    end
+
+    def request_id=(value)
+      self[:request_id] = value
+    end
+
+    def tags
+      self[:tags] ||= []
+    end
+
+    def add_tag(tag)
+      tags << tag unless tags.include?(tag)
+    end
+
+    def add_tags(*new_tags)
+      new_tags.flatten.each { |tag| add_tag(tag) }
+    end
+
+    def user_id
+      self[:user_id]
+    end
+
+    def user_id=(value)
+      self[:user_id] = value
+    end
+
+    delegate :empty?, to: :@store
+  end
+end