@gravito/zenith 0.1.0-beta.1

package/src/client/components/UserProfileDropdown.tsx

@@ -0,0 +1,177 @@
+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'
+
+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

@@ -0,0 +1,93 @@
+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)
+
+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
+}
+
+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

@@ -0,0 +1,103 @@
+import { createContext, type ReactNode, useCallback, useContext, useEffect, useState } from 'react'
+
+export interface Notification {
+  id: string
+  type: 'info' | 'success' | 'warning' | 'error'
+  title: string
+  message: string
+  timestamp: number
+  read: boolean
+  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)
+
+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
+}
+
+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>
+  )
+}

package/src/client/index.css

@@ -0,0 +1,174 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 224 71.4% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 224 71.4% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 224 71.4% 4.1%;
+    --primary: 238.7 83.5% 66.7%;
+    /* Indigo 500 */
+    --primary-foreground: 210 20% 98%;
+    --secondary: 220 14.3% 95.9%;
+    --secondary-foreground: 238.7 83.5% 66.7%;
+    --muted: 220 14.3% 95.9%;
+    --muted-foreground: 220 8.9% 46.1%;
+    --accent: 220 14.3% 95.9%;
+    --accent-foreground: 238.7 83.5% 66.7%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 20% 98%;
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
+    --ring: 238.7 83.5% 66.7%;
+    --radius: 1rem;
+  }
+
+  .dark {
+    --background: 222 47% 2%;
+    --foreground: 213 31% 91%;
+    --card: 222 47% 6%;
+    --card-foreground: 213 31% 91%;
+    --popover: 222 47% 4%;
+    --popover-foreground: 213 31% 91%;
+    --primary: 238.7 83.5% 66.7%;
+    --primary-foreground: 222 47% 4%;
+    --secondary: 222 47% 10%;
+    --secondary-foreground: 213 31% 91%;
+    --muted: 222 47% 8%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+    --accent: 222 47% 12%;
+    --accent-foreground: 213 31% 91%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 20% 98%;
+    --border: 222 47% 14%;
+    --input: 222 47% 12%;
+    --ring: 238.7 83.5% 66.7%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+    font-feature-settings: "ss01", "ss02", "cv01", "cv02", "cv03";
+  }
+
+  .dark body {
+    background-image: radial-gradient(at 50% 0%, hsla(238, 83%, 66%, 0.05) 0%, transparent 50%),
+      radial-gradient(at 100% 100%, hsla(238, 83%, 66%, 0.02) 0%, transparent 50%);
+    background-attachment: fixed;
+  }
+}
+
+@layer utilities {
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    @apply bg-muted-foreground/20 rounded-full hover:bg-muted-foreground/40 transition-colors;
+  }
+
+  .glass {
+    @apply bg-card/60 backdrop-blur-xl border-white/10;
+  }
+
+  .scanline {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .scanline::after {
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(to bottom,
+        transparent 50%,
+        rgba(var(--primary), 0.02) 50%);
+    background-size: 100% 4px;
+    z-index: 2;
+    pointer-events: none;
+    animation: scanline-move 10s linear infinite;
+  }
+
+  @keyframes scanline-move {
+    0% {
+      background-position: 0 0;
+    }
+
+    100% {
+      background-position: 0 100%;
+    }
+  }
+
+  .glow-pulse {
+    animation: glow-pulse 2.5s ease-in-out infinite;
+  }
+
+  @keyframes glow-pulse {
+
+    0%,
+    100% {
+      opacity: 0.3;
+      transform: scale(1);
+      filter: blur(2px);
+    }
+
+    50% {
+      opacity: 0.7;
+      transform: scale(1.5);
+      filter: blur(4px);
+    }
+  }
+
+  .card-premium {
+    @apply bg-card border border-border/50 shadow-sm transition-all duration-300;
+  }
+
+  .dark .card-premium {
+    background-color: hsla(222, 47%, 6%, 0.6);
+    backdrop-filter: blur(12px);
+    border-color: rgba(255, 255, 255, 0.05);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+  }
+
+  .dark .card-premium:hover {
+    border-color: hsla(238, 83%, 66%, 0.2);
+    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.05);
+  }
+}
+
+.animate-in {
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  fill-mode: forwards;
+}
+
+@keyframes toast-progress {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
+
+.animate-toast-progress {
+  animation: toast-progress 5s linear forwards;
+}

package/src/client/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Gravito Zenith</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/main.tsx"></script>
+  </body>
+</html>

package/src/client/main.tsx

@@ -0,0 +1,15 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+const queryClient = new QueryClient()
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  </React.StrictMode>
+)