@gravito/zenith 1.1.2 → 1.1.6

package/src/client/components/PageHeader.tsx

@@ -1,47 +0,0 @@
-import type { LucideIcon } from 'lucide-react'
-import type { ReactNode } from 'react'
-import { cn } from '../utils'
-
-interface PageHeaderProps {
-  icon: LucideIcon
-  title: string
-  description?: string
-  children?: ReactNode
-  className?: string
-}
-
-/**
- * Reusable header component for Zenith dashboard pages.
- *
- * Provides a consistent layout for the page title, icon, description,
- * and optional action buttons.
- *
- * @public
- * @since 3.0.0
- */
-export function PageHeader({
-  icon: Icon,
-  title,
-  description,
-  children,
-  className,
-}: PageHeaderProps) {
-  return (
-    <div className={cn('flex justify-between items-end', className)}>
-      <div>
-        <h1 className="text-4xl font-black tracking-tighter flex items-center gap-3">
-          <div className="p-2 bg-primary/10 rounded-xl text-primary">
-            <Icon size={32} />
-          </div>
-          {title}
-        </h1>
-        {description && (
-          <p className="text-muted-foreground mt-2 text-sm font-bold opacity-60 uppercase tracking-widest pl-[3.75rem]">
-            {description}
-          </p>
-        )}
-      </div>
-      <div>{children}</div>
-    </div>
-  )
-}

package/src/client/components/Toaster.tsx

@@ -1,90 +0,0 @@
-import { AnimatePresence, motion } from 'framer-motion'
-import { AlertCircle, CheckCircle2, Info, X } from 'lucide-react'
-import { useEffect, useState } from 'react'
-import { useNotifications } from '../contexts/NotificationContext'
-import { cn } from '../utils'
-
-/**
- * Global toast notification container for Zenith.
- *
- * Renders an animated stack of floating notifications in the corner of the
- * screen. It integrates with the `NotificationContext` to display real-time
- * alerts and messages.
- *
- * @public
- * @since 3.0.0
- */
-export function Toaster() {
-  const { notifications, removeNotification } = useNotifications()
-  const [activeIds, setActiveIds] = useState<Set<string>>(new Set())
-
-  useEffect(() => {
-    const now = Date.now()
-    // Check for new notifications to add to display
-    notifications.forEach((n) => {
-      if (!n.read && now - n.timestamp < 5000 && !activeIds.has(n.id)) {
-        setActiveIds((prev) => new Set(prev).add(n.id))
-
-        // Set timer to remove this specific ID
-        setTimeout(() => {
-          setActiveIds((prev) => {
-            const next = new Set(prev)
-            next.delete(n.id)
-            return next
-          })
-        }, 5000)
-      }
-    })
-  }, [notifications, activeIds])
-
-  const visibleNotifications = notifications.filter((n) => activeIds.has(n.id))
-
-  return (
-    <div className="fixed bottom-8 right-8 z-[2000] flex flex-col gap-3 w-full max-w-sm pointer-events-none">
-      <AnimatePresence mode="popLayout">
-        {visibleNotifications.map((n) => (
-          <motion.div
-            key={n.id}
-            layout
-            initial={{ opacity: 0, x: 50, scale: 0.9 }}
-            animate={{ opacity: 1, x: 0, scale: 1 }}
-            exit={{ opacity: 0, scale: 0.8, x: 20 }}
-            className={cn(
-              'pointer-events-auto group relative flex items-start gap-4 p-4 rounded-2xl border shadow-2xl backdrop-blur-xl transition-all',
-              n.type === 'success' && 'bg-green-500/10 border-green-500/20 text-green-500',
-              n.type === 'error' && 'bg-red-500/10 border-red-500/20 text-red-500',
-              n.type === 'warning' && 'bg-yellow-500/10 border-yellow-500/20 text-yellow-500',
-              n.type === 'info' && 'bg-primary/10 border-primary/20 text-primary'
-            )}
-          >
-            <div className="flex-shrink-0 mt-0.5">
-              {n.type === 'success' && <CheckCircle2 size={18} />}
-              {n.type === 'error' && <AlertCircle size={18} />}
-              {n.type === 'warning' && <AlertCircle size={18} />}
-              {n.type === 'info' && <Info size={18} />}
-            </div>
-            <div className="flex-1 min-w-0">
-              <h4 className="text-sm font-black tracking-tight leading-none mb-1">{n.title}</h4>
-              <p className="text-xs font-medium opacity-80 leading-relaxed break-words">
-                {n.message}
-              </p>
-              {n.source && (
-                <span className="inline-block mt-2 px-1.5 py-0.5 rounded bg-white/10 text-[9px] font-black uppercase tracking-widest">
-                  {n.source}
-                </span>
-              )}
-            </div>
-            <button
-              type="button"
-              onClick={() => removeNotification(n.id)}
-              className="mt-0.5 opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-white/10 rounded-lg"
-            >
-              <X size={14} />
-            </button>
-            <div className="absolute left-0 bottom-0 h-1 bg-current opacity-20 animate-toast-progress origin-left" />
-          </motion.div>
-        ))}
-      </AnimatePresence>
-    </div>
-  )
-}

