railscope 0.1.0

data/client/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "railscope-client",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.0",
+    "clsx": "^2.0.0",
+    "tailwind-merge": "^2.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.3.6",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0"
+  }
+}

data/client/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

data/client/src/App.tsx

@@ -0,0 +1,60 @@
+import { Routes, Route } from 'react-router-dom'
+import Layout from './components/Layout'
+import RequestsIndex from './screens/requests/Index'
+import RequestsShow from './screens/requests/Show'
+import CommandsIndex from './screens/commands/Index'
+import CommandsShow from './screens/commands/Show'
+import ScheduleIndex from './screens/schedule/Index'
+import JobsIndex from './screens/jobs/Index'
+import JobsShow from './screens/jobs/Show'
+import ExceptionsIndex from './screens/exceptions/Index'
+import ExceptionsShow from './screens/exceptions/Show'
+import LogsIndex from './screens/logs/Index'
+import DumpsIndex from './screens/dumps/Index'
+import QueriesIndex from './screens/queries/Index'
+import QueriesShow from './screens/queries/Show'
+import ModelsIndex from './screens/models/Index'
+import EventsIndex from './screens/events/Index'
+import MailIndex from './screens/mail/Index'
+import NotificationsIndex from './screens/notifications/Index'
+import GatesIndex from './screens/gates/Index'
+import CacheIndex from './screens/cache/Index'
+import RedisIndex from './screens/redis/Index'
+import ViewsIndex from './screens/views/Index'
+import ViewsShow from './screens/views/Show'
+import ClientRequestsIndex from './screens/client-requests/Index'
+
+function App() {
+  return (
+    <Layout>
+      <Routes>
+        <Route path="/" element={<RequestsIndex />} />
+        <Route path="/requests" element={<RequestsIndex />} />
+        <Route path="/requests/:id" element={<RequestsShow />} />
+        <Route path="/commands" element={<CommandsIndex />} />
+        <Route path="/commands/:id" element={<CommandsShow />} />
+        <Route path="/schedule" element={<ScheduleIndex />} />
+        <Route path="/jobs" element={<JobsIndex />} />
+        <Route path="/jobs/:id" element={<JobsShow />} />
+        <Route path="/exceptions" element={<ExceptionsIndex />} />
+        <Route path="/exceptions/:id" element={<ExceptionsShow />} />
+        <Route path="/logs" element={<LogsIndex />} />
+        <Route path="/dumps" element={<DumpsIndex />} />
+        <Route path="/queries" element={<QueriesIndex />} />
+        <Route path="/queries/:id" element={<QueriesShow />} />
+        <Route path="/models" element={<ModelsIndex />} />
+        <Route path="/events" element={<EventsIndex />} />
+        <Route path="/mail" element={<MailIndex />} />
+        <Route path="/notifications" element={<NotificationsIndex />} />
+        <Route path="/gates" element={<GatesIndex />} />
+        <Route path="/cache" element={<CacheIndex />} />
+        <Route path="/redis" element={<RedisIndex />} />
+        <Route path="/views" element={<ViewsIndex />} />
+        <Route path="/views/:id" element={<ViewsShow />} />
+        <Route path="/client-requests" element={<ClientRequestsIndex />} />
+      </Routes>
+    </Layout>
+  )
+}
+
+export default App

data/client/src/api/client.ts

@@ -0,0 +1,25 @@
+const API_BASE = '/railscope/api'
+
+async function request<T>(endpoint: string, options?: RequestInit): Promise<T> {
+  const response = await fetch(`${API_BASE}${endpoint}`, {
+    headers: {
+      'Content-Type': 'application/json',
+      'Accept': 'application/json',
+    },
+    ...options,
+  })
+
+  if (!response.ok) {
+    throw new Error(`API Error: ${response.status}`)
+  }
+
+  return response.json()
+}
+
+export const api = {
+  get: <T>(endpoint: string) => request<T>(endpoint),
+  post: <T>(endpoint: string, data: unknown) =>
+    request<T>(endpoint, { method: 'POST', body: JSON.stringify(data) }),
+  delete: <T>(endpoint: string) =>
+    request<T>(endpoint, { method: 'DELETE' }),
+}

data/client/src/api/entries.ts

