railscope 0.1.0

data/client/src/components/ui/SearchInput.tsx

@@ -0,0 +1,70 @@
+import { useState, useCallback } from 'react'
+import { useDebouncedCallback } from '@/lib/hooks'
+
+interface SearchInputProps {
+  placeholder?: string
+  value?: string
+  onChange: (value: string) => void
+  className?: string
+}
+
+export function SearchInput({
+  placeholder = 'Search...',
+  value = '',
+  onChange,
+  className = ''
+}: SearchInputProps) {
+  const [inputValue, setInputValue] = useState(value)
+
+  const debouncedOnChange = useDebouncedCallback((val: string) => {
+    onChange(val)
+  }, 300)
+
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value
+    setInputValue(newValue)
+    debouncedOnChange(newValue)
+  }, [debouncedOnChange])
+
+  const handleClear = useCallback(() => {
+    setInputValue('')
+    onChange('')
+  }, [onChange])
+
+  return (
+    <div className={`relative ${className}`}>
+      <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+        <svg
+          className="h-4 w-4 text-dark-muted"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          />
+        </svg>
+      </div>
+      <input
+        type="text"
+        value={inputValue}
+        onChange={handleChange}
+        placeholder={placeholder}
+        className="w-full pl-10 pr-10 py-2 bg-dark-surface border border-dark-border rounded-md text-sm text-dark-text placeholder-dark-muted focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+      />
+      {inputValue && (
+        <button
+          onClick={handleClear}
+          className="absolute inset-y-0 right-0 pr-3 flex items-center text-dark-muted hover:text-dark-text"
+        >
+          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      )}
+    </div>
+  )
+}

data/client/src/components/ui/Table.tsx

@@ -0,0 +1,68 @@
+import { cn } from '@/lib/utils'
+
+interface TableProps {
+  children: React.ReactNode
+  className?: string
+}
+
+interface TableCellProps extends TableProps {
+  colSpan?: number
+  title?: string
+}
+
+export function Table({ children, className }: TableProps) {
+  return (
+    <div className={cn('overflow-x-auto', className)}>
+      <table className="w-full">
+        {children}
+      </table>
+    </div>
+  )
+}
+
+export function TableHeader({ children, className }: TableProps) {
+  return (
+    <thead className={cn('bg-black/20', className)}>
+      {children}
+    </thead>
+  )
+}
+
+export function TableBody({ children, className }: TableProps) {
+  return (
+    <tbody className={cn('divide-y divide-dark-border', className)}>
+      {children}
+    </tbody>
+  )
+}
+
+export function TableRow({ children, className, onClick }: TableProps & { onClick?: () => void }) {
+  return (
+    <tr
+      className={cn(
+        'hover:bg-white/[0.02] transition-colors',
+        onClick && 'cursor-pointer',
+        className
+      )}
+      onClick={onClick}
+    >
+      {children}
+    </tr>
+  )
+}
+
+export function TableHead({ children, className }: TableProps) {
+  return (
+    <th className={cn('px-4 py-3 text-left text-xs font-semibold text-dark-muted uppercase tracking-wide', className)}>
+      {children}
+    </th>
+  )
+}
+
+export function TableCell({ children, className, colSpan, title }: TableCellProps) {
+  return (
+    <td className={cn('px-4 py-3 text-sm', className)} colSpan={colSpan} title={title}>
+      {children}
+    </td>
+  )
+}

data/client/src/index.css

@@ -0,0 +1,28 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  background-color: #0d1117;
+  color: #c9d1d9;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #161b22;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #30363d;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #484f58;
+}

data/client/src/lib/hooks.ts

@@ -0,0 +1,37 @@
+import { useCallback, useRef, useEffect } from 'react'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useDebouncedCallback<T extends (...args: any[]) => any>(
+  callback: T,
+  delay: number
+): T {
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const callbackRef = useRef(callback)
+
+  // Update callback ref when callback changes
+  useEffect(() => {
+    callbackRef.current = callback
+  }, [callback])
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [])
+
+  return useCallback(
+    ((...args: Parameters<T>) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+
+      timeoutRef.current = setTimeout(() => {
+        callbackRef.current(...args)
+      }, delay)
+    }) as T,
+    [delay]
+  )
+}

data/client/src/lib/types.ts

@@ -0,0 +1,61 @@
+export interface Entry {
+  id: number
+  uuid: string
+  batch_id: string | null
+  family_hash: string | null
+  entry_type: string
+  payload: Record<string, unknown>
+  tags: string[]
+  occurred_at: string
+  created_at: string
+  family_count?: number
+}
+
+export interface PaginatedResponse<T> {
+  data: T[]
+  meta: {
+    current_page: number
+    total_pages: number
+    total_count: number
+    per_page: number
+  }
+}
+
+export interface EntryResponse {
+  data: Entry
+  batch: Entry[]
+}
+
+export interface BatchResponse {
+  data: Entry[]
+}
+
+export interface FamilyResponse {
+  data: Entry[]
+  meta: {
+    current_page: number
+    total_pages: number
+    total_count: number
+    per_page: number
+  }
+}
+
+export type EntryType =
+  | 'request'
+  | 'query'
+  | 'exception'
+  | 'job_enqueue'
+  | 'job_perform'
+  | 'command'
+  | 'schedule'
+  | 'log'
+  | 'dump'
+  | 'model'
+  | 'event'
+  | 'mail'
+  | 'notification'
+  | 'gate'
+  | 'cache'
+  | 'redis'
+  | 'view'
+  | 'client_request'

data/client/src/lib/utils.ts