package/src/client/components/UserProfileDropdown.tsx

@@ -1,186 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { AnimatePresence, motion } from 'framer-motion'
-import { Activity, ChevronRight, Clock, LogOut, Server, Settings, Shield, User } from 'lucide-react'
-import { useEffect, useRef, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { useAuth } from '../contexts/AuthContext'
-
-/**
- * A user profile dropdown component for the Zenith dashboard.
- *
- * Displays current user information, system uptime, and provides access
- * to settings and logout functionality.
- *
- * @public
- * @since 3.0.0
- */
-export function UserProfileDropdown() {
-  const [isOpen, setIsOpen] = useState(false)
-  const { isAuthEnabled, logout } = useAuth()
-  const navigate = useNavigate()
-  const dropdownRef = useRef<HTMLDivElement>(null)
-
-  const { data: systemStatus } = useQuery<any>({
-    queryKey: ['system-status'],
-    queryFn: () => fetch('/api/system/status').then((res) => res.json()),
-    refetchInterval: 30000,
-  })
-
-  // Close dropdown when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsOpen(false)
-      }
-    }
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside)
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-  }, [isOpen])
-
-  const handleLogout = async () => {
-    await logout()
-    setIsOpen(false)
-  }
-
-  const handleNavigate = (path: string) => {
-    navigate(path)
-    setIsOpen(false)
-  }
-
-  const formatUptime = (seconds: number) => {
-    const hours = Math.floor(seconds / 3600)
-    const minutes = Math.floor((seconds % 3600) / 60)
-    if (hours > 0) {
-      return `${hours}h ${minutes}m`
-    }
-    return `${minutes}m`
-  }
-
-  return (
-    <div className="relative" ref={dropdownRef}>
-      {/* Trigger */}
-      <button
-        type="button"
-        className="flex items-center gap-3 cursor-pointer group outline-none"
-        onClick={() => setIsOpen(!isOpen)}
-      >
-        <div className="text-right hidden sm:block">
-          <p className="text-sm font-black tracking-tight group-hover:text-primary transition-colors">
-            Admin User
-          </p>
-          <p className="text-[10px] font-black text-muted-foreground/60 uppercase tracking-widest">
-            Architect
-          </p>
-        </div>
-        <div className="w-10 h-10 rounded-2xl bg-gradient-to-br from-primary to-indigo-600 flex items-center justify-center text-primary-foreground font-black shadow-lg shadow-primary/20 group-hover:scale-105 transition-transform">
-          <User size={20} />
-        </div>
-      </button>
-
-      {/* Dropdown */}
-      <AnimatePresence>
-        {isOpen && (
-          <motion.div
-            initial={{ opacity: 0, y: 10, scale: 0.95 }}
-            animate={{ opacity: 1, y: 0, scale: 1 }}
-            exit={{ opacity: 0, y: 10, scale: 0.95 }}
-            transition={{ duration: 0.2 }}
-            className="absolute right-0 top-full mt-2 w-72 bg-card border rounded-2xl shadow-2xl overflow-hidden z-50"
-          >
-            {/* User Info Header */}
-            <div className="p-5 bg-gradient-to-br from-primary/10 to-indigo-500/10 border-b">
-              <div className="flex items-center gap-4">
-                <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-primary to-indigo-600 flex items-center justify-center text-primary-foreground shadow-lg">
-                  <User size={28} />
-                </div>
-                <div>
-                  <h3 className="font-bold text-lg">Admin User</h3>
-                  <p className="text-xs text-muted-foreground">System Administrator</p>
-                  <div className="flex items-center gap-1 mt-1">
-                    <Shield size={10} className="text-green-500" />
-                    <span className="text-[9px] font-bold text-green-500 uppercase tracking-widest">
-                      Full Access
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* System Status */}
-            <div className="p-4 bg-muted/20 border-b">
-              <p className="text-[9px] font-black text-muted-foreground/50 uppercase tracking-widest mb-3">
-                System Status
-              </p>
-              <div className="grid grid-cols-2 gap-3">
-                <div className="flex items-center gap-2">
-                  <Activity size={12} className="text-green-500" />
-                  <span className="text-[10px] font-bold">Online</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Clock size={12} className="text-muted-foreground" />
-                  <span className="text-[10px] font-bold">
-                    {systemStatus?.uptime ? formatUptime(systemStatus.uptime) : '...'}
-                  </span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Server size={12} className="text-muted-foreground" />
-                  <span className="text-[10px] font-bold">{systemStatus?.node || '...'}</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <span className="w-3 h-3 text-[10px] font-black">🔥</span>
-                  <span className="text-[10px] font-bold">
-                    {systemStatus?.memory?.rss || '...'}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            {/* Menu Items */}
-            <div className="p-2">
-              <button
-                type="button"
-                onClick={() => handleNavigate('/settings')}
-                className="w-full flex items-center justify-between px-4 py-3 rounded-xl hover:bg-muted/50 transition-colors group"
-              >
-                <div className="flex items-center gap-3">
-                  <Settings
-                    size={18}
-                    className="text-muted-foreground group-hover:text-foreground transition-colors"
-                  />
-                  <span className="text-sm font-semibold">Settings</span>
-                </div>
-                <ChevronRight size={16} className="text-muted-foreground/50" />
-              </button>
-
-              {isAuthEnabled && (
-                <button
-                  type="button"
-                  onClick={handleLogout}
-                  className="w-full flex items-center justify-between px-4 py-3 rounded-xl hover:bg-red-500/10 transition-colors group"
-                >
-                  <div className="flex items-center gap-3">
-                    <LogOut size={18} className="text-red-500" />
-                    <span className="text-sm font-semibold text-red-500">Logout</span>
-                  </div>
-                </button>
-              )}
-            </div>
-
-            {/* Footer */}
-            <div className="px-4 py-3 bg-muted/10 border-t">
-              <p className="text-[9px] text-center text-muted-foreground/50">
-                Flux Console v0.1.0-alpha.1
-              </p>
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  )
-}

