@gravito/zenith 0.1.0-beta.1

package/src/client/pages/LoginPage.tsx

@@ -0,0 +1,153 @@
+import { motion } from 'framer-motion'
+import { Activity, AlertCircle, ArrowRight, Eye, EyeOff, Lock } from 'lucide-react'
+import { useState } from 'react'
+import { useAuth } from '../contexts/AuthContext'
+import { cn } from '../utils'
+
+export function LoginPage() {
+  const { login } = useAuth()
+  const [password, setPassword] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
+  const [error, setError] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    setIsLoading(true)
+
+    const result = await login(password)
+
+    if (!result.success) {
+      setError(result.error || 'Authentication failed')
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center p-4 relative overflow-hidden">
+      {/* Background Effects */}
+      <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-indigo-500/5" />
+      <div className="absolute top-1/4 -left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-3xl animate-pulse" />
+      <div
+        className="absolute bottom-1/4 -right-1/4 w-96 h-96 bg-indigo-500/10 rounded-full blur-3xl animate-pulse"
+        style={{ animationDelay: '1s' }}
+      />
+
+      {/* Grid Pattern */}
+      <div className="absolute inset-0 bg-[linear-gradient(rgba(var(--primary-rgb),0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(var(--primary-rgb),0.03)_1px,transparent_1px)] bg-[size:64px_64px]" />
+
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        className="relative z-10 w-full max-w-md"
+      >
+        {/* Logo & Title */}
+        <div className="text-center mb-8">
+          <motion.div
+            initial={{ scale: 0 }}
+            animate={{ scale: 1 }}
+            transition={{ type: 'spring', delay: 0.2 }}
+            className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-primary to-indigo-600 rounded-3xl shadow-2xl shadow-primary/30 mb-6"
+          >
+            <Activity size={40} className="text-primary-foreground" />
+          </motion.div>
+          <h1 className="text-4xl font-black tracking-tighter mb-2">GRAVITO</h1>
+          <p className="text-[10px] font-bold text-primary uppercase tracking-[0.4em]">
+            Flux Console
+          </p>
+        </div>
+
+        {/* Login Card */}
+        <div className="card-premium p-8 backdrop-blur-xl">
+          <div className="text-center mb-8">
+            <h2 className="text-xl font-bold mb-2">Welcome Back</h2>
+            <p className="text-sm text-muted-foreground">
+              Enter your password to access the console
+            </p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-6">
+            {/* Error Message */}
+            {error && (
+              <motion.div
+                initial={{ opacity: 0, y: -10 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="flex items-center gap-3 p-4 bg-red-500/10 border border-red-500/20 rounded-xl text-red-500"
+              >
+                <AlertCircle size={18} />
+                <span className="text-sm font-medium">{error}</span>
+              </motion.div>
+            )}
+
+            {/* Password Field */}
+            <div className="space-y-2">
+              <label
+                htmlFor="password"
+                className="text-sm font-bold text-muted-foreground uppercase tracking-widest"
+              >
+                Password
+              </label>
+              <div className="relative">
+                <Lock
+                  className="absolute left-4 top-1/2 -translate-y-1/2 text-muted-foreground"
+                  size={18}
+                />
+                <input
+                  id="password"
+                  type={showPassword ? 'text' : 'password'}
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="Enter console password"
+                  className={cn(
+                    'w-full bg-muted/40 border border-border/50 rounded-xl py-4 pl-12 pr-12',
+                    'text-sm font-medium placeholder:text-muted-foreground/40',
+                    'focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary/50',
+                    'transition-all'
+                  )}
+                  disabled={isLoading}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-4 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                </button>
+              </div>
+            </div>
+
+            {/* Submit Button */}
+            <button
+              type="submit"
+              disabled={isLoading || !password}
+              className={cn(
+                'w-full py-4 rounded-xl font-bold text-sm uppercase tracking-widest',
+                'bg-gradient-to-r from-primary to-indigo-600 text-primary-foreground',
+                'shadow-lg shadow-primary/30 hover:shadow-xl hover:shadow-primary/40',
+                'transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]',
+                'disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100',
+                'flex items-center justify-center gap-2'
+              )}
+            >
+              {isLoading ? (
+                <div className="w-5 h-5 border-2 border-primary-foreground/30 border-t-primary-foreground rounded-full animate-spin" />
+              ) : (
+                <>
+                  Access Console
+                  <ArrowRight size={18} />
+                </>
+              )}
+            </button>
+          </form>
+        </div>
+
+        {/* Footer */}
+        <p className="text-center mt-6 text-xs text-muted-foreground/50">
+          Protected by Gravito Security Layer
+        </p>
+      </motion.div>
+    </div>
+  )
+}

package/src/client/pages/MetricsPage.tsx

@@ -0,0 +1,408 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import {
+  Activity,
+  BarChart3,
+  CheckCircle,
+  Clock,
+  Hourglass,
+  LineChart,
+  RefreshCcw,
+  TrendingUp,
+  XCircle,
+} from 'lucide-react'
+import React from 'react'
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Legend,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts'
+import { cn } from '../utils'
+
+export function MetricsPage() {
+  const [timeRange, setTimeRange] = React.useState<'15m' | '1h' | '6h' | '24h'>('15m')
+
+  const { data: throughputData } = useQuery({
+    queryKey: ['throughput'],
+    queryFn: async () => {
+      const res = await fetch('/api/throughput')
+      const json = await res.json()
+      return json.data || []
+    },
+    staleTime: Infinity,
+  })
+
+  const { data: historyData } = useQuery<{ history: Record<string, number[]> }>({
+    queryKey: ['metrics-history'],
+    queryFn: () => fetch('/api/metrics/history').then((res) => res.json()),
+    refetchInterval: 30000,
+  })
+
+  const { isPending, data: queueData } = useQuery<{ queues: any[] }>({
+    queryKey: ['queues'],
+    queryFn: () => fetch('/api/queues').then((res) => res.json()),
+    staleTime: Infinity,
+  })
+
+  const { data: workerData } = useQuery<{ workers: any[] }>({
+    queryKey: ['workers'],
+    queryFn: () => fetch('/api/workers').then((res) => res.json()),
+    staleTime: Infinity,
+  })
+
+  const queryClient = useQueryClient()
+  // Live update from global stream
+  React.useEffect(() => {
+    const handler = (e: CustomEvent) => {
+      const stats = e.detail
+      if (!stats) {
+        return
+      }
+      if (stats.queues) {
+        queryClient.setQueryData(['queues'], { queues: stats.queues })
+      }
+      if (stats.workers) {
+        queryClient.setQueryData(['workers'], { workers: stats.workers })
+      }
+      if (stats.throughput) {
+        queryClient.setQueryData(['throughput'], stats.throughput)
+      }
+    }
+    window.addEventListener('flux-stats-update', handler as EventListener)
+    return () => window.removeEventListener('flux-stats-update', handler as EventListener)
+  }, [queryClient])
+
+  const history = historyData?.history || {}
+  const queues = queueData?.queues || []
+  const workers = workerData?.workers || []
+
+  const chartData =
+    throughputData?.map((d: any) => ({
+      time: d.timestamp,
+      value: d.count,
+    })) || []
+
+  // Calculate totals
+  const totalWaiting = queues.reduce((acc, q) => acc + q.waiting, 0)
+  const totalDelayed = queues.reduce((acc, q) => acc + q.delayed, 0)
+  const totalFailed = queues.reduce((acc, q) => acc + q.failed, 0)
+  const totalActive = queues.reduce((acc, q) => acc + q.active, 0)
+
+  // Calculate throughput stats
+  const currentThroughput = chartData[chartData.length - 1]?.value || 0
+  const avgThroughput =
+    chartData.length > 0
+      ? Math.round(chartData.reduce((acc: number, d: any) => acc + d.value, 0) / chartData.length)
+      : 0
+  const maxThroughput = chartData.length > 0 ? Math.max(...chartData.map((d: any) => d.value)) : 0
+
+  // Prepare queue distribution data
+  const queueDistribution = queues.slice(0, 10).map((q) => ({
+    name: q.name.length > 12 ? `${q.name.slice(0, 12)}...` : q.name,
+    waiting: q.waiting,
+    delayed: q.delayed,
+    failed: q.failed,
+  }))
+
+  // Prepare historical sparkline data
+  const historyLabels = Array.from({ length: 15 }, (_, i) => `${14 - i}m ago`)
+  const sparklineData = historyLabels.map((label, i) => ({
+    time: label,
+    waiting: history.waiting?.[i] || 0,
+    delayed: history.delayed?.[i] || 0,
+    failed: history.failed?.[i] || 0,
+    workers: history.workers?.[i] || 0,
+  }))
+
+  if (isPending) {
+    return (
+      <div className="flex flex-col items-center justify-center p-20 space-y-6">
+        <RefreshCcw className="animate-spin text-primary" size={48} />
+        <p className="text-muted-foreground font-bold uppercase tracking-[0.3em] text-xs">
+          Loading metrics...
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-8">
+      {/* Header */}
+      <div className="flex justify-between items-end">
+        <div>
+          <h1 className="text-4xl font-black tracking-tighter">System Metrics</h1>
+          <p className="text-muted-foreground mt-2 text-sm font-bold opacity-60 uppercase tracking-widest">
+            Real-time performance analytics and trends.
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          {(['15m', '1h', '6h', '24h'] as const).map((range) => (
+            <button
+              type="button"
+              key={range}
+              onClick={() => setTimeRange(range)}
+              className={cn(
+                'px-3 py-1.5 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all',
+                timeRange === range
+                  ? 'bg-primary text-primary-foreground shadow-lg shadow-primary/20'
+                  : 'hover:bg-muted text-muted-foreground'
+              )}
+            >
+              {range}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Quick Stats */}
+      <div className="grid grid-cols-2 lg:grid-cols-6 gap-4">
+        <StatCard icon={Hourglass} label="Waiting" value={totalWaiting} color="amber" />
+        <StatCard icon={Clock} label="Delayed" value={totalDelayed} color="blue" />
+        <StatCard icon={Activity} label="Active" value={totalActive} color="green" />
+        <StatCard icon={XCircle} label="Failed" value={totalFailed} color="red" />
+        <StatCard icon={CheckCircle} label="Workers" value={workers.length} color="indigo" />
+        <StatCard icon={TrendingUp} label="Jobs/min" value={currentThroughput} color="primary" />
+      </div>
+
+      {/* Throughput Chart */}
+      <div className="card-premium p-6">
+        <div className="flex justify-between items-start mb-6">
+          <div>
+            <div className="flex items-center gap-2">
+              <LineChart size={20} className="text-primary" />
+              <h3 className="text-xl font-bold tracking-tight">Throughput Over Time</h3>
+            </div>
+            <p className="text-[10px] text-muted-foreground uppercase tracking-[0.2em] font-bold mt-1">
+              Jobs processed per minute
+            </p>
+          </div>
+          <div className="text-right">
+            <div className="flex gap-6">
+              <div>
+                <p className="text-[9px] font-black text-muted-foreground/50 uppercase">Current</p>
+                <p className="text-2xl font-black text-primary">{currentThroughput}</p>
+              </div>
+              <div>
+                <p className="text-[9px] font-black text-muted-foreground/50 uppercase">Average</p>
+                <p className="text-2xl font-black">{avgThroughput}</p>
+              </div>
+              <div>
+                <p className="text-[9px] font-black text-muted-foreground/50 uppercase">Peak</p>
+                <p className="text-2xl font-black text-green-500">{maxThroughput}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="h-[300px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <AreaChart data={chartData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
+              <defs>
+                <linearGradient id="colorThroughput" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="hsl(var(--primary))" stopOpacity={0.4} />
+                  <stop offset="95%" stopColor="hsl(var(--primary))" stopOpacity={0} />
+                </linearGradient>
+              </defs>
+              <CartesianGrid
+                strokeDasharray="3 3"
+                vertical={false}
+                stroke="hsl(var(--border))"
+                opacity={0.5}
+              />
+              <XAxis
+                dataKey="time"
+                axisLine={false}
+                tickLine={false}
+                tick={{ fontSize: 10, fill: 'hsl(var(--muted-foreground))', fontWeight: 600 }}
+              />
+              <YAxis
+                axisLine={false}
+                tickLine={false}
+                tick={{ fontSize: 10, fill: 'hsl(var(--muted-foreground))', fontWeight: 600 }}
+              />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: 'hsl(var(--card))',
+                  border: '1px solid hsl(var(--border))',
+                  borderRadius: '12px',
+                  fontSize: '12px',
+                }}
+              />
+              <Area
+                type="monotone"
+                dataKey="value"
+                stroke="hsl(var(--primary))"
+                fillOpacity={1}
+                fill="url(#colorThroughput)"
+                strokeWidth={2}
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+
+      {/* Two Column Layout */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Queue Distribution */}
+        <div className="card-premium p-6">
+          <div className="flex items-center gap-2 mb-6">
+            <BarChart3 size={20} className="text-primary" />
+            <h3 className="text-lg font-bold tracking-tight">Queue Distribution</h3>
+          </div>
+          <div className="h-[300px]">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart
+                data={queueDistribution}
+                margin={{ top: 10, right: 10, left: -20, bottom: 40 }}
+              >
+                <CartesianGrid
+                  strokeDasharray="3 3"
+                  vertical={false}
+                  stroke="hsl(var(--border))"
+                  opacity={0.5}
+                />
+                <XAxis
+                  dataKey="name"
+                  axisLine={false}
+                  tickLine={false}
+                  tick={{ fontSize: 9, fill: 'hsl(var(--muted-foreground))', fontWeight: 600 }}
+                  angle={-45}
+                  textAnchor="end"
+                />
+                <YAxis
+                  axisLine={false}
+                  tickLine={false}
+                  tick={{ fontSize: 10, fill: 'hsl(var(--muted-foreground))', fontWeight: 600 }}
+                />
+                <Tooltip
+                  contentStyle={{
+                    backgroundColor: 'hsl(var(--card))',
+                    border: '1px solid hsl(var(--border))',
+                    borderRadius: '12px',
+                    fontSize: '12px',
+                  }}
+                />
+                <Legend />
+                <Bar
+                  dataKey="waiting"
+                  fill="hsl(45, 93%, 47%)"
+                  name="Waiting"
+                  radius={[4, 4, 0, 0]}
+                />
+                <Bar
+                  dataKey="delayed"
+                  fill="hsl(217, 91%, 60%)"
+                  name="Delayed"
+                  radius={[4, 4, 0, 0]}
+                />
+                <Bar dataKey="failed" fill="hsl(0, 84%, 60%)" name="Failed" radius={[4, 4, 0, 0]} />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+
+        {/* Historical Trends */}
+        <div className="card-premium p-6">
+          <div className="flex items-center gap-2 mb-6">
+            <TrendingUp size={20} className="text-primary" />
+            <h3 className="text-lg font-bold tracking-tight">15-Minute Trends</h3>
+          </div>
+          <div className="h-[300px]">
+            <ResponsiveContainer width="100%" height="100%">
+              <AreaChart data={sparklineData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
+                <defs>
+                  <linearGradient id="colorWaiting" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="5%" stopColor="hsl(45, 93%, 47%)" stopOpacity={0.3} />
+                    <stop offset="95%" stopColor="hsl(45, 93%, 47%)" stopOpacity={0} />
+                  </linearGradient>
+                  <linearGradient id="colorFailed" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="5%" stopColor="hsl(0, 84%, 60%)" stopOpacity={0.3} />
+                    <stop offset="95%" stopColor="hsl(0, 84%, 60%)" stopOpacity={0} />
+                  </linearGradient>
+                </defs>
+                <CartesianGrid
+                  strokeDasharray="3 3"
+                  vertical={false}
+                  stroke="hsl(var(--border))"
+                  opacity={0.5}
+                />
+                <XAxis
+                  dataKey="time"
+                  axisLine={false}
+                  tickLine={false}
+                  tick={{ fontSize: 9, fill: 'hsl(var(--muted-foreground))', fontWeight: 600 }}
+                />
+                <YAxis
+                  axisLine={false}
+                  tickLine={false}
+                  tick={{ fontSize: 10, fill: 'hsl(var(--muted-foreground))', fontWeight: 600 }}
+                />
+                <Tooltip
+                  contentStyle={{
+                    backgroundColor: 'hsl(var(--card))',
+                    border: '1px solid hsl(var(--border))',
+                    borderRadius: '12px',
+                    fontSize: '12px',
+                  }}
+                />
+                <Area
+                  type="monotone"
+                  dataKey="waiting"
+                  stroke="hsl(45, 93%, 47%)"
+                  fill="url(#colorWaiting)"
+                  strokeWidth={2}
+                />
+                <Area
+                  type="monotone"
+                  dataKey="failed"
+                  stroke="hsl(0, 84%, 60%)"
+                  fill="url(#colorFailed)"
+                  strokeWidth={2}
+                />
+              </AreaChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface StatCardProps {
+  icon: React.ComponentType<{ size?: number; className?: string }>
+  label: string
+  value: number
+  color: 'amber' | 'blue' | 'green' | 'red' | 'indigo' | 'primary'
+}
+
+function StatCard({ icon: Icon, label, value, color }: StatCardProps) {
+  const colorClasses = {
+    amber: 'text-amber-500 bg-amber-500/10',
+    blue: 'text-blue-500 bg-blue-500/10',
+    green: 'text-green-500 bg-green-500/10',
+    red: 'text-red-500 bg-red-500/10',
+    indigo: 'text-indigo-500 bg-indigo-500/10',
+    primary: 'text-primary bg-primary/10',
+  }
+
+  return (
+    <div className="card-premium p-4 flex items-center gap-3">
+      <div
+        className={cn('w-10 h-10 rounded-xl flex items-center justify-center', colorClasses[color])}
+      >
+        <Icon size={20} />
+      </div>
+      <div>
+        <p className="text-[9px] font-black text-muted-foreground/50 uppercase tracking-widest">
+          {label}
+        </p>
+        <p className="text-xl font-black">{value.toLocaleString()}</p>
+      </div>
+    </div>
+  )
+}