@@ -0,0 +1,36 @@
+import { api } from './client'
+import type { Entry, PaginatedResponse, EntryResponse, BatchResponse, FamilyResponse } from '@/lib/types'
+
+export interface EntriesParams {
+  type?: string
+  tag?: string
+  batch_id?: string
+  page?: number
+}
+
+export async function getEntries(params: EntriesParams = {}): Promise<PaginatedResponse<Entry>> {
+  const searchParams = new URLSearchParams()
+  if (params.type) searchParams.set('type', params.type)
+  if (params.tag) searchParams.set('tag', params.tag)
+  if (params.batch_id) searchParams.set('batch_id', params.batch_id)
+  if (params.page) searchParams.set('page', params.page.toString())
+
+  const query = searchParams.toString()
+  return api.get(`/entries${query ? `?${query}` : ''}`)
+}
+
+export async function getEntry(id: number | string): Promise<EntryResponse> {
+  return api.get(`/entries/${id}`)
+}
+
+export async function getBatchEntries(batchId: string): Promise<BatchResponse> {
+  return api.get(`/entries/batch/${batchId}`)
+}
+
+export async function getFamilyEntries(familyHash: string, page = 1): Promise<FamilyResponse> {
+  return api.get(`/entries/family/${familyHash}?page=${page}`)
+}
+
+export async function deleteAllEntries(): Promise<void> {
+  return api.delete('/entries')
+}

data/client/src/components/Layout.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react'
+import Sidebar from './Sidebar'
+
+interface LayoutProps {
+  children: ReactNode
+}
+
+export default function Layout({ children }: LayoutProps) {
+  return (
+    <div className="flex h-screen overflow-hidden">
+      <Sidebar />
+      <main className="flex-1 overflow-auto">
+        {children}
+      </main>
+    </div>
+  )
+}

data/client/src/components/PlaceholderPage.tsx

@@ -0,0 +1,32 @@
+import { Card, CardContent } from '@/components/ui/Card'
+
+interface PlaceholderPageProps {
+  title: string
+  description: string
+  icon: React.ReactNode
+}
+
+export default function PlaceholderPage({ title, description, icon }: PlaceholderPageProps) {
+  return (
+    <div className="p-6">
+      <div className="mb-6">
+        <h1 className="text-2xl font-semibold text-white">{title}</h1>
+        <p className="text-dark-muted text-sm mt-1">{description}</p>
+      </div>
+
+      <Card>
+        <CardContent className="py-16">
+          <div className="flex flex-col items-center justify-center text-center">
+            <div className="w-16 h-16 rounded-full bg-dark-border/50 flex items-center justify-center mb-4 text-dark-muted">
+              {icon}
+            </div>
+            <h2 className="text-lg font-medium text-white mb-2">To Implement</h2>
+            <p className="text-dark-muted text-sm max-w-md">
+              This feature is planned but not yet implemented. It will capture and display {title.toLowerCase()} from your Rails application.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

data/client/src/components/Sidebar.tsx

@@ -0,0 +1,198 @@
+import { NavLink } from 'react-router-dom'
+import { cn } from '@/lib/utils'
+
+const navigation = [
+  { name: 'Requests', href: '/requests', icon: RequestIcon },
+  { name: 'Commands', href: '/commands', icon: CommandIcon },
+  { name: 'Schedule', href: '/schedule', icon: ScheduleIcon },
+  { name: 'Jobs', href: '/jobs', icon: JobIcon },
+  { name: 'Exceptions', href: '/exceptions', icon: ExceptionIcon },
+  { name: 'Logs', href: '/logs', icon: LogIcon },
+  { name: 'Dumps', href: '/dumps', icon: DumpIcon },
+  { name: 'Queries', href: '/queries', icon: QueryIcon },
+  { name: 'Models', href: '/models', icon: ModelIcon },
+  { name: 'Events', href: '/events', icon: EventIcon },
+  { name: 'Mail', href: '/mail', icon: MailIcon },
+  { name: 'Notifications', href: '/notifications', icon: NotificationIcon },
+  { name: 'Gates', href: '/gates', icon: GateIcon },
+  { name: 'Cache', href: '/cache', icon: CacheIcon },
+  { name: 'Redis', href: '/redis', icon: RedisIcon },
+  { name: 'Views', href: '/views', icon: ViewIcon },
+  { name: 'HTTP Client', href: '/client-requests', icon: ClientRequestIcon },
+]
+
+export default function Sidebar() {
+  return (
+    <aside className="w-56 bg-dark-surface border-r border-dark-border flex flex-col">
+      <div className="p-4 border-b border-dark-border">
+        <h1 className="text-lg font-semibold text-white flex items-center gap-2">
+          <svg className="w-6 h-6 text-blue-500" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
+          </svg>
+          Railscope
+        </h1>
+      </div>
+
+      <nav className="flex-1 p-2 overflow-y-auto">
+        {navigation.map((item) => (
+          <NavLink
+            key={item.name}
+            to={item.href}
+            className={({ isActive }) =>
+              cn(
+                'flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors',
+                isActive
+                  ? 'bg-blue-500/10 text-blue-400'
+                  : 'text-dark-muted hover:text-dark-text hover:bg-dark-border/50'
+              )
+            }
+          >
+            <item.icon className="w-5 h-5" />
+            {item.name}
+          </NavLink>
+        ))}
+      </nav>
+
+      <div className="p-4 border-t border-dark-border text-xs text-dark-muted">
+        Railscope v0.1.0
+      </div>
+    </aside>
+  )
+}
+
+function RequestIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+    </svg>
+  )
+}
+
+function CommandIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+    </svg>
+  )
+}
+
+function ScheduleIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+  )
+}
+
+function JobIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+    </svg>
+  )
+}
+
+function ExceptionIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+    </svg>
+  )
+}
+
+function LogIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+    </svg>
+  )
+}
+
+function DumpIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
+    </svg>
+  )
+}
+
+function QueryIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
+    </svg>
+  )
+}
+
+function ModelIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+    </svg>
+  )
+}
+
+function EventIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+    </svg>
+  )
+}
+
+function MailIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+    </svg>
+  )
+}
+
+function NotificationIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+    </svg>
+  )
+}
+
+function GateIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+    </svg>
+  )
+}
+
+function CacheIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
+    </svg>
+  )
+}
+
+function RedisIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
+    </svg>
+  )
+}
+
+function ViewIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+    </svg>
+  )
+}
+
+function ClientRequestIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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/components/ui/Badge.tsx