package/src/client/contexts/AuthContext.tsx

@@ -1,105 +0,0 @@
-import { createContext, type ReactNode, useCallback, useContext, useEffect, useState } from 'react'
-
-interface AuthContextType {
-  isAuthenticated: boolean
-  isAuthEnabled: boolean
-  isLoading: boolean
-  login: (password: string) => Promise<{ success: boolean; error?: string }>
-  logout: () => Promise<void>
-  checkAuth: () => Promise<void>
-}
-
-const AuthContext = createContext<AuthContextType | null>(null)
-
-/**
- * React hook to access authentication state and methods.
- *
- * @public
- * @since 3.0.0
- */
-export function useAuth() {
-  const context = useContext(AuthContext)
-  if (!context) {
-    throw new Error('useAuth must be used within an AuthProvider')
-  }
-  return context
-}
-
-interface AuthProviderProps {
-  children: ReactNode
-}
-
-/**
- * Provider component for managing global authentication state in Zenith.
- *
- * @public
- * @since 3.0.0
- */
-export function AuthProvider({ children }: AuthProviderProps) {
-  const [isAuthenticated, setIsAuthenticated] = useState(false)
-  const [isAuthEnabled, setIsAuthEnabled] = useState(false)
-  const [isLoading, setIsLoading] = useState(true)
-
-  const checkAuth = useCallback(async () => {
-    try {
-      const res = await fetch('/api/auth/status')
-      const data = await res.json()
-      setIsAuthEnabled(data.enabled)
-      setIsAuthenticated(data.authenticated)
-    } catch (err) {
-      console.error('Failed to check auth status:', err)
-      setIsAuthenticated(false)
-    } finally {
-      setIsLoading(false)
-    }
-  }, [])
-
-  const login = async (password: string): Promise<{ success: boolean; error?: string }> => {
-    try {
-      const res = await fetch('/api/auth/login', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ password }),
-      })
-      const data = await res.json()
-
-      if (data.success) {
-        setIsAuthenticated(true)
-        return { success: true }
-      }
-
-      return { success: false, error: data.error || 'Login failed' }
-    } catch (_err) {
-      return { success: false, error: 'Network error' }
-    }
-  }
-
-  const logout = async () => {
-    try {
-      await fetch('/api/auth/logout', { method: 'POST' })
-    } catch (err) {
-      console.error('Logout error:', err)
-    } finally {
-      setIsAuthenticated(false)
-    }
-  }
-
-  useEffect(() => {
-    checkAuth()
-  }, [checkAuth])
-
-  return (
-    <AuthContext.Provider
-      value={{
-        isAuthenticated,
-        isAuthEnabled,
-        isLoading,
-        login,
-        logout,
-        checkAuth,
-      }}
-    >
-      {children}
-    </AuthContext.Provider>
-  )
-}

