@gravito/zenith 0.1.0-beta.1

package/src/client/Sidebar.tsx

@@ -0,0 +1,102 @@
+import { motion } from 'framer-motion'
+import {
+  Activity,
+  ChevronLeft,
+  ChevronRight,
+  Clock,
+  HardDrive,
+  LayoutDashboard,
+  ListTree,
+  Settings,
+} from 'lucide-react'
+import { NavLink, useLocation } from 'react-router-dom'
+import { cn } from './utils'
+
+interface SidebarProps {
+  className?: string
+  collapsed: boolean
+  toggleCollapse: () => void
+}
+
+export function Sidebar({ className, collapsed, toggleCollapse }: SidebarProps) {
+  const location = useLocation()
+
+  const navItems = [
+    { icon: LayoutDashboard, label: 'Overview', path: '/' },
+    { icon: ListTree, label: 'Queues', path: '/queues' },
+    { icon: Clock, label: 'Schedules', path: '/schedules' },
+    { icon: HardDrive, label: 'Workers', path: '/workers' },
+    { icon: Activity, label: 'Metrics', path: '/metrics' },
+    { icon: Settings, label: 'Settings', path: '/settings' },
+  ]
+
+  return (
+    <div
+      className={cn(
+        'flex-1 flex flex-col justify-between transition-all duration-300 ease-in-out relative group z-20 overflow-hidden',
+        className
+      )}
+    >
+      {/* Nav Items */}
+      <nav className="flex-1 px-4 py-6 space-y-2">
+        {navItems.map((item, i) => {
+          const isActive = location.pathname === item.path
+          return (
+            <NavLink
+              key={i}
+              to={item.path}
+              className={cn(
+                'w-full flex items-center gap-4 px-4 py-3 rounded-xl transition-all text-muted-foreground group/item relative overflow-hidden',
+                isActive
+                  ? 'bg-primary text-primary-foreground shadow-lg shadow-primary/20 hover:scale-[1.02]'
+                  : 'hover:bg-muted font-medium hover:text-foreground active:scale-95'
+              )}
+            >
+              <item.icon
+                size={22}
+                className={cn(
+                  'transition-all shrink-0',
+                  isActive ? 'scale-110' : 'group-hover/item:scale-110'
+                )}
+              />
+              <motion.span
+                initial={false}
+                animate={{
+                  opacity: collapsed ? 0 : 1,
+                  display: collapsed ? 'none' : 'block',
+                }}
+                className="font-semibold whitespace-nowrap tracking-tight"
+              >
+                {item.label}
+              </motion.span>
+              {isActive && (
+                <motion.div
+                  layoutId="active-pill"
+                  className="absolute left-0 w-1 h-6 bg-primary-foreground rounded-r-full"
+                />
+              )}
+            </NavLink>
+          )
+        })}
+      </nav>
+
+      {/* Footer / Toggle */}
+      <div className="p-4 border-t border-border/50">
+        <button
+          type="button"
+          onClick={toggleCollapse}
+          className="w-full flex items-center justify-center h-10 rounded-xl hover:bg-muted text-muted-foreground hover:text-foreground transition-all active:scale-90"
+        >
+          {collapsed ? (
+            <ChevronRight size={20} />
+          ) : (
+            <div className="flex items-center gap-2 px-2">
+              <ChevronLeft size={18} />{' '}
+              <span className="text-xs font-black uppercase tracking-widest">Collapse Sidebar</span>
+            </div>
+          )}
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/client/ThroughputChart.tsx

@@ -0,0 +1,135 @@
+import { useQuery } from '@tanstack/react-query'
+import React from 'react'
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts'
+
+interface ThroughputPoint {
+  timestamp: string
+  count: number
+}
+
+export function ThroughputChart() {
+  // Initial fetch via React Query
+  const { data: initialData } = useQuery({
+    queryKey: ['throughput'],
+    queryFn: async () => {
+      const res = await fetch('/api/throughput')
+      const json = await res.json()
+      return json.data || []
+    },
+    staleTime: Infinity, // Don't refetch automatically
+  })
+
+  const [throughputData, setThroughputData] = React.useState<ThroughputPoint[]>([])
+
+  // Sync with initial data
+  React.useEffect(() => {
+    if (initialData) {
+      setThroughputData(initialData)
+    }
+  }, [initialData])
+
+  // Listen for live updates
+  React.useEffect(() => {
+    const handler = (e: Event) => {
+      const customEvent = e as CustomEvent
+      if (customEvent.detail?.throughput) {
+        setThroughputData(customEvent.detail.throughput)
+      }
+    }
+    window.addEventListener('flux-stats-update', handler)
+    return () => window.removeEventListener('flux-stats-update', handler)
+  }, [])
+
+  const chartData =
+    throughputData?.map((d: ThroughputPoint) => ({
+      time: d.timestamp,
+      value: d.count,
+    })) || []
+  return (
+    <div className="card-premium h-[350px] w-full p-6 flex flex-col relative overflow-hidden group">
+      {/* Background Accent */}
+      <div className="absolute top-0 right-0 w-64 h-64 bg-primary/5 rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl" />
+
+      <div className="flex justify-between items-start mb-6 z-10">
+        <div>
+          <div className="flex items-center gap-2">
+            <h3 className="text-xl font-bold tracking-tight">System Throughput</h3>
+            <div className="flex items-center gap-1.5 px-2 py-0.5 bg-green-500/10 text-green-500 text-[8px] font-black uppercase tracking-widest rounded-full border border-green-500/20">
+              <span className="w-1 h-1 bg-green-500 rounded-full animate-ping"></span>
+              Live
+            </div>
+          </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">
+          <p className="text-2xl font-black text-foreground">
+            {chartData[chartData.length - 1]?.value || 0}
+          </p>
+          <p className="text-[8px] text-muted-foreground uppercase font-bold">Current Rate</p>
+        </div>
+      </div>
+
+      <div className="flex-1 w-full min-h-0">
+        <ResponsiveContainer width="100%" height="100%">
+          <AreaChart data={chartData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
+            <defs>
+              <linearGradient id="colorValue" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor="hsl(var(--primary))" stopOpacity={0.4} />
+                <stop offset="50%" stopColor="hsl(var(--primary))" stopOpacity={0.1} />
+                <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: 9, fill: 'hsl(var(--muted-foreground))', fontWeight: 600 }}
+              dy={10}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tick={{ fontSize: 9, fill: 'hsl(var(--muted-foreground))', fontWeight: 600 }}
+            />
+            <Tooltip
+              cursor={{ stroke: 'hsl(var(--primary))', strokeWidth: 1, strokeDasharray: '4 4' }}
+              contentStyle={{
+                backgroundColor: 'hsl(var(--card))',
+                border: '1px solid hsl(var(--border))',
+                borderRadius: '16px',
+                fontSize: '12px',
+                boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1)',
+              }}
+              itemStyle={{ fontWeight: 'bold', color: 'hsl(var(--primary))' }}
+            />
+            <Area
+              type="stepAfter"
+              dataKey="value"
+              stroke="hsl(var(--primary))"
+              fillOpacity={1}
+              fill="url(#colorValue)"
+              strokeWidth={2.5}
+              animationDuration={1500}
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  )
+}

