@geenius/tools 0.1.0

package/packages/perf/react/src/services/PerformanceMonitor.ts

@@ -0,0 +1,313 @@
+// @geenius-tools/perf-react — src/services/PerformanceMonitor.ts
+// Singleton performance monitoring service (framework-agnostic)
+
+import type {
+    PerformanceMetrics,
+    PerformanceConfig,
+    CacheMetrics,
+    QueryMetrics,
+    PageLoadMetrics,
+    ErrorMetrics,
+    CacheHitEvent,
+    CacheMissEvent,
+} from '../types'
+
+interface QueryEntry {
+    key: string
+    duration: number
+    timestamp: number
+    error?: Error
+    cached: boolean
+}
+
+interface CacheEntry {
+    type: 'hit' | 'miss'
+    queryKey: string
+    duration: number
+    fetchDuration?: number
+    timestamp: number
+    cacheType: 'ssr' | 'client' | 'memory'
+}
+
+interface ErrorEntry {
+    type: string
+    message: string
+    stack?: string
+    timestamp: number
+    source: string
+}
+
+interface PageLoadEntry {
+    route: string
+    ttfb: number
+    fcp: number
+    lcp: number
+    tti: number
+    loadTime: number
+    ssr: boolean
+    timestamp: number
+}
+
+const DEFAULT_CONFIG: PerformanceConfig = {
+    enableCacheTracking: true,
+    enableQueryTracking: true,
+    enablePageLoadTracking: true,
+    enableErrorTracking: true,
+    sampleRate: 1,
+    maxMetrics: 1000,
+}
+
+/**
+ * PerformanceMonitor — singleton service for tracking performance metrics
+ *
+ * @example
+ * PerformanceMonitor.trackQuery('users', 45, undefined, false)
+ * const metrics = PerformanceMonitor.getMetrics({ start: Date.now() - 3600000, end: Date.now() })
+ */
+export class PerformanceMonitor {
+    private static queries: QueryEntry[] = []
+    private static cacheEntries: CacheEntry[] = []
+    private static errors: ErrorEntry[] = []
+    private static pageLoads: PageLoadEntry[] = []
+    private static config: PerformanceConfig = DEFAULT_CONFIG
+
+    /**
+     * Configure the performance monitor
+     */
+    static configure(config: Partial<PerformanceConfig>): void {
+        PerformanceMonitor.config = { ...PerformanceMonitor.config, ...config }
+    }
+
+    /**
+     * Track a query execution
+     */
+    static trackQuery(
+        queryKey: string,
+        duration: number,
+        error?: Error,
+        cached = false,
+    ): void {
+        if (!PerformanceMonitor.config.enableQueryTracking) return
+        if (Math.random() > (PerformanceMonitor.config.sampleRate ?? 1)) return
+
+        PerformanceMonitor.queries.push({
+            key: queryKey,
+            duration,
+            timestamp: Date.now(),
+            error,
+            cached,
+        })
+
+        // Trim if over limit
+        const max = PerformanceMonitor.config.maxMetrics ?? 1000
+        if (PerformanceMonitor.queries.length > max) {
+            PerformanceMonitor.queries = PerformanceMonitor.queries.slice(-max)
+        }
+    }
+
+    /**
+     * Track a cache hit
+     */
+    static trackCacheHit(event: CacheHitEvent): void {
+        if (!PerformanceMonitor.config.enableCacheTracking) return
+
+        PerformanceMonitor.cacheEntries.push({
+            type: 'hit',
+            queryKey: event.queryKey,
+            duration: event.duration,
+            timestamp: event.timestamp,
+            cacheType: event.cacheType,
+        })
+
+        const max = PerformanceMonitor.config.maxMetrics ?? 1000
+        if (PerformanceMonitor.cacheEntries.length > max) {
+            PerformanceMonitor.cacheEntries = PerformanceMonitor.cacheEntries.slice(-max)
+        }
+    }
+
+    /**
+     * Track a cache miss
+     */
+    static trackCacheMiss(event: CacheMissEvent): void {
+        if (!PerformanceMonitor.config.enableCacheTracking) return
+
+        PerformanceMonitor.cacheEntries.push({
+            type: 'miss',
+            queryKey: event.queryKey,
+            duration: event.duration,
+            fetchDuration: event.fetchDuration,
+            timestamp: event.timestamp,
+            cacheType: event.cacheType,
+        })
+
+        const max = PerformanceMonitor.config.maxMetrics ?? 1000
+        if (PerformanceMonitor.cacheEntries.length > max) {
+            PerformanceMonitor.cacheEntries = PerformanceMonitor.cacheEntries.slice(-max)
+        }
+    }
+
+    /**
+     * Track an error
+     */
+    static trackError(error: Error, source: string): void {
+        if (!PerformanceMonitor.config.enableErrorTracking) return
+
+        PerformanceMonitor.errors.push({
+            type: error.name || 'Error',
+            message: error.message,
+            stack: error.stack,
+            timestamp: Date.now(),
+            source,
+        })
+
+        const max = PerformanceMonitor.config.maxMetrics ?? 1000
+        if (PerformanceMonitor.errors.length > max) {
+            PerformanceMonitor.errors = PerformanceMonitor.errors.slice(-max)
+        }
+    }
+
+    /**
+     * Track page load metrics
+     */
+    static trackPageLoad(metrics: Omit<PageLoadEntry, 'timestamp'>): void {
+        if (!PerformanceMonitor.config.enablePageLoadTracking) return
+
+        PerformanceMonitor.pageLoads.push({
+            ...metrics,
+            timestamp: Date.now(),
+        })
+
+        const max = PerformanceMonitor.config.maxMetrics ?? 1000
+        if (PerformanceMonitor.pageLoads.length > max) {
+            PerformanceMonitor.pageLoads = PerformanceMonitor.pageLoads.slice(-max)
+        }
+    }
+
+    /**
+     * Get aggregated performance metrics for a time range
+     */
+    static getMetrics(timeRange: { start: number; end: number }): PerformanceMetrics {
+        const { start, end } = timeRange
+
+        // Filter entries by time range
+        const rangedQueries = PerformanceMonitor.queries.filter(
+            (q) => q.timestamp >= start && q.timestamp <= end,
+        )
+        const rangedCache = PerformanceMonitor.cacheEntries.filter(
+            (c) => c.timestamp >= start && c.timestamp <= end,
+        )
+        const rangedErrors = PerformanceMonitor.errors.filter(
+            (e) => e.timestamp >= start && e.timestamp <= end,
+        )
+        const rangedPageLoads = PerformanceMonitor.pageLoads.filter(
+            (p) => p.timestamp >= start && p.timestamp <= end,
+        )
+
+        // Aggregate cache metrics
+        const hits = rangedCache.filter((c) => c.type === 'hit')
+        const misses = rangedCache.filter((c) => c.type === 'miss')
+        const totalCacheRequests = hits.length + misses.length
+
+        const cache: CacheMetrics = {
+            totalRequests: totalCacheRequests,
+            hits: hits.length,
+            misses: misses.length,
+            hitRate: totalCacheRequests > 0 ? (hits.length / totalCacheRequests) * 100 : 0,
+            avgHitTime: hits.length > 0 ? hits.reduce((s, h) => s + h.duration, 0) / hits.length : 0,
+            avgMissTime: misses.length > 0 ? misses.reduce((s, m) => s + (m.fetchDuration ?? m.duration), 0) / misses.length : 0,
+        }
+
+        // Aggregate query metrics
+        const queryMap = new Map<string, QueryEntry[]>()
+        for (const q of rangedQueries) {
+            const existing = queryMap.get(q.key) || []
+            existing.push(q)
+            queryMap.set(q.key, existing)
+        }
+
+        const queries: QueryMetrics[] = Array.from(queryMap.entries()).map(
+            ([key, entries]) => {
+                const durations = entries.map((e) => e.duration)
+                return {
+                    queryKey: key,
+                    executions: entries.length,
+                    avgDuration: durations.reduce((s, d) => s + d, 0) / durations.length,
+                    minDuration: Math.min(...durations),
+                    maxDuration: Math.max(...durations),
+                    errors: entries.filter((e) => e.error).length,
+                    lastExecuted: Math.max(...entries.map((e) => e.timestamp)),
+                    cached: entries.some((e) => e.cached),
+                }
+            },
+        )
+
+        // Aggregate error metrics
+        const errorMap = new Map<string, ErrorEntry[]>()
+        for (const e of rangedErrors) {
+            const key = `${e.type}:${e.message}`
+            const existing = errorMap.get(key) || []
+            existing.push(e)
+            errorMap.set(key, existing)
+        }
+
+        const errors: ErrorMetrics[] = Array.from(errorMap.entries()).map(
+            ([, entries]) => ({
+                type: entries[0].type,
+                message: entries[0].message,
+                stack: entries[0].stack,
+                count: entries.length,
+                firstSeen: Math.min(...entries.map((e) => e.timestamp)),
+                lastSeen: Math.max(...entries.map((e) => e.timestamp)),
+                affectedUsers: 1, // No user tracking in client-side monitor
+            }),
+        )
+
+        // Aggregate page loads
+        const pageLoads: PageLoadMetrics[] = rangedPageLoads.map((p) => ({
+            route: p.route,
+            ttfb: p.ttfb,
+            fcp: p.fcp,
+            lcp: p.lcp,
+            tti: p.tti,
+            loadTime: p.loadTime,
+            ssr: p.ssr,
+            timestamp: p.timestamp,
+        }))
+
+        // Calculate score (0-100)
+        let score = 100
+        if (cache.hitRate < 80) score -= 20
+        if (queries.some((q) => q.avgDuration > 1000)) score -= 15
+        if (errors.length > 0) score -= Math.min(errors.length * 5, 30)
+        if (pageLoads.some((p) => p.lcp > 2500)) score -= 15
+        score = Math.max(0, score)
+
+        return {
+            cache,
+            queries,
+            pageLoads,
+            errors,
+            score,
+            timeRange: { start, end },
+        }
+    }
+
+    /**
+     * Clear all collected metrics
+     */
+    static clear(): void {
+        PerformanceMonitor.queries = []
+        PerformanceMonitor.cacheEntries = []
+        PerformanceMonitor.errors = []
+        PerformanceMonitor.pageLoads = []
+    }
+
+    /**
+     * Export metrics as JSON
+     */
+    static exportMetrics(): string {
+        const end = Date.now()
+        const start = end - 24 * 60 * 60 * 1000
+        return JSON.stringify(PerformanceMonitor.getMetrics({ start, end }), null, 2)
+    }
+}