@@ -0,0 +1,67 @@
+import { cn } from '@/lib/utils'
+
+type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'purple'
+
+interface BadgeProps {
+  children: React.ReactNode
+  variant?: BadgeVariant
+  className?: string
+}
+
+const variants: Record<BadgeVariant, string> = {
+  default: 'bg-dark-border text-dark-muted',
+  success: 'bg-green-500/20 text-green-400',
+  warning: 'bg-yellow-500/20 text-yellow-400',
+  error: 'bg-red-500/20 text-red-400',
+  info: 'bg-blue-500/20 text-blue-400',
+  purple: 'bg-purple-500/20 text-purple-400',
+}
+
+export function Badge({ children, variant = 'default', className }: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium',
+        variants[variant],
+        className
+      )}
+    >
+      {children}
+    </span>
+  )
+}
+
+export function MethodBadge({ method }: { method: string }) {
+  const variantMap: Record<string, BadgeVariant> = {
+    GET: 'info',
+    POST: 'success',
+    PUT: 'warning',
+    PATCH: 'warning',
+    DELETE: 'error',
+  }
+  const variant = variantMap[method] || 'default'
+
+  return <Badge variant={variant}>{method}</Badge>
+}
+
+export function StatusBadge({ status }: { status: number }) {
+  let variant: BadgeVariant = 'default'
+  if (status >= 200 && status < 300) variant = 'success'
+  else if (status >= 300 && status < 400) variant = 'warning'
+  else if (status >= 400) variant = 'error'
+
+  return <Badge variant={variant}>{status}</Badge>
+}
+
+export function TypeBadge({ type }: { type: string }) {
+  const variantMap: Record<string, BadgeVariant> = {
+    request: 'info',
+    query: 'purple',
+    exception: 'error',
+    job_enqueue: 'success',
+    job_perform: 'success',
+  }
+  const variant = variantMap[type] || 'default'
+
+  return <Badge variant={variant}>{type}</Badge>
+}

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