package/src/client/contexts/NotificationContext.tsx

@@ -1,128 +0,0 @@
-import { createContext, type ReactNode, useCallback, useContext, useEffect, useState } from 'react'
-
-/**
- * Represents a system notification in the Zenith dashboard.
- *
- * @public
- * @since 3.0.0
- */
-export interface Notification {
-  /** Unique notification ID. */
-  id: string
-  /** The severity type of the notification. */
-  type: 'info' | 'success' | 'warning' | 'error'
-  /** Short title for the notification. */
-  title: string
-  /** Detailed notification message. */
-  message: string
-  /** Epoch timestamp when the notification was created. */
-  timestamp: number
-  /** Whether the notification has been read by the user. */
-  read: boolean
-  /** Optional source identifier (e.g., a queue name). */
-  source?: string
-}
-
-interface NotificationContextType {
-  notifications: Notification[]
-  unreadCount: number
-  addNotification: (notification: Omit<Notification, 'id' | 'timestamp' | 'read'>) => void
-  markAsRead: (id: string) => void
-  markAllAsRead: () => void
-  clearAll: () => void
-  removeNotification: (id: string) => void
-}
-
-const NotificationContext = createContext<NotificationContextType | null>(null)
-
-/**
- * React hook to access the notification system.
- *
- * @public
- * @since 3.0.0
- */
-export function useNotifications() {
-  const context = useContext(NotificationContext)
-  if (!context) {
-    throw new Error('useNotifications must be used within a NotificationProvider')
-  }
-  return context
-}
-
-interface NotificationProviderProps {
-  children: ReactNode
-}
-
-/**
- * Provider component for managing global notifications in Zenith.
- *
- * @public
- * @since 3.0.0
- */
-export function NotificationProvider({ children }: NotificationProviderProps) {
-  const [notifications, setNotifications] = useState<Notification[]>([])
-
-  const unreadCount = notifications.filter((n) => !n.read).length
-
-  const addNotification = useCallback(
-    (notification: Omit<Notification, 'id' | 'timestamp' | 'read'>) => {
-      const newNotification: Notification = {
-        ...notification,
-        id: crypto.randomUUID(),
-        timestamp: Date.now(),
-        read: false,
-      }
-      setNotifications((prev) => [newNotification, ...prev].slice(0, 50)) // Keep max 50 notifications
-    },
-    []
-  )
-
-  const markAsRead = useCallback((id: string) => {
-    setNotifications((prev) => prev.map((n) => (n.id === id ? { ...n, read: true } : n)))
-  }, [])
-
-  const markAllAsRead = useCallback(() => {
-    setNotifications((prev) => prev.map((n) => ({ ...n, read: true })))
-  }, [])
-
-  const clearAll = useCallback(() => {
-    setNotifications([])
-  }, [])
-
-  const removeNotification = useCallback((id: string) => {
-    setNotifications((prev) => prev.filter((n) => n.id !== id))
-  }, [])
-
-  // Listen to the global log update event dispatched by Layout's SSE stream
-  useEffect(() => {
-    const handler = (e: any) => {
-      const log = e.detail
-      if (log.level === 'error' || log.level === 'warn') {
-        addNotification({
-          type: log.level === 'error' ? 'error' : 'warning',
-          title: log.level === 'error' ? 'Job Failed' : 'Warning',
-          message: log.message || 'An event occurred',
-          source: log.queue || log.source,
-        })
-      }
-    }
-    window.addEventListener('flux-log-update', handler)
-    return () => window.removeEventListener('flux-log-update', handler)
-  }, [addNotification])
-
-  return (
-    <NotificationContext.Provider
-      value={{
-        notifications,
-        unreadCount,
-        addNotification,
-        markAsRead,
-        markAllAsRead,
-        clearAll,
-        removeNotification,
-      }}
-    >
-      {children}
-    </NotificationContext.Provider>
-  )
-}