package/packages/perf/react/src/types.ts

@@ -0,0 +1,77 @@
+// @geenius-tools/perf-react — src/types.ts
+
+export interface CacheMetrics {
+    totalRequests: number
+    hits: number
+    misses: number
+    hitRate: number
+    avgHitTime: number
+    avgMissTime: number
+    cacheSize?: number
+    evictions?: number
+}
+
+export interface QueryMetrics {
+    queryKey: string
+    executions: number
+    avgDuration: number
+    minDuration: number
+    maxDuration: number
+    errors: number
+    lastExecuted: number
+    cached: boolean
+}
+
+export interface PageLoadMetrics {
+    route: string
+    ttfb: number
+    fcp: number
+    lcp: number
+    tti: number
+    loadTime: number
+    ssr: boolean
+    timestamp: number
+}
+
+export interface ErrorMetrics {
+    type: string
+    message: string
+    stack?: string
+    count: number
+    firstSeen: number
+    lastSeen: number
+    affectedUsers: number
+}
+
+export interface PerformanceMetrics {
+    cache: CacheMetrics
+    queries: QueryMetrics[]
+    pageLoads: PageLoadMetrics[]
+    errors: ErrorMetrics[]
+    score: number
+    timeRange: { start: number; end: number }
+}
+
+export interface PerformanceConfig {
+    enableCacheTracking?: boolean
+    enableQueryTracking?: boolean
+    enablePageLoadTracking?: boolean
+    enableErrorTracking?: boolean
+    sampleRate?: number
+    maxMetrics?: number
+}
+
+export interface CacheHitEvent {
+    queryKey: string
+    duration: number
+    timestamp: number
+    cacheType: 'ssr' | 'client' | 'memory'
+}
+
+export interface CacheMissEvent {
+    queryKey: string
+    duration: number
+    timestamp: number
+    cacheType: 'ssr' | 'client' | 'memory'
+    fetchDuration: number
+}