package/src/client/WorkerStatus.tsx

@@ -0,0 +1,170 @@
+import { type ClassValue, clsx } from 'clsx'
+import { Activity, Cpu } from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+interface WorkerInfo {
+  id: string
+  status: 'online' | 'offline'
+  pid: number
+  uptime: number
+  metrics?: {
+    cpu: number
+    cores: number
+    ram: {
+      rss: number
+    }
+  }
+}
+
+export function WorkerStatus({
+  highlightedWorkerId,
+  workers = [],
+}: {
+  highlightedWorkerId?: string | null
+  workers?: WorkerInfo[]
+}) {
+  // Legacy polling removed, now using passed props
+  // const { data: workerData } = useQuery<{ workers: any[] }>({ ... })
+
+  // Fallback if not passed (though it should be)
+  // const workers = workerData?.workers || []
+
+  const onlineCount = workers.filter((w) => w.status === 'online').length
+
+  return (
+    <div className="card-premium p-6 h-full">
+      <div className="flex justify-between items-center mb-8">
+        <div>
+          <h3 className="text-lg font-black flex items-center gap-2 tracking-tight">
+            <Cpu size={20} className="text-primary" />
+            Cluster Nodes
+          </h3>
+          <p className="text-[10px] text-muted-foreground uppercase font-black tracking-widest opacity-60">
+            Real-time load
+          </p>
+        </div>
+        <span className="text-[10px] font-black text-green-500 bg-green-500/10 px-3 py-1 rounded-full uppercase tracking-widest border border-green-500/20">
+          {onlineCount} ACTIVE
+        </span>
+      </div>
+
+      <div className="space-y-3">
+        {workers.length === 0 && (
+          <div className="py-12 text-center text-muted-foreground/30 flex flex-col items-center gap-2">
+            <Activity size={24} className="opacity-20 animate-pulse" />
+            <p className="text-[10px] font-black uppercase tracking-widest">No nodes connected</p>
+          </div>
+        )}
+
+        {workers.map((worker) => (
+          <div
+            key={worker.id}
+            className={cn(
+              'flex items-center justify-between p-4 rounded-2xl bg-muted/10 border transition-all group overflow-hidden relative',
+              worker.id === highlightedWorkerId
+                ? 'border-primary/50 bg-primary/5 shadow-[0_0_20px_rgba(var(--primary-rgb),0.1)] -translate-y-1 scale-[1.02] z-10'
+                : 'border-transparent hover:border-primary/20 hover:bg-muted/20'
+            )}
+          >
+            {/* Status bar */}
+            <div
+              className={cn(
+                'absolute left-0 top-0 bottom-0 w-1 transition-all',
+                worker.status === 'online' ? 'bg-green-500' : 'bg-muted-foreground/30'
+              )}
+            />
+
+            <div className="flex items-center gap-4">
+              <div className="relative">
+                <div
+                  className={cn(
+                    'w-3 h-3 rounded-full',
+                    worker.status === 'online'
+                      ? 'bg-green-500 animate-pulse shadow-[0_0_12px_rgba(34,197,94,0.6)]'
+                      : 'bg-muted-foreground/40'
+                  )}
+                ></div>
+              </div>
+              <div>
+                <p className="text-sm font-black tracking-tight group-hover:text-primary transition-colors">
+                  {worker.id}
+                </p>
+                <div className="flex items-center gap-2">
+                  <span className="text-[9px] font-black uppercase tracking-tighter opacity-50">
+                    {worker.status}
+                  </span>
+                  <span className="text-[9px] font-black text-primary/60">PID {worker.pid}</span>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-6">
+              {worker.metrics && (
+                <div className="flex gap-4">
+                  <div className="space-y-1.5 w-20">
+                    <div className="flex justify-between text-[8px] font-black text-muted-foreground uppercase tracking-tighter">
+                      <span>LOAD ({worker.metrics.cores || '-'})</span>
+                      <span
+                        className={cn(
+                          worker.metrics.cpu > (worker.metrics.cores || 4) && 'text-red-500'
+                        )}
+                      >
+                        {worker.metrics.cpu.toFixed(2)}
+                      </span>
+                    </div>
+                    <div className="h-1 w-full bg-muted rounded-full overflow-hidden">
+                      <div
+                        className={cn(
+                          'h-full transition-all duration-700',
+                          worker.metrics.cpu > (worker.metrics.cores || 4)
+                            ? 'bg-red-500'
+                            : worker.metrics.cpu > (worker.metrics.cores || 4) * 0.7
+                              ? 'bg-amber-500'
+                              : 'bg-green-500'
+                        )}
+                        style={{
+                          width: `${Math.min(100, (worker.metrics.cpu / (worker.metrics.cores || 1)) * 100)}%`,
+                        }}
+                      />
+                    </div>
+                  </div>
+                  <div className="space-y-1.5 w-16">
+                    <div className="flex justify-between text-[8px] font-black text-muted-foreground uppercase tracking-tighter">
+                      <span>RAM</span>
+                      <span>{Math.round(worker.metrics.ram.rss / 1024)}G</span>
+                    </div>
+                    <div className="h-1 w-full bg-muted rounded-full overflow-hidden">
+                      <div
+                        className="h-full bg-indigo-500 transition-all duration-700"
+                        style={{
+                          width: `${Math.min(100, (worker.metrics.ram.rss / 2048) * 100)}%`,
+                        }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              )}
+              <div className="text-right whitespace-nowrap hidden sm:block">
+                <p className="text-sm font-black tracking-tighter">{worker.uptime}s</p>
+                <p className="text-[8px] text-muted-foreground uppercase font-black tracking-widest opacity-50">
+                  UPTIME
+                </p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <button
+        type="button"
+        className="w-full mt-8 py-3 bg-muted text-[10px] font-black rounded-xl hover:bg-primary hover:text-primary-foreground transition-all uppercase tracking-[0.2em] opacity-60 hover:opacity-100 active:scale-95 shadow-lg shadow-transparent hover:shadow-primary/20"
+      >
+        Manage Nodes
+      </button>
+    </div>
+  )
+}

package/src/client/components/ConfirmDialog.tsx

@@ -0,0 +1,103 @@
+import { AnimatePresence, motion } from 'framer-motion'
+import { createPortal } from 'react-dom'
+import { cn } from '../utils'
+
+export interface ConfirmDialogProps {
+  open: boolean
+  title: string
+  message: string
+  confirmText?: string
+  cancelText?: string
+  onConfirm: () => void
+  onCancel: () => void
+  variant?: 'danger' | 'warning' | 'info'
+  isProcessing?: boolean
+}
+
+export function ConfirmDialog({
+  open,
+  title,
+  message,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  onConfirm,
+  onCancel,
+  variant = 'danger',
+  isProcessing = false,
+}: ConfirmDialogProps) {
+  return createPortal(
+    <AnimatePresence>
+      {open && (
+        // biome-ignore lint/a11y/noStaticElementInteractions: Backdrop needs click handler to stop propagation
+        <div
+          role="presentation"
+          className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-[5000] pointer-events-auto"
+          onClick={(e) => e.stopPropagation()}
+          onKeyDown={(e) => e.stopPropagation()}
+        >
+          {/* biome-ignore lint/a11y/noStaticElementInteractions: Modal content needs to stop propagation */}
+          <motion.div
+            initial={{ scale: 0.9, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0.9, opacity: 0 }}
+            transition={{ type: 'spring', damping: 25, stiffness: 200 }}
+            className="bg-card border rounded-2xl p-6 max-w-md shadow-2xl"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <h3 className="text-xl font-black mb-2">{title}</h3>
+            <p className="text-sm text-muted-foreground mb-6 whitespace-pre-line">{message}</p>
+            <div className="flex gap-3 justify-end">
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onCancel()
+                }}
+                disabled={isProcessing}
+                className="px-4 py-2 bg-muted text-foreground rounded-lg hover:bg-muted/80 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {cancelText}
+              </button>
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onConfirm()
+                }}
+                disabled={isProcessing}
+                className={cn(
+                  'px-4 py-2 rounded-lg text-white transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2',
+                  variant === 'danger' && 'bg-red-500 hover:bg-red-600',
+                  variant === 'warning' && 'bg-amber-500 hover:bg-amber-600',
+                  variant === 'info' && 'bg-blue-500 hover:bg-blue-600'
+                )}
+              >
+                {isProcessing && (
+                  <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" aria-label="Loading">
+                    <title>Loading</title>
+                    <circle
+                      className="opacity-25"
+                      cx="12"
+                      cy="12"
+                      r="10"
+                      stroke="currentColor"
+                      strokeWidth="4"
+                      fill="none"
+                    />
+                    <path
+                      className="opacity-75"
+                      fill="currentColor"
+                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                    />
+                  </svg>
+                )}
+                {isProcessing ? 'Processing...' : confirmText}
+              </button>
+            </div>
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>,
+    document.body
+  )
+}