@@ -0,0 +1,38 @@
+import { cn } from '@/lib/utils'
+
+interface CardProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export function Card({ children, className }: CardProps) {
+  return (
+    <div className={cn('bg-dark-surface border border-dark-border rounded-lg', className)}>
+      {children}
+    </div>
+  )
+}
+
+export function CardHeader({ children, className }: CardProps) {
+  return (
+    <div className={cn('px-4 py-3 border-b border-dark-border', className)}>
+      {children}
+    </div>
+  )
+}
+
+export function CardTitle({ children, className }: CardProps) {
+  return (
+    <h3 className={cn('text-sm font-semibold text-dark-text uppercase tracking-wide', className)}>
+      {children}
+    </h3>
+  )
+}
+
+export function CardContent({ children, className }: CardProps) {
+  return (
+    <div className={cn('p-4', className)}>
+      {children}
+    </div>
+  )
+}

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

@@ -0,0 +1,80 @@
+import { cn } from '@/lib/utils'
+
+interface JsonViewerProps {
+  data: unknown
+  className?: string
+}
+
+export function JsonViewer({ data, className }: JsonViewerProps) {
+  return (
+    <div className={cn('font-mono text-sm bg-black/20 rounded-md p-4 overflow-auto', className)}>
+      <JsonValue value={data} />
+    </div>
+  )
+}
+
+function JsonValue({ value, indent = 0 }: { value: unknown; indent?: number }) {
+  if (value === null) {
+    return <span className="text-dark-muted italic">null</span>
+  }
+
+  if (typeof value === 'boolean') {
+    return <span className="text-purple-400">{value.toString()}</span>
+  }
+
+  if (typeof value === 'number') {
+    return <span className="text-yellow-400">{value}</span>
+  }
+
+  if (typeof value === 'string') {
+    if (value.length > 100) {
+      return (
+        <span className="text-green-400 block whitespace-pre-wrap break-all">
+          "{value}"
+        </span>
+      )
+    }
+    return <span className="text-green-400">"{value}"</span>
+  }
+
+  if (Array.isArray(value)) {
+    if (value.length === 0) {
+      return <span className="text-dark-muted">[]</span>
+    }
+    return (
+      <div>
+        <span className="text-dark-muted">[</span>
+        <div className="pl-4">
+          {value.map((item, i) => (
+            <div key={i}>
+              <JsonValue value={item} indent={indent + 1} />
+              {i < value.length - 1 && <span className="text-dark-muted">,</span>}
+            </div>
+          ))}
+        </div>
+        <span className="text-dark-muted">]</span>
+      </div>
+    )
+  }
+
+  if (typeof value === 'object') {
+    const entries = Object.entries(value as Record<string, unknown>)
+    if (entries.length === 0) {
+      return <span className="text-dark-muted">{'{}'}</span>
+    }
+    return (
+      <div>
+        {entries.map(([key, val], i) => (
+          <div key={key} className="flex">
+            <span className="text-blue-400">"{key}"</span>
+            <span className="text-dark-muted mr-2">:</span>
+            <JsonValue value={val} indent={indent + 1} />
+            {i < entries.length - 1 && <span className="text-dark-muted">,</span>}
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  return <span className="text-dark-text">{String(value)}</span>
+}

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

@@ -0,0 +1,45 @@
+import { cn } from '@/lib/utils'
+
+interface PaginationProps {
+  currentPage: number
+  totalPages: number
+  onPageChange: (page: number) => void
+}
+
+export function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) {
+  if (totalPages <= 1) return null
+
+  return (
+    <div className="flex items-center justify-center gap-4 py-4">
+      <button
+        onClick={() => onPageChange(currentPage - 1)}
+        disabled={currentPage <= 1}
+        className={cn(
+          'px-3 py-1.5 text-sm rounded-md border border-dark-border',
+          currentPage <= 1
+            ? 'text-dark-muted cursor-not-allowed'
+            : 'text-dark-text hover:bg-dark-border'
+        )}
+      >
+        Previous
+      </button>
+
+      <span className="text-sm text-dark-muted">
+        Page {currentPage} of {totalPages}
+      </span>
+
+      <button
+        onClick={() => onPageChange(currentPage + 1)}
+        disabled={currentPage >= totalPages}
+        className={cn(
+          'px-3 py-1.5 text-sm rounded-md border border-dark-border',
+          currentPage >= totalPages
+            ? 'text-dark-muted cursor-not-allowed'
+            : 'text-dark-text hover:bg-dark-border'
+        )}
+      >
+        Next
+      </button>
+    </div>
+  )
+}