package/packages/perf/react/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationDir": "./dist",
+    "outDir": "./dist",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

package/packages/perf/react/tsup.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+    entry: {
+        index: 'src/index.ts',
+    },
+    format: ['esm'],
+    dts: true,
+    clean: true,
+    outDir: 'dist',
+    sourcemap: true,
+    external: [
+        'react',
+        'react-dom',
+        'lucide-react',
+        '@geenius-ui/react',
+        '@tanstack/react-query',
+    ],
+})

package/packages/perf/solidjs/README.md

@@ -0,0 +1 @@
+# ✦ @geenius-tools/perf-solidjs\n\n> SolidJS performance monitoring — metrics signals & dashboard\n\n---\n\n## Overview\nBuilt with Steve Jobs-level minimalism and Jony Ive-level craftsmanship, this package is designed to deliver unparalleled developer experience (DX) and rock-solid performance.\n\n## Installation\n\n```bash\npnpm add @geenius-tools/perf-solidjs\n```\n\n## Usage\n\n```typescript\nimport { init } from '@geenius-tools/perf-solidjs';\n\n// Initialize the module with absolute precision\ninit({\n  mode: 'premium',\n});\n```\n\n## Architecture\n- **Zero-config**: It just works.\n- **Strictly Typed**: Fully written in TypeScript for flawless IntelliSense.\n- **Framework Agnostic**: seamlessly integrates into the Geenius ecosystem.\n\n---\n\n*Designed by Antigravity HQ*\n