@@ -0,0 +1,38 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+import { Entry } from './types'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function groupEntriesByType(entries: Entry[]): Record<string, Entry[]> {
+  return entries.reduce((acc, entry) => {
+    const type = entry.entry_type
+    if (!acc[type]) {
+      acc[type] = []
+    }
+    acc[type].push(entry)
+    return acc
+  }, {} as Record<string, Entry[]>)
+}
+
+export function timeAgo(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`
+}
+
+export function truncate(str: string, length: number): string {
+  if (str.length <= length) return str
+  return str.slice(0, length) + '...'
+}
+
+export function formatDuration(ms: number): string {
+  if (ms < 1) return '<1ms'
+  if (ms < 1000) return `${ms.toFixed(0)}ms`
+  return `${(ms / 1000).toFixed(2)}s`
+}

data/client/src/main.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter basename="/railscope">
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>,
+)

data/client/src/screens/cache/Index.tsx

@@ -0,0 +1,15 @@
+import PlaceholderPage from '@/components/PlaceholderPage'
+
+export default function CacheIndex() {
+  return (
+    <PlaceholderPage
+      title="Cache"
+      description="Rails.cache operations (read, write, delete, fetch)"
+      icon={
+        <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
+        </svg>
+      }
+    />
+  )
+}

data/client/src/screens/client-requests/Index.tsx

@@ -0,0 +1,15 @@
+import PlaceholderPage from '@/components/PlaceholderPage'
+
+export default function ClientRequestsIndex() {
+  return (
+    <PlaceholderPage
+      title="HTTP Client"
+      description="Outgoing HTTP requests made by your application"
+      icon={
+        <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+        </svg>
+      }
+    />
+  )
+}

data/client/src/screens/commands/Index.tsx

@@ -0,0 +1,133 @@
+import { useState, useEffect } from 'react'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import { getEntries } from '@/api/entries'
+import { Entry } from '@/lib/types'
+import { timeAgo } from '@/lib/utils'
+import { Card } from '@/components/ui/Card'
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/Table'
+import { Badge } from '@/components/ui/Badge'
+import { Pagination } from '@/components/ui/Pagination'
+import { SearchInput } from '@/components/ui/SearchInput'
+
+export default function CommandsIndex() {
+  const navigate = useNavigate()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const [entries, setEntries] = useState<Entry[]>([])
+  const [loading, setLoading] = useState(true)
+  const [page, setPage] = useState(1)
+  const [totalPages, setTotalPages] = useState(1)
+
+  const tagFilter = searchParams.get('tag') || ''
+
+  useEffect(() => {
+    loadEntries()
+  }, [page, tagFilter])
+
+  async function loadEntries() {
+    setLoading(true)
+    try {
+      const response = await getEntries({
+        type: 'command',
+        tag: tagFilter || undefined,
+        page
+      })
+      setEntries(response.data)
+      setTotalPages(response.meta.total_pages)
+    } catch (error) {
+      console.error('Failed to load entries:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  function handleSearch(value: string) {
+    setPage(1)
+    if (value) {
+      setSearchParams({ tag: value })
+    } else {
+      setSearchParams({})
+    }
+  }
+
+  function handlePageChange(newPage: number) {
+    setPage(newPage)
+  }
+
+  return (
+    <div className="p-6">
+      <div className="mb-6">
+        <h1 className="text-2xl font-semibold text-white">Commands</h1>
+        <p className="text-dark-muted text-sm mt-1">Rake tasks executed in your application</p>
+      </div>
+
+      <div className="mb-4">
+        <SearchInput
+          placeholder="Search by tag..."
+          value={tagFilter}
+          onChange={handleSearch}
+          className="max-w-sm"
+        />
+      </div>
+
+      <Card>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Command</TableHead>
+              <TableHead>Exit Code</TableHead>
+              <TableHead className="text-right">Duration</TableHead>
+              <TableHead>Happened</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {loading ? (
+              <TableRow>
+                <TableCell className="text-center text-dark-muted py-8" colSpan={4}>
+                  Loading...
+                </TableCell>
+              </TableRow>
+            ) : entries.length === 0 ? (
+              <TableRow>
+                <TableCell className="text-center text-dark-muted py-8" colSpan={4}>
+                  {tagFilter ? `No commands found with tag "${tagFilter}".` : 'No commands recorded yet.'}
+                </TableCell>
+              </TableRow>
+            ) : (
+              entries.map((entry) => {
+                const payload = entry.payload as Record<string, unknown>
+                const isFailed = entry.tags.includes('failed')
+                const exitCode = Number(payload.exit_code ?? 0)
+                return (
+                  <TableRow key={entry.id} onClick={() => navigate(`/commands/${entry.id}`)}>
+                    <TableCell>
+                      <span className={`font-mono ${isFailed ? 'text-red-400' : 'text-green-400'}`}>
+                        {String(payload.command)}
+                      </span>
+                      {payload.description ? (
+                        <div className="text-dark-muted text-xs mt-0.5">
+                          {String(payload.description)}
+                        </div>
+                      ) : null}
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant={exitCode === 0 ? 'success' : 'error'}>
+                        {exitCode}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-right text-dark-muted">
+                      {payload.duration ? `${String(payload.duration)}ms` : '-'}
+                    </TableCell>
+                    <TableCell className="text-dark-muted" title={entry.occurred_at}>
+                      {timeAgo(entry.occurred_at)}
+                    </TableCell>
+                  </TableRow>
+                )
+              })
+            )}
+          </TableBody>
+        </Table>
+        <Pagination currentPage={page} totalPages={totalPages} onPageChange={handlePageChange} />
+      </Card>
+    </div>
+  )
+}