@gravito/zenith 1.1.2 → 1.1.6

package/src/client/Sidebar.tsx

@@ -1,112 +0,0 @@
-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
-}
-
-/**
- * Sidebar navigation component for the Zenith dashboard.
- *
- * Provides links to various sections of the dashboard and supports
- * a collapsible state to maximize screen space.
- *
- * @public
- * @since 3.0.0
- */
-export function Sidebar({ className, collapsed, toggleCollapse }: SidebarProps) {
-  const location = useLocation()
-
-  const navItems = [
-    { icon: LayoutDashboard, label: 'Overview', path: '/' },
-    { icon: Activity, label: 'Pulse', path: '/pulse' },
-    { 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

@@ -1,144 +0,0 @@
-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
-}
-
-/**
- * Real-time throughput visualization component.
- *
- * Displays a live-updating area chart of the number of jobs processed
- * per minute across the system.
- *
- * @public
- * @since 3.0.0
- */
-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

@@ -1,226 +0,0 @@
-import { type ClassValue, clsx } from 'clsx'
-import { Activity, Cpu, Terminal } from 'lucide-react'
-import { twMerge } from 'tailwind-merge'
-
-function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
-
-function formatBytes(bytes: number) {
-  if (bytes === 0) {
-    return '0 B'
-  }
-  const k = 1024
-  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return `${parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`
-}
-
-function getWorkerName(id: string, pid: number) {
-  // If ID contains Hostname+PID, try to simplify it
-  // Example: CarldeMacBook-Air.local-99401
-  const complexIdMatch = id.match(/^(.*)-(\d+)$/)
-  if (complexIdMatch && parseInt(complexIdMatch[2], 10) === pid) {
-    // Return just the hostname part, and maybe truncate if too long
-    let hostname = complexIdMatch[1]
-    if (hostname.endsWith('.local')) {
-      hostname = hostname.replace('.local', '')
-    }
-    return hostname
-  }
-  // Fallback
-  return id.replace('.local', '')
-}
-
-interface WorkerInfo {
-  id: string
-  service?: string
-  status: 'online' | 'offline'
-  pid: number
-  uptime: number
-  metrics?: {
-    cpu: number
-    cores: number
-    ram: {
-      rss: number
-    }
-  }
-  meta?: {
-    laravel?: {
-      workerCount: number
-      roots: string[]
-    }
-  }
-}
-
-/**
- * Real-time worker node status visualization component.
- *
- * Displays a list of active worker nodes with their CPU, RAM, uptime metrics,
- * and highlights a specific worker if provided.
- *
- * @public
- * @since 3.0.0
- */
-export function WorkerStatus({
-  highlightedWorkerId,
-  workers = [],
-}: {
-  highlightedWorkerId?: string | null
-  workers?: WorkerInfo[]
-}) {
-  const onlineCount = workers.filter((w) => w.status === 'online').length
-
-  return (
-    <div className="card-premium h-full flex flex-col overflow-hidden">
-      <div className="p-6 pb-0 flex-none">
-        <div className="flex justify-between items-center mb-6">
-          <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>
-
-      <div className="flex-1 overflow-y-auto min-h-0 px-6 space-y-3 scrollbar-thin pb-6">
-        {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(
-              'relative flex items-center gap-4 p-4 rounded-2xl border transition-all group overflow-hidden shrink-0',
-              worker.id === highlightedWorkerId
-                ? 'bg-primary/5 border-primary/50 shadow-[0_0_20px_rgba(var(--primary-rgb),0.1)] -translate-y-1 scale-[1.02] z-10'
-                : 'bg-card hover:bg-muted/10 border-border/50 hover:border-primary/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'
-              )}
-            />
-
-            {/* Icon/Dot */}
-            <div className="relative shrink-0 ml-1">
-              <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>
-
-            {/* Main Info */}
-            <div className="flex-1 min-w-0 flex flex-col justify-center mr-2">
-              {worker.service && (
-                <span className="text-[10px] font-black text-primary/80 uppercase tracking-widest mb-0.5 whitespace-nowrap">
-                  {worker.service}
-                </span>
-              )}
-              <h4
-                className="text-sm font-black tracking-tight text-foreground truncate"
-                title={worker.id}
-              >
-                {getWorkerName(worker.id, worker.pid) || worker.id}
-              </h4>
-              <div className="flex items-center gap-2 mt-1">
-                <span className="text-[9px] font-bold text-muted-foreground uppercase tracking-wider whitespace-nowrap">
-                  PID {worker.pid}
-                </span>
-                {worker.meta?.laravel && worker.meta.laravel.workerCount > 0 && (
-                  <span className="inline-flex items-center gap-1 text-[9px] font-black text-white bg-red-500 px-1.5 py-0.5 rounded shadow-sm uppercase tracking-widest leading-none whitespace-nowrap">
-                    <Terminal size={8} />
-                    {worker.meta.laravel.workerCount} PHP
-                  </span>
-                )}
-              </div>
-            </div>
-
-            {/* Metrics (Right Side) */}
-            <div className="flex items-center gap-3 text-right shrink-0">
-              {worker.metrics && (
-                <>
-                  <div className="hidden sm:block space-y-1 w-12">
-                    <div className="flex justify-between text-[8px] font-black text-muted-foreground uppercase tracking-tighter">
-                      <span>CPU</span>
-                      <span
-                        className={cn(
-                          worker.metrics.cpu > (worker.metrics.cores || 1) * 100 && 'text-red-500'
-                        )}
-                      >
-                        {worker.metrics.cpu.toFixed(0)}%
-                      </span>
-                    </div>
-                    <div className="h-1 w-full bg-muted rounded-full overflow-hidden">
-                      <div
-                        className="h-full bg-foreground transition-all duration-700"
-                        style={{ width: `${Math.min(100, worker.metrics.cpu)}%` }}
-                      ></div>
-                    </div>
-                  </div>
-
-                  <div className="hidden sm:block space-y-1 w-12">
-                    <div className="flex justify-between text-[8px] font-black text-muted-foreground uppercase tracking-tighter">
-                      <span>RAM</span>
-                      <span className="truncate ml-1">
-                        {formatBytes(worker.metrics.ram.rss).split(' ')[0]}
-                      </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 / 2000000000) * 100)}%`,
-                        }}
-                      ></div>
-                    </div>
-                  </div>
-                </>
-              )}
-
-              <div className="w-12">
-                <p className="text-xs font-black tracking-tighter tabular-nums text-foreground">
-                  {worker.uptime > 3600
-                    ? `${(worker.uptime / 3600).toFixed(1)}h`
-                    : worker.uptime > 60
-                      ? `${(worker.uptime / 60).toFixed(0)}m`
-                      : `${worker.uptime.toFixed(0)}s`}
-                </p>
-                <p className="text-[8px] text-muted-foreground uppercase font-black tracking-widest opacity-50">
-                  UP
-                </p>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <div className="p-6 pt-0 flex-none">
-        <button
-          type="button"
-          className="w-full 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>
-    </div>
-  )
-}

package/src/client/components/BrandIcons.tsx

@@ -1,168 +0,0 @@
-import type { SVGProps } from 'react'
-
-/**
- * SVG icon for Node.js runtime.
- * @public
- * @since 3.0.0
- */
-export function NodeIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      viewBox="0 0 32 32"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      role="img"
-      aria-label="Node.js"
-      {...props}
-    >
-      <path
-        d="M16 2L2.1 9.9v12.2L16 30l13.9-7.9V9.9L16 2zm11.9 19.1L16 27.8l-11.9-6.7V11.1L16 4.2l11.9 6.9v10z"
-        fill="#339933"
-      />
-      <path d="M16 22.5l-6-3.4v-6.8l6-3.4 6 3.4v6.8l-6 3.4z" fill="#339933" />
-    </svg>
-  )
-}
-
-/**
- * SVG icon for Bun runtime.
- * @public
- * @since 3.0.0
- */
-export function BunIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      viewBox="0 0 32 32"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      role="img"
-      aria-label="Bun"
-      {...props}
-    >
-      {/* Outer Outline/Shadow for contrast on light bg */}
-      <path
-        d="M30 17.045a9.8 9.8 0 0 0-.32-2.306l-.004.034a11.2 11.2 0 0 0-5.762-6.786c-3.495-1.89-5.243-3.326-6.8-3.811h.003c-1.95-.695-3.949.82-5.825 1.927-4.52 2.481-9.573 5.45-9.28 11.417.008-.029.017-.052.026-.08a9.97 9.97 0 0 0 3.934 7.257l-.01-.006C13.747 31.473 30.05 27.292 30 17.045"
-        fill="#fbf0df"
-        stroke="#4a4a4a"
-        strokeWidth="1.5"
-      />
-
-      <path
-        fill="#37474f"
-        d="M19.855 20.236A.8.8 0 0 0 19.26 20h-6.514a.8.8 0 0 0-.596.236.51.51 0 0 0-.137.463 4.37 4.37 0 0 0 1.641 2.339 4.2 4.2 0 0 0 2.349.926 4.2 4.2 0 0 0 2.343-.926 4.37 4.37 0 0 0 1.642-2.339.5.5 0 0 0-.132-.463Z"
-      />
-      <ellipse cx="22.5" cy="18.5" fill="#f8bbd0" rx="2.5" ry="1.5" />
-      <ellipse cx="9.5" cy="18.5" fill="#f8bbd0" rx="2.5" ry="1.5" />
-      <circle cx="10" cy="16" r="2" fill="#37474f" />
-      <circle cx="22" cy="16" r="2" fill="#37474f" />
-    </svg>
-  )
-}
-
-/**
- * SVG icon for Deno runtime.
- * @public
- * @since 3.0.0
- */
-export function DenoIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      viewBox="0 0 32 32"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      role="img"
-      aria-label="Deno"
-      {...props}
-    >
-      <circle cx="16" cy="16" r="14" fill="currentColor" />
-      <path
-        d="M16 6C16 6 24 10 24 18C24 23.5228 19.5228 28 14 28C8.47715 28 4 23.5228 4 18C4 10 16 6 16 6Z"
-        fill="white"
-      />
-      <circle cx="12" cy="18" r="2" fill="black" />
-    </svg>
-  )
-}
-
-/**
- * SVG icon for PHP runtime.
- * @public
- * @since 3.0.0
- */
-export function PhpIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      viewBox="0 0 32 32"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      role="img"
-      aria-label="PHP"
-      {...props}
-    >
-      <ellipse cx="16" cy="16" rx="14" ry="10" fill="#777BB4" />
-      <text
-        x="50%"
-        y="54%"
-        dominantBaseline="middle"
-        textAnchor="middle"
-        fill="white"
-        fontSize="9"
-        fontWeight="bold"
-      >
-        PHP
-      </text>
-    </svg>
-  )
-}
-
-/**
- * SVG icon for Go runtime.
- * @public
- * @since 3.0.0
- */
-export function GoIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      viewBox="0 0 32 32"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      role="img"
-      aria-label="Go"
-      {...props}
-    >
-      <path
-        d="M5 16C5 10 10 5 16 5H24V13H16C14.3431 13 13 14.3431 13 16C13 17.6569 14.3431 19 16 19H27V27H16C10 27 5 22 5 16Z"
-        fill="#00ADD8"
-      />
-      <circle cx="9" cy="16" r="2" fill="white" />
-      <circle cx="23" cy="9" r="2" fill="white" />
-    </svg>
-  )
-}
-
-/**
- * SVG icon for Python runtime.
- * @public
- * @since 3.0.0
- */
-export function PythonIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      viewBox="0 0 32 32"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      role="img"
-      aria-label="Python"
-      {...props}
-    >
-      <path
-        d="M16 2C10 2 10 5 10 5L10 9L18 9L18 11L8 11L8 20L12 20L12 14L22 14C22 14 22 12 16 2Z"
-        fill="#3776AB"
-      />
-      <path
-        d="M16 30C22 30 22 27 22 27L22 23L14 23L14 21L24 21L24 12L20 12L20 18L10 18C10 18 10 20 16 30Z"
-        fill="#FFD43B"
-      />
-    </svg>
-  )
-}