package/packages/perf/solidjs/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@geenius-tools/perf-solidjs",
+  "version": "0.1.0",
+  "private": false,
+  "description": "SolidJS performance monitoring \u2014 metrics signals & dashboard",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "solid-js": "^1.9.0",
+    "tsup": "^8.5.1",
+    "typescript": "~5.9.3"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.8.0 || ^1.9.0"
+  },
+  "author": "Antigravity HQ",
+  "license": "MIT",
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/packages/perf/solidjs/src/components/PerformanceDashboard.tsx

@@ -0,0 +1,207 @@
+/**
+ * @geenius-tools/perf-solidjs — components/PerformanceDashboard.tsx
+ *
+ * Rich performance dashboard with SSR cache hit rates, query performance,
+ * and error metrics. SolidJS variant with reactive primitives.
+ *
+ * Uses Tailwind CSS utility classes.
+ */
+
+import { Show, For } from 'solid-js/web'
+
+// ─── Types (re-exported from React variant for consistency) ─────────────────
+
+export interface CacheMetrics {
+    hitRate: number
+    totalRequests: number
+    hits: number
+    misses: number
+    avgHitTime: number
+    avgMissTime: number
+}
+
+export interface QueryMetric {
+    queryKey: string
+    executions: number
+    avgDuration: number
+    minDuration: number
+    maxDuration: number
+    errors: number
+    cached: boolean
+}
+
+export interface ErrorMetric {
+    type: string
+    message: string
+    count: number
+    firstSeen: number
+    lastSeen: number
+}
+
+export interface PerformanceMetricsData {
+    score: number
+    cache: CacheMetrics
+    queries: QueryMetric[]
+    errors: ErrorMetric[]
+}
+
+export interface PerformanceDashboardProps {
+    metrics: PerformanceMetricsData | null
+    isLoading: boolean
+    error: Error | null
+    onRefresh: () => void
+    onClear: () => void
+    onExport: () => string
+}
+
+export function PerformanceDashboard(props: PerformanceDashboardProps) {
+    const downloadMetrics = () => {
+        const data = props.onExport()
+        const blob = new Blob([data], { type: 'application/json' })
+        const url = URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = `performance-metrics-${Date.now()}.json`
+        a.click()
+        URL.revokeObjectURL(url)
+    }
+
+    const scoreBadge = () => {
+        const s = props.metrics?.score ?? 0
+        if (s >= 90) return { emoji: '🟢', label: 'Excellent', color: 'bg-green-100 text-green-800' }
+        if (s >= 70) return { emoji: '🟡', label: 'Good', color: 'bg-yellow-100 text-yellow-800' }
+        return { emoji: '🔴', label: 'Needs Improvement', color: 'bg-red-100 text-red-800' }
+    }
+
+    return (
+        <>
+            <Show when={props.isLoading && !props.metrics}>
+                <div class="flex justify-center py-8">
+                    <div class="animate-spin h-8 w-8 border-2 border-primary border-t-transparent rounded-full" />
+                    <span class="ml-3 text-muted-foreground">Loading performance metrics…</span>
+                </div>
+            </Show>
+
+            <Show when={props.error}>
+                <div class="rounded-xl border border-border bg-card p-6">
+                    <div class="text-red-600">Error loading metrics: {props.error?.message}</div>
+                </div>
+            </Show>
+
+            <Show when={props.metrics}>
+                {(m) => (
+                    <div class="space-y-6">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <h1 class="text-2xl font-bold">Performance Monitoring</h1>
+                                <p class="text-muted-foreground mt-1">SSR Cache, Query Performance, and Error Tracking</p>
+                            </div>
+                            <div class="flex gap-2">
+                                <button type="button" onClick={props.onRefresh} class="px-4 py-2 rounded-lg border border-border text-sm font-medium hover:bg-bg-muted transition-colors">Refresh</button>
+                                <button type="button" onClick={downloadMetrics} class="px-4 py-2 rounded-lg border border-border text-sm font-medium hover:bg-bg-muted transition-colors">Export</button>
+                                <button type="button" onClick={props.onClear} class="px-4 py-2 rounded-lg border border-border text-sm font-medium hover:bg-bg-muted transition-colors">Clear</button>
+                            </div>
+                        </div>
+
+                        <div class="rounded-xl border border-border bg-card p-6">
+                            <div class="flex items-center justify-between">
+                                <div>
+                                    <div class="text-sm text-muted-foreground mb-1">Overall Performance Score</div>
+                                    <div class="text-4xl font-bold text-foreground">{m().score}</div>
+                                </div>
+                                <div class="text-5xl">{scoreBadge().emoji}</div>
+                            </div>
+                            <div class="mt-4">
+                                <span class={`px-2 py-1 rounded-full text-xs font-medium ${scoreBadge().color}`}>{scoreBadge().label}</span>
+                            </div>
+                        </div>
+
+                        <div>
+                            <h2 class="text-xl font-semibold mb-4">SSR Cache Performance</h2>
+                            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+                                <MetricCard label="Cache Hit Rate" value={`${m().cache.hitRate.toFixed(1)}%`} badge={m().cache.hitRate >= 80 ? 'Excellent' : m().cache.hitRate >= 50 ? 'Good' : 'Poor'} badgeColor={m().cache.hitRate >= 80 ? 'bg-green-100 text-green-800' : m().cache.hitRate >= 50 ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800'} />
+                                <MetricCard label="Total Requests" value={m().cache.totalRequests.toLocaleString()} subtitle={`${m().cache.hits} hits / ${m().cache.misses} misses`} />
+                                <MetricCard label="Avg Hit Time" value={`${m().cache.avgHitTime.toFixed(0)}`} unit="ms" badge={m().cache.avgHitTime < 50 ? 'Fast' : 'Acceptable'} badgeColor={m().cache.avgHitTime < 50 ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'} />
+                                <MetricCard label="Avg Miss Time" value={`${m().cache.avgMissTime.toFixed(0)}`} unit="ms" subtitle={`Time saved: ${(m().cache.avgMissTime - m().cache.avgHitTime).toFixed(0)}ms`} />
+                            </div>
+                        </div>
+
+                        <div>
+                            <h2 class="text-xl font-semibold mb-4">Top Queries by Executions</h2>
+                            <div class="rounded-xl border border-border bg-card overflow-x-auto">
+                                <table class="w-full">
+                                    <thead>
+                                        <tr class="border-b border-border">
+                                            <For each={['Query', 'Executions', 'Avg Duration', 'Errors', 'Cached']}>
+                                                {(h) => <th class="text-left p-4 text-sm font-semibold text-muted-foreground">{h}</th>}
+                                            </For>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <For each={m().queries.slice(0, 10)}>
+                                            {(query) => (
+                                                <tr class="border-b border-border/50 hover:bg-surface">
+                                                    <td class="p-4 text-sm font-mono text-foreground truncate max-w-xs">{query.queryKey}</td>
+                                                    <td class="p-4 text-sm text-foreground">{query.executions}</td>
+                                                    <td class="p-4 text-sm text-foreground">{query.avgDuration.toFixed(0)}ms <span class="text-xs text-muted-foreground ml-2">({query.minDuration.toFixed(0)}-{query.maxDuration.toFixed(0)}ms)</span></td>
+                                                    <td class="p-4">{query.errors > 0 ? <span class="px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">{query.errors}</span> : <span class="text-sm text-muted-foreground/60">0</span>}</td>
+                                                    <td class="p-4"><span class={`px-2 py-0.5 rounded-full text-xs font-medium ${query.cached ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600'}`}>{query.cached ? 'Yes' : 'No'}</span></td>
+                                                </tr>
+                                            )}
+                                        </For>
+                                        <Show when={m().queries.length === 0}>
+                                            <tr><td colSpan={5} class="p-8 text-center text-muted-foreground">No query data available</td></tr>
+                                        </Show>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+
+                        <Show when={m().errors.length > 0}>
+                            <div>
+                                <h2 class="text-xl font-semibold mb-4">Recent Errors</h2>
+                                <div class="rounded-xl border border-border bg-card divide-y divide-border">
+                                    <For each={m().errors.slice(0, 5)}>
+                                        {(err) => (
+                                            <div class="p-4">
+                                                <div class="flex items-start justify-between">
+                                                    <div class="flex-1">
+                                                        <div class="flex items-center gap-2 mb-1">
+                                                            <span class="px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">{err.type}</span>
+                                                            <span class="text-sm font-semibold text-foreground">{err.message}</span>
+                                                        </div>
+                                                        <div class="text-xs text-muted-foreground">
+                                                            First seen: {new Date(err.firstSeen).toLocaleString()} | Last seen: {new Date(err.lastSeen).toLocaleString()}
+                                                        </div>
+                                                    </div>
+                                                    <div class="text-right ml-4">
+                                                        <div class="text-lg font-bold text-red-600">{err.count}</div>
+                                                        <div class="text-xs text-muted-foreground">occurrences</div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        )}
+                                    </For>
+                                </div>
+                            </div>
+                        </Show>
+                    </div>
+                )}
+            </Show>
+        </>
+    )
+}
+
+function MetricCard(props: { label: string; value: string; unit?: string; subtitle?: string; badge?: string; badgeColor?: string }) {
+    return (
+        <div class="rounded-xl border border-border bg-card p-6">
+            <div class="text-sm text-muted-foreground mb-1">{props.label}</div>
+            <div class="text-3xl font-bold text-foreground">
+                {props.value}
+                <Show when={props.unit}><span class="text-lg text-muted-foreground">{props.unit}</span></Show>
+            </div>
+            <Show when={props.badge}><div class="mt-2"><span class={`px-2 py-0.5 rounded-full text-xs font-medium ${props.badgeColor}`}>{props.badge}</span></div></Show>
+            <Show when={props.subtitle}><div class="mt-2 text-sm text-muted-foreground">{props.subtitle}</div></Show>
+        </div>
+    )
+}